{% 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 : {{ evaluation.uniteEnseignement.fullLibelle }}</h3>

        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link">ÉVALUATIONS DES COMPÉTENCES & COMMENTAIRES / AXES D’AMÉLIORATION</a>
            </li>
            <li class="nav-resulta">Résultat</li>
        </ul>

        {# RESULTATS #}
        <div class="tab-content resultat">

            {# GRAPH #}
            <div class="resultatcontenu chart">
                <canvas id="chartgraph"></canvas>
            </div>

            {# NOTE #}
            <div class="resultatcontenu me-auto align-self-center">
                <h4 class="marron">NOTE GLOBALE</h4>
                <div class="note">
                    <strong>{{ evaluation.noteGlobale }}</strong>
                    <small>/20</small>
                </div>
            </div>

            <table class="table-results">
                <thead>
                    <tr>
                        <th scope="col">Compétences</th>
                        <th scope="col">Évaluation</th>
                    </tr>
                </thead>
                <tbody>
                    {% for index, eval_comp in evaluation.evaluationCompetences %}
                        <tr>
                            {% set class_couleur = 'col-rouge' %}
                            {% if eval_comp.valeur in range (25,49)  %}
                                {% set class_couleur = 'col-orange' %}
                            {% elseif eval_comp.valeur in range (50,74) %}
                                {% set class_couleur = 'col-yellow' %}
                            {% elseif eval_comp.valeur in range (75,100) %}
                                {% set class_couleur = 'col-green' %}
                            {% endif %}

                            <td scope="row" data-label="Compétence">{{ eval_comp.competence.libelle|upper }}</td>

                            <td data-label="Evaluation">
                                <span class="{{ class_couleur }}">{{ eval_comp.valeur }} %</span>
                            </td>
                        </tr>
                    {% endfor %}
                    {# <tr>
                        <td><strong>NOTE GLOBALE</strong></td>
                        <td><strong>{{ evaluation.noteGlobale }}</strong></td>
                    </tr> #}
                </tbody>
            </table>
        </div>

        {# COMMENTAIRES AUTO-EVAL #}
        <div class="tab-content evaluation">
            <div class="row">
                <div class="col-md-6">
                    <h4>Auto-evaluation</h4>
                    <label>Commentaires</label>
                    <p class="comment">{{ evaluation.commentaires }}</p>
                </div>
            </div>
        </div>

    </div>

    <div class="btn-group justify-content-center" role="group" aria-label="">
        <a href="{{ path('home') }}" class="btn btn-valider">RETOUR À L’ACCUEIL</a>
    </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() {

        Chart.defaults.font.size = 10;

        var ctx = document.getElementById('chartgraph').getContext('2d');

        var config = {
            type: 'radar',
            data: {
                labels: [
                    {% for eval_comp in evaluation.evaluationCompetences %}
                        '{{ eval_comp.competence.libelle|upper }}',
                    {% endfor %}
                ],
                datasets: [{
                    label: '',
                    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'
                }]
            },
            options: {
                scales: {
                    r: {
                        max: 100,
                        min: 0,
                        ticks: {
                            stepSize: 10
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            },
        }

        var chartgraph = new Chart(ctx, config);
    });
</script>
{% endblock %}