{% extends 'front-end-base.html.twig' %}

{% block title %} {{ page_title|default('Survey Questionnaire') }} {% endblock %}

{% block body %}

    <!-- ======= Single Blog Section ======= -->
    <section class="hero-section inner-page">
        <div class="wave">

            <svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                        <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
                    </g>
                </g>
            </svg>

        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">

                    {% if widgets is defined and widgets['survey_questionnaire_page_description'] is defined  and widgets['survey_questionnaire_page_description']|length > 0 %}
                        {% for widget in widgets['survey_questionnaire_page_description'] %}

                            <div class="row justify-content-center">
                                <div class="col-md-10 text-center hero-text">
                                    <h1 data-aos="fade-up" data-aos-delay="">{{ widget.title }}</h1>
                                    <p class="mb-5" data-aos="fade-up" data-aos-delay="100">{{ widget.content|raw }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="row justify-content-center">
                            <div class="col-md-10 text-center hero-text">
                                <h1 data-aos="fade-up" data-aos-delay="">Survey Questionnaire</h1>
                                <p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

    </section>

    <section class="section">
        <div class="container">
            <div class="row mb-5 align-items-end">
                <div class="col-md-6" data-aos="fade-up">
                    <h2>{{ survey }}</h2>
                    <p class="mb-0">Please complete the below survey.</p>
                </div>

            </div>

            <div class="row">
                <div class="col-md-4 ms-auto order-2 aos-init aos-animate" data-aos="fade-up">

                </div>

                <div class="col-md-6 mb-5 mb-md-0 aos-init aos-animate" data-aos="fade-up">

                    <div id="survey-alert" class="d-none alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Success!</strong> Survey completed successfully. Thank you.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>

                    <div class="quiz-container mb-4">
                        <div id="quiz"></div>
                        <br/>
                    </div>
                    <button class="btn btn-secondary rounded-0" id="previous">Previous Question</button>
                    <button class="btn btn-primary rounded-0" id="next">Next Question</button>
                    <button class="btn btn-success rounded-0" id="submit">Submit Quiz</button>
                    <div id="results"></div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
            (function(){
                let buildQuiz = () => {
                    const output = [];
                    myQuestions.forEach(
                        (currentQuestion, questionNumber) => {
                            const answers = [];

                            for(letter in currentQuestion.answers){
                                answers.push(
                                    `<label>
                                        <input type="radio" name="question${questionNumber}" value="${letter}">
                                        ${currentQuestion.answers[letter]}
                                    </label>`
                                );
                            }

                            output.push(
                                `<div class="slide">
                                    <div class="question"> ${currentQuestion.question} </div>
                                    <div class="answers"> ${answers.join("")} </div>
                                </div>`
                            );
                        }
                    );
                    quizContainer.innerHTML = output.join('');
                }

                let showResults = () => {

                    const answerContainers = quizContainer.querySelectorAll('.answers');
                    let userSurveyAnswers = {};
                    let numCorrect = 0;
                    myQuestions.forEach( (currentQuestion, questionNumber) => {

                        const answerContainer = answerContainers[questionNumber];
                        const selector = `input[name=question${questionNumber}]:checked`;
                        userSurveyAnswers[currentQuestion.question_id] = (answerContainer.querySelector(selector) || {}).value;
                    });

                    let saveUrl = "{{ path('save_user_survey_questionnaire') }}";
                    $.post(saveUrl, {survey_answers:userSurveyAnswers}, function(response){

                    }, 'json');

                    $('#survey-alert').removeClass('d-none');
                    $('#quiz').empty();

                    // resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
                }

                let showSlide = (n) => {
                    slides[currentSlide].classList.remove('active-slide');
                    slides[n].classList.add('active-slide');
                    currentSlide = n;
                    if(currentSlide === 0){
                        previousButton.style.display = 'none';
                    }
                    else{
                        previousButton.style.display = 'inline-block';
                    }
                    if(currentSlide === slides.length-1){
                        nextButton.style.display = 'none';
                        submitButton.style.display = 'inline-block';
                    }
                    else{
                        nextButton.style.display = 'inline-block';
                        submitButton.style.display = 'none';
                    }
                }

                let showNextSlide = () => {
                    showSlide(currentSlide + 1);
                }

                let showPreviousSlide = () => {
                    showSlide(currentSlide - 1);
                }

                // Variables
                const quizContainer = document.getElementById('quiz');
                const resultsContainer = document.getElementById('results');
                const submitButton = document.getElementById('submit');
                const myQuestions =  {{ surveyStructure|json_encode()|raw }};

                buildQuiz();

                // Pagination
                const previousButton = document.getElementById("previous");
                const nextButton = document.getElementById("next");
                const slides = document.querySelectorAll(".slide");
                let currentSlide = 0;

                showSlide(currentSlide);

                submitButton.addEventListener('click', showResults);
                previousButton.addEventListener("click", showPreviousSlide);
                nextButton.addEventListener("click", showNextSlide);
            })();
    </script>
{% endblock %}