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

{% block body %}
<nav aria-label="breadcrumb">
  <ol  class="breadcrumb bg-primary text-white">
    <li class="breadcrumb-item"><a class="text-white" href="{{ path('lesson_show', {'id':lesson.id}) }}">{{ lesson.title }}</a></li>
    <li class="breadcrumb-item">{{ content.title }}</li>
  </ol>
</nav>
<article class="cours mt-5">
  <div class="container mt-4">
    <div class="row justify-content-between mt-4">
      <div class="col-md-4 px-3">
        <p class="text-muted text-uppercase">Les contenus</p>
        <div class="timeline">
          <ul id="sortable" class="mb-5">
            {% for rank in ranks %}
            <li class="align-items-center">
              <div>
                <a href="{{  path('content_learn', {lesson_id:rank.lesson.id, content_id:rank.content.id, 'slug':rank.content.slug}) }}">{{ rank.content.title }}</a>

                <form method="POST" class="ranker" name="ranker" action="">
                  <input type="hidden" name="rank" class="rank rank-{{ loop.index0 }}" value="">
                  <input type="hidden" name="lesson_id" class="lesson_id_{{ loop.index0 }}" value="{{ rank.lesson.id }}"/>
                  <input type="hidden" class="index-{{ loop.index0 }}" value="{{ rank.content.id }}"/>
                </form>
              </div>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
      <div class="mb-4 col-md-8" >

        <h3 class="pb-3 mb-3 text-primary">{{ content.title }}</h3>
        <div class="bg-white border rounded p-3" id="contenu">
          {{ content.content | raw }}
        </div>
        <div class="bg-white border rounded p-3 mt-4">
            <h3 class="border-bottom pb-2 text-primary">Questionnaire à choix multiples</h3>
            <small>Cochez la ou les bonnes réponses.</small>
            <div id="qcm mt-5">
            {% for exo in content.exercices %}
            <div id="question-{{ loop.index }}" class="questionQcm border-bottom pb-1 pt-3">
              <p class="qcm-question"><strong>{{ exo.question }}</strong></p>
              <input type="checkbox" class="{% if 1 in exo.goodAnswers %}valid{% else %}no-valid{% endif %}" name="question-{{ loop.index }}" value="{{ exo.propositionUn }}"/> {{ exo.propositionUn }}<br>

              <input type="checkbox" class="{% if 2 in exo.goodAnswers %}valid{% else %}no-valid{% endif %}" name="question-{{ loop.index }}" value="{{ exo.propositionDeux }}"/> {{ exo.propositionDeux }}<br>

              <input type="checkbox" class="{% if 3 in exo.goodAnswers %}valid{% else %}no-valid{% endif %}" name="question-{{ loop.index }}" value="{{ exo.propositionTrois }}"/> {{ exo.propositionTrois }}<br>

              <p class="result-{{ loop.index }}"></p>
            </div>
            {% endfor %}
            <button class="btn btn-primary mt-4" id="validation">Valider mes réponses</button>
          </div>
        </div>


        <div id="next" style="display:none;" class="mt-4 text-center">
          <input type="hidden" class="userid" value="{{ app.user.id }}"/>
          <input type="hidden" class="contentid" value="{{ content.id }}"/>
          <p><span class='badge badge-pill badge-success'>Succès</span> Bravo, vous avez bien répondu à toutes les questions !</p>

          {% set thisRank = 0 %}
          {% for rank in content.LessonContents if lesson == rank.lesson %}
            {% set thisRank = rank.rank %}
          {% endfor %}

          {% for rank in ranks %}
            {% if lesson == rank.lesson and rank.rank == thisRank + 1 %}
                  <a href="{{  path('content_learn', {lesson_id:rank.lesson.id, content_id:rank.content.id, 'slug':rank.content.slug}) }}" class="btn btn-success mx-auto mt-3">Je passe à la suite</a>
            {% elseif lesson == rank.lesson and loop.last %}
                  <a href="{{  path('user_dashboard') }}" class="btn btn-success mx-auto mt-3">J'ai terminé !</a>
            {% endif %}
          {% endfor %}
        </div>
      </div>

    </div>
  </div>

</article>

{% endblock %}