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

    function bindFileUpload(input) {
        const fileNameBox = input.closest(".border")?.querySelector(".file-name") || input.closest(".file-drop-area")?.querySelector(".file-name");
        input.addEventListener("change", function () {
            if (!fileNameBox) return;
            const file = this.files[0];
            if (file) {
                fileNameBox.textContent = `✔ ${file.name}`;
                fileNameBox.classList.remove("d-none");
            } else {
                fileNameBox.textContent = '';
                fileNameBox.classList.add("d-none");
            }
        });
    }

    function resetCreateForm(){
        colCount = 1;
        $("#col_add_file").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('');
        formCreate.find('input[type="radio"]').prop('checked', false);
        // rebind initial input
        document.querySelectorAll(".file-input").forEach(bindFileUpload);
    }

    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);

        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();

                resetCreateForm();

                const kategoriVal    = $("#kategori_dok").val() || [];

                if(kategoriVal.length === 0){
                        index()
                }else{
                        searchData()
                }
                submitBtn.prop('disabled', false).text('Simpan')
                const modalInstance = bootstrap.Modal.getInstance(modalCreate);
                modalInstance?.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')
            }
        });
    });