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

    return `
        <ul class="file-tree-ul">
            ${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">
                                            ${katDok.map(kat => `
                                                <li class="folder file-tree-li">
                                                    <span>📂 ${kat.nama_kategori_directory}</span>
                                                    <ul class="file-tree-ul">
                                                        ${Array.isArray(sub.file_directory) && sub.file_directory.length > 0 ? `
                                                            ${sub.file_directory.map(file => `
                                                                    ${kat.master_kategori_directory_id === file.master_kategori_directory_id ? `
                                                                        <li class="file-tree-li ms-2">
                                                                        📄 <a href="/file/${file.file}" target="_blank" rel="noopener noreferrer">${file.file}</a>
                                                                        </li>
                                                                        ` : ''}

                                                                `).join('')}
                                                            ` : ''}
                                                        <li class="file-tree-li ms-2">
                                                            <button class="add-file-btn btn btn-sm btn-primary ms-2 btn-transaparent"
                                                                onclick="addFile(this)"
                                                                data-id_unit_kerja="${el.id}"
                                                                data-nama_unit_kerja="${el.name || 'tidak_ada'}"
                                                                data-id_sub_unit_kerja="${sub?.id}"
                                                                data-nama_sub_unit_kerja="${sub?.name || 'tidak_ada'}"
                                                                data-id_kategori="${kat?.master_kategori_directory_id}"
                                                                data-nama_kategori="${kat?.nama_kategori_directory}">
                                                                ➕ Add File
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </li>
                                            `).join('')}
                                        </ul>
                                    ` : ''}
                                </li>
                            `).join('')}
                        </ul>
                    ` : ''}
                </li>
            `).join('')}
        </ul>
    `;
}

function index() {
    fetch('/data-unit-kerja')
        .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:red">Terdapat kesalahan pada server</p>';
            }
        })
        .catch(error => console.error('Error : ', error));
}

index();

function addFile(el){
    let id_unit_kerja =$(el).data('id_unit_kerja')
    let nama_unit_kerja =$(el).data('nama_unit_kerja')
    let id_sub_unit_kerja =$(el).data('id_sub_unit_kerja')
    let nama_sub_unit_kerja =$(el).data('nama_sub_unit_kerja')
    let id_kategori =$(el).data('id_kategori')
    let nama_kategori =$(el).data('nama_kategori')

    $("#id_unit_kerja").val(id_unit_kerja)
    $("#id_sub_unit_kerja").val(id_sub_unit_kerja)
    $("#master_kategori_directory_id").val(id_kategori)
    $("#confirm_location_file").html(`Unit Kerja : <b>${nama_unit_kerja}</b> / Sub Unit Kerja : <b>${nama_sub_unit_kerja}</b> / Kategori : <b>${nama_kategori}</b>`)
    new bootstrap.Modal(modalCreate).show();


}