@extends('layout.main')
<style>
/* --- SELECT2: teks terlihat (hitam) --- */

.select2-container--default .select2-selection--multiple {
    background: #fff !important;
    border: 1px solid rgb(206, 212, 218) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #111 !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: #111 !important;
}

.select2-container--default .select2-dropdown {
    background: #fff !important;
    border: 1px solid #ced4da !important;
}

.select2-container--default .select2-results__option {
    color: #111 !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #e9ecef !important;
    color: #111 !important;
}

/* tag chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    color: #111 !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    display: inline-block !important;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    margin-right: 8px;
    cursor: pointer;
}
.table-header-filter .dropdown-menu {
    z-index: 1080;
}
.table-fixed-height {
    min-height: 70vh;
}

/* --- Warna kategori baris --- */
.row-shade {
    background-color: var(--row-bg, transparent) !important;
    transition: background-color 0.2s ease;
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.08);
    vertical-align: middle;
    margin-right: 6px;
}
</style>
@section('body_main')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h4 class="mb-0">Dokumen Unit</h4>
                        <div class="d-flex align-items-start gap-3">
                            <!-- DOWNLOAD + COUNT -->
                                    <a
                                        href="/download-excel/data-unit"
                                        class="btn btn-success btn-sm"
                                    >
                                        <i class="ti ti-download me-1"></i>
                                        Download Excel
                                    </a>
                            <div class="d-flex flex-column align-items-start">

                                <button
                                    type="button"
                                    class="btn btn-primary btn-sm"
                                    id="btnDownloadMultiple"
                                    disabled
                                >
                                    <i class="ti ti-download me-1"></i>
                                    Download Terpilih
                                </button>

                                <span
                                    id="selectedCount"
                                    class="small text-muted mt-1"
                                >
                                    0 dipilih
                                </span>
                            </div>
                            <!-- Tambah Dokumen -->
                             @if(!Auth::guard('admin')->check())
                            <button
                                type="button"
                                class="btn btn-success btn-sm"
                                data-bs-toggle="modal"
                                data-bs-target="#modalCreateFile"
                            >
                                <i class="ti ti-plus me-1"></i>
                                Tambah Dokumen
                            </button>
                            @endif
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
                        <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 flex-grow-1">
                            <select id="tableUnit" style="max-width: 260px;">
                                <option value=""></option>
                            </select>
                            <select id="tableKategori" class="form-select form-select-sm" style="max-width: 260px;">
                                <option value="">Kategori (Semua)</option>
                                <option value="akreditasi">Kategori Akreditasi</option>
                                <option value="hukum">Kategori Hukum</option>
                                <option value="lainnya">Kategori Lainnya</option>
                            </select>
                            <input type="search"
                                       id="tableSearch"
                                       class="form-control"
                                       placeholder="Cari nama dokumen atau No Dokumen"
                                       autocomplete="off">
                                    </div>
                            <button class="btn btn-primary" type="button" id="btnTableSearch">Cari</button>
                    </div>
                    <div class="table-responsive table-fixed-height" style="max-height: 70vh; overflow-y:auto;">
                    <table class="table table-sm table-hover align-middle mb-0 table-fixed" id="lastUpdatedTable">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 36px;">
                                    <input type="checkbox" id="checkAllRows" class="form-check-input">
                                </th>
                                <th>Aksi</th>
                                <th>No Dokumen</th>
                                <th>Nama Dokumen</th>
                                <th>
                                    <div class="d-flex align-items-center gap-2 table-header-filter">
                                        <span>Kategori</span>
                                        <div class="dropdown">
                                            <button class="btn btn-light btn-sm border" type="button" id="tableKategoriHeaderBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                <i class="ti ti-filter"></i>
                                            </button>
                                            <div class="dropdown-menu p-2" id="tableKategoriHeaderMenu" style="min-width: 220px;">
                                                <div class="small text-muted px-1">Filter kategori (BETA)</div>
                                                <div class="dropdown-divider"></div>
                                                <div class="kategori-header-list"></div>
                                            </div>
                                        </div>
                                    </div>
                                </th>
                                <th>Unit</th>
                                <th>Tanggal Unggah</th>
                                <th>Pengunggah</th>
                            </tr>
                        </thead>
                        <tbody id="tableDataUnit">
                            <!-- data dari fetch masuk sini -->
                        </tbody>
                    </table>
                    </div>

                            <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
                                <div class="d-flex align-items-center gap-1">
                                    <span class="small text-muted">Tampilkan</span>
                                    <select id="tablePageSize" class="form-select form-select-sm" style="width: 80px;">
                                        <option value="5">5</option>
                                        <option value="10" selected>10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    <span class="small text-muted">data</span>
                                </div>

                                <div id="paginationControls" class="ms-auto"></div>

                                <div class="small text-muted text-nowrap" id="tableSummary">
                                    Memuat data...
                                </div>
                            </div>
                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationControls"></div>

                    <hr class="my-4">
                    <div class="mb-3">
                        <h5 class="mb-0">Data Rekap</h5>
                    </div>
                    @include('dataUnit.section.recap')
                </div>

            </div>
        </div>
    </div>
    @include('dataUnit.modal.create')
    @include('dataUnit.modal.view')

    <script>
        const katDok = @json($katDok);
        const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
        const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]->sub_unit_kerja);
        const mappingUnitKerjaPegawai = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
        const authPegawai = @json(auth()->user()->objectpegawaifk);
        const formCreate = $("#formFile");
        const modalCreate = document.getElementById('modalCreateFile');
        const tableState = { data: [], page: 1, pageSize: 8, search: '', unit: [], kategori: [], kategoriType: [], kategoriHeader: [], lastPage: 1, total: 0 };
        let kategoriOptionCache = [];
        const tbody = document.getElementById('tableDataUnit');
        const paginationEl = document.getElementById('paginationControls');
        const summaryEl = document.getElementById('tableSummary');
        const legendEl = document.getElementById('tableLegend');
        const pageSizeSelect = document.getElementById('tablePageSize');
        const unitSelect = document.getElementById('tableUnit');
        const kategoriSelect = document.getElementById('tableKategori');
        const kategoriHeaderMenu = document.getElementById('tableKategoriHeaderMenu');
        const searchInput = document.getElementById('tableSearch');
        const searchBtn = document.getElementById('btnTableSearch');
        const downloadBtn = document.getElementById('btnDownloadMultiple');
        const selectedCountEl = document.getElementById('selectedCount');
        const checkAllEl = document.getElementById('checkAllRows');
        const selectedIds = new Set();
        const colorCache = {};
        const colorPalette = ['#e8f4ff', '#fff6e5', '#e9f7ef', '#f3e8ff', '#ffe6ea', '#e6f5f3'];

        function normalizeToArray(value){
            if (Array.isArray(value)) {
                return value.filter(v => v !== null && v !== undefined && v !== '');
            }
            if (value === null || value === undefined || value === '') return [];
            return [value];
        }

        document.addEventListener('change', function(e){
            if(!e.target.classList.contains('toggle-expired')) return;
            const targetId = e.target.getAttribute('data-target');
            if(!targetId) return;
            const fieldWrap = document.getElementById(targetId);
            const input = fieldWrap.querySelector('input');
            input.disabled = !e.target.checked;
        });

        if(pageSizeSelect){
            const initialSize = parseInt(pageSizeSelect.value);
            if(!isNaN(initialSize)) tableState.pageSize = initialSize;
            pageSizeSelect.addEventListener('change', (e) => {
                const val = parseInt(e.target.value);
                if(!isNaN(val) && val > 0){
                    tableState.pageSize = val;
                    tableState.page = 1;
                    fetchData();
                }
            });
        }
        if (window.$ && $.fn.select2) {
            if (unitSelect) {
               $('#tableUnit').select2({
                    placeholder: 'Pilih Unit',
                    allowClear: true,
                    width: '100%',
                    closeOnSelect: false,
                    ajax: {
                        url: '/select-unit-kerja-mapping',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return { q: params.term };
                        },
                        processResults: function (data) {
                            return {
                                results: (data?.data || []).map(item => ({
                                    id: item.id,
                                    text: item.name
                                }))
                            };
                        },
                        cache: true
                    }
                });
          
            }
            if (kategoriSelect) {
                $('#tableKategori').select2({
                    placeholder: 'Kategori (Semua)',
                    allowClear: true,
                    width: '100%',
                    selectionCssClass: 'select2-filter-selection',
                    dropdownCssClass: 'select2-filter-dropdown'
                });
                $('#tableKategori').on('change', function () {
                    const val = $(this).val() || '';
                    tableState.kategoriType = val ? [val] : [];
                    tableState.page = 1;
                    fetchData();
                });
            }
        }
        if (kategoriHeaderMenu) {
            kategoriHeaderMenu.addEventListener('change', function(e){
                const checkbox = e.target.closest('input[type="checkbox"]');
                if (!checkbox) return;
                const selected = Array.from(kategoriHeaderMenu.querySelectorAll('input[type="checkbox"]:checked'))
                    .map(el => el.value);
                tableState.kategoriHeader = selected;
                if (kategoriSelect && window.$ && $.fn.select2) {
                    const single = selected.length === 1 ? selected[0] : '';
                    $('#tableKategori').val(single).trigger('change');
                }
                tableState.page = 1;
                fetchData();
            });
        }

        function resetCreateForm(){
            colCount = 1;
            $("#col_add_fileV2").html('');
            formCreate[0]?.reset();
            formCreate.find('select').val(null).trigger('change');
            formCreate.find('input[type="file"]').val('');
            formCreate.find('.file-name').addClass('d-none').text('');
            resetAkreFields(0);
            enableAkreFields(0);
        }

        let akreData = [];
        let akreLoaded = false;
        let akreFlat = [];

        function loadAkreData(){
            if(akreLoaded) return Promise.resolve(akreData);
            return fetch('/json/akreditasi.jff')
                .then(res => res.json())
                .then(data => {
                    akreData = Array.isArray(data) ? data : [];
                    akreFlat = [];
                    akreLoaded = true;
                    return akreData;
                })
                .catch(() => {
                    akreData = [];
                    akreFlat = [];
                    akreLoaded = true;
                    return akreData;
                });
        }

        function getAkreFlat(){
            if(akreFlat.length) return akreFlat;
            akreFlat = (akreData || []).flatMap(type => {
                const segments = Array.isArray(type.segment) ? type.segment : [];
                return segments.flatMap(seg => {
                    const children = Array.isArray(seg.turunan) ? seg.turunan : [];
                    return children.map(child => ({
                        value: `${type.name}/${seg.name}/${child.name}`,
                        label: `${type.name} / ${child.name}`,
                        type: type.name,
                        segment: seg.name,
                        item: child.name
                    }));
                });
            });
            return akreFlat;
        }

        function fillAkreSelect(selectEl){
            if(!selectEl) return;
            selectEl.innerHTML = '<option value="" disabled selected>Pilih Instrumen</option>';
            getAkreFlat().forEach(optData => {
                const opt = document.createElement('option');
                opt.value = optData.value;
                opt.textContent = optData.label;
                selectEl.appendChild(opt);
            });
        }

        function setKategoriRequired(index, isRequired){
            const katSelect = document.getElementById(`select_kategori_${index}`);
            if (!katSelect) return;
            if (isRequired) {
                katSelect.setAttribute('required', 'required');
            } else {
                katSelect.removeAttribute('required');
            }
        }

        function resetAkreFields(index){
            const selectEl = document.getElementById(`akre_select_${index}`);
            const typeInput = document.getElementById(`akre_type_${index}`);
            const segmentInput = document.getElementById(`akre_segment_${index}`);
            const itemInput = document.getElementById(`akre_item_${index}`);
            if(selectEl){
                selectEl.value = '';
                if(window.$ && $.fn.select2) $(selectEl).val(null).trigger('change');
            }
            if(typeInput) typeInput.value = '';
            if(segmentInput) segmentInput.value = '';
            if(itemInput) itemInput.value = '';
            setKategoriRequired(index, false);
        }

        function enableAkreFields(index){
            const selectEl = document.getElementById(`akre_select_${index}`);
            // if(selectEl){
            //     selectEl.disabled = false;
            //     selectEl.required = true;
            // }
            setKategoriRequired(index, false);
            loadAkreData().then(() => {
                fillAkreSelect(selectEl);
                if(window.$ && $.fn.select2){
                    $(selectEl).select2({
                        dropdownParent: $('#modalCreateFile'),
                        placeholder: 'Pilih Instrumen',
                        allowClear: true
                    });
                }
            });
        }

        function initKategoriSelect2(index){
            if(!window.$ || !$.fn.select2) return;
            const katSelect = $(`#select_kategori_${index}`);
            const hukumSelect = $(`#select_kategori_hukum_${index}`);
            if(katSelect.length){
                katSelect.select2({
                    dropdownParent: $('#modalCreateFile'),
                    placeholder:'Pilih Kategori',
                    allowClear: true
                });
            }
            if(hukumSelect.length){
                hukumSelect.select2({
                    dropdownParent: $('#modalCreateFile'),
                    placeholder:'Pilih Kategori Hukum',
                    allowClear:true
                });
            }
        }

        document.addEventListener('change', function(e){
            if(e.target.classList.contains('akre-select')){
                const id = e.target.id || '';
                const idx = id.split('_').pop();
                const [typeVal = '', segmentVal = '', itemVal = ''] = (e.target.value || '').split('/');
                const typeInput = document.getElementById(`akre_type_${idx}`);
                const segmentInput = document.getElementById(`akre_segment_${idx}`);
                const itemInput = document.getElementById(`akre_item_${idx}`);
                if(typeInput) typeInput.value = typeVal;
                if(segmentInput) segmentInput.value = segmentVal;
                if(itemInput) itemInput.value = itemVal;
                return;
            }

        });

        function isPublic(permissionVal){
            if(permissionVal === null || permissionVal === undefined) return false;
            const val = String(permissionVal).toLowerCase();
            return val === '1' || val === 'true' || val === 'ya' || val === 'yes';
        }

        function resolveKategoriFlag(item){
            if(Number(item.is_akre) === 1 || item.is_akre === true || String(item.is_akre).toLowerCase() === 'true'){
                return { key: 'akre', label: 'Kategori Akreditasi' };
            }
            if(item.kategori_hukum){
                return { key: 'hukum', label: 'Kategori Hukum' };
            }
            const label = (item.nama_kategori || item.nama_kategori_directory || item.kategori || '').trim() || 'Kategori Lainnya';
            const key = String(item.master_kategori_directory_id || label || 'lainnya');
            return { key, label };
        }

        function pickColor(key, label){
            if(colorCache[key]) return colorCache[key];
            const index = Object.keys(colorCache).length % colorPalette.length;
            colorCache[key] = colorPalette[index];
            return colorCache[key];
        }

        function renderLegend(items){
            if(!legendEl) return;
            const map = new Map();
            (items || []).forEach(item => {
                const flag = resolveKategoriFlag(item);
                const color = pickColor(flag.key, flag.label);
                if(!map.has(flag.key)){
                    map.set(flag.key, { label: flag.label, color });
                }
            });
            if(map.size === 0){
                legendEl.textContent = '';
                return;
            }
            legendEl.innerHTML = Array.from(map.values()).map(entry => `
                <span class="me-3">
                    <span class="legend-dot" style="background:${entry.color};"></span>
                    <span>${entry.label}</span>
                </span>
            `).join('');
        }

        function getExpiryStatus(dateStr){
            if (!dateStr) return false;
            const d = new Date(dateStr);
            if (Number.isNaN(d.getTime())) return null;
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            d.setHours(0, 0, 0, 0);
            if (d < today) return 'expired';
            const diffDays = Math.ceil((d - today) / 86400000);
            if (diffDays <= 7) return 'soon';
            return null;
        }

        function buildRow(item){
            const parts = (item.file || '').split('/');
            const fileName = parts.pop() || '-';
            const folderPath = parts.join('/') || '-';
            const publicDoc = isPublic(item.permission_file);
            const unitName = parts[0] || '';
            const subName = parts[1] || '';
            const kategoriName = parts[2] || '';
            const expiryStatus = getExpiryStatus(item.tgl_expired);
            let statusLabel = '';
            let statusClass = '';

            if (publicDoc) {
                statusLabel = 'Umum';
                statusClass = 'bg-success';
            } else {
                statusLabel = 'Internal Unit';
                statusClass = 'bg-secondary';
            }
            const checked = selectedIds.has(String(item.file_directory_id)) ? 'checked' : '';
            const kategoriFlag = resolveKategoriFlag(item);
            const rowColor = pickColor(kategoriFlag.key, kategoriFlag.label);
            const isAkre = kategoriFlag.key === 'akre';
            const rowClass = isAkre ? 'table-info' : (expiryStatus === 'expired' ? 'table-danger' : (expiryStatus === 'soon' ? 'table-warning' : 'row-shade'));
            const expiryBadge = expiryStatus === 'expired'
                ? `<span class="badge bg-danger" style="font-size:10px;">Expired</span>`
                : (expiryStatus === 'soon' ? `<span class="badge bg-warning text-dark" style="font-size:10px;">Akan Expired</span>` : '');
            const akreBadge = isAkre
                ? `<span class="badge bg-primary text-white ms-2" style="font-size:10px;">Akreditasi</span>`
                : '';
            return `
                <tr class="${rowClass}" style="--row-bg:${rowColor};">
                    <td class="text-center">
                        <input type="checkbox"
                               class="form-check-input row-check"
                               data-id="${item.file_directory_id}"
                               ${checked}>
                    </td>
                    <td class="text-nowrap">
                        <div class="d-inline-flex gap-1">
                            <button
                                type="button"
                                class="btn btn-primary btn-sm"
                                onclick="infoDok(this)"
                                title="Detail Dokumen"
                                data-filename="${item.nama_dokumen || '-'}"
                                data-id="${item.file_directory_id}"
                                data-no_dokumen="${item.no_dokumen || '-'}"
                                data-tanggal_terbit="${item.tanggal_terbit || '-'}"
                                data-permission_file="${item.permission_file || '-'}"
                                data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
                            >
                                <i class="fa-solid fa-eye"></i>
                            </button>

                            <a
                                href="/file-download/${item.file_directory_id}"
                                target="_blank"
                                class="btn btn-primary btn-sm"
                                title="Download Dokumen"
                            >
                                <i class="fa-solid fa-download"></i>
                            </a>
                        </div>
                    </td>
                    <td class="text-nowrap">${item.no_dokumen || '-'}</td>
                    <td class="file-cell">
                        <div class="file-title">
                            <a href="#"
                                class="file-link"
                                data-file="${item.file}"
                                data-fileName="${item.nama_dokumen || '-'}"
                                data-id="${item.file_directory_id}"
                                data-no_dokumen="${item.no_dokumen || '-'}"
                                data-tanggal_terbit="${item.tanggal_terbit || '-'}"
                                data-permission_file="${item.permission_file || '-'}"
                                data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
                            >
                                ${item.nama_dokumen || '-'}
                            </a>
                            ${akreBadge}${expiryBadge}
                        </div>
                    </td>
                    <td>
                        ${item.nama_kategori || '-'}
                    </td>
                    <td>
                        ${item.unit?.name || '-'}
                    </td>
                    <td class="text-nowrap">${formatTanggal(item.entry_at)}</td>
                    <td style="max-width: 200px; white-space: normal; word-wrap: break-word;">${item.pegawai_nama_entry || '-'}</td>
                </tr>
            `;
        }

        function renderPagination(totalPages){
            if(!paginationEl) return;
            if(totalPages <= 1){
                paginationEl.innerHTML = '';
                return;
            }

            const maxButtons = 5;
            let start = Math.max(1, tableState.page - Math.floor(maxButtons/2));
            let end = Math.min(totalPages, start + maxButtons - 1);
            start = Math.max(1, end - maxButtons + 1);

            let buttons = '';
            buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${tableState.page === 1 ? 'disabled' : ''}>‹ Sebelumnya</button>`;

            for(let i=start; i<=end; i++){
                buttons += `<button class="btn btn-sm ${i === tableState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
            }

            buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${tableState.page === totalPages ? 'disabled' : ''}>Berikutnya ›</button>`;

            paginationEl.innerHTML = `
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="btn-group" role="group">${buttons}</div>
                    <span class="small text-muted">Halaman ${tableState.page} dari ${totalPages}</span>
                </div>
            `;
        }

        if(paginationEl){
            paginationEl.addEventListener('click', (e) => {
                const page = e.target.getAttribute('data-page');
                if(!page) return;
                if(page === 'prev' && tableState.page > 1) tableState.page--;
                else if(page === 'next'){
                    if(tableState.page < tableState.lastPage) tableState.page++;
                }else{
                    tableState.page = parseInt(page);
                }
                fetchData();
            });
        }

        function renderTable(){
            const pageData = filterByKategoriType(tableState.data || []);

            if(pageData.length === 0){
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            Tidak ada data yang cocok
                        </td>
                    </tr>
                `;
            }else{
                tbody.innerHTML = pageData.map(buildRow).join('');
            }

            const from = tableState.total === 0 ? 0 : ((tableState.page -1) * tableState.pageSize) + 1;
            const to = Math.min(((tableState.page -1) * tableState.pageSize) + pageData.length, tableState.total);
            if(summaryEl){
                summaryEl.textContent = tableState.total ? `Menampilkan ${from} - ${to} dari ${tableState.total} dokumen` : 'Tidak ada data';
            }

            renderPagination(tableState.lastPage || 1);
            syncCheckAllState();
            updateSelectedCount();
            renderLegend(pageData);
        }

        function applyTableSearch(){
            const value = searchInput ? searchInput.value : '';
            tableState.search = (value || '').trim();
            tableState.unit = normalizeToArray(
                unitSelect && window.$ ? $('#tableUnit').val() : tableState.unit
            );
            const katVal = kategoriSelect && window.$ ? ($('#tableKategori').val() || '') : (kategoriSelect?.value || '');
            tableState.kategoriType = katVal ? [katVal] : (tableState.kategoriType || []);
            tableState.page = 1;
            fetchData();
        }

        function getKategoriLabel(item){
            const parts = String(item?.file || '').split('/');
            return (item?.nama_kategori || parts[2] || item?.nama_kategori_directory || item?.kategori || '').trim();
        }

        function getKategoriId(item){
            const label = getKategoriLabel(item);
            return String(item?.master_kategori_directory_id || label);
        }

        function getKategoriOptionsFromData(){
            const seen = new Map();
            (tableState.data || []).forEach(item => {
                const label = getKategoriLabel(item);
                if(!label) return;
                const id = getKategoriId(item);
                if(!seen.has(id)){
                    seen.set(id, { id, label });
                }
            });
            return Array.from(seen.values()).sort((a,b) => a.label.localeCompare(b.label));
        }

        function isKategoriMatch(item, types){
            if (!types.length) return true;
            const lowerTypes = types.map(t => String(t).toLowerCase());
            const isAkre = (item.is_akre === true) || String(item.is_akre).toLowerCase() === 'true' || Number(item.is_akre) === 1;
            const isHukum = !!item.kategori_hukum;
            const hasKategoriId = !!item.master_kategori_directory_id;
            // special buckets
            if (isAkre && lowerTypes.includes('akreditasi')) return true;
            if (isHukum && lowerTypes.includes('hukum')) return true;
            if (!isAkre && !isHukum && hasKategoriId && lowerTypes.includes('lainnya')) return true;

            // fallback to id/label comparison
            const catId = String(getKategoriId(item)).toLowerCase();
            const catLabel = String(getKategoriLabel(item)).toLowerCase();
            return lowerTypes.includes(catId) || lowerTypes.includes(catLabel);
        }

        function filterByKategoriType(items){
            const types = (tableState.kategoriType || []).map(v => String(v));
            if (!types.length) return items;
            return items.filter(item => isKategoriMatch(item, types));
        }

        function renderKategoriHeaderOptions(){
            if (!kategoriHeaderMenu) return;
            const list = kategoriHeaderMenu.querySelector('.kategori-header-list');
            if (!list) return;
            const options = kategoriOptionCache.length ? kategoriOptionCache : getKategoriOptionsFromData();
            const selected = (tableState.kategoriHeader || []).map(v => String(v));
            if(options.length === 0){
                list.innerHTML = '<div class=\"dropdown-item text-muted\">Tidak ada kategori</div>';
                return;
            }
            list.innerHTML = options.map(opt => {
                const checked = selected.includes(opt.id) ? 'checked' : '';
                return `
                    <label class="dropdown-item d-flex align-items-center gap-2 kategori-option" data-kat="${opt.id}">
                        <input type="checkbox" class="form-check-input m-0" value="${opt.id}" ${checked}>
                        <span>${opt.label}</span>
                    </label>
                `;
            }).join('');
        }

        if (kategoriHeaderMenu) {
            kategoriHeaderMenu.addEventListener('click', function(e){
                const option = e.target.closest('.kategori-option');
                if (!option) return;
                const id = option.getAttribute('data-kat');
                const checkbox = option.querySelector('input[type="checkbox"]');
                if(checkbox){
                    checkbox.checked = !checkbox.checked;
                    const event = new Event('change', { bubbles: true });
                    checkbox.dispatchEvent(event);
                }else{
                    tableState.kategoriHeader = [id];
                    if (kategoriSelect && window.$ && $.fn.select2) {
                        $('#tableKategori').val(id).trigger('change');
                    }
                    tableState.page = 1;
                    fetchData();
                }
            }, true);
        }


        function fetchData(){
            if(summaryEl) summaryEl.textContent = 'Memuat data...';
            const params = new URLSearchParams({
                page: tableState.page,
                per_page: tableState.pageSize,
                keyword: tableState.search
            });
            const unitValues = normalizeToArray(tableState.unit);
            if (unitValues.length > 0) {
                unitValues.forEach(id => params.append('unit[]', id));
            }
            if (tableState.kategoriType && tableState.kategoriType.length > 0) {
                tableState.kategoriType.forEach(id => params.append('kategori[]', id));
            }
            if (tableState.kategoriHeader && tableState.kategoriHeader.length > 0) {
                tableState.kategoriHeader.forEach(id => params.append('kategori_header[]', id));
            }
            fetch(`/data-internal?${params.toString()}`)
            .then(response => response.json())
            .then(data => {
                    tableState.data = data?.data || [];
                    kategoriOptionCache = data?.kategori_list || kategoriOptionCache;
                    tableState.lastPage = data?.pagination?.last_page || 1;
                    tableState.total = data?.pagination?.total || 0;
                    renderKategoriHeaderOptions();
                    renderTable();
                })
                .catch(error => {
                    console.error('Error : ', error);
                    if(summaryEl) summaryEl.textContent = 'Gagal memuat data';
                })
        }

        searchBtn.addEventListener('click', applyTableSearch);
        searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    applyTableSearch();
                }
            });

        function formatTanggal(dateString) {
            const d = new Date(dateString);
            return d.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            });
        }
        renderKategoriHeaderOptions();
        fetchData()

        function updateSelectedCount(){
            if(!selectedCountEl) return;
            selectedCountEl.textContent = `${selectedIds.size} dipilih`;
            if(downloadBtn){
                downloadBtn.disabled = selectedIds.size === 0;
            }
        }

        function syncCheckAllState(){
            if(!checkAllEl) return;
            const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
            if(pageIds.length === 0){
                checkAllEl.checked = false;
                checkAllEl.indeterminate = false;
                return;
            }
            const selectedOnPage = pageIds.filter(id => selectedIds.has(id)).length;
            checkAllEl.checked = selectedOnPage === pageIds.length;
            checkAllEl.indeterminate = selectedOnPage > 0 && selectedOnPage < pageIds.length;
        }

        if(checkAllEl){
            checkAllEl.addEventListener('change', function(){
                const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
                if(this.checked){
                    pageIds.forEach(id => selectedIds.add(id));
                }else{
                    pageIds.forEach(id => selectedIds.delete(id));
                }
                renderTable();
            });
        }

        if(tbody){
            tbody.addEventListener('change', function(e){
                const checkbox = e.target.closest('.row-check');
                if(!checkbox) return;
                const id = String(checkbox.getAttribute('data-id'));
                if(checkbox.checked){
                    selectedIds.add(id);
                }else{
                    selectedIds.delete(id);
                }
                syncCheckAllState();
                updateSelectedCount();
            });
        }

        if(downloadBtn){
            downloadBtn.addEventListener('click', function(){
                if(selectedIds.size === 0){
                    return;
                }
                const payload = { ids: Array.from(selectedIds) };
                downloadBtn.disabled = true;
                downloadBtn.textContent = 'Menyiapkan...';
                fetch('/download-multiple', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify(payload)
                })
                .then(async (res) => {
                    const contentType = res.headers.get('content-type') || '';
                    if(!res.ok || contentType.includes('application/json')){
                        const err = await res.json().catch(() => ({}));
                        throw new Error(err?.message || 'Gagal download file');
                    }
                    const blob = await res.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    const disposition = res.headers.get('content-disposition') || '';
                    const match = disposition.match(/filename="?([^"]+)"?/);
                    a.href = url;
                    a.download = match?.[1] || 'files.zip';
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                })
                .catch(err => {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: err.message || 'Gagal download file' });
                })
                .finally(() => {
                    downloadBtn.disabled = selectedIds.size === 0;
                    downloadBtn.textContent = 'Download Terpilih';
                });
            });
        }



        let colCount = 1;
        $(document).ready(function() {
            $('.unit_kerja').select2({
                placeholder: '--- Pilih Unit Kerja ---',
                allowClear: true,
                width: '100%',
                ajax: {
                    url : '/select-unit-kerja-mapping',
                    dataType: 'json',
                    delay: 250,
                    data: function(params){
                        let q = '';
                        if(allAkses){
                            q = params.term;
                        }else{
                            q = authUnitKerja?.name ?? '';
                        }

                        return { q };
                    },
                    processResults: function(data){
                        let results = data?.data.map(item => ({
                            id: item.id,
                            text: item.name
                        }));
                        return { results };
                    },
                    cache: true,
                },
                minimumInputLength: 0,
            });

            $('.sub_unit_kerja').select2({
                placeholder: '-- Pilih Sub Unit Kerja --',
                allowClear: true,
                width: '100%',
            });

            let initialUnit = $('.unit_kerja').val();
            if(initialUnit){
                loadSubUnitKerja(initialUnit);
            }

            // jalankan setiap kali unit_kerja berubah
            $('.unit_kerja').on('change', function(){
                let idUnit = $(this).val();
                if(idUnit){
                    loadSubUnitKerja(idUnit);
                }
            });

            selectOptionUnitKerjaV1(0);
            initKategoriSelect2(0);
            enableAkreFields(0);
        });

        function loadSubUnitKerja(unitId){
            $('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');

            $.ajax({
                url: `/select-sub-unit-kerja-mapping/${unitId}`,
                method: 'GET',
                success: function(response) {
                    if (response?.data) {
                        response.data.forEach(unit => {
                            let selected = (authSubUnitKerja && unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk);
                            const option = new Option(unit.name, unit.id, false, selected);
                            $('.sub_unit_kerja').append(option);
                        });
                        $('.sub_unit_kerja').trigger('change');
                    }
                }
            });
        }


        function addFormV2(){
            let col = $("#col_add_fileV2");
            let html = '';

                html += `
                <div class="row g-3 align-items-start" id="col-${colCount}">
                    <hr class="my-3" />
                        <div class="col-12 d-flex justify-content-end">
                            <button type="button"
                                    class="btn btn-sm btn-danger"
                                    onclick="removeCol(${colCount})">
                                <i class="fa-solid fa-trash"></i> Hapus
                            </button>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
                            <select class="form-select"
                                    name="data[${colCount}][id_unit_kerja]"
                                    id="select_id_unit_kerja_${colCount}"
                                    required>
                                <option value="" disabled selected>Pilih Unit</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></label>
                            <select class="form-select"
                                    name="data[${colCount}][id_sub_unit_kerja]"
                                    id="select_id_sub_unit_kerja_${colCount}"
                                    required>
                                <option value="" disabled selected>Pilih Sub Unit</option>
                            </select>
                        </div>



                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Nomor Dokumen</label>
                            <div class="input-group">
                                <span class="input-group-text">#</span>
                                <input type="text"
                                    class="form-control"
                                    name="data[${colCount}][no_dokumen]"
                                    placeholder="Contoh: 001/RS/IT/I/2026">
                            </div>
                            <div class="form-text text-muted"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Nama Dokumen<span class="text-danger">*</span></label>
                            <input type="text"
                                    class="form-control"
                                    name="data[${colCount}][nama_dokumen]"
                                    placeholder="Contoh: Panduan Mencuci Tangan" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Tanggal Terbit</label>
                            <input class="form-control"
                                    type="date"
                                    name="data[${colCount}][date_active]">
                        </div>
                        <div class="col-md-3">
                            <div class="form-check">
                                <input class="form-check-input toggle-expired"
                                        type="checkbox"
                                        id="hasExpired_${colCount}"
                                        data-target="expiredField_${colCount}">
                                <label class="form-check-label" for="hasExpired_${colCount}">Masa Berlaku Dokumen??</label>
                            </div>
                        </div>

                        <div class="col-md-5" id="expiredField_${colCount}">
                            <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
                            <input class="form-control"
                                    type="date"
                                    name="data[${colCount}][tgl_expired]" disabled>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>

                            <div class="border rounded-3 p-2 bg-light">
                                    <div class="form-check">
                                    <input class="form-check-input"
                                            type="radio"
                                            name="data[${colCount}][is_permission]"
                                            id="perm_yes_${colCount}"
                                            value="1"
                                            required>
                                    <label class="form-check-label" for="perm_yes_${colCount}">Ya</label>
                                    </div>

                                    <div class="form-check mt-1">
                                    <input class="form-check-input"
                                            type="radio"
                                            name="data[${colCount}][is_permission]"
                                            id="perm_no_${colCount}"
                                            value="2"
                                            required>
                                    <label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
                                    </div>
                            </div>

                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Instrumen Akreditasi </label>
                            <select class="form-select akre-select" id="akre_select_${colCount}" name="data[${colCount}][akre]" style="width: 350px;">
                                <option value="" disabled selected>Pilih Instrumen</option>
                            </select>
                            <div class="form-text text-muted">Isi form ini bila dokumen yang diunggah merupakan dokumen <strong>akreditasi</strong>.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kategori Hukum</label>
                            <select class="form-select select-kat-hukum" name="data[${colCount}][kategori_hukum]" id="select_kategori_hukum_${colCount}" style="width: 350px;">
                                <option value="" disabled selected>Pilih Kategori Hukum</option>
                                <option value="Kebijakan - Peraturan Direktur">Kebijakan - Peraturan Direktur</option>
                                <option value="Kebijakan - Keputusan Direktur Utama">Kebijakan - Keputusan Direktur Utama</option>
                                <option value="Kebijakan - Surat Edaran">Kebijakan - Surat Edaran</option>
                                <option value="Kebijakan - Pengumuman">Kebijakan - Pengumuman</option>
                                <option value="Kerjasama - Pelayanan Kesehatan">Kerjasama - Pelayanan Kesehatan</option>
                                <option value="Kerjasama - Management">Kerjasama - Management</option>
                                <option value="Kerjasama - Pemeliharan">Kerjasama - Pemeliharan</option>
                                <option value="Kerjasama - Diklat">Kerjasama - Diklat</option>
                                <option value="Kerjasama - Luar Negeri">Kerjasama - Luar Negeri</option>
                                <option value="Kerjasama - Area Bisnis">Kerjasama - Area Bisnis</option>
                                <option value="Kerjasama - Pendidikan">Kerjasama - Pendidikan</option>
                                <option value="Kerjasama - Pengampuan KIA">Kerjasama- Pengampuan KIA</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kategori Lainnya</label>
                            <select class="form-select"
                                    name="data[${colCount}][master_kategori_directory_id]"
                                    id="select_kategori_${colCount}" style="width: 350px;">
                                <option value="" disabled selected>Pilih Kategori</option>
                                @foreach ($katDok as $kat)
                                <option value="{{ $kat->master_kategori_directory_id }}/{{ $kat->nama_kategori_directory }}">
                                    {{ $kat->nama_kategori_directory }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-12">
                            <label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>

                            <div class="border rounded-3 p-3 bg-white shadow-sm">
                                <input class="form-control"
                                    type="file"
                                    id="fileUpload_${colCount}"
                                    accept=".pdf"
                                    name="data[${colCount}][file]">
                                <div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
                            </div>

                            <div class="form-text text-muted">
                                Format yang didukung: <b>PDF</b>.
                            </div>
                </div>

            </div>
            `;
        col.append(html)
        selectOptionUnitKerjaV1(colCount)
        initKategoriSelect2(colCount)
        enableAkreFields(colCount)
        setKategoriRequired(colCount, false)
        colCount++;
}

        function removeCol(count){
            $(`#col-${count}`).remove()
        }

        function selectOptionUnitKerjaV1(colCount) {
            let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
            let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);

            // inisialisasi select2 untuk Unit Kerja
            selectUnit.select2({
                placeholder: '-- Pilih Unit Kerja --',
                allowClear:true,
                width: '100%',
                dropdownParent: selectUnit.parent(),
                ajax:{
                    url : '/select-unit-kerja-mapping',
                    dataType: 'json',
                    delay: 250,
                    data: function(params){
                        return { q: params.term }
                    },
                    processResults: function(data){
                        return {
                            results : data?.data.map(item => ({
                                id: item.id+'/'+item.name,
                                text: item.name,
                                sub_units: item.sub_unit_kerja // kirim ke front
                            }))
                        }
                    },
                    cache: true,
                },
                minimumInputLength: 0,
            });

            selectSubUnit.select2({
                    placeholder: '-- Pilih Sub Unit Kerja --',
                    allowClear: true,
                    width: '100%',
                    dropdownParent: selectSubUnit.parent()
                });

            // event ketika unit kerja dipilih
            selectUnit.on('select2:select', function (e) {
                let data = e.params.data; // data unit kerja terpilih
                selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');

                if (data.sub_units && data.sub_units.length > 0) {
                    data.sub_units.forEach(sub => {
                        selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
                    });
                }

                // aktifkan select2 untuk sub unit

            });
        }

        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 noDokumen = e.target.getAttribute('data-no_dokumen')
                let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit')
                let permissionFile = e.target.getAttribute('data-permission_file')
                let fileName = e.target.getAttribute('data-fileName')
                let pegawai_id_entry = e.target.getAttribute('data-pegawai_id_entry')


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


                const titleEl = document.getElementById('confirm_preview_file');
                if (titleEl) titleEl.textContent = fileName;

                // set footer info
                const noEl = document.getElementById('confirm-upload-dokumen');
                if (noEl) noEl.textContent = noDokumen;

                const tglEl = document.getElementById('confirm-time-dokumen');

                if (tglEl) tglEl.textContent = tanggalTerbit;

                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');
                }
                const downloadBtn = document.getElementById('btn-download');
                if (downloadBtn) {
                    downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
                }

                const deleteWrapper = document.getElementById('deleteData');

                if (Number(pegawai_id_entry) === Number(authPegawai)) {
                    deleteWrapper.remove('d-none');
                } else {
                    deleteWrapper.classList.add('d-none');
                }
                let previewBox = document.getElementById('file-preview');
                previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
                                            <div id="pdfPages"></div>
                                        </div>
                                        `;
                                        openPreview(idDirectory);

                $("#previewModal").modal('show')
            }

            if(e.target.id === 'delete-file'){
                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 => {
                            if(data.success){
                                Swal.fire({
                                    text: 'File berhasil dihapus',
                                    icon: 'success',
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                                $("#previewModal").modal("hide");
                                fetchData()
                                currentFile = null;
                                idDirectory = null;
                            }else{
                                Swal.fire({
                                    text: 'Gagal menghapus file',
                                    icon: 'error'
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err);
                            Swal.fire({
                                text: 'Terjadi error saat menghapus file ',
                                icon: 'error'
                            });
                        });
                    }
                })
            }

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

        formCreate.off('submit').on('submit', function(e){
        e.preventDefault();
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('menyimpan...')
        const formData = new FormData(this);
        console.log(formData);

        fetch(`/uploadv2`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
            },
            body: formData
        }).then(async(res) => {
            const responseData = await res.json();
            if(responseData.status){
                Toastify({
                            text: responseData.message || 'Berhasil melakukan aksi!',
                            duration: 3000,
                            gravity: "top",
                            position: "right",
                            style: {
                                background: "linear-gradient(to right, #00b09b, #96c93d)",
                                color: "#fff",
                            }
                        }).showToast();
                const modalInstance = bootstrap.Modal.getInstance(modalCreate);
                modalInstance?.hide();
                resetCreateForm();
                fetchData()
                submitBtn.prop('disabled', false).text('Simpan')
                if(responseData.status_action === null || responseData.status_action === undefined){
                    Swal.fire({
                        icon: 'info',
                        title: 'Perlu Persetujuan',
                        text: 'Dokumen yang Anda upload butuh persetujuan dari atasan. Untuk melihatnya, kunjungi halaman Pengajuan File atau klik Tutup untuk tetap di sini.',
                        showCancelButton: true,
                        confirmButtonText: 'Ke Pengajuan File',
                        cancelButtonText: 'Tutup'
                    }).then((result) => {
                        if(result.isConfirmed){
                            window.location.href = '/pengajuan-file';
                        }
                    });
                    return;
                }
            } else {
                throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
            }
        }).catch(err => {
            if (err.message) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: err.message
                });
                  submitBtn.prop('disabled', false).text('Simpan')
            }
        });
    });

    function infoDok(e){
        let fileUrl = $(e).data('file');
        let noDokumen = $(e).data('no_dokumen')
        let tanggalTerbit = $(e).data('tanggal_terbit')
        let permissionFile = $(e).data('permission_file')
        let fileName = $(e).data('fileName')
        let pegawai_id_entry = $(e).data('pegawai_id_entry')

        currentFile = fileUrl;
        idDirectory = $(e).data('id');


        const titleEl = document.getElementById('confirm_preview_file');
        if (titleEl) titleEl.textContent = fileName;

        // set footer info
        const noEl = document.getElementById('confirm-upload-dokumen');
        if (noEl) noEl.textContent = noDokumen;

        const tglEl = document.getElementById('confirm-time-dokumen');
        if (tglEl) tglEl.textContent = tanggalTerbit;

        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');
        }
        const downloadBtn = document.getElementById('btn-download');
        if (downloadBtn) {
            downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
        }
        let previewBox = document.getElementById('file-preview');
        previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
                                    <div id="pdfPages"></div>
                                </div>
                                        `;
        openPreview(idDirectory);
        const deleteWrapper = document.getElementById('deleteData');

        if (Number(pegawai_id_entry) === Number(authPegawai)) {
            deleteWrapper.classList.remove('d-none');
        } else {
            deleteWrapper.classList.add('d-none');
        }
        $("#previewModal").modal('show')
    }
    </script>
@endsection