{% extends 'layout.twig' %}
{% block title "Ğ1-Marché - Modifier Antennes" %}

{% block body %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/3.0.7/flatpickr.js"></script>
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $.datepicker.setDefaults(
            {
                altField: "#datepicker",
                closeText: 'Fermer',
                prevText: 'Précédent',
                nextText: 'Suivant',
                currentText: 'Aujourd\'hui',
                monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                weekHeader: 'Sem.',
                dateFormat: 'dd-mm-yy'
            }
        );
    </script>
    <script>
        $( function() {
            $( "#datepicker" ).datepicker();
        });
    </script>
  <div class="container_main">
     <div id="la_page">
        <span style="color:white;font-size:1.4rem;">
            MODIFICATION D'UNE ANTENNE
        </span>
        <div class="container" style="padding:3rem; width:55rem;border:1px solid blue;margin:auto;">
           <div style="width:15rem;color:white;float:left;text-align:left;">
               <span style="margin-left:1rem;">ANTENNE</span>
              <select id="antenne" class="form-control">
                  <option class="list-group-item list-group-item-action" value="0">
                      Sélectionnez l'antenne
                  </option>
                  {% for item in listeAntennes %}
                      <option class="list-group-item list-group-item-action" value="{{ item.regionName }}">
                          {{ item.antenneName }}
                      </option>
                  {% endfor %}
              </select>
           </div>
           <div style="width:14rem;color:white;float:right;text-align:left;">
               <span style="margin-left:1rem;">REGION</span>
               <select id="region" class="form-control">
                   <option class="list-group-item list-group-item-action" value="0"></option>
               </select>
           </div>
           <div style="clear:both;">
              <form>
                  <!--{ csrf_input }}-->
                  <div class="row" style="color:white;">
                      <div class="col-md-12">
                          {{ field('contenu', item.content, "Annonce de présentation du G-marché", {type: 'textarea'}) }}
                      </div>
                  </div>
                  <div class="row" style="color:white;">
                      <div class="col-md-6">
                          {{ field('datepicker', item.gmarcheAt, "Date prochain G-marché", {class: 'datepicker'}) }}
                      </div>
                      <div class="col-md-6">
                          {{ field('name', item.name, "Nom du produit") }}
                      </div>
                  </div>
                  <button class="btn btn-primary" type="submit">Enregistrer</button>
              </form>
           </div>
        </div>
     </div>
  </div>
     <script>
         document.querySelector("#antenne").addEventListener("change", function() {
             if (document.getElementById("region").hasChildNodes()) {
                 var child = document.getElementById("region");
                 while (child.hasChildNodes()) {
                     child.removeChild(child.firstChild);
                 }
             }
             var x = document.querySelector("#antenne").selectedIndex,
                 y = document.querySelector("#antenne").options,
                 select = document.getElementById('region');
             if (document.querySelector("#antenne").options[0].text=="Sélectionnez l'antenne") {
                 document.querySelector("#antenne").removeChild( document.querySelector("#antenne").firstChild);
             }
             /*  On supprime la valeur en double avec cleanArray  */
             var min = 0,
                 tableau = cleanArray(new Array(y[x].value, "Auvergne-Rhône-Alpes", "Bourgogne-Franche-Comté", "Bretagne",
                     "Centre-Val de Loire", "Corse", "Grand Est", "Hauts-de-France", "Ile-de-France", "Normandie",
                     "Nouvelle-Aquitaine", "Occitanie", "Pays de la Loire", "Provence-Alpes-Côte d'Azur"));
             for (var i = min; i<tableau.length; i++){
                 opt = document.createElement('option')
                 opt.value = tableau[i]
                 opt.innerHTML = tableau[i]
                 if (i == min) {
                     opt.selected = "selected"
                 }
                 select.appendChild(opt)
             }
         });
     </script>
     <script>
         document.getElementById("region").addEventListener("click", function() {
            <!-- % for item2 in listeRegions %}-->
             $(document).ready(function () {

             });
         });
     </script>
    <script src="/js/utils.js"></script>
{% endblock %}