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

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

{% block stylesheets %}
<style>
    ul#dev-sessions li.disabled {
        opacity: 0.5;
    }
</style>
{% endblock %}

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

{% block content %}

    <h2>Faire mon auto-évaluation</h2>

    <div class="row d-block d-sm-flex mb-md-5">
        <div class="col">
            <h3>Sélectionner une date de session</h3>
            <div class="content mCustomScrollbar content-mr" data-mcs-theme="rounded-dark">
                <ul id="dev-sessions">
                    {% for session in sessions %}
                        <li data-id="{{ session.id }}" {% if (date(session.date)|date('Y-m-d')) != (date()|date('Y-m-d')) %}class="disabled"{% endif %}>
                            {{ session.date|date('d/m/Y') }}
                            {% if session.travailGroupe %}
                                <br><small>(Travail de groupe)</small>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="col">
            <h3>Sélectionner une Unité d'enseignement</h3>
            <div class="content mCustomScrollbar" data-mcs-theme="rounded-dark">
                <ul id="dev-ues">
                    {# ! rempli automatiquement en JS #}
                </ul>
            </div>
        </div>
    </div>

    <div class="btn-group justify-content-center" role="group" aria-label="">
        <button id="dev-submit" class="btn btn-valider mb-4" type="button">Valider</button>
    </div>

    <hr>

    <h2>Consulter mes évaluations et auto-évaluations</h2>

    <table class="table table-eval mb-5">
        <thead>
            <th scope="col">Session</th>
            <th scope="col">UE</th>
            <th>Enseignant</th>
            <th scope="col">Note globale <br>Évaluation</th>
            <th scope="col">Note globale <br>Auto-évaluation</th>
            <th scope="col">Détail</th>
        </thead>
        <tbody>
            {% for session_eval in evals.sessions %}
                {% for ue in session_eval.ues %}
                    {% if ue.evals|length %}
                        {% for eval in ue.evals %}
                            <tr>
                                <td scope="row" data-label="Session">
                                    {{ session_eval.date|date('d/m/Y') }}
                                    {% if session_eval.groupe %}
                                        <br><small>(Travail de groupe)</small>
                                    {% endif %}
                                </td>
                                <td scope="row" data-label="UE"><small>{{ ue.ue }}</small></td>
                                <td scope="row" data-label="Enseignant"><small>{{ eval.createdBy.getNomComplet() }}</small></td>
                                <td scope="row" data-label="Note globale Évaluation" style="text-align:center;">
                                    {% if eval.verified and eval.sessionEvaluation.publishEvalsVerifiees %}
                                        <span class="note">{{ eval.noteGlobale }} <small>/20</small></span>
                                    {% else %}
                                        En cours de vérification
                                    {% endif %}
                                </td>
                                <td scope="row" data-label="Note globale Auto-évaluation">
                                    {% if ue.auto_eval %}
                                        <span class="note autoeval">{{ ue.auto_eval.noteGlobale }} <small>/20</small></span>
                                        {# <a class="btn btn-primary" href="{{ path('auto_eval_resultat', {id: ue.auto_eval.id}) }}">Voir le détail</a> #}
                                    {% endif %}
                                </td>
                                <td scope="row" data-label="Note globale Évaluation">
                                    {% if eval.verified %}
                                        <a class="btn btn-primary" href="{{ path('evaluation_complete', {id: eval.id}) }}">Voir le détail des évaluations</a>
                                    {% elseif ue.auto_eval %}
                                        <a class="btn btn-primary autoeval" href="{{ path('auto_eval_resultat', {id: ue.auto_eval.id}) }}">Voir le détail de l'auto-évaluation</a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% elseif ue.auto_eval %}
                        <tr>
                            <td scope="row" data-label="Session">
                                {{ session_eval.date|date('d/m/Y') }}
                                {% if session_eval.groupe %}
                                    <br><small>(Travail de groupe)</small>
                                {% endif %}
                            </td>
                            <td scope="row" data-label="UE"><small>{{ ue.ue }}</small></td>
                            <td scope="row" data-label="Enseignant"></td>
                            <td scope="row" data-label="Note globale Évaluation" style="text-align:center;"></td>
                            <td scope="row" data-label="Note globale Auto-évaluation">
                                <span class="note autoeval">{{ ue.auto_eval.noteGlobale }} <small>/20</small></span>
                            </td>
                            <td scope="row" data-label="Note globale Évaluation">
                                <a class="btn btn-primary autoeval" href="{{ path('auto_eval_resultat', {id: ue.auto_eval.id}) }}">Voir le détail de l'auto-évaluation</a>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

{% block javascripts %}
<script>

    var url_get_ues = "{{ path('session_get_ues', {'id': 'id'}) }}";
    var url_eval_ue = "{{ path('etudiant_eval_ue', {'session': '_session_', 'ue': '_ue_'}) }}";

    $(document).ready(function() {
        $('ul').on('click', 'li', function() {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
        });

        $('ul#dev-sessions').on('click', 'li', function() {
            var id_session = $(this).data('id');

            $.ajax({
                url: url_get_ues.replace('id', id_session),
                type: 'GET',
                success: function (result) {
                    if (result.length) {
                        var $ues = '';
                        result.forEach(ue => {
                            $ues = $ues + '<li data-id="'+ ue.id+'">' + ue.full_libelle + '</li>';
                        });
                        $('ul#dev-ues').html($ues);
                    }
                },
                error: function (result) {
                    console.log(result);
                }
            });
        });

        $('#dev-submit').click(function() {
            var $selected_session = $('ul#dev-sessions li.active');
            var $selected_ue      = $('ul#dev-ues li.active');

            if ($selected_session.length && $selected_ue.length) {

                {% if app.request.headers.get('host') is same as('apcido.cido.fr') %}

                    if ($selected_session.hasClass('disabled')) {
                        swal({
                            title: "Session non ouverte",
                            text: "Vous ne pouvez faire une évaluation que pour la session du jour, veuillez changer votre sélection.",
                            icon: "warning",
                        });
                    } else {

                        var id_session = $selected_session.data('id');
                        var id_ue = $selected_ue.data('id');

                        location.href = url_eval_ue.replace('_session_', id_session).replace('_ue_', id_ue);
                    }
                {% else %}

                    var id_session = $selected_session.data('id');
                    var id_ue = $selected_ue.data('id');

                    location.href = url_eval_ue.replace('_session_', id_session).replace('_ue_', id_ue);

                {% endif %}
            }
        });
    });
</script>
{% endblock %}