@extends('layouts.index')

@section('title')
    {{ $title }} -
@endsection

@push('styles')
    <link href="{{ asset('assets/libs/jstree/jstree.bundle.css?v=7.0.9') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">{{ $title }}</h4>
            </div>
        </div>
    </div>
    <table class="table bg-main" >
        <tr>
            <td>
                <button class="btn btn-sm btn-success float-right px-3" onclick="add_new()">Tambah</button>
                <h5 class="mt-0 mb-4"><i class="mdi mdi-database mr-2"></i> Data {{ $title }}</h5>
                <div id="klasifikasi_surat_table">
                    <x-input prefix="search_" name="nama" caption="Pencarian nama" />
                    <div id="tree_view_klasifikasi_surat" class="tree-demo mb-5" style="overflow-x: scroll;">
                    </div>
                </div>
            </td>
            <td class="bg-light" id="klasifikasi_surat_info" width="350px">
            </td>
        </tr>
    </table>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/jstree/jstree.bundle.js?v=7.0.9') }}"></script>
    <script>
        init_form_element();

        // manage ui
        $klasifikasi_surat_data = $('#klasifikasi_surat_data');
        $search_nama = $('#search_nama')

        // search
        $klasifikasi_surat_table = $('#klasifikasi_surat_table');
        divTree = $("#tree_view_klasifikasi_surat");
        divTree.jstree({
            core: {
                themes: { responsive: false },
                check_callback: true,
                data: {
                    url: function (e) {
                        return '{{ route('klasifikasi_surat.search.get') }}';
                    },
                    data: function (e) {
                        kode = e.id;
                        if (e.original) kode = e.original.kode;
                        return { parent: kode };
                    },
                },
            },
            types: {
                default: {
                    icon: "fa fa-folder text-primary"
                },
            },
            plugins: ["types", "search"],
            "search" : { "show_only_matches" : true }
        }).on("refresh.jstree", function () {
            // $(this).jstree("open_all");
        }).on("select_node.jstree", function (e, data) {
            on_click_tree_view_klasifikasi_surat(data.node.original);
        });
        let to = true;
        $search_nama.keyup(function () {
            if(to) clearTimeout(to);
            to = setTimeout(function () {
                divTree.jstree(true).search($search_nama.val());
            }, 250);
        });
        function search_klasifikasi_surat() {
            divTree.jstree(true).refresh();
        }

        // crud
        $klasifikasi_surat_info = $('#klasifikasi_surat_info');
        $klasifikasi_surat_info.hide();
        add_new = () => {
            let data = {_token: '{{ csrf_token() }}'};
            $.post("{{ route('klasifikasi_surat.info') }}", data, (result) => {
                $klasifikasi_surat_info.html(result);
                $klasifikasi_surat_info.show();
            }).fail((xhr) => {
                $klasifikasi_surat_info.html(xhr.responseText);
                $klasifikasi_surat_info.show();
            });
        }
        edit_klasifikasi_surat = (id) => {
            let data = {_token: '{{ csrf_token() }}', id};
            $.post("{{ route('klasifikasi_surat.info') }}", data, (result) => {
                $klasifikasi_surat_info.html(result);
                $klasifikasi_surat_info.show();
            }).fail((xhr) => {
                $klasifikasi_surat_info.html(xhr.responseText);
                $klasifikasi_surat_info.show();
            });
        }
        clear_form = () => {
            $klasifikasi_surat_info.html('');
            $klasifikasi_surat_info.hide();
        }
        add_child = (kode) => {
            let data = {_token: '{{ csrf_token() }}', parent_kode: kode};
            $.post("{{ route('klasifikasi_surat.info') }}", data, (result) => {
                $klasifikasi_surat_info.html(result);
                $klasifikasi_surat_info.show();
            }).fail((xhr) => {
                $klasifikasi_surat_info.html(xhr.responseText);
                $klasifikasi_surat_info.show();
            });
        }

        //treeview actions
        on_click_tree_view_klasifikasi_surat = (data) => {
            edit_klasifikasi_surat(data.id);
        }
    </script>
@endpush