let allFiles = [];
    document.addEventListener("DOMContentLoaded", () => {
        document.querySelectorAll(".file-input").forEach(input => {
            bindFileUpload(input);
        });
    });

    function bindFileUpload(input) {
        const dropArea = input.closest(".file-drop-area");
        const fileNameBox = dropArea.querySelector(".file-name");
        const inputId = input?.id;
        allFiles[inputId] = [];
        input.addEventListener("change", function () {
        for (let i = 0; i < this.files.length; i++) {
            allFiles[inputId].push(this.files[i]);
        }
        renderFileList(inputId, fileNameBox);
            this.value = ""; // reset agar bisa pilih file lagi
        });
    }

    function renderFileList(inputId, container) {
        const files = allFiles[inputId];
        if (!files || files.length === 0) {
            container.classList.add("d-none");
            container.innerHTML = "";
            return;
        }

        let list = "<ul class='list-unstyled mb-0'>";
        files.forEach((file, index) => {
            list += `
                <li class="d-flex justify-content-between align-items-center">
                    <span>✔ ${file.name}</span>
                    <button type="button" class="btn btn-sm btn-danger ms-2"
                            onclick="removeFile('${inputId}', ${index})">✖</button>
                </li>`;
        });
        list += "</ul>";

        container.innerHTML = list;
        container.classList.remove("d-none");
    }

    function removeFile(inputId, index) {
        allFiles[inputId].splice(index, 1);
        const container = document.querySelector(`#${inputId}`).closest(".file-drop-area").querySelector(".file-name");
        renderFileList(inputId, container);
    }

    formCreate.off('submit').on('submit', function(e){
        e.preventDefault();
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('menyimpan...')
        let hasFile =  Object.keys(allFiles).every(id => {
            console.log('fil ' , allFiles[id],' length', allFiles[id].length > 0);
            return Array.isArray(allFiles[id]) && allFiles[id].length > 0;
        });
        if(!hasFile){
            Swal.fire({
                icon: 'warning',
                title: 'Perhatian',
                text: 'Silahkan upload minimal 1 file sebelum submit'
            });
            submitBtn.prop('disabled', false).text('Simpan')
            return;
        }
        const formData = new FormData(this);
        for (const inputId in allFiles) {
            allFiles[inputId].forEach((file, index) => {
                formData.append(`data[${inputId}][file][]`, file); // gunakan inputId = name input file di HTML, misal "files[]"
            });
        }
        fetch(`/upload`, {
            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) {
                const handler = function () {
                    Toastify({
                        text: responseData.message || 'Berhasil melakukan aksi!',
                        duration: 3000,
                        gravity: "top", // bisa "bottom"
                        position: "right", // bisa "left"
                        style: {
                            background: "linear-gradient(to right, #00b09b, #96c93d)", // hijau gradasi
                            color: "#fff",
                        }
                    }).showToast();
                    allFiles = [];
                    formCreate.find('input[type="file"].file-input').each(function () {
                        const newInput = $(this).clone(); // clone dengan attribute multiple
                        $(this).replaceWith(newInput);    // ganti input lama dengan baru
                        bindFileUpload(newInput[0])
                        // console.log(newInput);

                    });
                    colCount = 1;
                    $("#col_add_file").html('')
                    formCreate.find('select').val(null).trigger('change');
                    document.querySelectorAll(".file-name").forEach(el => {
                        el.classList.add("d-none");
                        el.innerHTML = "";
                    });

                    if($("#klasifikasi_dok").val().length === 0 || $("#kategori_dok").val().length === 0 ){
                        index()
                    }else{
                        searchData()
                    }
                    submitBtn.prop('disabled', false).text('Simpan')
                    modalCreate.removeEventListener('hidden.bs.modal', handler);
                };
                modalCreate.addEventListener('hidden.bs.modal', handler);
                bootstrap.Modal.getInstance(modalCreate).hide();
            } 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...')
            }
        });
    });