script.js

<script>
    let steps = 1;

    document.addEventListener("DOMContentLoaded", function() {
        const currentSlug = @json($survey->slug);
        let storedSlug = localStorage.getItem('localSurveySlug');
        if (currentSlug != storedSlug) {
            localStorage.clear();
            localStorage.setItem('localSurveySlug', currentSlug);
        }

        const saveButton = document.getElementById('finish-button');

        saveButton.addEventListener('click', function() {
            const csrf = document.querySelector("input[name='_token']").value;
            const slug = localStorage.getItem('localSurveySlug');
            const survey = localStorage.getItem('surveyAnswers');
            if (slug && survey) {
                fetch(/answer/${slug}/q, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrf
                        },
                        body: JSON.stringify({
                            surveySlug: slug,
                            answerSurvey: survey
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Success:', data);
                        window.location.href = "{{ route('home.answer.end') }}";
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });
            } else {
                console.log('Data not found in localStorage');
            }
        });
    });

    function nextStep() {
        const currentStep = document.getElementById(step-${steps});
        const nextStep = document.getElementById(step-${++steps});

        if (!nextStep) return;

        currentStep.style.display = 'none';
        if (steps === {{ count($steps) }}) {
            document.getElementById('next-button').style.display = 'none';
            document.getElementById('finish-button').style.display = 'block';
        }
        nextStep.style.display = 'block';

        stepsOnChange();
        validateInput();
    }

    function prevStep() {
        const currentStep = document.getElementById(step-${steps});
        const prevStep = document.getElementById(step-${--steps});

        if (!prevStep) return;

        currentStep.style.display = 'none';
        if (steps === {{ count($steps) }} - 1) {
            document.getElementById('finish-button').style.display = 'none';
            document.getElementById('next-button').style.display = 'block';
        }
        prevStep.style.display = 'block';

        stepsOnChange();
        validateInput();
    }

    function stepsOnChange() {
        const currQuestion = document.getElementById("current-question");
        currQuestion.innerText = steps;
    }

    function validateInput() {
        const currentStepInput = document.querySelector(#step-${steps} input[type="text"]);
        const currentStepLikert = document.querySelector(#step-${steps} input[type="hidden"]);
        const currentStepChoices = document.querySelectorAll(#step-${steps} .choice-option);

        let isValid = false;

        if (currentStepInput && currentStepInput.value.trim() !== "") {
            isValid = true;
        } else if (currentStepLikert && currentStepLikert.value.trim() !== "") {
            isValid = true;
        } else if (currentStepChoices.length > 0) {
            currentStepChoices.forEach(choice => {
                if (choice.classList.contains('bg-primary')) {
                    isValid = true;
                }
            });
        }

        const isLastStep = steps === {{ count($steps) }};
        if (isLastStep && isValid) {
            document.getElementById('finish-button').disabled = false;
            document.getElementById('finish-button').classList.remove('cursor-not-allowed');
        } else {
            document.getElementById('finish-button').disabled = true;
            document.getElementById('finish-button').classList.add('cursor-not-allowed');
        }

        const nextButton = document.getElementById('next-button');
        if (isValid && !isLastStep) {
            nextButton.disabled = false;
            nextButton.classList.remove('cursor-not-allowed');
        } else {
            nextButton.disabled = true;
            nextButton.classList.add('cursor-not-allowed');
        }
    }

    function selectLikert(step, questionId, value) {
        let answers = JSON.parse(localStorage.getItem('surveyAnswers')) || {};
        answers[questionId] = {
            type: 'likert',
            value,
            questionId
        };
        localStorage.setItem('surveyAnswers', JSON.stringify(answers));
        document.getElementById(likert-value-${step}).value = value;
        validateInput();
        updateLikertSelection(step, value);
    }

    function updateLikertSelection(step, value) {
        const likertButtons = document.querySelectorAll(#likert-options-${step} button);
        likertButtons.forEach(button => {
            if (parseInt(button.dataset.likert) === parseInt(value)) {
                button.classList.add('bg-primary');
            } else {
                button.classList.remove('bg-primary');
            }
        });
    }

    function saveAnswer(type, step, questionId, value) {
        let answers = JSON.parse(localStorage.getItem('surveyAnswers')) || {};
        answers[questionId] = {
            type,
            value,
            questionId
        };
        localStorage.setItem('surveyAnswers', JSON.stringify(answers));
        if (type === 'choices') {
            document.getElementById(choices-value-${step}).value = value;
            updateChoiceSelection(step, value);
        }
        validateInput();
    }

    function updateChoiceSelection(step, value) {
        const choiceOptions = document.querySelectorAll(#step-${step} .choice-option);
        choiceOptions.forEach(option => {
            if (option.dataset.choiceId === value) {
                option.classList.add('bg-primary', 'text-white');
            } else {
                option.classList.remove('bg-primary', 'text-white');
            }
        });
    }

    function loadAnswers() {
        let answers = JSON.parse(localStorage.getItem('surveyAnswers')) || {};
        Object.keys(answers).forEach(questionId => {
            let answer = answers[questionId];
            if (answer.type === 'essay') {
                document.querySelector(#step-${steps} input[type="text"]).value = answer.value;
            } else if (answer.type === 'likert') {
                document.querySelector(#likert-value-${steps}).value = answer.value;
                updateLikertSelection(steps, answer.value);
            } else if (answer.type === 'choices') {
                document.querySelector(#choices-value-${steps}).value = answer.value;
                updateChoiceSelection(steps, answer.value);
            }
        });
        validateInput();
    }

    document.addEventListener("DOMContentLoaded", () => {
        loadAnswers();
        validateInput();
    });
</script>