@extends('layouts.adminlte')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/jstree/default/style.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/treant/Treant.css') }}" />
    <style>
        .org-wrap {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: #f3f6fa;
            min-height: 720px;
            overflow: auto;
            padding: 24px;
            cursor: grab;
            user-select: none;
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
        }
        .org-wrap.panning {
            cursor: grabbing;
        }
        .org-wrap.zooming {
            cursor: zoom-in;
        }
        #orgTreant {
            width: max-content;
            min-width: 100%;
            max-width: none;
            min-height: 680px;
            transform-origin: top left;
            padding-top: 48px;
            padding-bottom: 24px;
            box-sizing: border-box;
        }
        #orgTree {
            min-height: 620px;
            padding: 8px 4px;
        }
        #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;
        }
        .org-paper {
            background: #ffffff;
            border: 1px solid #d8dee9;
            border-radius: 8px;
            min-height: 660px;
            padding: 24px 20px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }
        .org-paper-title {
            text-align: center;
            margin-bottom: 16px;
        }
        .org-paper-title h5 {
            margin: 0;
            font-weight: 800;
            letter-spacing: .5px;
            color: #1f2937;
        }
        .org-paper-title small {
            color: #6b7280;
        }
        #orgTreant .node {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            padding: 0;
            width: 220px;
        }
        #orgTreant .node .node-shell {
            width: 206px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        #orgTreant .node .node-tag {
            display: inline-block;
            min-width: 116px;
            max-width: 206px;
            background: #20264f;
            color: #ffffff;
            border: 1px solid #0f1437;
            border-radius: 8px;
            padding: 2px 8px 3px;
            line-height: 1.1;
            font-weight: 700;
            font-size: 11px;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #orgTreant .node .node-pill {
            display: inline-block;
            min-width: 120px;
            max-width: 206px;
            background: #ffffff;
            color: #111827;
            border: 2px solid #1f2937;
            border-radius: 8px;
            padding: 2px 8px 3px;
            line-height: 1.15;
            font-weight: 700;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #orgTreant .node .node-people {
            display: block;
            max-width: 206px;
            margin: 6px auto 0;
            font-size: 11px;
            line-height: 1.25;
            color: #475569;
            background: #f8fafc;
            border: 1px solid #dbe4f0;
            border-radius: 8px;
            padding: 4px 8px;
            white-space: normal;
            word-break: break-word;
        }
        #orgTreant .node .node-people strong {
            color: #1e293b;
        }
        #orgTreant .node.root-node .node-shell {
            width: 244px;
        }
        #orgTreant .node.root-node .node-tag,
        #orgTreant .node.root-node .node-pill {
            min-width: 180px;
            max-width: 244px;
            font-size: 12px;
        }
        #orgTreant .node.selected-node {
            outline: 2px solid #198754;
            outline-offset: 1px;
            border-radius: 10px;
        }
        #orgTreant .node.drag-enabled {
            cursor: grab;
        }
        #orgTreant .node.dragging-node {
            opacity: .65;
            cursor: grabbing;
        }
        #orgTreant .node.drop-allowed .node-shell {
            outline: 2px dashed #198754;
            outline-offset: 2px;
            border-radius: 10px;
        }
        #orgTreant .node.drop-allowed .node-shell::after {
            content: attr(data-drop-hint);
            position: absolute;
            left: 50%;
            top: calc(100% + 8px);
            transform: translateX(-50%);
            background: #198754;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            padding: 4px 8px;
            border-radius: 999px;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(25, 135, 84, 0.22);
            z-index: 30;
        }
        #orgTreant .node.drop-blocked .node-shell {
            outline: 2px dashed #dc3545;
            outline-offset: 2px;
            border-radius: 10px;
        }
        #orgTreant .node.drop-blocked .node-shell::after {
            content: attr(data-drop-hint);
            position: absolute;
            left: 50%;
            top: calc(100% + 8px);
            transform: translateX(-50%);
            background: #dc3545;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            padding: 4px 8px;
            border-radius: 999px;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.22);
            z-index: 30;
        }
        #orgTreant .node.relinked-node .node-shell {
            outline: 2px solid #0d6efd;
            outline-offset: 2px;
            border-radius: 10px;
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
        }
        #orgTreant .node.parent-target .node-shell {
            outline: 2px solid #198754;
            outline-offset: 2px;
            border-radius: 10px;
            box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12);
        }
        #orgTreant .node.search-match {
            outline: 2px solid #fd7e14;
            outline-offset: 1px;
            border-radius: 10px;
        }
        #orgTreant .node.root-node {
            width: 260px;
        }
        .Treant .collapse-switch {
            display: none !important;
        }
        .Treant .node, .Treant .node p {
            font-family: "Segoe UI", "Calibri", Arial, sans-serif;
        }
        .Treant .node-line,
        .Treant .node .line {
            border-color: #202124 !important;
        }
        .Treant .node, .Treant .node p {
            font-family: "Segoe UI", "Calibri", Arial, sans-serif;
        }
        @media (max-width: 1400px) {
            .org-wrap {
                padding: 16px;
                min-height: 640px;
            }
            #orgTreant .node {
                width: 188px;
            }
            #orgTreant .node .node-shell,
            #orgTreant .node .node-tag,
            #orgTreant .node .node-pill,
            #orgTreant .node .node-people {
                max-width: 174px;
            }
            #orgTreant .node .node-pill {
                min-width: 108px;
                font-size: 11px;
            }
        }
        @media (max-width: 992px) {
            .org-wrap {
                padding: 12px;
                min-height: 560px;
            }
            #orgTreant {
                min-height: 560px;
                padding-top: 28px;
            }
            #orgTreant .node {
                width: 164px;
            }
            #orgTreant .node .node-shell,
            #orgTreant .node .node-tag,
            #orgTreant .node .node-pill,
            #orgTreant .node .node-people {
                max-width: 150px;
            }
            #orgTreant .node .node-tag {
                min-width: 92px;
                font-size: 10px;
            }
            #orgTreant .node .node-pill {
                min-width: 96px;
                font-size: 10px;
            }
            #orgTreant .node .node-people {
                font-size: 10px;
            }
        }
        @media print {
            .card-header, .input-group, #btnEditNode, #btnReloadChart, #btnSearch, #btnClearSearch {
                display: none !important;
            }
            .org-wrap {
                border: none !important;
                padding: 0 !important;
                background: #fff !important;
            }
            .org-paper {
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
        }
    </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</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>
                <a href="{{ route('master_jabatan.organization') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-tree me-1"></i>Tree Drag-Drop
                </a>
                <button class="btn btn-outline-primary btn-sm" id="btnEditNode" disabled>
                    <i class="fas fa-pen-to-square me-1"></i>Edit Node
                </button>
                <button class="btn btn-outline-primary btn-sm" id="btnModeChart">
                    <i class="fas fa-diagram-project me-1"></i>Mode Chart
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="btnModeTree">
                    <i class="fas fa-tree me-1"></i>Mode Drag-Drop
                </button>
                <button class="btn btn-outline-dark btn-sm" id="btnReloadChart">
                    <i class="fas fa-rotate me-1"></i>Refresh
                </button>
                <div class="btn-group btn-group-sm" role="group" aria-label="Zoom Chart">
                    <button class="btn btn-outline-dark" id="btnZoomOut" type="button" title="Zoom Out">
                        <i class="fas fa-magnifying-glass-minus"></i>
                    </button>
                    <button class="btn btn-outline-dark" id="btnZoomReset" type="button" title="Reset Zoom">100%</button>
                    <button class="btn btn-outline-dark" id="btnZoomIn" type="button" title="Zoom In">
                        <i class="fas fa-magnifying-glass-plus"></i>
                    </button>
                </div>
                <button class="btn btn-primary btn-sm d-none" id="btnSaveTree">
                    <i class="fas fa-floppy-disk me-1"></i>Simpan Struktur
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="btnPrintChart">
                    <i class="fas fa-print me-1"></i>Cetak/PDF
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2 mb-3" id="orgModeInfo">
                Mode Chart aktif. Anda juga bisa drag-drop langsung pada chart, lalu 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="orgSearch" class="form-control" placeholder="Search code atau nama jabatan..." />
                <button class="btn btn-outline-secondary" type="button" id="btnSearch">Search</button>
                <button class="btn btn-outline-secondary" type="button" id="btnClearSearch">Clear</button>
            </div>
            <div class="org-wrap">
                <div class="org-paper">
                    <div class="org-paper-title">
                        <h5>STRUKTUR ORGANISASI</h5>
                        <small>Format Legal Standing</small>
                    </div>
                    <div id="orgTreant"></div>
                    <div id="orgTree" class="d-none"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="orgChartEditModal" 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="orgChartEditForm">
                    <div class="modal-body">
                        <input type="hidden" id="orgChartEditId" />
                        <div class="mb-3">
                            <label class="form-label">Code</label>
                            <input type="text" class="form-control" id="orgChartEditCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" id="orgChartEditName" maxlength="120" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Parent Jabatan</label>
                            <select class="form-select" id="orgChartEditParentId">
                                <option value="">- Tanpa Parent -</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="orgChartEditDescription" rows="3"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="orgChartEditActive" checked />
                            <label class="form-check-label" for="orgChartEditActive">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 src="{{ asset('vendor/treant/raphael.min.js') }}"></script>
    <script src="{{ asset('vendor/treant/Treant.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 detailUrlTpl = '{{ route('master_jabatan.detail', ['id' => '__ID__']) }}';
            const updateUrlTpl = '{{ route('master_jabatan.update', ['id' => '__ID__']) }}';
            const saveUrl = '{{ route('master_jabatan.save_hierarchy') }}';

            const editModal = new bootstrap.Modal(document.getElementById('orgChartEditModal'));
            let selectedNodeId = null;
            let rowsCache = [];
            let searchDebounce = null;
            let currentMode = 'chart';
            let chartDragSourceId = null;
            let hierarchyDirty = false;
            let chartHighlightPair = null;
            let isCanvasPanning = false;
            let panStartX = 0;
            let panStartY = 0;
            let panScrollLeft = 0;
            let panScrollTop = 0;
            let chartZoom = 1;

            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>`);
                });
                $('#orgChartEditParentId').html(options.join(''));
                $('#orgChartEditParentId').val(selectedParentId || '');
            }

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function buildTreantNode(node, depth = 0) {
                const children = (node.children || []).map((c) => buildTreantNode(c, depth + 1));
                const rootClass = depth === 0 ? 'root-node' : '';
                const employeeCount = Number(node.employee_count || 0);
                const employeePreviewNames = Array.isArray(node.employee_preview_names) ? node.employee_preview_names : [];
                const peopleDetail = employeeCount <= 3
                    ? employeePreviewNames.map((name) => `<div>${escapeHtml(name)}</div>`).join('')
                    : `<strong>${employeeCount} orang</strong>`;
                const peopleHtml = employeeCount > 0
                    ? `<div class="node-people">${peopleDetail}</div>`
                    : '';
                return {
                    HTMLclass: `jab-node ${rootClass}`.trim(),
                    innerHTML: `<div class="node-shell" data-node-id="${String(node.id)}"><div class="node-tag">${escapeHtml(node.code || '-')}</div><div class="node-pill">${escapeHtml(node.name || '-')}</div>${peopleHtml}</div>`,
                    text: { name: node.name || '', title: node.code || '' },
                    collapsed: false,
                    stackChildren: false,
                    id: String(node.id),
                    children: children,
                };
            }

            function bindNodeEvents() {
                clearChartDropHints();
                $('#orgTreant .node').off('click.nodeSelect').on('click.nodeSelect', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $('#orgTreant .node').removeClass('selected-node');
                    $(this).addClass('selected-node');

                    const id = Number($(this).find('.node-shell').data('node-id') || 0);
                    selectedNodeId = id > 0 ? id : null;
                    $('#btnEditNode').prop('disabled', !selectedNodeId);
                });

                $('#orgTreant .node')
                    .attr('draggable', true)
                    .addClass('drag-enabled')
                    .off('dragstart.chart dragend.chart dragover.chart dragenter.chart dragleave.chart drop.chart')
                    .on('dragstart.chart', function (e) {
                        const id = Number($(this).find('.node-shell').data('node-id') || 0);
                        if (id <= 0) {
                            e.preventDefault();
                            return;
                        }
                        chartDragSourceId = id;
                        $(this).addClass('dragging-node');
                        const dt = e.originalEvent?.dataTransfer;
                        if (dt) {
                            dt.effectAllowed = 'move';
                            dt.setData('text/plain', String(id));
                        }
                    })
                    .on('dragend.chart', function () {
                        chartDragSourceId = null;
                        clearChartDropHints();
                        $('#orgTreant .node').removeClass('dragging-node drop-allowed drop-blocked');
                    })
                    .on('dragover.chart', function (e) {
                        if (!chartDragSourceId) return;
                        e.preventDefault();
                        const targetId = Number($(this).find('.node-shell').data('node-id') || 0);
                        const canDrop = canDropChartNode(chartDragSourceId, targetId);
                        const dt = e.originalEvent?.dataTransfer;
                        if (dt) dt.dropEffect = canDrop ? 'move' : 'none';
                    })
                    .on('dragenter.chart', function (e) {
                        if (!chartDragSourceId) return;
                        e.preventDefault();
                        const targetId = Number($(this).find('.node-shell').data('node-id') || 0);
                        const canDrop = canDropChartNode(chartDragSourceId, targetId);
                        const targetLabel = getNodeLabelById(targetId);
                        clearChartDropHints();
                        $(this)
                            .toggleClass('drop-allowed', canDrop)
                            .toggleClass('drop-blocked', !canDrop);
                        $(this).find('.node-shell').attr(
                            'data-drop-hint',
                            canDrop
                                ? `Drop di sini: jadi child ${targetLabel}`
                                : `Tidak bisa jadi child ${targetLabel}`
                        );
                    })
                    .on('dragleave.chart', function () {
                        $(this).removeClass('drop-allowed drop-blocked');
                        $(this).find('.node-shell').removeAttr('data-drop-hint');
                    })
                    .on('drop.chart', function (e) {
                        if (!chartDragSourceId) return;
                        e.preventDefault();
                        const targetId = Number($(this).find('.node-shell').data('node-id') || 0);
                        $(this).removeClass('drop-allowed drop-blocked');
                        $(this).find('.node-shell').removeAttr('data-drop-hint');
                        moveChartNode(chartDragSourceId, targetId);
                    });
            }

            function clearChartDropHints() {
                $('#orgTreant .node .node-shell').removeAttr('data-drop-hint');
            }

            function renderTreant(nodes) {
                $('#orgTreant').empty();
                selectedNodeId = null;
                $('#btnEditNode').prop('disabled', true);

                if (!Array.isArray(nodes) || !nodes.length) {
                    $('#orgTreant').html('<div class="text-muted">Data jabatan kosong.</div>');
                    return;
                }

                let rootNode = null;
                if (nodes.length === 1) {
                    rootNode = buildTreantNode(nodes[0]);
                } else {
                    rootNode = {
                        id: '0',
                        HTMLclass: 'jab-node root-node',
                        innerHTML: '<div class="node-shell" data-node-id="0"><div class="node-tag">ORG</div><div class="node-pill">Struktur Perusahaan</div></div>',
                        text: { name: 'Struktur Perusahaan', title: 'ORG' },
                        children: nodes.map(buildTreantNode),
                    };
                }

                new Treant({
                    chart: {
                        container: '#orgTreant',
                        rootOrientation: 'NORTH',
                        animateOnInit: false,
                        nodeAlign: 'BOTTOM',
                        connectors: { type: 'step' },
                        siblingSeparation: 28,
                        subTeeSeparation: 36,
                        levelSeparation: 52,
                        scrollbar: 'native',
                        collapsable: false,
                        padding: 8,
                        animation: {
                            nodeAnimation: 'none',
                            nodeSpeed: 0,
                            connectorsAnimation: 'none',
                            connectorsSpeed: 0
                        }
                    },
                    nodeStructure: rootNode
                }, function () {
                    bindNodeEvents();
                    centerChartInView();
                });
            }

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

            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 = $('#orgTree').jstree(true);
                if (!instance) return [];
                const raw = instance.get_json('#', { flat: false });
                return normalize(raw);
            }

            function getTreeInstance() {
                return $('#orgTree').jstree(true);
            }

            function getRowById(id) {
                const numericId = Number(id);
                return rowsCache.find((row) => Number(row.id) === numericId) || null;
            }

            function getNodeLabelById(id) {
                const row = getRowById(id);
                if (row) {
                    const code = String(row.code || '').trim();
                    const name = String(row.name || '').trim();
                    return [code, name].filter(Boolean).join(' - ') || `#${id}`;
                }
                const instance = getTreeInstance();
                const node = instance ? instance.get_node(String(id)) : null;
                const text = String(node?.text || '').trim();
                return text || `#${id}`;
            }

            function getChartNodesFromTree() {
                const instance = getTreeInstance();
                if (!instance) return [];
                return instance.get_json('#', { flat: false }).map(fromJsTreeJson);
            }

            function fromJsTreeJson(node) {
                const rawText = String(node.text || '');
                const [codePart, ...nameParts] = rawText.split(' - ');
                return {
                    id: Number(node.id),
                    code: codePart || '',
                    name: nameParts.join(' - ') || codePart || '',
                    children: (node.children || []).map(fromJsTreeJson),
                };
            }

            function canDropChartNode(sourceId, targetId) {
                if (!sourceId || !targetId) return false;
                if (sourceId === targetId) return false;
                const instance = getTreeInstance();
                if (!instance) return false;
                const targetNode = instance.get_node(String(targetId));
                if (!targetNode) return false;
                const descendants = Array.isArray(targetNode.children_d) ? targetNode.children_d.map(String) : [];
                return !descendants.includes(String(sourceId));
            }

            function moveChartNode(sourceId, targetId) {
                if (!canDropChartNode(sourceId, targetId)) {
                    Swal.fire('Warning', 'Node tidak bisa dipindah ke target tersebut', 'warning');
                    return;
                }

                const instance = getTreeInstance();
                if (!instance) {
                    Swal.fire('Error', 'Tree struktur belum siap', 'error');
                    return;
                }

                const sourceLabel = getNodeLabelById(sourceId);
                const targetLabel = getNodeLabelById(targetId);

                Swal.fire({
                    title: 'Pindahkan Jabatan?',
                    html: `<div class="text-start">Jabatan <strong>${sourceLabel}</strong> akan dipindah ke bawah parent <strong>${targetLabel}</strong>.</div>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, pindahkan',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                }).then((result) => {
                    if (!result.isConfirmed) {
                        return;
                    }

                    instance.move_node(String(sourceId), String(targetId), 'last');
                    hierarchyDirty = true;
                    chartHighlightPair = { sourceId: Number(sourceId), targetId: Number(targetId) };
                    $('#btnSaveTree').removeClass('d-none');
                    renderTreant(getChartNodesFromTree());
                    setMode('chart');
                    highlightChartRelationship();
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: 'Node dipindah. Klik Simpan Struktur untuk menyimpan perubahan.',
                        showConfirmButton: false,
                        timer: 2400,
                    });
                });
            }

            function highlightChartRelationship() {
                $('#orgTreant .node').removeClass('relinked-node parent-target');
                if (!chartHighlightPair) return;

                const { sourceId, targetId } = chartHighlightPair;
                const $source = $('#orgTreant .node').filter(function () {
                    return Number($(this).find('.node-shell').data('node-id') || 0) === Number(sourceId);
                });
                const $target = $('#orgTreant .node').filter(function () {
                    return Number($(this).find('.node-shell').data('node-id') || 0) === Number(targetId);
                });

                $source.addClass('relinked-node');
                $target.addClass('parent-target');

                const $wrap = $('.org-wrap');
                const $focus = $source.length ? $source : $target;
                if ($focus.length) {
                    $wrap.animate({
                        scrollTop: Math.max(0, $focus.position().top - 80),
                        scrollLeft: Math.max(0, $focus.position().left - 120),
                    }, 220);
                }
            }

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

            function renderTree(nodes) {
                const data = toJsTree(nodes || []);
                const $tree = $('#orgTree');
                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');
                    });
                $tree.on('changed.jstree', function (e, data) {
                    selectedNodeId = data?.selected?.length ? Number(data.selected[0]) : null;
                    $('#btnEditNode').prop('disabled', !selectedNodeId);
                });
            }

            function setMode(mode) {
                currentMode = mode === 'tree' ? 'tree' : 'chart';
                const isTree = currentMode === 'tree';
                $('#orgTreant').toggleClass('d-none', isTree);
                $('#orgTree').toggleClass('d-none', !isTree);
                $('#btnSaveTree').toggleClass('d-none', !isTree && !hierarchyDirty);
                $('#btnPrintChart').prop('disabled', isTree);
                $('#btnModeChart').toggleClass('btn-primary', !isTree).toggleClass('btn-outline-primary', isTree);
                $('#btnModeTree').toggleClass('btn-primary', isTree).toggleClass('btn-outline-secondary', !isTree);
                $('#orgModeInfo').text(
                    isTree
                        ? 'Mode Drag-Drop aktif. Geser node jabatan untuk ubah struktur, lalu klik Simpan Struktur.'
                        : 'Mode Chart aktif. Anda juga bisa drag-drop langsung pada chart, lalu klik Simpan Struktur.'
                );
            }

            function loadOrgViews() {
                $.getJSON(treeUrl)
                    .done((resp) => {
                        const nodes = resp.data || [];
                        renderTreant(nodes);
                        renderTree(nodes);
                        highlightChartRelationship();
                        clearSearch();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load chart', 'error');
                    });
            }

            function clearSearch() {
                $('#orgTreant .node').removeClass('search-match');
                const treeInstance = $('#orgTree').jstree(true);
                if (treeInstance) treeInstance.clear_search();
            }

            function centerChartInView() {
                if (currentMode !== 'chart') return;
                const $wrap = $('.org-wrap');
                const $chart = $('#orgTreant');
                const wrapEl = $wrap.get(0);
                const chartEl = $chart.get(0);
                if (!wrapEl || !chartEl) return;

                requestAnimationFrame(() => {
                    const scrollWidth = wrapEl.scrollWidth || 0;
                    const clientWidth = wrapEl.clientWidth || 0;
                    const targetLeft = Math.max(0, Math.round((scrollWidth - clientWidth) / 2));
                    wrapEl.scrollLeft = targetLeft;
                    wrapEl.scrollTop = 8;
                });
            }

            function applyChartZoom(nextZoom) {
                chartZoom = Math.max(0.55, Math.min(1.8, Number(nextZoom) || 1));
                $('#orgTreant').css('transform', `scale(${chartZoom})`);
                $('#btnZoomReset').text(`${Math.round(chartZoom * 100)}%`);
            }

            function bindCanvasPan() {
                const $wrap = $('.org-wrap');
                const panSelector = '.org-wrap, .org-paper, #orgTreant';

                $(document).off('mousedown.canvaspan').on('mousedown.canvaspan', panSelector, function (e) {
                    if (currentMode !== 'chart') return;
                    if (e.button !== 0) return;
                    if ($(e.target).closest('.node, .swal2-container, button, input, select, textarea, a, .modal').length) {
                        return;
                    }

                    isCanvasPanning = true;
                    panStartX = e.pageX;
                    panStartY = e.pageY;
                    panScrollLeft = $wrap.scrollLeft();
                    panScrollTop = $wrap.scrollTop();
                    $wrap.addClass('panning');
                    e.preventDefault();
                });

                $(document)
                    .off('mousemove.canvaspan')
                    .on('mousemove.canvaspan', function (e) {
                        if (!isCanvasPanning) return;
                        const dx = e.pageX - panStartX;
                        const dy = e.pageY - panStartY;
                        $wrap.scrollLeft(panScrollLeft - dx);
                        $wrap.scrollTop(panScrollTop - dy);
                    })
                    .off('mouseup.canvaspan')
                    .on('mouseup.canvaspan', function () {
                        if (!isCanvasPanning) return;
                        isCanvasPanning = false;
                        $wrap.removeClass('panning');
                    });

                $wrap.off('wheel.canvaszoom').on('wheel.canvaszoom', function (e) {
                    if (currentMode !== 'chart') return;
                    if (!e.ctrlKey) return;
                    e.preventDefault();
                    const delta = e.originalEvent?.deltaY || 0;
                    applyChartZoom(chartZoom + (delta < 0 ? 0.1 : -0.1));
                });

                $('#btnZoomIn').off('click.canvaszoom').on('click.canvaszoom', function () {
                    applyChartZoom(chartZoom + 0.1);
                });
                $('#btnZoomOut').off('click.canvaszoom').on('click.canvaszoom', function () {
                    applyChartZoom(chartZoom - 0.1);
                });
                $('#btnZoomReset').off('click.canvaszoom').on('click.canvaszoom', function () {
                    applyChartZoom(1);
                    centerChartInView();
                });
            }

            function runSearch() {
                const keyword = ($('#orgSearch').val() || '').toString().trim().toLowerCase();
                clearSearch();
                if (!keyword) return;

                if (currentMode === 'tree') {
                    const treeInstance = $('#orgTree').jstree(true);
                    if (!treeInstance) return;
                    treeInstance.search(keyword);
                    return;
                }

                const $matched = $('#orgTreant .node').filter(function () {
                    return ($(this).text() || '').toLowerCase().includes(keyword);
                }).addClass('search-match');

                if (!$matched.length) {
                    Swal.fire('Info', 'Data tidak ditemukan', 'info');
                    return;
                }

                const $first = $matched.first();
                $first.trigger('click');
                $('.org-wrap').animate({
                    scrollTop: Math.max(0, $first.position().top - 30),
                    scrollLeft: Math.max(0, $first.position().left - 30),
                }, 240);
            }

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

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

                        $('#orgChartEditId').val(detail.id);
                        $('#orgChartEditCode').val(detail.code || '');
                        $('#orgChartEditName').val(detail.name || '');
                        $('#orgChartEditDescription').val(detail.description || '');
                        $('#orgChartEditActive').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');
                    });
            }

            $('#btnModeChart').on('click', function () {
                setMode('chart');
            });
            $('#btnModeTree').on('click', function () {
                setMode('tree');
            });
            $('#btnReloadChart').on('click', loadOrgViews);
            $('#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');
                    hierarchyDirty = false;
                    chartHighlightPair = null;
                    loadOrgViews();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal simpan hierarchy', 'error');
                });
            });
            $('#btnPrintChart').on('click', function () {
                window.print();
            });
            $('#btnEditNode').on('click', openEditModal);
            $('#btnSearch').on('click', runSearch);
            $('#btnClearSearch').on('click', function () {
                $('#orgSearch').val('');
                clearSearch();
            });
            $('#orgSearch').on('keyup', function (e) {
                clearTimeout(searchDebounce);
                if (e.key === 'Enter') {
                    runSearch();
                    return;
                }
                searchDebounce = setTimeout(runSearch, 220);
            });

            $('#orgChartEditForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#orgChartEditId').val();
                const payload = {
                    code: ($('#orgChartEditCode').val() || '').toString().trim(),
                    name: ($('#orgChartEditName').val() || '').toString().trim(),
                    parent_id: $('#orgChartEditParentId').val(),
                    description: ($('#orgChartEditDescription').val() || '').toString().trim(),
                    is_active: $('#orgChartEditActive').is(':checked') ? 1 : 0,
                };

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

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

            loadOrgViews();
            setMode('chart');
            applyChartZoom(1);
            bindCanvasPan();
        });
    </script>
@endpush