document.addEventListener('DOMContentLoaded', function () {
    const surveyForm = document.getElementById('surveyForm');
    const formMessages = document.getElementById('form-messages');

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

            // --- Client-side validation ---
            const satisfaction = surveyForm.querySelector('input[name="satisfaction"]:checked');
            if (!satisfaction) {
                displayMessage('Please select a satisfaction level.', 'danger');
                return;
            }
            
            const formData = new FormData(surveyForm);
            const submitButton = surveyForm.querySelector('button[type="submit"]');
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...';

            fetch('submit.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayMessage(data.message, 'success');
                    // Redirect to thank-you page after a short delay
                    setTimeout(() => {
                        window.location.href = 'thank-you.php';
                    }, 1500);
                } else {
                    displayMessage(data.message || 'An unexpected error occurred.', 'danger');
                    submitButton.disabled = false;
                    submitButton.textContent = 'Submit Feedback';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                displayMessage('A network error occurred. Please try again.', 'danger');
                submitButton.disabled = false;
                submitButton.textContent = 'Submit Feedback';
            });
        });
    }

    function displayMessage(message, type) {
        if (formMessages) {
            formMessages.innerHTML = `<div class="alert alert-${type}" role="alert">${message}</div>`;
        }
    }
});