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

{% block content %}
<div class="container-fluid p-0">
  <div class="container pt-5 pb-5">
    <div class="row">
      <div class="col-lg-3 col-responsive">
        {% include 'shared/menu.html.twig' %}
      </div>

      <div class="col-lg-9">

        {{ form_start(formquiz) }}
          {{ form_row(formquiz.title) }}
          {{ form_row(formquiz.description) }}
          {{ form_row(formquiz.quizDate) }}

          <h3>Questions</h3>

          {# <div
              id="prots"
              data-prototype-answer="{{ form_widget(formquiz.question.vars.prototype.children['answer'].vars.prototype) | e }}"
              data-prototype-question="{{ form_widget(formquiz.question.vars.prototype) | e }}"
          >
          </div>

          {% for question in formquiz.question %}
              {{ form_row(question.name) }}
              <label for="">opts</label>
              {% for opt in question.answer %}
                 {{ form_row(opt.wording) }}
                  {{ form_row(opt.isTrue) }}
              {% endfor %}
          {% endfor %} #}
          <ul class="questions_list"
          data-index="{{ formquiz.question|length > 0 ? formquiz.question|last.vars.name + 1 : 0 }}"
          data-index2="{{ formquiz.question|length > 0 ? formquiz.question.vars.prototype.children['answer']|last.vars.name + 1 : 0 }}"
          data-prototype2="{{ form_widget(formquiz.question.vars.prototype.children['answer'].vars.prototype) | e }}"
          data-prototype1="{{ form_widget(formquiz.question.vars.prototype)|e('html_attr') }}"
         >
            {% for qst in formquiz.question %}
            <div class="row">
            <div class="col-lg-9 offset-lg-3">
                <div class="row mb-4">
                  <label class="col-3 col-form-label form-label">Texte de question</label>
                  <div class="col-sm-9">
                    <div class="input-group">
                      {{ form_widget(qst.name) }}
                      {{ form_errors(qst.name) }}
                    </div>
                  </div>
                </div>
               
                {% for opt in question.answer %}
                    {{ form_row(opt.wording) }}
                    {{ form_row(opt.isTrue) }}
                {% endfor %}

            </div> 
          </div>  
            {% endfor %}
          </ul>
        
        </li>  
         

         

        <button type="button" class="add_answer" data-collection-holder-class="questions_list">Add answer</button>

          <button type="button" class="add_item_link" data-collection-holder-class="questions_list">Add a question</button>

          {{ form_end(formquiz) }}
    
      </div>




      {# <div class="col-lg-9 ">
        <div class="row">
          <div class="col"></div>
          <div class="col-auto"><a href="{{ path('add_question', {'id': courses.id }) }}">Ajouter nouveau question</a>
          </div>
        </div>
        <div class="mt-3">
          <h5 class="card-header-title">Question de quiz</h5>
        </div>

        <div>

          {{ form_start(formquiz, {'method': 'POST','attr': { 'novalidate':'novalidate' }}) }}


          <div class="row mb-4 mt-4">
            <label for="emailLabel" class="col-sm-3 col-form-label form-label">Question</label>
            <div class="col-sm-9">
              {{ form_widget(formquiz.question, { 'attr': {'placeholder': 'Question*'} }) }}
              {{ form_errors(formquiz.question) }}
            </div>
          </div>
          <div class="row mb-4 mt-4">
            <label for="emailLabel" class="col-sm-3 col-form-label form-label">Reponse 1</label>
            <div class="col-sm-9">
              <div class="input-group">
                {{ form_widget(formquiz.answer1) }}
                <span class="input-group-text">
                  {{ form_widget(formquiz.istrue1) }}
                </span>
              </div>
            </div>
          </div>
          <div class="row mb-4 mt-4">
            <label for="emailLabel" class="col-sm-3 col-form-label form-label">Reponse 2</label>
            <div class="col-sm-9">
              <div class="input-group">
                {{ form_widget(formquiz.answer2) }}
                <span class="input-group-text">
                  {{ form_widget(formquiz.istrue2) }}
                </span>
              </div>
            </div>
          </div>

          <div class="row mb-4 mt-4">
            <label for="emailLabel" class="col-sm-3 col-form-label form-label">Reponse 3</label>
            <div class="col-sm-9">
              <div class="input-group">
                {{ form_widget(formquiz.answer3) }}
                <span class="input-group-text">
                  {{ form_widget(formquiz.istrue3) }}
                </span>
                <button class="btn btn-success add-more" type="button"><svg width="20" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
            </svg></button>
              </div>
            </div>
          </div>

          <div class="copy hide">
            <div class="control-group input-group after-add-more" style="margin-top:10px">
              <input type="text" name="addmore[]" class="form-control" placeholder="Enter Other Mobile No.">
              <div class="input-group-btn">
              <button class="btn btn-danger remove" type="button"><svg width="20" height="20" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
                <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
              </svg></button>
              </div>
            </div>
          </div>

          {{ form_end(formquiz) }}


        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(".add-more").click(function(){
            var html = $(".copy").html();
            $(".after-add-more").after(html);
            });
            $("body").on("click",".remove",function(){
            $(this).parents(".control-group").remove();
            });
      </script>
     
        </div>
        {# {% for message in app.flashes('success-add-course') %}
        <div class="flash-notice text-start p-0">
          <p class=" alert alert-success text-success">{{ message }}</p>
        </div>
        {% endfor %}
        {% include 'courses/filtre.html.twig' %}#}
        {# <div class="table-responsive mb-5 pt-2 ps-2">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Titre</th>
                <th scope="col">Nombre De Chapitre</th>
                <th scope="col">Date</th>
                <th scope="col">Statut</th>
                <th scope="col">
                  <div class="float-end me-3">Action</div>
                </th>
              </tr>
            </thead>
            <tbody>
              {% for cours in pagination %}
              <tr>
                <td>{{cours.title}}</td>
                <td>{{cours.chapters| length}}</td>
                <td>{{cours.publicationDate |date('Y-m-d')}}</td>
                <td>
                  {% if (cours.active == 0) %}
                  <small class="badge bg-danger rounded-pill">Attend saisie</small>
                  {% elseif (cours.active == 1) %}
                  <small class="badge bg-warning rounded-pill">Attend validation saisie</small>
                  {% elseif (cours.active == 2) %}
                  <small class="badge bg-warning rounded-pill">Attent de publication</small>
                  {% else %}
                  <small class="badge bg-success rounded-pill">Publiée</small>
                  {% endif %}
                </td>
                <td>
                  <div class="float-end">
                    <a href="{{ path('user_edit_courses', {'id': cours.id }) }}" class="text-decoration-none "
                      title="Modifier cours">
                      <svg width="20" height="20" fill="#8c98a4" class="bi bi-pencil-square me-2 mb-1"
                        viewBox="0 0 16 16">
                        <path
                          d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                        </path>
                        <path fill-rule="evenodd"
                          d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z">
                        </path>
                      </svg>
                    </a>

                    <a href="{{ path('previewcourse', {'id': cours.id }) }}" class="text-decoration-none "
                      target="blank" title="voir version saisie">
                      <svg width="18" height="18" fill="#8c98a4" class="bi bi-journal-code me-2 mb-1"
                        viewBox="0 0 16 16" title="Voir version saisie">
                        <path fill-rule="evenodd"
                          d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z" />
                        <path
                          d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
                        <path
                          d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
                      </svg>
                    </a>
                    <a href="{{ path('manage_quiz', {'id': cours.id }) }}" class="text-decoration-none"
                      title="Gérer quiz">
                      <svg width="20" height="20" fill="#8c98a4" class="bi bi-pencil-square me-2 mb-1"
                        viewBox="0 0 16 16">
                        <path
                          d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                        </path>
                        <path fill-rule="evenodd"
                          d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z">
                        </path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="d-flex justify-content-end">
          <div class="navigation">
            {% do pagination.setPageRange(2) %}
            {{ knp_pagination_render(pagination,'pagination.html.twig') }}
          </div>
        </div> 
      </div> #}
    </div>
  </div>
</div>
{% endblock %}