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

{% block page_title %}{{ site_titre }} - Évaluation d'un étudiant{% endblock %}

{% block stylesheets %}
{% endblock %}

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

{% block content %}

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

    <div class="content-tabs">

        {% if ues|length > 1 %}
            <ul class="nav nav-tabs nav-UE">
                {% for ue in ues %}
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#ue{{ ue.id }}" type="button" role="tab" aria-selected="true">UE : {{ ue.code }} <span class="material-symbols-outlined" style="display:none;">check_box</span></a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}

        <div class="tab-content">
            {% for ue in ues %}
                <div class="tab-pane fade show {% if loop.first %}active{% endif %} div_ue" id="ue{{ ue.id }}" role="tabpanel">
                    <h3>UNITÉ D’ENSEIGNEMENT<br> {{ ue.fullLibelle }}</h3>

                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#ue{{ ue.id }}competences">ÉVALUATIONS DES COMPÉTENCES</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#ue{{ ue.id }}note">NOTE INTUITIVE</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#ue{{ ue.id }}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_eval_ue{{ ue.id }}" action="{{ path('save_eval_etudiant') }}" method="post">
                            <input type="hidden" name="etudiants" value="{{ etudiants|map(e => e.id)|join(',') }}">
                            <input type="hidden" name="session" value="{{ session.id }}">
                            <input type="hidden" name="ue" value="{{ ue.id }}">
                            {% if ues|length > 1 %}
                                <input type="hidden" name="ajax" value="1">
                            {% endif %}

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

                            {% include "frontoffice/enseignant/_tab_note.html.twig" %}

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

                        </form>
                    </div>
                </div>
            {% endfor %}
        </div>
    </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() {

        // FIX problème de curseur qui sort des limites, dans le cas de plusieurs UEs évaluées en même temps
        // => on update les sliders du tab UE actif au changement de tab
        $('.nav-UE').on('shown.bs.tab', function (event) {
            $('.div_ue.active').find('input[type="range"]').rangeslider('update', true);
        });

        {# ! 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 ue in ues %}
            {% for groupe in groupes_competences %}
                {% for competence in groupe.competences %}

                    var $slider = $('#ue' + {{ ue.id }} + 'customRange'+ {{ competence.id }});
                    var $tooltip = $('#ue' + {{ ue.id }} + '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 %}
        {% endfor %}


        $('.bt_next_note').click(function() {
            var id_div_ue = $(this).parents('.div_ue').attr('id');
            var erreur = checkCompetences(id_div_ue);
            if (!erreur) {
                goToTab(id_div_ue, 'note');
            }
        });

        $('.bt_back_competences').click(function(){
            var id_div_ue = $(this).parents('.div_ue').attr('id');
            goToTab(id_div_ue, 'competences');
        });

        $('.bt_next_commentaires').click(function() {
            var id_div_ue = $(this).parents('.div_ue').attr('id');
            var erreur = checkNote(id_div_ue);
            if (!erreur) {
                goToTab(id_div_ue, 'commentaires');
            }
        });

        $('.bt_back_note').click(function(){
            var id_div_ue = $(this).parents('.div_ue').attr('id');
            goToTab(id_div_ue, 'note');
        });


        $('.bt_valide_eval').click(function(){

            var $form = $(this).parents('form');
            var id_div_ue = $(this).parents('.div_ue').attr('id');
            var erreur = checkCompetences(id_div_ue);
            if (!erreur) {
                var erreur = checkNote(id_div_ue);
                if (!erreur) {
                    if (!$.trim($form.find('textarea[name="commentaires"]').val()).length || !$.trim($form.find('textarea[name="axes_amelioration"]').val()).length) {
                        swal({
                            title: "Information manquante",
                            text: "Vous devez renseigner un commentaire et les axes d'amélioration",
                            icon: "warning",
                        });
                    } else {
                        swal({
                            title: "Attention !",
                            text: "Vous êtes sur le point de valider et finaliser l’évaluation de l’étudiant.\nEn cliquant sur « VALIDER ET VOIR LES RÉSULTATS », vous finalisez l’évaluation sans modification possible.",
                            dangerMode: true,
                            icon: "warning",
                            buttons: {
                                cancel: "Annuler",
                                confirm: "Valider et voir les résultats",
                            }
                        })
                        .then((willValidate) => {
                            if (willValidate) {

                                {% if ues|length == 1 %}
                                    $form.submit();

                                {% else %}
                                    $.ajax({
                                        url: $form.attr('action'),
                                        type: 'POST',
                                        data: $form.serialize(),
                                        success: function (result) {
                                            if (result.length) {
                                                // var $results_link = '<p class="text-center pt-5 pb-5"><a class="btn btn-primary" href="' + result + '" target="_blank">voir les résultats de cette évaluation d\'UE</a></p>';
                                                var $results_link = '<iframe id="res_'+id_div_ue+'" src="' + result + '" width="100%" height="1300px"></iframe>';

                                                // on remplace le contenu du tab UE par un lien vers le résultat de l'éval
                                                var $content_tab_ue = $form.parents('.div_ue');
                                                $content_tab_ue.html($results_link);
                                                // on affiche l'icone "coche" pour montrer que l'eval de cette UE a été faite
                                                $('.nav-link.active').find('.material-symbols-outlined').show();
                                            }
                                        },
                                        error: function (result) {
                                            console.log(result);
                                        }
                                    });
                                {% endif %}
                            }
                        });
                    }
                }
            }
        });

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

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

            var $ranges = $('#' + id_div_ue + ' 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(id_div_ue, 'competences');
                });
            }

            return erreur;
        }

        function checkNote(id_div_ue) {
            var erreur = false;
            var texte_erreur = '';

            var note = $('#' + id_div_ue + ' input[name="note"]').val().replace(',','.');
            if (!note.length || isNaN(note)) {
                erreur = true;
                texte_erreur = "Vous devez renseigner une note";
            } else {

                if (note <= 0 || note > 20) {
                    erreur = true;
                    texte_erreur = "Vous devez renseigner une note > 0 et <= 20";
                }
            }

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

            return erreur;
        }

        {# ! interception de la touche Entrée pour ne pas submit le form #}
        $('.noteintuitive').keypress(function(event){
            if (event.keyCode == '13'){
                event.preventDefault();
            }
        });
    });
</script>
{% endblock %}