@extends('layout.main')
<style>
    .file-tree-ul {
        list-style: none;
        padding-left: 20px;
        position: relative;
    }

    /* Garis vertikal */
    .file-tree-ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        border-left: 1px solid #ccc;
    }

    .file-tree-li {
        margin: 4px 0;
        padding-left: 20px;
        position: relative;
    }

    /* Garis horizontal */
    .file-tree-li::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        width: 20px;
        border-top: 1px solid #ccc;
    }

    /* Hilangkan garis di root */
    .file-tree-ul > .file-tree-li::before {
        border-top: none;
    }

    .folder > span {
        cursor: pointer;
        user-select: none;
    }

    .folder-menu-icon {
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        padding: 0 4px;
    }

    .file-tree-li.folder:hover .folder-menu-icon {
        opacity: 1;
        visibility: visible;
    }

    .folder-menu-icon.dropdown-toggle::after {
        display: none;
    }

    .collapsed > .file-tree-ul {
        display: none;
    }

    .add-file-btn {
        margin-left: 8px;
        font-size: 12px;
        color: blue;
        cursor: pointer;
    }

</style>
@section('body_main')
    <div class="row">
    <div class="col-md-12">
        <div class="card w-100">
          <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Data</h4>
            </div>
            {{-- @dd($allAkses) --}}
            <div class="card-body p-3">
                <div class="bg-light rounded-3 p-3 mb-3 shadow-sm border">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="unit_kerja" class="form-label fw-semibold text-muted small">Unit Kerja</label>
                            <select class="form-control unit_kerja" id="unit_kerja">
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="sub_unit_kerja" class="form-label fw-semibold text-muted small">Sub Unit Kerja</label>
                            <select class="form-control sub_unit_kerja" id="sub_unit_kerja" multiple="multiple">
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="kategori_dok" class="form-label fw-semibold text-muted small">Kategori Dok.</label>
                            <select class="form-control kategori_dok" id="kategori_dok" multiple="multiple" placeholder="--Pilih kategori dokumen--">
                                <option value="" disabled>Select Choose</option>
                                @foreach ($katDok as $kat)
                                    <option value="{{ $kat->master_kategori_directory_id }}">{{ $kat->nama_kategori_directory }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 d-flex gap-2">
                            <button type="button" class="btn btn-primary flex-grow-1" onclick="searchData()">
                                <i class="fa fa-search me-1"></i> Cari
                            </button>
                            <button class="btn btn-outline-secondary" onclick="referesh()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>

                        <div class="col-md-6 d-flex justify-content-md-end">
                            <button type="button" class="btn btn-success w-100 w-md-auto" data-bs-target="#modalCreateFile" data-bs-toggle="modal">
                                <i class="fa fa-plus me-1"></i> Tambah Dokumen
                            </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 mt-3 flex-wrap">
                        <div class="badge bg-light text-secondary border">
                            Tips: pilih Unit/Sub Unit & Kategori untuk menampilkan data.
                        </div>
                        <div class="ms-auto small text-muted d-flex align-items-center gap-2">
                            <i class="fa fa-filter"></i> Filter aktif siap digunakan
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="tree-wrapper" class="col-md-12 mb-3">
                         <div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
                            <button class="btn btn-sm btn-outline-primary" onclick="referesh()">
                                <i class="fas fa-sync-alt"></i> Refresh
                            </button>
                            <button type="button" id="btn-download-multi" class="btn btn-sm btn-primary" onclick="downloadMultiple()" disabled>
                                <i class="fas fa-download"></i> Download Multiple  (<span id="multi-count">0</span>)
                            </button>
                            <div class="input-group input-group-sm" style="max-width:260px;">
                                <span class="input-group-text bg-white"><i class="fa fa-search text-muted"></i></span>
                                <input type="text" id="search_file" oninput="debounceSearch(this.value)" class="form-control" placeholder="Cari nama/no dokumen">
                            </div>
                            <div class="d-flex align-items-center gap-2 ms-auto">
                                <span class="badge bg-success">Umum</span>
                                <span class="badge bg-secondary">Internal</span>
                            </div>
                        </div>
                        <div id="file_tree" style="max-height: 60vh; overflow-y:auto;"></div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
@include('dashboard.modal.view')
<script>
    const klasifikasiDok = @json($klasifikasiDok);
    const katDok = @json($katDok);
    const allAkses = @json($allAkses);
    const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
    const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
    window.__prefillFromSession = @json($prefillFilter ?? null);
    function isPublic(permissionVal){
        if(permissionVal === null || permissionVal === undefined) return false;
        const val = String(permissionVal).toLowerCase();
        return val === '1' || val === 'true' || val === 'ya' || val === 'yes';
    }

    let currentFile = null;
    let idDirectory = null;
    document.addEventListener('click', function(e) {
        if (e.target.matches('.file-link')) {
            e.preventDefault();

            let fileUrl = e.target.getAttribute('data-file');
            let fileName = e.target.getAttribute('data-fileName') || '-';
            let noDokumen = e.target.getAttribute('data-no_dokumen') || '-';
            let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit') || '-';
            let klasifikasiView = e.target.getAttribute('data-klasifikasi') || '-';
            let permissionFile = e.target.getAttribute('data-permission_file');

            $("#confirm-upload-dokumen").text(noDokumen);
            $("#confirm-time-dokumen").text(tanggalTerbit);
            $("#confirm-upload-klasifikasi").text(klasifikasiView);
            $("#confirm_preview_file").text(fileName);
            const permEl = document.getElementById('confirm-permission');
            if (permEl) {
                const publicDoc = isPublic(permissionFile);
                permEl.textContent = publicDoc ? 'Umum' : 'Internal Unit';
                permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
            }

            currentFile = fileUrl;
            idDirectory = e.target.getAttribute('data-id');

            let ext = fileUrl.split('.').pop().toLowerCase();
            let previewBox = document.getElementById('file-preview');
                previewBox.innerHTML = `<iframe src="/file-preview/${idDirectory}" width="100%" height="500px" style="border:none;"></iframe>`;
                $("#previewModal").modal('show')

            // 🔥 Tampilkan modal
            $("#previewModal").modal("show");

        }
        if (e.target.id === 'delete-file') {
            if (!currentFile) {
                Swal.fire({
                    text: "Tidak ada file yang dipilih!",
                    icon: "warning",
                    confirmButtonText: "OK"
                });
                return;
            }

            Swal.fire({
                title: 'Yakin ingin menghapus file ini?',
                text: "File akan dihapus",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                        if (result.isConfirmed) {
                            fetch(`/delete-file/${idDirectory}`, {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                                },
                                body: JSON.stringify({ file: currentFile })
                            })
                            .then(res => res.json())
                            .then(data => {
                                console.log(data);

                            if (data.success) {
                            Swal.fire({
                                text: 'File berhasil dihapus',
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            });

                            // Hapus link file dari tree
                            const fileLink = document.querySelector(`a.file-link[data-id="${idDirectory}"]`);
                            if (fileLink) {
                                const li = fileLink.closest('li.file-tree-li');
                                li?.remove();
                            }


                            // Tutup modal otomatis setelah hapus
                            let modalEl = document.getElementById('previewModal');
                            let modal = bootstrap.Modal.getInstance(modalEl);
                            modal.hide();

                            // Reset variabel
                            currentFile = null;
                            idDirectory = null;
                        } else {
                            Swal.fire({
                                text: 'Gagal menghapus file',
                                icon: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        Swal.fire({
                            text: 'Terjadi error saat menghapus file',
                            icon: 'error'
                        });
                        console.error(err);
                    });
                }
            });

        }
        if(e.target.matches('#btn-view-full')){
                window.open(`/file-preview/${idDirectory}`, '_blank');
            }
    });
</script>

<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
<script src="{{ ver('/js/dashboard/action.js') }}"></script>
@endsection