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

{% block page_title %}{{ site_titre }} - Backoffice - Étudiants{% endblock %}

{% block stylesheets %}
<style>
    textarea {
        display: block;
        overflow: hidden;
        resize: none;
    }

    .chart {
        background-image: url("{{ asset('images/bg-chart.png') }}");
        background-repeat: no-repeat;
        background-size: 86%;
        background-position: 77% 55%;
        margin-left: 3rem;
        width: 400px;
    }

    @media screen and (min-width: 1200px) {
        .chart {
            background-size: 96%;
            background-position: 77% 35%;
            margin-left: 5rem;
            width: 500px;
        }
    }

    @media screen and (min-width: 1500px) {
        .chart {
            background-size: 105%;
            background-position: center 75%;
            width: 600px;
        }
    }
</style>
{% endblock %}

{% block h2 %}Évaluations étudiant{% endblock %}

{% block content %}

    {% set url_back = '' %}
    {% if app.request.get('_route') == 'bo.etudiant.evaluation.graphique' %}
        {% set url_back = path('bo.etudiant.evaluations', {id: from_etudiant.id}) %}
    {% else %}
        {# sinon on vient de la page résultats par promo / UE / semestre #}
        {% set url_back = path('bo.resultats.par_ue_et_promo', {code: evaluation.uniteEnseignement.code, promo: evaluation.sessionEvaluation.promotion.libelle, semestre: semestre.id}) ~ '#etu-' ~ from_etudiant.id %}
    {% endif %}
    <a id="back_link" href="{{ url_back }}" class="btn btn-default">< Retour à la page précédente</a>
    <hr>

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h3>
                        <i class="fa fa-calendar"></i> SESSION : {{ evaluation.sessionEvaluation.date|date('d/m/Y') }} (semestre {{ semestre.id }}) - PROMOTION {{ evaluation.sessionEvaluation.promotion.libelle }}<br>
                        {{ evaluation.uniteEnseignement.fullLibelle }}<br><br>

                        {% if evaluation.sessionEvaluation.travailGroupe %}<i class="fa fa-users"></i> Travail de groupe{% else %}<i class="fa fa-user"></i> Travail individuel{% endif %}<br>
                        {% for etudiant_groupe in evaluation.etudiants %}
                            {{ etudiant_groupe.nomComplet ~ " (" ~ etudiant_groupe.pseudo ~ ")" }}<br>
                        {% endfor %}
                    </h3>
                </div>
                <div class="ibox-tools">
                    {% if evaluation.verified %}
                        <p><i class="fa fa-check"></i>&nbsp;Vérifiée le {{ evaluation.verifiedAt|date('d/m/Y H:i') }} par {{ evaluation.verifiedBy.getNomComplet() }}</p>
                        <form action="{{ path('bo.evaluation.unverified', {id: evaluation.id}) }}" method="POST">
                            <button type="submit" class="btn btn-warning m-r-lg"><i class="fa fa-lg fa-ban"></i>&nbsp;&nbsp;Retirer le statut "évaluation vérifiée"</button>
                        </form>
                    {% else %}
                        <a class="btn btn-warning m-r-lg" href="{{ path('eval_etudiant_modif', {id: evaluation.id}) }}" target="_blank"><i class="fa fa-lg fa-eraser"></i>&nbsp;&nbsp;Corriger cette évaluation</a>
                        <form action="{{ path('bo.evaluation.verified', {id: evaluation.id}) }}" method="POST">
                            <button type="submit" class="btn btn-primary m-r-lg"><i class="fa fa-lg fa-check"></i>&nbsp;&nbsp;Passer cette évaluation en statut "vérifiée"</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# 1 TAB PAR ETUDIANT POUR AVOIR SA PROPRE AUTO-EVAL FACE A L'EVAL DE L'ENSEIGNANT #}
    <ul class="nav nav-tabs">
        {% for etudiant in evaluation.etudiants %}
            <li class="nav-item" role="presentation">
                <a class="nav-link {% if loop.first %}active{% endif %}" data-toggle="tab" data-target="#tab{{ etudiant.id }}" type="button" role="tab" aria-selected="true">{{ etudiant.nomComplet }} <img src="{{ etudiant.photo ?? asset('images/user_defaut.png') }}" width="100"></a>
            </li>
        {% endfor %}
    </ul>

    <div class="tab-content">
        {% for etudiant in evaluation.etudiants %}
            <div class="tab-pane fade show {% if loop.first %}active{% endif %}" id="tab{{ etudiant.id }}" role="tabpanel">

                {# COMMENTAIRES AUTO-EVAL / EVAL ENSEIGNANT #}
                <div class="row">
                    {% set auto_eval = auto_evaluations[etudiant.id] %}
                    <div class="col-md-4">
                        {% if auto_eval %}
                            <h2>Auto-evaluation ( {{ auto_eval.createdBy.nomComplet }} )</h2>
                            <label>Commentaires</label>
                            <textarea class="form-control" readonly>{{ auto_eval.commentaires }}</textarea>
                        {% else %}
                            <h2>pas encore d'auto-évaluation</h2>
                        {% endif %}
                    </div>

                    <div class="col-md-8">
                        <h2>Évaluation enseignant ( {{ evaluation.createdBy.nomComplet }} )</h2>
                        <form name="form_modif_commentaires_enseignant" action="{{ path('bo.evaluation.update_coms', {id: evaluation.id}) }}" method="post">
                            <label>Commentaires</label>
                            <textarea class="form-control" name="commentaires">{{ evaluation.commentaires }}</textarea>
                            <label>Axes d'amélioration</label>
                            <textarea class="form-control" name="axes">{{ evaluation.axesAmelioration }}</textarea>
                            <button type="submit" class="btn btn-primary m-r-lg"><i class="fa fa-lg fa-eraser"></i>&nbsp;Enregistrer la correction des commentaires enseignant</button>
                        </form>
                        <hr>
                        <label>Note intuitive</label>
                        <input type="text" class="form-control" value="{{ evaluation.noteIntuitive }}" readonly>
                    </div>
                </div>

                <hr>

                {# COMPETENCES + GRAPHIQUE #}
                <div class="row">
                    <div class="col-md-4">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>COMPÉTENCES</th>
                                        <th>AUTO-EVALUATION</th>
                                        <th>EVALUATION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for competence_libelle, valeurs in tab_competences %}
                                        <tr>
                                            <td>{{ competence_libelle }}</td>
                                            <td>{% if auto_eval %}{{ valeurs.auto_eval[etudiant.id] }} %{% endif %}</td>
                                            <td>{{ valeurs.eval }} %</td>
                                        </tr>
                                    {% endfor %}
                                    <tr style="background-color:#20c997;">
                                        <td>Note globale</td>
                                        <td>{% if auto_eval %}{{ auto_eval.noteGlobale }}{% endif %}</td>
                                        <td>{{ evaluation.noteGlobale }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <p>Cliquez sur les éléments de la légende pour les cacher/montrer</p>
                        <div class="chart">
                            <canvas id="chartgraph{{ etudiant.id }}"></canvas>
                        </div>
                    </div>
                </div>

            </div>
        {% endfor %}

    </div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<script>
    $(document).ready(function() {

        // charger le tab de l'etudiant demandé dans l'url
        $('.nav-tabs a[data-target="#tab'+{{ from_etudiant.id }}+'"]').tab('show');

        // au chargement d'un tab, on ajuste la taille des textarea à leur contenu
        $('textarea').each(function (index) {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
        $('.nav-tabs a').on('shown.bs.tab', function(event){
            $('textarea').each(function (index) {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        });


        Chart.defaults.font.size = 10;

        {% for etudiant in evaluation.etudiants %}
            {% set auto_eval = auto_evaluations[etudiant.id] %}

            var ctx = document.getElementById('chartgraph'+{{ etudiant.id }}).getContext('2d');

            var config = {
                type: 'radar',
                data: {
                    labels: [
                        {% for eval_comp in evaluation.evaluationCompetences %}
                            '{{ eval_comp.competence.libelle|upper }}',
                        {% endfor %}
                    ],
                    datasets: [{
                        label: 'évaluation enseignant',
                        data: [
                            {% for eval_comp in evaluation.evaluationCompetences %}
                                {{ eval_comp.valeur }}{% if not loop.last %},{% endif %}
                            {% endfor %}
                        ],
                        fill: false,
                        backgroundColor: 'rgba(54, 182, 161, 0.5)',
                        borderColor: 'rgb(255, 255, 255)',
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#fff'
                    },
                    {% if auto_eval %}
                    {
                        label: 'auto-évaluation',
                        data: [
                            {% for eval_comp in auto_eval.evaluationCompetences %}
                                {{ eval_comp.valeur }}{% if not loop.last %},{% endif %}
                            {% endfor %}
                        ],
                        fill: false,
                        backgroundColor: 'rgba(54, 182, 161, 0.5)',
                        borderColor: 'black',
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#fff'
                    }
                    {% endif %}
                    ]
                },
                options: {
                    scales: {
                        r: {
                            max: 100,
                            min: 0,
                            ticks: {
                                stepSize: 10
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true
                        }
                    }
                },
            }

            var chartgraph = new Chart(ctx, config);
        {% endfor %}

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