@extends('layouts.adminlte')

@section('title', 'ORGANISASI JABATAN')
@section('page_title', 'ORGANISASI JABATAN')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/jstree/default/style.min.css') }}" />
    <style>
        .org-tree-wrapper {
            border: 1px solid #dee2e6;
            border-radius: 12px;
            background: #fff;
            padding: 12px;
            min-height: 520px;
        }
        #orgTree {
            min-height: 480px;
        }
        #orgTree .jstree-container-ul,
        #orgTree .jstree-children {
            position: relative;
        }
        #orgTree .jstree-children {
            margin-left: 8px;
            padding-left: 18px;
        }
        #orgTree .jstree-children::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 12px;
            left: 7px;
            border-left: 1px dashed #94a3b8;
        }
        #orgTree .jstree-node {
            position: relative;
        }
        #orgTree .jstree-node::before {
            content: "";
            position: absolute;
            top: 15px;
            left: -11px;
            width: 11px;
            border-top: 1px dashed #94a3b8;
        }
        #orgTree > .jstree-container-ul > .jstree-node::before,
        #orgTree > .jstree-container-ul::before {
            display: none;
        }
        #orgTree .jstree-last > .jstree-children::before {
            bottom: 20px;
        }
        .jstree-default .jstree-anchor {
            border-radius: 6px;
        }
        .jstree-default .jstree-wholerow-hovered {
            background: rgba(13, 110, 253, 0.08);
            box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.22);
            border-radius: 6px;
        }
        .jstree-default .jstree-clicked {
            background: #e7f1ff;
            box-shadow: inset 0 0 0 1px #b6d4fe;
        }
        .jstree-default .jstree-er {
            border-top: 2px dashed #0d6efd !important;
            z-index: 20;
        }
        .jstree-default .jstree-ok,
        .jstree-default .jstree-hovered.jstree-ok {
            background-color: rgba(25, 135, 84, 0.10) !important;
        }
        .jstree-default .jstree-wholerow.jstree-invalid-drop {
            background: rgba(220, 53, 69, 0.08);
            box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.28);
            border-radius: 6px;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Organisasi Jabatan (Tree)</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_jabatan.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-table me-1"></i>Master Table
                </a>
                <button class="btn btn-outline-primary btn-sm" id="btnEditTreeNode" disabled>
                    <i class="fas fa-pen-to-square me-1"></i>Edit Jabatan
                </button>
                <button class="btn btn-outline-dark btn-sm" id="btnReloadTree">
                    <i class="fas fa-rotate me-1"></i>Refresh
                </button>
                <button class="btn btn-outline-dark btn-sm" id="btnExpandTree">
                    <i class="fas fa-square-plus me-1"></i>Expand All
                </button>
                <button class="btn btn-outline-dark btn-sm" id="btnCollapseTree">
                    <i class="fas fa-square-minus me-1"></i>Collapse All
                </button>
                <button class="btn btn-primary btn-sm" id="btnSaveTree">
                    <i class="fas fa-floppy-disk me-1"></i>Simpan Struktur
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2 mb-3">
                Drag node jabatan untuk pindah parent atau urutan sibling. Setelah selesai, klik Simpan Struktur.
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
                <input type="text" id="orgTreeSearch" class="form-control" placeholder="Search code atau nama jabatan..." />
                <button class="btn btn-outline-secondary" type="button" id="btnClearTreeSearch">Clear</button>
            </div>
            <div class="org-tree-wrapper">
                <div id="orgTree"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="orgEditModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Jabatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="orgEditForm">
                    <div class="modal-body">
                        <input type="hidden" id="orgEditId" />
                        <div class="mb-3">
                            <label class="form-label">Code</label>
                            <input type="text" class="form-control" id="orgEditCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" id="orgEditName" maxlength="120" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Parent Jabatan</label>
                            <select class="form-select" id="orgEditParentId">
                                <option value="">- Tanpa Parent -</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="orgEditDescription" rows="3"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="orgEditActive" checked />
                            <label class="form-check-label" for="orgEditActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/jstree/jstree.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const treeUrl = '{{ route('master_jabatan.tree') }}';
            const dataUrl = '{{ route('master_jabatan.data') }}';
            const detailBaseUrl = '{{ url('/master-jabatan/detail') }}';
            const updateBaseUrl = '{{ url('/master-jabatan') }}';
            const saveUrl = '{{ route('master_jabatan.save_hierarchy') }}';
            const $tree = $('#orgTree');
            const $searchInput = $('#orgTreeSearch');
            const editModal = new bootstrap.Modal(document.getElementById('orgEditModal'));
            let selectedNodeId = null;
            let rowsCache = [];
            let searchDebounce = null;

            function toJsTree(nodes) {
                return (nodes || []).map((node) => ({
                    id: String(node.id),
                    text: `${node.code} - ${node.name}`,
                    children: toJsTree(node.children || []),
                    state: { opened: true }
                }));
            }

            function loadTree() {
                $.getJSON(treeUrl)
                    .done((resp) => {
                        const data = toJsTree(resp.data || []);
                        if ($tree.jstree(true)) {
                            $tree.jstree(true).settings.core.data = data;
                            $tree.jstree(true).refresh();
                            return;
                        }

                        $tree.jstree({
                            core: {
                                data: data,
                                check_callback: true,
                                themes: { stripes: true }
                            },
                            plugins: ['dnd', 'wholerow', 'search'],
                            search: {
                                case_sensitive: false,
                                show_only_matches: true,
                                show_only_matches_children: true,
                                search_leaves_only: false,
                            },
                            dnd: {
                                copy: false,
                                is_draggable: true,
                                large_drop_target: true,
                                large_drag_target: true,
                                check_while_dragging: true,
                                open_timeout: 250
                            }
                        });

                        $tree
                            .on('dnd_move.vakata', function () {
                                $('.jstree-wholerow').removeClass('jstree-invalid-drop');
                            })
                            .on('dnd_stop.vakata', function () {
                                $('.jstree-wholerow').removeClass('jstree-invalid-drop');
                            });
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load tree organisasi', 'error');
                    });
            }

            function loadRowsCache() {
                return $.getJSON(dataUrl).done((resp) => {
                    rowsCache = resp.data || [];
                });
            }

            function fillParentOptions(currentId, selectedParentId) {
                const options = ['<option value="">- Tanpa Parent -</option>'];
                rowsCache.forEach((row) => {
                    if (Number(row.id) === Number(currentId)) return;
                    const depth = Number(row.depth || 0);
                    const indent = depth > 0 ? `${'--'.repeat(depth)} ` : '';
                    options.push(`<option value="${row.id}">${indent}${row.code} - ${row.name}</option>`);
                });
                $('#orgEditParentId').html(options.join(''));
                $('#orgEditParentId').val(selectedParentId || '');
            }

            function normalize(nodes) {
                return (nodes || []).map((node) => ({
                    id: Number(node.id),
                    children: normalize(node.children || [])
                })).filter((node) => Number.isInteger(node.id) && node.id > 0);
            }

            function getHierarchyPayload() {
                const instance = $tree.jstree(true);
                if (!instance) return [];
                const raw = instance.get_json('#', { flat: false });
                return normalize(raw);
            }

            function openEditModal() {
                if (!selectedNodeId) {
                    Swal.fire('Warning', 'Pilih node jabatan dulu', 'warning');
                    return;
                }

                $.when(loadRowsCache(), $.getJSON(`${detailBaseUrl}/${selectedNodeId}`))
                    .done((rowsResp, detailResp) => {
                        const detail = detailResp[0]?.data || detailResp.data || {};
                        if (!detail || !detail.id) {
                            Swal.fire('Error', 'Detail jabatan tidak ditemukan', 'error');
                            return;
                        }

                        $('#orgEditId').val(detail.id);
                        $('#orgEditCode').val(detail.code || '');
                        $('#orgEditName').val(detail.name || '');
                        $('#orgEditDescription').val(detail.description || '');
                        $('#orgEditActive').prop('checked', !!detail.is_active);
                        fillParentOptions(detail.id, detail.parent_id || '');
                        editModal.show();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load detail jabatan', 'error');
                    });
            }

            $('#btnSaveTree').on('click', function () {
                const nodes = getHierarchyPayload();
                if (!nodes.length) {
                    Swal.fire('Warning', 'Tree jabatan kosong', 'warning');
                    return;
                }

                $.ajax({
                    url: saveUrl,
                    type: 'POST',
                    headers: csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {},
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify({ nodes }),
                }).done((resp) => {
                    Swal.fire('Success', resp?.message || 'Hierarchy saved', 'success');
                    loadTree();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan hierarchy', 'error');
                });
            });

            $('#btnReloadTree').on('click', loadTree);
            $('#btnEditTreeNode').on('click', openEditModal);
            $('#btnExpandTree').on('click', function () {
                const instance = $tree.jstree(true);
                if (instance) instance.open_all();
            });
            $('#btnCollapseTree').on('click', function () {
                const instance = $tree.jstree(true);
                if (instance) instance.close_all();
            });
            $('#btnClearTreeSearch').on('click', function () {
                $searchInput.val('');
                const instance = $tree.jstree(true);
                if (instance) {
                    instance.clear_search();
                    instance.close_all();
                }
            });
            $searchInput.on('keyup', function () {
                clearTimeout(searchDebounce);
                searchDebounce = setTimeout(function () {
                    const instance = $tree.jstree(true);
                    if (!instance) return;
                    const keyword = ($searchInput.val() || '').toString().trim();
                    if (!keyword) {
                        instance.clear_search();
                        return;
                    }
                    instance.search(keyword);
                }, 220);
            });

            $('#orgEditForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#orgEditId').val();
                const payload = {
                    code: ($('#orgEditCode').val() || '').toString().trim(),
                    name: ($('#orgEditName').val() || '').toString().trim(),
                    parent_id: $('#orgEditParentId').val(),
                    description: ($('#orgEditDescription').val() || '').toString().trim(),
                    is_active: $('#orgEditActive').is(':checked') ? 1 : 0,
                };

                if (!id || !payload.code || !payload.name) {
                    Swal.fire('Warning', 'Code dan Name wajib diisi', 'warning');
                    return;
                }

                $.ajax({
                    url: `${updateBaseUrl}/${id}`,
                    type: 'PUT',
                    headers: csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {},
                    data: payload,
                }).done((resp) => {
                    editModal.hide();
                    Swal.fire('Success', resp?.message || 'Jabatan updated', 'success');
                    loadTree();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal update jabatan', 'error');
                });
            });

            $tree.on('changed.jstree', function (e, data) {
                selectedNodeId = data?.selected?.length ? Number(data.selected[0]) : null;
                $('#btnEditTreeNode').prop('disabled', !selectedNodeId);
            });

            loadTree();
        });
    </script>
@endpush