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

{% block title %}Liste des Utilisateurs{% endblock %}

{% block body %}

    <div class="row">
      <div class="col-2">
        <img class="w-100 rounded" src="{{ asset('images/avatar/'~ user.avatar) }}"/>
      </div>
      <div class="col-10">
        <div class="row align-items-center">
          <h1>{{ user.firstname }} {{ user.lastname }}</h1>
          <p class="col-4 m-0 text-right">{% if user.lastConnect is not null %}<small>Dernière connexion : {{ user.lastConnect|date("d/m/Y") }}</small>{% endif %}</p>
        </div>
        <p><span class="lnr lnr-envelope"></span>&nbsp; {{ user.email }}
          <br>
          <span class="lnr lnr-home"></span>&nbsp; {{ user.etablissement }} <small>({{ user.association }})</small>
          <br><span class="lnr lnr-user"></span>&nbsp; {{ user.fonction }}
        </p>

        <p class="mt-4"><a href="{{ path('user_edit', {'id':user.id}) }}" class="btn btn-primary">Modifier cet utilisateur</a></p>
      </div>
    </div>




    <section class="user mt-4">

        {% if contents is defined %}
        <h3>Inscrit au(x) cours : </h3>
        {% for lesson in user.lessons %}
        <div class="bg-white shadow p-4 rounded mt-4">
          <div class="row justify-content-between mb-4 align-items-center">
            <div class="col-3 border-right  text-center py-5">
            {% set total = 0 %}
            {% set div = 0 %}
            {% for advance in user.advances %}
              {%  if advance.content in lesson.contents %}
                {% set div = div + 1 %}
                {% set total = total + advance.percentage %}
              {% endif %}
            {% endfor %}
              <small>Date de l'inscription : </small>
              <h4>
                  {% for register in user.lessonUsers %}
                    {% if register.lesson == lesson %}
                      {{ register.registerAt|date("d/m/Y") }}
                    {% endif %}
                  {% endfor %}
              </h4>

              <small>Pourcentage réalisé : </small>
              <h4>{{  (total / div) | round }}%</h4>
            </div>

            <div class="col-9">
              <!-- Affichage du badge en fonction de l'avancée -->
                <h5 class="mb-4">
                <small>
                {% if (total / div) == 0 %}
                  <span class='badge badge-pill badge-danger'>Non commencé</span>
                  {% elseif (total/div) > 0 and (total/div) < 100 %}
                    <span class='badge badge-pill badge-warning'>En cours</span>
                  {% elseif (total/div) == 100 %}
                    <span class='badge text-white badge-pill badge-success'>Terminé</span>
                  {% endif %}
                </small>
                <strong>{{ lesson.title }}</strong></h5>

              <table class="table table-hover">
                {% for content in lesson.contents %}
                <tr class="list-unstyled">
                  <td>{{ content.title }}</td>
                  {% for contenu in user.advances %}
                      {% if contenu.content == content %}
                        <td>{{ contenu.percentage }} %</td>
                      {% endif %}
                  {% endfor %}
                </tr>
                {% endfor %}
              </table>
            </div>
        </div>

        {% if total / div == 100 %}
          <p class="mb-0">
              <a href="{{ path('send_certificat', {'user':user.id, 'lesson':lesson.id}) }}" id="js-send-certificat" class="btn btn-success text-white"><span class="lnr lnr-envelope"></span>&nbsp; Envoyer l'attestation par email</a>
          </p>
          <p class="js-response">

          </p>
          <p>
              {% for register in user.lessonUsers %}
                {% if register.lesson == lesson %}
                  {% if register.certificated is null %}

                    <small><em>Vous n'avez pas encore envoyé le certificat</em></small>
                  {% else %}
                    <small><em>Dernier certificat envoyé le {{ register.certificatedAt|date("d/m/Y") }}</em></small>
                  {% endif %}
                {% endif %}
              {% endfor %}
          </p>
        {% endif %}
        </div>
        {% endfor %}


        {% endif %}
    </section>
{% endblock %}

{% block javascripts %}
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}