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

{% block body %}

<h1>
  {% if editMode is defined %}
  Modifier le quiz
  {% else %}
  Création d'un quiz
  {% endif %}
</h1>
<p class="success mt-4"></p>
<h3>Choisir un contenu associé pour ce quiz :</h3>
<select id="for-contenu" class="form-control mb-4">
  <option selected>-----------------------</option>
  {% for content in contents %}
  <option value="{{ content.id }}">{{ content.title }}</option>
  {% endfor %}
</select>
<p class="text-muted">Si le contenu recherché n'est pas dans la liste, c'est qu'il existe déjà. Rendez-vous dans l'onglet "Exercices" pour modifier le quiz associé au contenu voulu.</p>
{% form_theme formExercice 'bootstrap_4_layout.html.twig' %}
<style>
.first, .dop{
  display: none;
}
</style>
<div id="question-1" class="question border-bottom pb-3 mb-3 mt-3 first">
  <h4>Question <span class="count-question">1</span></h4>
  <a class="remover" id="1">Supprimer cette question</a><br>
  {{ form_start(formExercice, {'attr': {'class' : 'bg-light p-3'}}) }}

  {{ form_row(formExercice.contenu, {'attr': {'class' : 'exercice_contenu'}} )}}
  {{ form_row(formExercice.question) }}
  {{ form_row(formExercice.propositionUn, { 'label': 'Proposition valide' }) }}
  {{ form_row(formExercice.propositionDeux, { 'label': 'Proposition invalide' }) }}
  {{ form_row(formExercice.propositionTrois, { 'label': 'Proposition invalide' }) }}

  {{ form_end(formExercice) }}
</div>
<div class="row justify-content-between dop">
  <button class="btn btn-primary add">Ajouter une question</button>
  <button class="btn btn-success validate">Valider le quiz</button>
</div>

<p class="success mt-4"></p>

<script>

$('#for-contenu').change(function(){
  $('.first').show();
  $('.dop').show();

  var choiceContenu = $('#for-contenu').val();
  $('.exercice_contenu').val(choiceContenu);
});


$('.add').click(function(){
  var id = $('.dop').prev();
  var newBlock = $(id).clone();
  newBlock.find('form input').val('');
  newBlock.insertBefore('.dop');
  var choiceContenu = $('#for-contenu').val();
  $('.exercice_contenu').val(choiceContenu);

  numeroter();
});



function numeroter(){
  $('.question').each(function(index){

    //Display numéro de la question
    $(this).find('.count-question').html(index+1);

    //Attribut un id au block
    $(this).attr('id', 'question-'+(index+1));

    //Attribut un id au delete
    $(this).find('.remover').attr('id', (index+1));


  });

  $('.remover').click(function(event){
    var blockToRemove = $(this).attr('id');
    $('#question-'+ blockToRemove).remove();
  });
}

//AJAX A CREER
$('.validate').click(function(){
  var forms = $('.question form');
  forms.each(function(index){
    var contenu = $(this).find('#exercice_contenu').val();
    var question = $(this).find('#exercice_question').val();
    var q1 = $(this).find('#exercice_propositionUn').val();
    var q2 = $(this).find('#exercice_propositionDeux').val();
    var q3 = $(this).find('#exercice_propositionTrois').val();
    var goodAnswers = $(this).find('#exercice_goodAnswers').val();
    $.ajax({
      url: "insert",
      type: 'POST',
      data:{contenu : contenu, question : question, q1 : q1, q2 : q2, q3 : q3, goodAnswers : goodAnswers},
      success: function(response){
        $('.success').html("<span class='badge badge-pill badge-success'>Succès</span> Le quiz a été enregistré");
      },
      error : function (response){
        $('.success').html("<span class='badge badge-pill badge-warning'>Warning</span> Une erreur s'est produite, veuillez réessayer.");;
      }
    });
  });
});

</script>

{% endblock %}