<div class="corps">
    <div class="card">
        <div class="head-main">
            <h2>Demande de permission</h2>
            <a href="/">
                <button class="button-planning">
                    <!--<img src="/images/planning.png" class="svg-icon" alt="">-->
                    <ion-icon name="home-outline"></ion-icon>
                    <span class="label">Accueil</span>
                </button>
            </a>
        </div>
      <div class="card-body">
        <% if (errors && errors.length > 0) { %>
          <div class="alert alert-danger">
            <ul>
              <% errors.forEach(function(error) { %>
                <p><%= error.msg %></p>
              <% }) %>
            </ul>
          </div>
        <% } %>      
        <form method="post" action="/permission/demand" enctype="multipart/form-data">
          <div class="row">
            <div class="col-md-2 form-group">                                 
              <button class="btn-import" id="btn-passation">Passation</button>                    
            </div>
            <div class="col-md-3 form-group">                                 
              <label for="piece" style="display: inline-block;
              background-color: transparent;
              color: rgba(0, 0, 0, .4);
              /* box-shadow: 0px 2px 5px rgba(0, 0, 0, .5); */
              border-radius: 5px;
              background-color: rgba(58, 179, 62, 0.822);
              color: aliceblue;
              /* border: 1px solid rgba(76, 175, 80, .7); */
              padding: 8px 20px;
              cursor: pointer;">Pièce justificatif</label>
              <input type="file" style="display: none;" name="pieceJust" id="piece">
            </div>
          </div>
          <input type="hidden" name="demandeur" value="<%= req.session ? req.session.admin.id : 0 %>">
          <div class="row">
            <div class="col-md-5 form-group">
              <label for="reason">Evènement</label>
              <select name="event" id="event" class="form-select">
                <option value="Mariage de l’employé">Mariage de l’employé</option>
                <option value="Mariage de l’enfant de l’employé">Mariage de l’enfant de l’employé</option>
                <option value="Naissance d’un enfant de l’employé">Naissance d’un enfant de l’employé</option>
                <option value="Hospitalisation du (de la) conjoint (e) ou de l’enfant">Hospitalisation du (de la) conjoint (e) ou de l’enfant</option>
                <option value="Maladie soudaine ou accident d’un enfant (assistance maternelle/ paternelle)">Maladie soudaine ou accident d’un enfant (assistance maternelle/ paternelle)</option>
                <option value="Circoncision de l’enfant">Circoncision de l’enfant</option>
                <option value="Décès du conjoint(e)">Décès du conjoint(e)</option>
                <option value="Décès d’un enfant, Bru, Gendre">Décès d’un enfant, Bru, Gendre</option>
                <option value="Décès des parents, et collatéraux direct (frères, sœurs)">Décès des parents, et collatéraux direct (frères, sœurs)</option>
                <option value="Décès des grands-parents, beaux-parents, beaux-frères, belles sœurs">Décès des grands-parents, beaux-parents, beaux-frères, belles sœurs</option>
                <option value="Exhumation conjoint, enfant, parents">Exhumation conjoint, enfant, parents</option>
                <option value="Exhumation frères, sœurs, beau-frère, belle-sœur">Exhumation frères, sœurs, beau-frère, belle-sœur</option>
              </select>
            </div>
            <div class="col-md-2 form-group">
              <label for="">Droit</label>
              <input type="text" name="nbrDays" id="nbrDays" class="form-control form-control-sm" readonly>
            </div>
            <div class="col-md-4 form-group">
              <label for="" id="yearNow">Nombre de permission acquis de l'année </label>
              <input type="text" id="nbrPermission" class="form-control form-control-sm" readonly>
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 form-group">
              <label for="name">Recherche</label>
              <input type="search" class="form-control form-control-sm" id="nom_matricule" placeholder="RAKOTO 001">
            </div>            
            <div class="col-md-2 form-group">
              <label for="start_date">Date de début</label>
              <input type="date" class="form-control form-control-sm" id="start_date" name="start" required>
            </div>
            <div class="col-md-2 form-group">
              <label for="end_date">Date de fin</label>
              <input type="date" class="form-control form-control-sm" id="end_date" name="end" required readonly>
            </div>            
          </div>
          <div class="row info-custom">
            <input type="hidden" name="id" id="id" required>
            <div class="col-md-5 form-group">
              <label for="name">Nom et prénom(s)</label>
              <input type="text" class="form-control form-control-sm" id="name" name="name" readonly required>
            </div>            
            <div class="col-md-2 form-group">
              <label for="matricule">Matricule</label>
              <input type="text" class="form-control form-control-sm" id="matricule" name="matricule" readonly required>
            </div>
          </div>
  
          <div class="row info-custom" id="interim-form">
            <div class="col-md-5 form-group">
              <label for="name">Nom et prénom(s) intérimaire</label>
              <select name="interimId" id="interim-select" class="form-select form-select-sm">
  
              </select>            
            </div>          
          </div>                  
  
          <!-- Modals formulaire -->         
          <div class="fiche-passation" id="fiche-passation">          
            <div id="eventTitle">
              <h1>Fiche de passation</h1>
            </div>
            <div id="eventBody-passation">
              <!-- <form action="/vacation/passingFile" method="post">             -->
                <div class="row">                
                  <div class="form-group col-md-6">
                    <label for="">Direction</label>
                    <input type="text" name="direction" class="form-control form-control-sm">
                  </div>
                  <div class="form-group col-md-6">
                    <label for="">Intérimaire</label>
                    <input type="text" name="interimaire" class="form-control form-control-sm">
                  </div>
                </div>              
                <br>              
                <br>
                <hr>
                <br>
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>                    
                          <th scope="col" ><b>Description des tâches quotidiennes</b></th>
                          <th scope="col" ><b>Livrable</b></th>
                          <th scope="col" ><b>Référentiel/Procédures</b></th>                            
                      </tr>
                    </thead>
                    <tbody id="tableBody1">                    
                    </tbody>
                    <tfoot >
                        <tr>
                            <td colspan="5">
                                <button type="btn btn-info" class="btn btn-light" onclick="addTableRow1()">Ajouter</button>                    
                            </td>
                        </tr>                          
                    </tfoot>
                  </table>                                               
                </div>
                <br>
                <hr>
                <br>
                <div class="row">
                  <h4><b>Liste du personnel sous la supervision de l’intérimaire</b></h4>
                </div>
                <div class="row">
                  <table class="table">
                    <thead>
                      <tr>                    
                          <th scope="col" >Noms et prénoms</th>
                          <th scope="col" >Fonction</th>                            
                      </tr>
                    </thead>
                    <tbody id="tableBody2">                    
                    </tbody>
                    <tfoot >
                        <tr>
                            <td colspan="5">
                                <button type="btn btn-info" class="btn btn-light" onclick="addTableRow2()">Ajouter</button>                    
                            </td>
                        </tr>                          
                    </tfoot>
                  </table>    
                </div>
                <br>
                <hr>
                <br>
                <div class="row">
                  <h4><b>Inventaire des matériels et consommables</b></h4>
                </div>
                <div class="row">
                  <table class="table">
                    <thead>
                      <tr>                    
                          <th scope="col" >Description</th>
                          <th scope="col" >Quantité</th>                            
                          <th scope="col" >Etat</th>                            
                      </tr>
                    </thead>
                    <tbody id="tableBody3">                    
                    </tbody>
                    <tfoot >
                        <tr>
                            <td colspan="5">
                                <button type="btn btn-info" class="btn btn-light" onclick="addTableRow3()">Ajouter</button>                    
                            </td>
                        </tr>                          
                    </tfoot>
                  </table>    
                </div>
                <br>
                <hr>
                <br>
                <div class="row">
                  <h4><b>Signatures / engagement</b></h4>
                </div>
                <div class="row">
                  <table class="table">
                    <thead>
                      <tr>                 
                          <th scope="col" >Type de document</th>
                          <th scope="col" >Niveau de responsabilité / décision</th>                                                          
                      </tr>
                    </thead>
                    <tbody id="tableBody4">                    
                    </tbody>
                    <tfoot >
                        <tr>
                            <td colspan="5">
                                <button type="btn btn-info" class="btn btn-light" onclick="addTableRow4()">Ajouter</button>                    
                            </td>
                        </tr>                          
                    </tfoot>
                  </table>    
                </div>
                </div>              
                <!--  </form>                   -->              
            </div>           
            <input type="submit" value="Envoyer" class="btn btn-primary" />
          </div>  
  
        </form>              
      </div>
    </div>
  </div>

  <script>

    const fileInput = document.getElementById('piece');
    const label = document.querySelector('label[for="piece"]');

    fileInput.addEventListener('change', function() {
    if (fileInput.files.length > 0) {
        //  Changer 'Sélectionnez un fichier Excel ' en nom du fichier
        label.textContent = fileInput.files[0].name;
    } else {
        label.textContent = 'Sélectionnez un fichier';
    }
    });

  </script>

  <!-- SCRIPT DE L'EVENEMENTS ET LE NOMBRE DE JOURS -->
  <script>
    const EVENT = document.getElementById('event');
    const NBRDAYS = document.getElementById('nbrDays');
    const STARTDATE = document.getElementById('start_date');
    const ENDDATE = document.getElementById('end_date');    

    const eventToDays= {
      "Mariage de l’employé": 3,
      "Mariage de l’enfant de l’employé": 1,
      "Naissance d’un enfant de l’employé": 3,
      "Hospitalisation du (de la) conjoint (e) ou de l’enfant": 3,
      "Maladie soudaine ou accident d’un enfant (assistance maternelle/ paternelle)": 1,
      "Circoncision de l’enfant": 1,
      "Décès du conjoint(e)": 3,
      "Décès d’un enfant, Bru, Gendre": 3,
      "Décès des parents, et collatéraux direct (frères, sœurs)": 2,
      "Décès des grands-parents, beaux-parents, beaux-frères, belles sœurs": 1,
      "Exhumation conjoint, enfant, parents": 1,
      "Exhumation frères, sœurs, beau-frère, belle-sœur": 1,
    }                                                                                                

    const selectedEvent = EVENT.value;
    
    NBRDAYS.value = eventToDays[selectedEvent] + ' ' + (eventToDays[selectedEvent] == 1 ? "jour" : " jours") ;
    var nbrDaysValue = eventToDays[selectedEvent];
    EVENT.addEventListener('change', () => {
      const selectedEvent = EVENT.value;
      NBRDAYS.value = eventToDays[selectedEvent] + ' ' + (eventToDays[selectedEvent] == 1 ? "jour" : " jours") ;
      nbrDaysValue = eventToDays[selectedEvent];          
      generateEndDate();
    });

    STARTDATE.addEventListener('input', () => {      
      generateEndDate();
    });

    function generateEndDate() {
      if(STARTDATE.value) {      
        let strtDate = new Date(STARTDATE.value);
  
        let endDate = new Date(strtDate);
        endDate.setDate(strtDate.getDate() + nbrDaysValue - 1);
        const formattedEndDate = endDate.toISOString().split('T')[0];
        ENDDATE.value = formattedEndDate;
      }
    }

    let currentYear = document.getElementById('yearNow');
    currentYear.textContent += ' ' + new Date().getFullYear();

  </script>
  

  <!-- SCRIPT DE PASSATION  -->
  <script>
    let row1 = 0;
    function addTableRow1() {
      // Créer une nouvelle ligne
      var row = document.createElement("tr");
  
      // Ajouter des cellules à la ligne
      var cell1 = document.createElement("td");
      var cell2 = document.createElement("td");
      var cell3 = document.createElement("td");        
  
      // Créer des champs de formulaire pour chaque cellule
      var input1 = document.createElement("input");
      input1.type = "text";
      input1.name = "taches";
      input1.className = "form-control form-control-sm";
      input1.required = true;
  
      cell1.appendChild(input1);
  
      var input2 = document.createElement("input");
      input2.type = "text";
      input2.name = "livrables";
      input2.className = "form-control form-control-sm";
      input2.required = true;
      cell2.appendChild(input2);
  
      var input3 = document.createElement("input");
      input3.type = "text";
      input3.name = "referentiels";
      input3.className = "form-control form-control-sm";
      input3.required = true;
      cell3.appendChild(input3);        
  
      row.appendChild(cell1);
      row.appendChild(cell2);
      row.appendChild(cell3);        
  
      // Créer un bouton pour supprimer la ligne
      var deleteBtn = document.createElement("i");
      deleteBtn.className = "mdi mdi-delete custom-icon-delete";
      deleteBtn.onclick = function () {
        var row = this.parentNode.parentNode;
        row.parentNode.removeChild(row);
      };
  
      // Ajouter le bouton de suppression à la ligne
      var cell4 = document.createElement("td");
      cell4.appendChild(deleteBtn);
      row.appendChild(cell4);
  
  
      // Ajouter la ligne au tableau
      document.getElementById("tableBody1").appendChild(row);
    }
  
    function addTableRow2() {
      // Créer une nouvelle ligne
      var row = document.createElement("tr");
  
      // Ajouter des cellules à la ligne
      var cell1 = document.createElement("td");
      var cell2 = document.createElement("td");
      var cell3 = document.createElement("td");        
  
      // Créer des champs de formulaire pour chaque cellule
      var input1 = document.createElement("input");
      input1.type = "text";
      input1.name = "noms";
      input1.className = "form-control form-control-sm";
      input1.required = true;
      cell1.appendChild(input1);
  
      var input2 = document.createElement("input");
      input2.type = "text";
      input2.name = "fonctions";
      input2.className = "form-control form-control-sm";
      input2.required = true;
      cell2.appendChild(input2);        
  
      row.appendChild(cell1);
      row.appendChild(cell2);
      row.appendChild(cell3);    
              
      // Créer un bouton pour supprimer la ligne
      var deleteBtn = document.createElement("i");
      deleteBtn.className = "mdi mdi-delete custom-icon-delete";
      deleteBtn.onclick = function () {
        var row = this.parentNode.parentNode;
        row.parentNode.removeChild(row);
      };
  
      // Ajouter le bouton de suppression à la ligne
      var cell4 = document.createElement("td");
      cell4.appendChild(deleteBtn);
      row.appendChild(cell4);
  
      // Ajouter la ligne au tableau
      document.getElementById("tableBody2").appendChild(row);
    }
  
    function addTableRow3() {
      // Créer une nouvelle ligne
      var row = document.createElement("tr");
  
      // Ajouter des cellules à la ligne
      var cell1 = document.createElement("td");
      var cell2 = document.createElement("td");
      var cell3 = document.createElement("td");        
  
      // Créer des champs de formulaire pour chaque cellule
      var input1 = document.createElement("input");
      input1.type = "text";
      input1.name = "descriptions";
      input1.className = "form-control form-control-sm";
      input1.required = true;
      cell1.appendChild(input1);
  
      var input2 = document.createElement("input");
      input2.type = "text";
      input2.name = "quantities";
      input2.className = "form-control form-control-sm";
      input2.required = true;
      cell2.appendChild(input2); 
      
      var input3 = document.createElement("input");
      input3.type = "text";
      input3.name = "etats";              
      input3.className = "form-control form-control-sm";
      input3.required = true;
      cell3.appendChild(input3);     
  
      row.appendChild(cell1);
      row.appendChild(cell2);
      row.appendChild(cell3);       
      
      // Créer un bouton pour supprimer la ligne
      var deleteBtn = document.createElement("i");
      deleteBtn.className = "mdi mdi-delete custom-icon-delete";
      deleteBtn.onclick = function () {
        var row = this.parentNode.parentNode;
        row.parentNode.removeChild(row);
      };
  
      // Ajouter le bouton de suppression à la ligne
      var cell4 = document.createElement("td");
      cell4.appendChild(deleteBtn);
      row.appendChild(cell4);
  
      // Ajouter la ligne au tableau
      document.getElementById("tableBody3").appendChild(row);
    }
  
    function addTableRow4() {
      // Créer une nouvelle ligne
      var row = document.createElement("tr");
  
      // Ajouter des cellules à la ligne
      var cell1 = document.createElement("td");
      var cell2 = document.createElement("td");
      var cell3 = document.createElement("td");        
  
      // Créer des champs de formulaire pour chaque cellule
      var input1 = document.createElement("input");
      input1.type = "text";
      input1.name = "typeDocs";
      input1.className = "form-control form-control-sm";
      input1.required = true;
      cell1.appendChild(input1);
  
      var input2 = document.createElement("input");
      input2.type = "text";
      input2.name = "responsabilites";
      input2.className = "form-control form-control-sm";
      input2.required = true;
      cell2.appendChild(input2);        
  
      row.appendChild(cell1);
      row.appendChild(cell2);
      row.appendChild(cell3);        
      
      // Créer un bouton pour supprimer la ligne
      var deleteBtn = document.createElement("i");
      deleteBtn.className = "mdi mdi-delete custom-icon-delete";
      deleteBtn.onclick = function () {
        var row = this.parentNode.parentNode;
        row.parentNode.removeChild(row);
      };
  
      // Ajouter le bouton de suppression à la ligne
      var cell4 = document.createElement("td");
      cell4.appendChild(deleteBtn);
      row.appendChild(cell4);
  
      // Ajouter la ligne au tableau
      document.getElementById("tableBody4").appendChild(row);
    }
    
  </script>
  
  <!-- ouvrir le modal de formulaire de passation -->
  <script>
    // Afficher le modal  
    let activeModal = document.getElementById('btn-passation');
    var fichePassation = document.getElementById('fiche-passation');                        
    var eventModal = document.getElementById('eventModal');
    activeModal.addEventListener('click', () => {
      fichePassation.classList.toggle('show-fiche-passation');    
    });
    
  </script>
  
  
  <script>
    var employees = [];
    var matriculeAdminLogged = "<%= req.session.admin.matriculeEmployee %>";
    console.log(matriculeAdminLogged);
  </script>
  
  <% if(employees) { %>
    <% employees.forEach(employee => { %>
      <script>
        employee = {};
        employee.id = "<%= employee.id %>";
        employee.matricule = "<%= employee.matricule %>";
        employee.name = "<%= employee.name_employee + ' ' + employee.last_name_employee %>";        
        employee.permission = "<%= employee.permission %>"
        employee.fonction = "<%= employee.fonction %>";
        employee.interims = [];
      </script>
        <% if(employee) { %>
          <% employee.interims.forEach(interim => { %>
            <script>
              interim = {};
              interim.id = "<%= interim.id %>";
              interim.nom = "<%= interim.name_employee %>";
              interim.prenom = "<%= interim.last_name_employee %>";
              employee.interims.push(interim);
            </script>
          <% }) %>
        <% } %>
      <script>
        employees.push(employee);   

      </script>
    <% })  %>
  <% } %>
  
  <script>
    console.log(employees)
    let info_custom = document.querySelector('.info-custom');
    let nbrPermission = document.getElementById("nbrPermission");
    // info_custom.style.display = 'none';
    let nom_matricule_search = document.getElementById("nom_matricule");  
    let id = document.getElementById('id');  
    let matricule = document.getElementById('matricule');
    let name = document.getElementById('name');    
    let interimId = document.getElementById('interimId')
    let interimName = document.getElementById('interimName');  
    let interimSelect = document.getElementById('interim-select');
  
    //  Valeur pour le demande avec id et valeur initial pour le demande sans id  
    for(const employee of employees) {
      if(employee.matricule === matriculeAdminLogged ) {
        info_custom.style.display = 'flex';
        id.value = employee.id;
        matricule.value = employee.matricule;
        name.value = employee.name;        
        nbrPermission.value = employee.permission + ' ' + (employee.permission > 1 ? 'jours' : 'jour' );        
        interimSelect.textContent = '';
        employee.interims.forEach(interim => {
          let option = document.createElement('option');
          option.value = interim.id;
          option.textContent = interim.nom + ' ' + interim.prenom;
          interimSelect.appendChild(option);
        });
      }
    }
  
    //  La valeur dans nom_matricule change
    nom_matricule_search.addEventListener('input', () => {    
      let value = nom_matricule_search.value.toLowerCase();
      let empl_found = false;
      for(const employee of employees) {
        const nom = employee.name.toLowerCase();
        const n_matricule = employee.matricule;      
        
        if (nom.includes(value) || n_matricule.includes(value)) {          
          info_custom.style.display = 'flex';
          interimSelect.style.display = 'flex';
          id.value = employee.id;
          matricule.value = employee.matricule;
          name.value = employee.name;        
          nbrPermission.value = employee.permission + ' ' + (employee.permission > 1 ? 'jours' : 'jour' );                            
          interimSelect.textContent = '';
          employee.interims.forEach(interim => {
            let option = document.createElement('option');
            option.value = interim.id;
            option.textContent = interim.nom + ' ' + interim.prenom;
            interimSelect.appendChild(option);
          });        
          empl_found = true;
        }        
        
        // Non trouver ou il n'y a rien dans le formulaire nom_matricule
        if(!empl_found || value == '') {        
          //  Vider les formulaires et ne pas afficher
          info_custom.style.display = 'none';
          id.value = '';
          matricule.value = '';
          name.value = '';     
          nbrPermission.value = '0 jour';          
          interimSelect.style.display = 'none';
          found = false;
        }
      }
    });
    
  </script>