document.addEventListener('DOMContentLoaded', function () {
    const surveyForm = document.getElementById('survey-form');
    if (!surveyForm) return;

    const steps = Array.from(surveyForm.querySelectorAll('.step'));
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const submitBtn = document.getElementById('submitBtn');
    const progressBar = surveyForm.querySelector('.progress-bar');
    let currentStep = 0;

    function showStep(stepIndex) {
        steps.forEach((step, index) => {
            step.classList.toggle('active', index === stepIndex);
        });
        updateProgressBar();
        updateButtons();
    }

    function updateProgressBar() {
        const progress = ((currentStep + 1) / steps.length) * 100;
        progressBar.style.width = progress + '%';
        progressBar.setAttribute('aria-valuenow', progress);
    }

    function updateButtons() {
        prevBtn.style.display = currentStep === 0 ? 'none' : 'inline-block';
        nextBtn.style.display = currentStep === steps.length - 1 ? 'none' : 'inline-block';
        submitBtn.style.display = currentStep === steps.length - 1 ? 'inline-block' : 'none';
    }

    function validateStep(stepIndex) {
        const currentStepElement = steps[stepIndex];
        const inputs = Array.from(currentStepElement.querySelectorAll('input, textarea'));
        let isValid = true;

        inputs.forEach(input => {
            if (input.hasAttribute('required')) {
                if (input.type === 'radio' || input.type === 'checkbox') {
                    const name = input.name;
                    if (!surveyForm.querySelector(`input[name="${name}"]:checked`)) {
                        isValid = false;
                    }
                } else if (!input.value.trim()) {
                    isValid = false;
                }
            }
        });

        return isValid;
    }

    nextBtn.addEventListener('click', () => {
        if (!validateStep(currentStep)) {
            alert('Please answer the question before proceeding.');
            return;
        }

        if (currentStep < steps.length - 1) {
            currentStep++;
            showStep(currentStep);
        }
    });

    prevBtn.addEventListener('click', () => {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
        }
    });

    showStep(currentStep);

    const successMessage = document.getElementById('success-message');
    const formContainer = document.querySelector('.form-container');

    surveyForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const formData = new FormData(this);
        const emailInput = document.getElementById('email');
        if (emailInput) {
            formData.append('email', emailInput.value);
        }

        fetch('submit_feedback.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (formContainer) {
                    formContainer.classList.add('hidden');
                }
                if (successMessage) {
                    successMessage.classList.remove('hidden');
                }
            } else {
                alert('An error occurred: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('A server error occurred. Please try again later.');
        });
    });

    function validateEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }
});