{% extends 'base.html.twig' %}

{% block title %}Hello AdminSatisfactionQuizController!{% endblock %}

{% form_theme form 'satisfaction_quiz/_collection.html.twig' %}
{% block body %}

{% include 'partials/accountNavbar.html.twig' %}
{% include 'partials/filter.html.twig' %}

<div class="container-fluid mt-5  p-5">
    <h2 class="text-secondary my-5">Votre avis nous intéresse !</h2>
    <div class="p-3  bg-white rounded-3">
        {{ form_start(form) }}
        {{ form_widget(form.satisfactionQuestions) }}
     <input type="submit"
            class="my-5 secondary-btn shadow" 
            value="Enregistrer mon evaluation">
        {{ form_end(form) }}
    </div>
    
</div>
{% endblock %}

{% block stylesheets %}
<style>
    legend { display: none; }
</style>
{% endblock %}

{% block javascripts %}
<script>
    const elemsNumber = getRatingFormElementNumber ()
    const elementsFormCollection = getHtmlElementFormCollection();

    initRatingFormElementListener ();
    setRatingDefaultValue ();

    /**
    * @Return int
    */
    function getRatingFormElementNumber ()
    {
        let ratingsElems = document.querySelectorAll('.js-rating-eval');
        return ratingsElems.length;
    }

    /**
    * @Return HtmlElementCollection
    */
    function getHtmlElementFormCollection ()
    {
        let elems = [];
        for ( let i = 0; i < elemsNumber; i++ )
        {
            for ( let j = 0; j < 4; j++ )
            {
                let elRatingID = 'edit_by_learner_satisfaction_eval_satisfactionQuestions_' + i + '_rating_' + j;
                let elRating = document.getElementById( elRatingID );
                let elCommentID = 'edit_by_learner_satisfaction_eval_satisfactionQuestions_' + i + '_comment';
                let elComment = document.getElementById( elCommentID );
                elems.push({
                    "elRating"  : elRating,
                    "elComment" : elComment
                });
            }
        }
        return elems;
    }

    /**
    * @Return void
    */
    function initRatingFormElementListener ()
    {
        elementsFormCollection.forEach(
            element => element.elRating.addEventListener('click', function () {
                ( isRatingLowerThanAverage(element) ) ? enableCommentField ( element ) : disableCommentFied ( element );
            })
        );
    }

    /**
    * @Return void
    */
    function setRatingDefaultValue ()
    {
        for ( let i = 0; i < elementsFormCollection.length; i++ )
        {
            if ( elementsFormCollection[i].elRating.value == 4 )
            {
                elementsFormCollection[i].elRating.checked = true;
            }
        }
    }

    /**
    * @Param HtmlElementCollection
    * @Return Boolean
    */
    function isRatingLowerThanAverage ( elem )
    {
        return elem.elRating.value < 3;
    }

    /**
    * @Param HtmlElementCollection
    * @Return void
    */
    function enableCommentField ( elem )
    {
        elem.elComment.classList.remove('d-none');
        elem.elComment.style.borderColor = "#325cc8";
        elem.elComment.setAttribute('required', true);
        elem.elComment.value = null;
    }

    /**
    * @Param HtmlElementCollection
    * @Return void
    */
    function disableCommentFied ( elem )
    {
        elem.elComment.style.borderColor = "#ced4da";
        elem.elComment.classList.add('d-none');
        elem.elComment.setAttribute('required', false);
        elem.elComment.value = ' ';
    }
</script>
{% endblock %}