sibedas/resources/js/data/umkm/form-create-update.js

import GlobalConfig from "../../global-config";

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");
    var authLogo = document.querySelector(".auth-logo");

    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) {
                // Remove existing icon (if any) before adding the new one
                if (authLogo) {
                    // Hapus ikon yang sudah ada jika ada
                    const existingIcon = authLogo.querySelector('.bx');
                    if (existingIcon) {
                        authLogo.removeChild(existingIcon);
                    }

                    // Buat ikon baru
                    const icon = document.createElement('i');
                    icon.classList.add('bx', 'bxs-check-square');
                    icon.style.fontSize = '25px';
                    icon.style.color = 'green'; // Pastikan 'green' dalam bentuk string

                    // Tambahkan ikon ke dalam auth-logo
                    authLogo.appendChild(icon);
                }

                // Set success message for the toast
                toastBody.textContent = isEdit ? "Data updated successfully!" : "Data created successfully!";
                toast.classList.add('show');  // Show the toast
                setTimeout(() => {
                    toast.classList.remove('show');  // Hide the toast after 3 seconds
                }, 3000);

                setTimeout(() => {
                    window.location.href = '/data/umkm';
                }, 3000);
            } else {
                if (authLogo) {
                    // Hapus ikon yang sudah ada jika ada
                    const existingIcon = authLogo.querySelector('.bx');
                    if (existingIcon) {
                        authLogo.removeChild(existingIcon);
                    }

                    // Buat ikon baru
                    const icon = document.createElement('i');
                    icon.classList.add('bx', 'bxs-error-alt');
                    icon.style.fontSize = '25px';
                    icon.style.color = 'red'; // Pastikan 'green' dalam bentuk string

                    // Tambahkan ikon ke dalam auth-logo
                    authLogo.appendChild(icon);
                }
                // Set error message for the toast
                toastBody.textContent = "Error: " + (data.message || "Something went wrong");
                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);
            if (authLogo) {
                // Hapus ikon yang sudah ada jika ada
                const existingIcon = authLogo.querySelector('.bx');
                if (existingIcon) {
                    authLogo.removeChild(existingIcon);
                }

                // Buat ikon baru
                const icon = document.createElement('i');
                icon.classList.add('bx', 'bxs-error-alt');
                icon.style.fontSize = '25px';
                icon.style.color = 'red'; // Pastikan 'green' dalam bentuk string

                // Tambahkan ikon ke dalam auth-logo
                authLogo.appendChild(icon);
            }
            // Set error message for the toast
            toastBody.textContent = "An error occurred while processing your request.";
            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);
        });
    });

    // Fungsi fetchOptions untuk autocomplete server-side
    window.fetchOptions = function (field) {
        let inputValue = document.getElementById(field).value;
        console.log("Query Value:", inputValue); // Debugging log
        if (inputValue.length < 2) return;
        let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih

        let url = `${GlobalConfig.apiHost}/api/combobox/search-options?query=${encodeURIComponent(inputValue)}&field=${field}`;

        // Jika field desa, tambahkan kecamatan sebagai filter
        if (field === "village_name") {
            url += `&district=${encodeURIComponent(districtValue)}`;
        }

        fetch(url, {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${document
                    .querySelector('meta[name="api-token"]')
                    .getAttribute("content")}`,
                "Content-Type": "application/json",
            }
        })
        .then(response => response.json())
        .then(data => {
            let dataList = document.getElementById(field + "Options");
            dataList.innerHTML = "";

            data.forEach(item => {
                let option = document.createElement("option");
                option.value = item.name;
                option.dataset.code = item.code;
                dataList.appendChild(option);
            });
        })
        .catch(error => console.error("Error fetching options:", error));
    };

    document.querySelector('.btn-back').addEventListener('click', function() {
        window.history.back();
    });
});