document.addEventListener("DOMContentLoaded", function () {

    const form = document.getElementById("formUlasan");
    const pekerjaan = document.getElementById("pekerjaan");
    const pekerjaanLainnya = document.getElementById("pekerjaanLainnya");
    const successMsg = document.getElementById("successMsg");

    pekerjaan.addEventListener("change", function () {
        if (this.value === "lainnya") {
            pekerjaanLainnya.classList.remove("d-none");
        } else {
            pekerjaanLainnya.classList.add("d-none");
            pekerjaanLainnya.value = "";
        }
    });

    document.querySelectorAll("input, select, textarea").forEach(el => {
        el.addEventListener("input", function () {
            const container = this.closest(".mb-3, .mb-4");
            const errorMsg = container?.querySelector(".error-msg");

            this.classList.remove("is-invalid");
            if (errorMsg) errorMsg.classList.add("d-none");
        });
    });

    document.querySelectorAll("input[type=radio]").forEach(input => {
        input.addEventListener("change", function () {
            const card = this.closest(".question-card");
            const errorMsg = card.querySelector(".error-msg");

            card.classList.remove("border", "border-danger");
            errorMsg.classList.add("d-none");
        });
    });

    form.addEventListener("submit", function (e) {
        e.preventDefault();

        let isValid = true;
        const penilaian = {};

        ["gender", "usia", "pendidikan", "pekerjaan", "saran", "ulasan"].forEach(id => {
            const el = document.getElementById(id);
            const container = el.closest(".mb-3, .mb-4");
            const errorMsg = container.querySelector(".error-msg");

            if (!el.value.trim()) {
                isValid = false;
                el.classList.add("is-invalid");
                errorMsg.classList.remove("d-none");
            }
        });

        if (pekerjaan.value === "lainnya" && !pekerjaanLainnya.value.trim()) {
            isValid = false;
            pekerjaanLainnya.classList.add("is-invalid");
        }

        document.querySelectorAll(".question-card").forEach(card => {
            const checked = card.querySelector("input:checked");
            const errorMsg = card.querySelector(".error-msg");

            if (!checked) {
                isValid = false;
                card.classList.add("border", "border-danger");
                errorMsg.classList.remove("d-none");
            } else {
                const input = card.querySelector("input:checked");
                penilaian[input.name] = Number(input.value);
            }
        });

        if (!isValid) return;

        const data = {
            gender: document.getElementById("gender").value,
            usia: Number(document.getElementById("usia").value),
            pendidikan: document.getElementById("pendidikan").value,
            pekerjaan: pekerjaan.value === "lainnya"
                ? pekerjaanLainnya.value
                : pekerjaan.value,
            saran: document.getElementById("saran").value,
            ulasan: document.getElementById("ulasan").value,
            penilaian: penilaian
        };

        console.log("DATA FINAL:", data);

        form.reset();
        pekerjaanLainnya.classList.add("d-none");

        successMsg.classList.remove("d-none");

        setTimeout(() => {
            successMsg.classList.add("d-none");
        }, 3000);
    });

});