document.addEventListener("DOMContentLoaded", function () {
    const steps = document.querySelectorAll(".step");
    let currentStep = 0;

    // Toon de huidige stap
    function showStep(index) {
        steps.forEach((step, idx) => {
            step.style.display = idx === index ? "block" : "none";
        });
    }

    // Valideer invoervelden in een stap
    function validateFields(step) {
        const inputs = step.querySelectorAll("input[required]");
        return Array.from(inputs).every((input) => input.value.trim() !== "");
    }

    // Controleer de status van de "Volgende" knop
    function updateNextButtonStatus(step, nextBtn, switchEl) {
        const fieldsValid = validateFields(step);
        const switchChecked = switchEl.checked;
        nextBtn.disabled = !switchChecked; // Blijft uitgeschakeld tenzij de switch is ingeschakeld
    }

    // Toon pop-up waarschuwing
    function showValidationPopup() {
        const popup = new bootstrap.Modal(document.getElementById('validationModal'));
        popup.show();
    }

    // Zorg ervoor dat elke switch en invoerveld alleen de juiste knop bedient
    function initializeValidation() {
        steps.forEach((step, idx) => {
            const switchEl = step.querySelector(`#switch${idx + 1}`);
            const nextBtn = step.querySelector(".next-btn");
            const icon = step.querySelector(`#icon${idx + 1}`);
            const inputs = step.querySelectorAll("input[required]");

            if (switchEl && nextBtn) {
                // Controleer de status bij het laden
                updateNextButtonStatus(step, nextBtn, switchEl);

                // Controleer op veranderingen in de invoervelden
                inputs.forEach((input) => {
                    input.addEventListener("input", () => {
                        updateNextButtonStatus(step, nextBtn, switchEl);
                    });
                });

                // Controleer op veranderingen in de switch
                switchEl.addEventListener("change", () => {
                    if (switchEl.checked) {
                        icon?.classList.remove("d-none");
                    } else {
                        icon?.classList.add("d-none");
                    }
                    updateNextButtonStatus(step, nextBtn, switchEl);
                });

                // Toon pop-up en blokkeer navigatie als niet alles is ingevuld
                nextBtn.addEventListener("click", (event) => {
                    if (!validateFields(step)) {
                        event.preventDefault();
                        showValidationPopup();
                    } else if (currentStep < steps.length - 1) {
                        currentStep++;
                        showStep(currentStep);
                    }
                });
            }
        });
    }

    // Vorige knop functionaliteit
    function initializePrevButtons() {
        steps.forEach((step, idx) => {
            const prevBtn = step.querySelector(".prev-btn");
            if (prevBtn) {
                prevBtn.addEventListener("click", () => {
                    if (currentStep > 0) {
                        currentStep--;
                        showStep(currentStep);
                    }
                });
            }
        });
    }

    // Initialize alles
    showStep(currentStep); // Toon de eerste stap bij het laden van de pagina
    initializeValidation(); // Valideer invoervelden en switches
    initializePrevButtons(); // Zet "Vorige" knoppen correct
});