function renderTree(units, katDok) {
    if (!Array.isArray(units)) return '';

   return `
    <button type="button" class="btn btn-sm btn-primary" onclick="referesh()"><i class="fas fa-sync-alt"></i></button>
    <ul class="file-tree-ul mt-3">
        ${units.map(el => `
        <li class="file-tree-li folder">
            <span class="fw-bolder">📂 ${el.name}</span>

            ${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
            <ul class="file-tree-ul mt-1 ms-2">
                ${el.sub_unit_kerja.map(sub => `
                <li class="file-tree-li folder">
                    <span class="fw-semibold">📂 ${sub.name}</span>

                    ${Array.isArray(katDok) && katDok.length > 0 ? `
                    <ul class="file-tree-ul ms-2">
                        ${katDok.map(kat => {
                        // filter file sesuai kategori
                        const files = (sub.file_directory || []).filter(
                            file => file.master_kategori_directory_id === kat.master_kategori_directory_id
                        );

                        if (!files.length) return '';

                        return `
                            <li class="file-tree-li folder">
                            <span>📂 ${kat.nama_kategori_directory}</span>
                                <ul class="file-tree-ul ms-2">
                                    ${files.map(file => `
                                    <li class="file-tree-li">
                                        📄 <a href="#" class="file-link" data-file="${file.file}" data-id="${file?.file_directory_id}">
                                        ${file.file} - <strong>(${file?.klasifikasi?.nama_klasifikasi_directory})</strong>
                                        </a>
                                    </li>
                                    `).join('')}
                                </ul>
                            </li>
                        `;
                        }).join('')}
                    </ul>
                    ` : ''}
                </li>
                `).join('')}
            </ul>
            ` : ''}
        </li>
        `).join('')}
    </ul>
    `;
}

function index(kategori_dok = [], unitKerja = [], subUnitKerja = [], klasifikasi_id = []) {
    const params = new URLSearchParams();
    console.log(kategori_dok, unitKerja, subUnitKerja);

    if (kategori_dok.length)   params.append("kategori", kategori_dok);
    if (unitKerja.length)      params.append("unitKerja", unitKerja);
    if (subUnitKerja.length)   params.append("subUnit", subUnitKerja);
    if (klasifikasi_id.length) params.append("klasifikasi", klasifikasi_id);

    fetch(`/data-unit-kerja?${params.toString()}`)
        .then(response => response.json())
        .then(data => {
            let file_tree = document.getElementById("file_tree");
            file_tree.innerHTML = '';

            if (Array.isArray(data?.data?.unitKerja)) {
                file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);
                // Toggle buka/tutup folder
                file_tree.querySelectorAll(".folder > span").forEach(span => {
                    span.addEventListener("click", () => {
                        let li = span.parentElement;
                        li.classList.toggle("collapsed");
                        // Ganti ikon 📂 <-> 📁
                        if (li.classList.contains("collapsed")) {
                            span.textContent = span.textContent.replace("📂", "📁");
                        } else {
                            span.textContent = span.textContent.replace("📁", "📂");
                        }
                    });
                });
            } else {
                file_tree.innerHTML = '<p style="color:primary">Silakan lakukan pencarian terlebih dahulu untuk menampilkan data</p>';
            }
        })
        .catch(error => console.error('Error : ', error));
}

index();

function referesh(){
    index()
}
function searchData(){
    let klasifikasi_id = $("#klasifikasi_dok").val()
    let kategori_dok = $("#kategori_dok").val()
    let unitKerja = $("#unit_kerja").val()
    let subUnitKerja = $("#sub_unit_kerja").val()
    if( klasifikasi_id.length === 0 ||
        kategori_dok.length === 0 ||
        unitKerja.length === 0 ||
        subUnitKerja.length === 0){
        Swal.fire({
            text: 'Lengkapi Isi form pencarian',
            icon: 'warning'
        })
        return
    }

   index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
}