{% extends 'admin/admin_base.html.twig' %}

{% block body %}
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Auto-évaluation</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
                <div class="btn-group mr-2">
                    <a href="{{ path('export_self_evaluation', { 'event': event.id, 'groupEvent': group.id, 'tool': tool.id }) }}" class="btn btn-sm btn-outline-secondary">
                        Exporter
                    </a>
                </div>
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span data-feather="calendar"></span>
                    Groupe {{ group.name }}
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    {% for g in groupEvents %}
                        <a class="dropdown-item" href="{{ path('self_evaluation_tool_show_group', {'event': event.id, 'tool': tool.id, 'group': g.id}) }}">
                            Groupe {{ g.name }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="pt-3 pb-2 mb-3">
            <div class="hidden">
                {% for criteria in avant %}
                    <div class="self-evaluation-avant-ready" data-step="avant" data-criteria="{{ criteria.name }}" data-avg="{{ criteria.note_avg }}"></div>
                {% endfor %}

                {% for criteria in apres %}
                    <div class="self-evaluation-apres-ready" data-step="apres" data-criteria="{{ criteria.name }}" data-avg="{{ criteria.note_avg }}"></div>
                {% endfor %}
            </div>
            <div style="width: 800px;margin: auto;text-align: center;">
                <canvas id="myChart"></canvas>
            </div>
        </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
      var labels = new Array();
      var avant = new Array();
      var apres = new Array();

      $('.self-evaluation-avant-ready').each(function(){
        labels.push($(this).data('criteria'));
        avant.push($(this).data('avg'));
      });

      $('.self-evaluation-apres-ready').each(function(){
        apres.push($(this).data('avg'));
      });


      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'radar',
        data: {
          labels: labels,
          fontSize: 16,
          datasets: [
            {
              label: "Avant",
              fill: true,
              backgroundColor: "rgba(179,181,198,0.2)",
              borderColor: "rgba(179,181,198,1)",
              pointBorderColor: "#fff",
              pointBackgroundColor: "rgba(179,181,198,1)",
              data: avant
            }, {
              label: "Après",
              fill: true,
              backgroundColor: "rgba(255,99,132,0.2)",
              borderColor: "rgba(255,99,132,1)",
              pointBorderColor: "#fff",
              pointBackgroundColor: "rgba(255,99,132,1)",
              pointBorderColor: "#fff",
              data: apres
            }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'Auto-évaluation',
            fontSize: 16
          },
          scale: {
            pointLabels: {
              fontSize: 14
            },
            ticks: {
              beginAtZero: true,
              min: 0,
              max: 10
            }
          }
        }
      });
    </script>
{% endblock %}