{% 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 white;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.regionId }}">
                                       {{ 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 %}
                     {% set k=0 %}
                     {% for item in listeAntennes %}
                         {% set k=k+1 %}
                         {% set name = 'edito1_'~k %}
                         <span style="width:0;height:0;">{{ field(name,item.edito1,"", {type:'hidden'}) }}</span>
                         {% set name = 'edito2_'~k %}
                         <span style="width:0;height:0;">{{ field(name,item.edito2,"", {type:'hidden'}) }}</span>
                         {% set name = 'edito3_'~k %}
                         <span style="width:0;height:0;">{{ field(name,item.edito3,"", {type:'hidden'}) }}</span>
                         {% set name = 'edito4_'~k %}
                         <span style="width:0;height:0;">{{ field(name,item.edito4,"", {type:'hidden'}) }}</span>
                         {% set name = 'gmAt_'~k %}
                         <span style="width:0;height:0;">{{ field(name,item.gmarcheAt,"", {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:auto;">
                             <div class="form-group">
                                 <label for="comment">Annonce de présentation de l'antenne</label><p></p>
                                 Ligne 1 <textarea id="edito1" class="form-control" rows="2" name="contenu1"></textarea>
                                 Ligne 2 <textarea id="edito2" class="form-control" rows="2" name="contenu2"></textarea>
                                 Ligne 3 <textarea id="edito3" class="form-control" rows="2" name="contenu3"></textarea>
                                 Ligne 4 <textarea id="edito4" class="form-control" rows="2" name="contenu4"></textarea>
                             </div>
                         </div>
                     </div>

                     <button class="btn btn-primary" type="submit">Enregistrer</button>
                 </div>
             </form>
         </div>
     </div>
  </div>
     <script>
         /* Lorsqu'on sélectione une antenne */
         document.querySelector("#antenne_select").addEventListener("change", function() {
             /* On vide si besoin la zone select des régions  */
             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 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;
                 //region_id = document.getElementById(nom_zone).text;
             /* Affichage de la date du gmarché et des éditos en fonction de l'antenne sélectionnée */
             var gmAt = document.getElementById('datepicker'),
                 nom_zone_gmAt = "gmAt_"+x,
                 valeur_gmAt = document.getElementById(nom_zone_gmAt).value;
             gmAt.value = valeur_gmAt;
             var edito1 = document.getElementById('edito1'),
                 nom_zone_edito1 = "edito1_"+x,
                 valeur_edito1 = document.getElementById(nom_zone_edito1).value;
             edito1.value = valeur_edito1;
             var edito2 = document.getElementById('edito2'),
                 nom_zone_edito2 = "edito2_"+x,
                 valeur_edito2 = document.getElementById(nom_zone_edito2).value;
             edito2.value = valeur_edito2;
             var edito3 = document.getElementById('edito3'),
                 nom_zone_edito3 = "edito3_"+x,
                 valeur_edito3 = document.getElementById(nom_zone_edito3).value;
             edito3.value = valeur_edito3;
             var edito4 = document.getElementById('edito4'),
                 nom_zone_edito4 = "edito4_"+x,
                 valeur_edito4 = document.getElementById(nom_zone_edito4).value;
             edito4.value = valeur_edito4;
             /* Affichage des régions */
             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')
                 var valeurs_antenne = y[x].value.split("|")
                 var deuxieme_valeur = valeurs_antenne[1]
                 opt.value = deuxieme_valeur
                 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 %}