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

{% block title %}
  {{ parent() }}
  Options d'export
{% endblock %}
{% block body %}

<h1 class="text-center pt-4 pb-2">
  <button type="button" class="btn btn-lg btn-block btn-light p-4">
    Options d'export
  </button>
</h1>
<div class="card">
  <div class="card-body">
  {# {{form(form)}} #}
    {{ form_start(form) }}
        {{form_widget(form._token)}}

          {{ form_row(form.output_format) }}



          {{ form_row(form.entries) }}

          <div class="form-group" id="form_entries_examples" style="display:none; padding-left:50px;">
          {{ form_label(form.entries_examples) }}
          {{ form_widget(form.entries_examples) }}
          </div>

          {{ form_row(form.classes) }}

          {{ form_row(form.collocations) }}

          <div class="form-group" id="form_collocations_examples" style="display:none; padding-left:50px;">
          {{ form_label(form.collocations_examples) }}
          {{ form_widget(form.collocations_examples) }}
          </div>

          {{ form_row(form.translations) }}
        
          <div class="form-group" id="form_translations_languages" style="display:none; padding-left:50px;">
          {{ form_label(form.translations_languages) }}
          {{ form_widget(form.translations_languages) }}
          </div>

          {{ form_row(form.fonctions) }}

          {{ form_row(form.routines) }}

          <div class="form-group" id="form_routines_examples" style="display:none; padding-left:50px;">
          {{ form_label(form.routines_examples) }}
          {{ form_widget(form.routines_examples) }}
          </div>
          <div class="form-group" id="form_examples_sources" style="display:none; border: 
                                                                    1px solid lightgrey;  
                                                                    border-radius: 5px; 
                                                                    width: 40%;
                                                                    padding: 5px;
                                                                    margin-left: -5px;"> 
          {{ form_label(form.examples_sources) }}
          {{ form_widget(form.examples_sources) }}
          </div>

          {{ form_row(form.export_documentation) }}

          <button type="button" class="btn btn-warning" onClick="toggle(this)" style="margin-bottom:20px;">Tout sélectionner</button>

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

<script>
let formArray = {
  "export_entries" : "form_entries_examples",
  "export_collocations" : "form_collocations_examples",
  "export_routines" : "form_routines_examples",
  "export_translations" : "form_translations_languages",

  "export_entries_examples" : "form_examples_sources",
  "export_collocations_examples" : "form_examples_sources",
  "export_routines_examples" : "form_examples_sources",
};

function test(){
  for (var key in formArray) {
    (function(key) {
        document.getElementById(key).addEventListener("change", function() {
           console.log("you clicked region number " + formArray[key]);
           if (this.checked) {
            //  console.log("key " + key + " has value " + formArray[key]);
            document.getElementById(formArray[key]).style.display = "block";

          } else {
            if (formArray[key] != "form_examples_sources"){ // don't want to hide it when another checkbox would require it to stay displayed. So let' never close it :D 
                 document.getElementById(formArray[key]).style.display = "none";
            }
            // console.log("Checkbox is not checked..");
          }

         })
    })(key)
  }
}
window.addEventListener("load", test, false);

const ids = [  "#export_entries",  "#export_collocations",  "#export_routines",  "#export_translations", "#export_entries_examples",  "#export_collocations_examples", "#export_routines_examples", "export_export_documentation"];
function toggle(source) {
  checkboxes = document.querySelectorAll(`[type="checkbox"]`
  );
  // console.log(checkboxes);
    var index = 0, length = checkboxes.length;
    for ( ; index < length; index++) {
        // checkboxes[index].style.transition = "opacity 0.5s linear 0s";
        checkboxes[index].closest('.form-group').style.display = "block";
        checkboxes[index].checked = true ;
    }
}

</script>
{% endblock %}