document.addEventListener("DOMContentLoaded", function () {
    const saveButton = document.querySelector(".modal-footer .btn-primary");
    const modalButton = document.querySelector(".btn-modal");
    const form = document.querySelector("form#create-update-form"); 

    if (!saveButton || !form) return;

    saveButton.addEventListener("click", function () {
        // Disable tombol dan tampilkan spinner
        modalButton.disabled = true;
        modalButton.innerHTML = `
            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
            Loading...
        `;
        const isEdit = saveButton.classList.contains("btn-edit");
        const formData = new FormData(form)
        const toast = document.getElementById('toastEditUpdate');
        const toastBody = toast.querySelector('.toast-body');
        const toastHeader = toast.querySelector('.toast-header small');

        const data = {};

        // Mengonversi FormData ke dalam JSON
        formData.forEach((value, key) => {
            data[key] = value;
        });
        
        // Log semua data dalam FormData
        for (let pair of formData.entries()) {
            console.log(pair[0] + ": " + pair[1]);
        }
        const url = form.getAttribute("action");
        console.log("Ini adalah url dari form action", url);
        
        const method = isEdit ? "PUT" : "POST";

        fetch(url, {
            method: method,
            body: JSON.stringify(data),
            headers: {
                Authorization: `Bearer ${document
                    .querySelector('meta[name="api-token"]')
                    .getAttribute("content")}`,
                "Content-Type": "application/json",
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log("Response data:", data);
            if (!data.errors) {
                // Set success message for the toast
                toastBody.textContent = isEdit ? "Data updated successfully!" : "Data created successfully!";
                toastHeader.textContent = "Just now";
                toast.classList.add('show');  // Show the toast
                setTimeout(() => {
                    toast.classList.remove('show');  // Hide the toast after 3 seconds
                }, 3000);
                
                setTimeout(() => {
                    window.location.reload();
                }, 3000);
            } else {
                // Set error message for the toast
                toastBody.textContent = "Error: " + (responseData.message || "Something went wrong");
                toastHeader.textContent = "Error occurred";
                toast.classList.add('show');  // Show the toast

                // Enable button and reset its text on error
                modalButton.disabled = false;
                modalButton.innerHTML = isEdit ? "Update" : "Create"; 

                setTimeout(() => {
                    toast.classList.remove('show');  // Hide the toast after 3 seconds
                }, 3000);
            }
        })
        .catch(error => {
            console.error("Error:", error);
            // Set error message for the toast
            toastBody.textContent = "An error occurred while processing your request.";
            toastHeader.textContent = "Error occurred";
            toast.classList.add('show');  // Show the toast

            // Enable button and reset its text on error
            modalButton.disabled = false;
            modalButton.innerHTML = isEdit ? "Update" : "Create"; 

            setTimeout(() => {
                toast.classList.remove('show');  // Hide the toast after 3 seconds
            }, 3000);
        });
    });
});