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

    const questions = form.querySelectorAll('.question-card');
    const progressBar = document.querySelector('.progress-bar');
    const submitBtn = form.querySelector('button[type="submit"]');
    const totalQuestions = questions.length;

    function updateProgress() {
        let answeredQuestions = 0;
        questions.forEach(card => {
            const inputs = card.querySelectorAll('input, textarea');
            let isAnswered = false;
            inputs.forEach(input => {
                if ((input.type === 'radio' || input.type === 'checkbox') && input.checked) {
                    isAnswered = true;
                } else if (input.type !== 'radio' && input.type !== 'checkbox' && input.value.trim() !== '') {
                    isAnswered = true;
                }
            });
            if (isAnswered) {
                answeredQuestions++;
            }
        });

        const progress = totalQuestions > 0 ? (answeredQuestions / totalQuestions) * 100 : 0;
        if(progressBar) {
            progressBar.style.width = progress + '%';
            progressBar.setAttribute('aria-valuenow', progress);
        }
    }

    form.addEventListener('change', updateProgress);
    form.addEventListener('keyup', updateProgress);

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        showToast('Submission Successful!', 'Thank you for completing the survey. Your response has been recorded.');
        if(submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Submitted';
        }
        // In a real app, you would now send the data to the server.
        // e.g., using fetch()
    });

    function showToast(title, message) {
        const toastContainer = document.getElementById('toast-container');
        if (!toastContainer) return;

        const toastEl = document.createElement('div');
        toastEl.className = 'toast align-items-center text-white bg-success border-0';
        toastEl.setAttribute('role', 'alert');
        toastEl.setAttribute('aria-live', 'assertive');
        toastEl.setAttribute('aria-atomic', 'true');

        toastEl.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    <strong>${title}</strong><br>${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        `;

        toastContainer.appendChild(toastEl);

        const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
        toast.show();

        toastEl.addEventListener('hidden.bs.toast', () => {
            toastEl.remove();
        });
    }

    // Initial check in case the form is pre-filled
    updateProgress();
});