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

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

{% block stylesheets %}
<style>
    .chart {
        background-image: url("{{ asset('images/bg-chart.png') }}");
        background-repeat: no-repeat;
        background-size: 63%;
        background-position: 69% 60%;
        margin: 0 0 0 -2.5rem;
        width: 120%;
    }

    @media screen and (min-width: 768px) {
        .chart {
            background-size: 90%;
            background-position: 74% 52%;
            margin: 0 auto;
            width: 100%;
        }
    }
</style>
{% 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>

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

            {# GRAPHIQUE #}
            <div class="resultatcontenu mx-auto">
                <p><strong>Cliquez sur les éléments de la légende pour les cacher/montrer</strong></p>
                <div class="chart">
                    <canvas id="chartgraph"></canvas>
                </div>
            </div>

            <div class="resultatcontenu intuit me-auto align-self-center">
                <h4 class="marron">Auto-évaluation <br>NOTE GLOBALE</h4>
                <div class="note">
                    {% if auto_evaluation %}
                        <strong>{{ auto_evaluation.noteGlobale }}</strong>
                        <small>/20</small>
                    {% else %}
                        <small>en attente de<br>l'auto-évaluation</small>
                    {% endif %}
                </div>
            </div>

            <div class="resultatcontenu me-auto align-self-center">
                <h4 class="marron">Evaluation <br>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">Auto-évaluation</th>
                        <th scope="col">Evaluation</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>

                            {% if auto_evaluation.evaluationCompetences[index] is defined %}
                                {% set auto_eval_comp = auto_evaluation.evaluationCompetences[index] %}

                                {% set class_couleur = 'col-rouge' %}
                                {% if auto_eval_comp.valeur in range (25,49)  %}
                                    {% set class_couleur = 'col-orange' %}
                                {% elseif auto_eval_comp.valeur in range (50,74) %}
                                    {% set class_couleur = 'col-yellow' %}
                                {% elseif auto_eval_comp.valeur in range (75,100) %}
                                    {% set class_couleur = 'col-green' %}
                                {% endif %}

                                <td data-label="Auto-évaluation">
                                    <span class="{{ class_couleur }}">{{ auto_eval_comp.valeur }} %</span>
                                </td>
                            {% else %}
                                <td></td>
                            {% endif %}

                            {% 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 data-label="Evaluation">
                                <span class="{{ class_couleur }}">{{ eval_comp.valeur }} %</span>
                            </td>
                        </tr>
                    {% endfor %}
                    {# <tr>
                        <td>NOTE GLOBALE</td>
                        <td data-label="Auto-évaluation">{{ auto_evaluation.noteGlobale }}</td>
                        <td data-label="Evaluation">{{ evaluation.noteGlobale }}</td>
                    </tr> #}
                </tbody>
            </table>
        </div>

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

                <div class="col-md-6 ps-md-5">
                    <h4>Évaluation enseignant ({{ evaluation.createdBy.nomComplet }})</h4>
                    <label>Commentaires</label>
                    <p class="comment">{{ evaluation.commentaires }}</p>
                    <label>Axes d'amélioration</label>
                    <p class="comment">{{ evaluation.axesAmelioration }}</p>
                    {# <label>Note intuitive</label>
                    <p class="comment">{{ evaluation.noteIntuitive }}</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: 'é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_evaluation %}
                {
                    label: 'auto-évaluation',
                    data: [
                        {% for eval_comp in auto_evaluation.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);
    });
</script>
{% endblock %}