{% extends "frontoffice/layout.html.twig" %}

{% block page_title %}{{ site_titre }} - Auto-évaluation étudiant{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block main_class %}main-page etudiant{% endblock %}

{% block content %}

    {% include "frontoffice/etudiant/_bandeau_infos_etudiant.html.twig" %}

    <div class="content-tabs">
        <h3>UNITÉ D’ENSEIGNEMENT : {{ ue.fullLibelle }}</h3>

        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#competences">ÉVALUATIONS DES COMPÉTENCES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#commentaires">COMMENTAIRES / AXES D’AMÉLIORATION</a>
            </li>
            <li class="nav-resulta d-none d-lg-block">Résultat</li>
        </ul>

        <div class="tab-content">
            <form id="form_auto_eval" action="{{ path('save_auto_eval', {'slug': ue.slug}) }}" method="post">
                <input type="hidden" name="session" value="{{ session.id }}">
                <input type="hidden" name="ue" value="{{ ue.id }}">

                {% include "frontoffice/etudiant/_tab_competences.html.twig" %}

                {% include "frontoffice/etudiant/_tab_commentaires.html.twig" %}

            </form>
        </div>
    </div>


    {# <div class="btn-group justify-content-end" role="group" aria-label="">
        <!--<button type="button" class="btn btn-back">Précédent</button>-->
        <button type="button" class="btn btn-valider">Suivant</button>
    </div> #}

{% endblock %}

{% block javascripts %}
<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script>
    $(document).ready(function() {

        {# ! https://codepen.io/mukealicious/pen/ryLpRW #}
        function makeSlider($element, $tooltip, sliderStates) {

            var currentState;
            var $handle;

            $element
                .rangeslider({
                    polyfill: false,
                    onInit: function() {
                        $handle = $('.rangeslider__handle', this.$range);
                        updateHandle($handle[0], this.value);
                        updateState($handle[0], this.value);
                    }
                })
                .on('input', function() {
                    updateHandle($handle[0], this.value);
                    checkState($handle[0], this.value);
                });

            // Update the value inside the slider handle
            function updateHandle(el, val) {
                el.textContent = val;
            }

            // Check if the slider state has changed
            function checkState(el, val) {
                // if the value does not fall in the range of the current state, update that shit.
                if (!_.contains(currentState.range, parseInt(val))) {
                    updateState(el, val);
                }
            }

            // Change the state of the slider
            function updateState(el, val) {
                for (var j = 0; j < sliderStates.length; j++){
                    if (_.contains(sliderStates[j].range, parseInt(val))) {
                        currentState = sliderStates[j];
                        // updateSlider();
                    }
                }
                // If the state is high, update the handle count to read 50+
                if (currentState.name == "high") {
                    updateHandle($handle[0], "50+");
                }
                // Update handle color
                $handle
                    .removeClass (function (index, css) {
                        return (css.match (/(^|\s)js-\S+/g) ||   []).join(' ');
                    })
                    .addClass("js-" + currentState.name);
                // Update tooltip
                $tooltip.html(currentState.tooltip);
            }

            $handle.hover(function() {
                $tooltip.toggleClass("visible");
            });
        }


        {% for groupe in groupes_competences %}
            {% for competence in groupe.competences %}

                var $slider = $('#customRange'+ {{ competence.id }});
                var $tooltip = $('#range-tooltip'+ {{ competence.id }});
                var sliderStates = [
                    {name: "null", tooltip: "Connaissances insuffisantes<br><br>{{ competence.tooltipRed }}", range: _.range(-5, 25) },
                    {name: "low", tooltip: "Connaissances déclaratives<br><br>{{ competence.tooltipOrange }}", range: _.range(25, 50) },
                    {name: "med", tooltip: "Habiletés<br><br>{{ competence.tooltipYellow }}", range: _.range(50, 75)},
                    {name: "high", tooltip: "Macro-capacités<br><br>{{ competence.tooltipGreen }}", range: _.range(75, 100)},
                ];

                makeSlider($slider, $tooltip, sliderStates);

            {% endfor %}
        {% endfor %}


        $('#bt_next_commentaires').click(function() {
            var erreur = checkCompetences();
            if (!erreur) {
                goToTab('commentaires');
            }
        });

        $('#bt_back_competences').click(function(){
            goToTab('competences');
        });

        $('#bt_valide_eval').click(function(){
            var erreur = checkCompetences();
            if (!erreur) {
                if (!$.trim($('textarea[name="commentaires"]').val()).length) {
                    swal({
                        title: "Information manquante",
                        text: "Vous devez renseigner un commentaire",
                        icon: "warning",
                    });
                } else {
                    swal({
                        title: "Attention !",
                        text: "Tu es sur le point de valider et finaliser ton auto-évaluation.\nEn cliquant sur « VALIDER ET VOIR LES RÉSULTATS », tu finalises définitivement ton auto-évaluation sans modification possible.",
                        dangerMode: true,
                        icon: "warning",
                        buttons: {
                            cancel: "Annuler",
                            confirm: "Valider et voir les résultats",
                        }
                    })
                    .then((willValidate) => {
                        if (willValidate) {
                            $('form#form_auto_eval').submit();
                        }
                    });
                }
            }
        });

        function goToTab(id_tab) {
            $('.nav-link[href="#'+id_tab+'"]').tab('show');
        }

        function checkCompetences() {
            var erreur = false;
            var texte_erreur = '';

            var $ranges = $('input[type="range"]');
            $ranges.each(function( index ) {
                if ($(this).val() == "-5") {
                    erreur = true;
                    texte_erreur = texte_erreur + "\n" + $(this).parent().siblings('label').text().toUpperCase() + " : Vous devez positionner le curseur.";
                }
                // if ($(this).val() == "50") {
                //     erreur = true;
                //     texte_erreur = texte_erreur + "\n" + $(this).parent().siblings('label').text().toUpperCase() + " : Le curseur ne peut pas être positionné au milieu, veuillez le déplacer un cran en-dessous ou au-dessus.";
                // }
            });

            if (erreur) {
                swal({
                    title: "Information manquante",
                    text: texte_erreur,
                    icon: "warning",
                })
                .then((value) => {
                    goToTab('competences');
                });
            }

            return erreur;
        }
    });
</script>
{% endblock %}