36741-vm/assets/js/questionnaire.js

document.addEventListener('DOMContentLoaded', () => {
    const screens = Array.from(document.querySelectorAll('.screen'));
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    const progressContainer = document.querySelector('.progress-container');
    const form = document.getElementById('questionnaire-form');
    const totalQuestions = 15; // Only count the actual questions

    let currentScreenIndex = 0;

    // --- Core Navigation ---
    window.startQuestionnaire = () => {
        const welcomeScreen = document.getElementById('welcome-screen');
        const firstQuestion = document.getElementById('question-1');
        if (welcomeScreen) welcomeScreen.classList.remove('active');
        if (firstQuestion) firstQuestion.classList.add('active');
        currentScreenIndex = screens.indexOf(firstQuestion);
        progressContainer.style.display = 'flex';
        updateProgress();
    };

    window.navigate = (direction) => {
        if (direction > 0 && !validateCurrentScreen()) {
            // You can add a user-facing warning here if you like
            console.warn("Validation failed for the current screen.");
            return;
        }

        const nextIndex = currentScreenIndex + direction;
        if (nextIndex >= 0 && nextIndex < screens.length) {
            screens[currentScreenIndex].classList.remove('active');
            currentScreenIndex = nextIndex;
            screens[currentScreenIndex].classList.add('active');
            updateProgress();
        }
    };

    const updateProgress = () => {
        const activeScreen = screens[currentScreenIndex];
        let currentQuestionNumber = 0;

        if (activeScreen && activeScreen.dataset.questionId) {
            const id = parseInt(activeScreen.dataset.questionId);
            if (id <= totalQuestions) {
                currentQuestionNumber = id;
            } else {
                // For email/consent screens, show progress as 15/15
                currentQuestionNumber = totalQuestions;
            }
        } else if (activeScreen.id === 'welcome-screen') {
             currentQuestionNumber = 0;
        }
        
        const progressPercentage = (currentQuestionNumber / totalQuestions) * 100;
        progressBar.style.width = `${progressPercentage}%`;
        progressText.textContent = currentQuestionNumber;
    };

    const validateCurrentScreen = () => {
        const activeScreen = screens[currentScreenIndex];
        const questionId = activeScreen.dataset.questionId;

        // No validation needed for welcome screen or thank you screen
        if (!questionId) return true;

        if (questionId <= totalQuestions) {
            const inputs = activeScreen.querySelectorAll('input, textarea');
            if (inputs.length === 0) return true;

            if (inputs[0].type === 'radio' || inputs[0].type === 'checkbox') {
                return Array.from(inputs).some(input => input.checked);
            }
            return inputs[0].value.trim() !== '';
        }

        if (questionId == 16) { // Email screen
            const emailInput = document.getElementById('email-input');
            // Basic regex for email validation
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailInput && emailInput.value.trim() !== '' && emailRegex.test(emailInput.value);
        }

        if (questionId == 17) { // Consent screen
            const consentCheckbox = document.getElementById('consent-checkbox');
            return consentCheckbox && consentCheckbox.checked;
        }

        return true;
    };

    document.querySelectorAll('input.auto-advance').forEach(input => {
        input.addEventListener('change', () => {
            if (input.checked) {
                setTimeout(() => navigate(1), 300);
            }
        });
    });

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (!validateCurrentScreen()) {
            alert('Bitte überprüfen Sie Ihre Eingabe und stimmen Sie den Datenschutzbestimmungen zu.');
            return;
        }

        const submitButton = form.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.textContent = 'Wird gesendet...';

        const formData = new FormData(form);

        fetch('submit.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show thank you screen
                const thankYouScreen = document.getElementById('thank-you-screen');
                screens[currentScreenIndex].classList.remove('active');
                if(thankYouScreen) {
                    thankYouScreen.classList.add('active');
                    currentScreenIndex = screens.indexOf(thankYouScreen);
                    progressContainer.style.display = 'none'; // Hide progress on thank you
                }
            } else {
                alert('Fehler: ' + data.error);
                submitButton.disabled = false;
                submitButton.textContent = 'Absenden & Report erhalten →';
            }
        })
        .catch(error => {
            console.error('Fetch Error:', error);
            alert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
            submitButton.disabled = false;
            submitButton.textContent = 'Absenden & Report erhalten →';
        });
    });

    // Initial setup
    const firstScreen = document.getElementById('welcome-screen');
    if(firstScreen) {
         currentScreenIndex = screens.indexOf(firstScreen);
         firstScreen.classList.add('active');
    } else {
        screens[0].classList.add('active');
    }
    progressContainer.style.display = 'none';
    updateProgress();
});