{% 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;">
             <!--{ path('antenne.edit', {  id: item.id, region: explodeUrl()[2]}) }}-->
             <form action="" method="post">
                 <!--{ csrf_input }}-->
                 <div class="row" style="color:white;">
                     <div class="col-md-4" style="max-width: 15rem;">
                          <span style="margin-left:1rem;">ANTENNE</span>
                          <select id="antenne_select" name="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.id }}">
                                       {{ item.antenneName }}
                                   </option>

                               {% endfor %}

                          </select>
                     </div>
                     {% set j=0 %}
                     {% for item in listeAntennes %}
                         {% set j=j+1 %}
                         {% set name = 'region_name'~j %}
                     <span style="width:0;height:0;">{{ field(name,item.regionName,"", {type:'hidden'}) }}</span>
                     {% endfor %}
                     <div class="col-md-4" style="min-width:15rem;">
                         <div style="float:left; text-align:left;margin-left:2rem;margin-bottom: 1rem;">
                            <span style="margin-left:1rem;">REGION</span>
                            <select id="region" name="region" class="form-control">
                               <option class="list-group-item list-group-item-action" value="0"></option>
                            </select>
                         </div>
                     </div>
                     <div class="col-md-3">
                         <div style="margin-top:-0.4rem;float:left;" style="min-width: 13rem;">
                              {{ field('datepicker', item.gmarcheAt, "Prochain G-marché", {class: 'datepicker'}) }}
                         </div>
                     </div>
                 </div>
                 <div style="clear:both;">
                     <div class="row" style="color:white;">
                         <div class="col-md-12" style="margin-top:1rem;height:14rem;border:1px solid white;">
                             <!--{ field('contenu', item.content, "Annonce de présentation de l'antenne", {type: 'textarea'},'',[rows]) }}-->
                             <div class="form-group">
                                 <label for="comment">Annonce de présentation de l'antenne</label>
                                 <textarea class="form-control" rows="7" id="contenu"></textarea>
                             </div>
                         </div>
                     </div>

                     <button class="btn btn-primary" type="submit">Enregistrer</button>
                 </div>
             </form>
         </div>
     </div>
  </div>
     <script>
         document.querySelector("#antenne_select").addEventListener("change", function() {
             /* On vide si besoin la zone select  */
             if (document.getElementById("region").hasChildNodes()) {
                 var child = document.getElementById("region");
                 while (child.hasChildNodes()) {
                     child.removeChild(child.firstChild);
                 }
             }
            /* if (document.querySelector("#antenne_select").options[0].text=="Sélectionnez l'antenne") {
                // document.querySelector("#antenne_select").removeChild( document.querySelector("#antenne_select").firstChild);
                // var diff = 1;
             } else {
                // var diff = 0;
             }*/
             var x = document.querySelector("#antenne_select").selectedIndex,
                 y = document.querySelector("#antenne_select").options,
                 select = document.getElementById('region'),
                 nom_zone = "region_name"+x,
                 region_nom = document.getElementById(nom_zone).value;
             /*  On supprime la valeur en double avec cleanArray  */
             var tableau = new Array("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 = 0; i<tableau.length; i++){
                 opt = document.createElement('option')
                 opt.value = tableau[i]
                 opt.innerHTML = tableau[i]
                 if (region_nom == tableau[i]) {
                     opt.selected = "selected"
                 }
                 select.appendChild(opt)
             }
         });
     </script>
     <script>
         document.getElementById("region").addEventListener("click", function() {
             $(document).ready(function () {
                //
             });
         });
     </script>
    <script src="/js/utils.js"></script>
{% endblock %}