{% 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 %}

    <div class="main-header">
        <h2>
            SÉLECTION {% if session.travailGroupe %}DES ÉTUDIANTS{% else %}DE L'ÉTUDIANT{% endif %} 
        </h2>
        
        <a href="{{ path('home') }}">&larr;  RETOUR AU CHOIX DE LA PROMOTION / SESSION / UE</a>

        <div class="row sessions">
            <div class="col-md-4">
                PROMO : {{ promotion.libelle }} <br>
                SESSION : {{ session.date|date('d/m/Y') }}
            </div>
            <div class="col-md-8">
                {% if ues|length > 1 %}
                    UEs :<br>
                {% else %}
                    UE :
                {% endif %}
                {% for ue in ues %}
                    {{ ue.fullLibelle }} {% if not loop.last %}<br>{% endif %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="searchzone">
        <label for="search" class="col-form-label">Rechercher un étudiant</label>
        <input type="text" class="form-control" id="search">
    </div>

    <div class="row mb-5">
        <div class="col">
            <div class="content mCustomScrollbar" data-mcs-theme="rounded-dark" style="height: 30rem;">
                <table class="table table-select">
                    <thead>
                        <tr class="sticky">
                            <th scope="col">étudiant</th>
                            <th scope="col" class="text-center">ID étudiant</th>
                            <th scope="col" class="text-center">NB évaluations<br>enseignants</th>
                            <th scope="col" class="text-center">NB évaluations<br>du jour</th>
                            {% if session.travailGroupe %}
                                <th scope="col" class="text-center">Sélectionner</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for etudiant in etudiants %}
                            <tr data-id="{{ etudiant.id }}">
                                <td scope="row" data-label="Etudiant">{{ etudiant.nomComplet }}</td>
                                <td scope="row" data-label="ID étudiant" class="fLight text-center">{{ etudiant.pseudo }}</td>
                                <td scope="row" data-label="NB évaluations enseignants" class="fLight text-center">{{ etudiant.getNbEvaluationsEnseignants() }}</td>
                                <td scope="row" data-label="NB évaluations du jour" class="fLight text-center">{{ etudiant.getNbEvaluationsDuJour() }}</td>
                                {% if session.travailGroupe %}
                                    <td align="center"><span class="checkbox"><input type="checkbox" name="etudiants[]" value="{{ etudiant.id }}" /></span></td>
                                {% endif %}
                                </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="btn-group justify-content-center" role="group" aria-label="">
        <button id="dev-submit" class="btn btn-valider" type="button">VALIDER ET COMMENCER L’ÉVALUATION</button>
    </div>

{% endblock %}

{% block javascripts %}
<script>
    var url_eval_etudiant = "{{ path('eval_etudiant', {'id_etudiants': '_etudiants_', 'session': session.id, 'id_ues': ues|map(e => e.id)|join(',')}) }}";

    $(document).ready(function() {

        {% if not session.travailGroupe %}

            // TRAVAIL INDIVIDUEL
            $('tr').click(function() {
                $(this).siblings('tr').removeClass('active');
                $(this).addClass('active');
            });
            $('tr').dblclick(function() {
                $(this).siblings('tr').removeClass('active');
                $(this).addClass('active');
                $('#dev-submit').trigger('click');
            });

            $('#dev-submit').click(function() {
                var $selected_etudiant = $('tr[class="active"]');
                if ($selected_etudiant.length) {
                    var id_etudiant = $selected_etudiant.data('id');
                    location.href = url_eval_etudiant.replace('_etudiants_', id_etudiant);
                }
            });

        {% else %}

            // TRAVAIL DE GROUPE
            $('tr').click(function() {
                $(this).toggleClass('active');

                var $selected = $(this).find('input[name="etudiants[]"]');
                $selected.prop('checked', !$selected.is(':checked'));
            });

            $('#dev-submit').click(function() {
                $('#search').val('').trigger('keyup');

                var $ids_etudiants = $('input[name="etudiants[]"]:checked').map(function(){ return $(this).val(); }).get();
                if ($ids_etudiants.length) {
                    var noms_selected_etudiants = $('input[name="etudiants[]"]:checked').map(function(){ return "\n" + $(this).parents('tr').children().first().text(); }).get();
                    swal({
                        title: "Travail de groupe",
                        text: "Vous êtes sur le point de commencer une évaluation groupée pour les étudiants suivants :\n" + noms_selected_etudiants,
                        dangerMode: true,
                        icon: "warning",
                        buttons: {
                            cancel: "Annuler",
                            confirm: "Valider et commencer l'évaluation de groupe",
                        }
                    })
                    .then((willValidate) => {
                        if (willValidate) {
                            location.href = url_eval_etudiant.replace('_etudiants_', $ids_etudiants);
                        }
                    });
                }
            });

        {% endif %}


        $('#search').keyup(function () {
            var recherche = $(this).val().toLowerCase();

            var $lignes = $('.table').find('tbody tr');

            $lignes.each(function( index ) {
                var libelle_ligne = $(this).find('td').first().html().toLowerCase();

                var i = libelle_ligne.indexOf(recherche);
                if (i != -1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>
{% endblock %}