@extends('admin.template.layout')
@section('content')
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-5">
            <div class="d-flex align-items-center position-relative my-1 mb-4">
                <i class="ki-duotone ki-magnifier fs-1 position-absolute ms-6"><span class="path1"></span><span
                        class="path2"></span></i>
                <input type="text" id="searchTable" class="form-control form-control-solid w-250px ps-15"
                    placeholder="Cari data" autocomplete="off" />
            </div>
            <div class="card-toolbar gap-4">
                <!--begin::Action-->
                <div class="d-flex justify-content-end my-2 gap-2">
                    <a href="{{ url()->previous() }}" class="btn btn-info btn-sm">
                        Kembali
                    </a>
                    <a href="{{ route('master-menu.create') }}" class="btn btn-success btn-sm"><i
                            class="ki-duotone ki-plus-square fs-2">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            <span class="path3"></span>
                        </i>Tambah Menu</a>
                </div>
                <!--end::Action-->
            </div>
        </div>
        <div class="card-body">
            <div id="jstree_modules">
            </div>
        </div>
    </div>
    <style>
        .sortable>li>div {
            margin-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .sortable,
        .sortable>li>div {
            display: block;
            width: 100%;
            float: left;
        }

        .sortable>li {
            display: block;
            width: 100%;
            margin-bottom: 5px;
            float: left;
            border: 1px solid #ddd;
            background: #fff;
            padding: 5px;
        }

        .sortable ul {
            padding: 5px;
        }
    </style>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <link href="{{ asset('plugins/custom/jstree/jstree.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/jstree/jstree.bundle.js') }}"></script>
    <script>
        $(document).ready(function() {

            $.ajax({
                url: "{{ route('master-menu.tree') }}",
                method: "GET",
                success: function(data) {
                    var treeData = buildTreeData(data);

                    $('#jstree_modules').jstree({
                        "core": {
                            "themes": {
                                "responsive": false
                            },
                            "check_callback": true,
                            'data': treeData
                        },
                        "contextmenu": {
                            "items": function(node) {
                                return {
                                    "customItem1": {
                                        "label": "<i class='fa fa-edit'></i> Edit",
                                        "action": function() {
                                            window.location.href =
                                                `/master-menu/${node.id}/edit`;
                                        }
                                    },
                                    "customItem3": {
                                        "label": "<i class='fa fa-trash'></i> Delete",
                                        "action": function() {
                                            deleteData(node.id, node.text);
                                        }
                                    }
                                };
                            }
                        },
                        "plugins": ["dnd", "contextmenu"]
                    });
                }
            });

            // Recursive function to build tree data
            function buildTreeData(modules) {
                return modules.map(module => {
                    var moduleIcon = $(module.icon).attr("class") || "ki-solid ki-folder";
                    return {
                        id: module.id,
                        text: module.text,
                        icon: moduleIcon.replace("ki-duotone", "ki-solid"),
                        children: module.children.length > 0 ? buildTreeData(module.children) : []
                    };
                });
            }

            $('#jstree_modules').on('move_node.jstree', function(event, data) {
                var currentData = $(this).jstree(true).get_json('#', {
                    flat: false
                });
                if (data.node.parents.length >= 3) {
                    console.log(data.node.parents);

                    // return;
                }
                //send currentData to ajax
                $.ajax({
                    url: "{{ route('master-menu.sort-tree') }}",
                    method: "POST",
                    data: {
                        modules: currentData,
                        _token: '{{ csrf_token() }}',
                    },
                });
            });

            function deleteData(kode, nama) {
            Swal.fire({
                title: "Apakah anda yakin?",
                text: "Untuk menghapus data: " + nama,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
                dangerMode: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'ajax',
                        method: 'DELETE',
                        url: `{{ route('master-menu.destroy', ['master_menu' => ':id']) }}`.replace(':id', kode),
                        async: true,
                        dataType: 'json',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status == true) {
                                Swal.fire({
                                    title: "Success!",
                                    text: "Berhasil Menghapus Data",
                                    icon: "success"
                                }).then(function() {
                                    location.reload(true);
                                });
                            } else {
                                Swal.fire("Hapus Data Gagal!", {
                                    icon: "warning",
                                });
                            }
                        },
                        error: function() {
                            Swal.fire("ERROR", "Hapus Data Gagal.", "error");
                        }
                    });
                } else if (result.isDenied) {
                    Swal.fire("Dibatalkan!", "Hapus Data Dibatalkan.", "error");
                }
            });
        }
        })
    </script>
@endsection