<div class="corps">
    <div class="card">
        <div class="head-main">
            <h2>Edition 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) { %>
          <div class="alert alert-danger">
            <ul>
              <% errors.forEach(function(error) { %>
                <p><%= error.msg %></p>
              <% }) %>              
            </ul>
          </div>
        <% } %>
        <% if(!permission.passingFile) { %>
        <div class="alert alert-danger">
            <p>Fiche de passation de service n'est pas encore rempli.</p>
        </div>
        <% } %>
        <div class="row">

          <div class="col-md-5">                         
            <% if(!permission.passingFile) {%>            
                <button class="btn-import" id="btn-passation">Passation</button>            
            <% } else { %>                                                      
                <div id="affiche-passation" class="btn-view-cv">Voir le fiche de passation</div>
                <button class="btn btn-reaction" data-title="Supprimer" onclick="deletePassingFile('<%= permission.passingFile.id %>')" ><i class="mdi mdi-delete custom-icon-delete"></i></button>               
            <% } %>
          </div>
          <div class="col-md-4">                         
            <% if(!permission.piece) {%>            
              <form action="/permission/piece" method="POST" enctype="multipart/form-data"> 
                <input type="hidden" name="permissionId" value="<%= permission.id %>" required>           
                <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;
                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" required>
                <button type="submit" class="btn-import">Importer</button>
              </form>                         
            <% } else { %>                                      
                <a href="/permission/piece/<%= permission.piece.id %>"><div id="affiche-passation" class="btn-view-cv">Voir le pièce justificatif</div></a>
                <button class="btn btn-reaction" data-title="Supprimer" onclick="deletePieceJust('<%= permission.piece.id %>')" ><i class="mdi mdi-delete custom-icon-delete"></i></button>               
            <% } %>
          </div>
        </div>
        <form method="post" id="form" action="/permission/<%= permission.id %>" class="mt-3">
            <input type="hidden" value="<%= employee.id %>" name="idEmployee">
            <div class="row">
                <div class="col-md-5 form-group">
                    <label for="reason">Evènement</label>
                    <select name="event" id="event" class="form-select" disabled="true">
                        <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 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-2 form-group">
              <label for="start_date">Date de début</label>
              <input type="date" value="<%= permission.startDate %>" class="form-control form-control-sm" id="start_date" name="start" readonly required>
            </div>
            <div class="col-md-2 form-group">
              <label for="end_date">Date de fin</label>
              <input type="date" value="<%= permission.endDate %>" class="form-control form-control-sm" id="end_date" name="end" readonly required>
            </div>        
            <input type="hidden" value="<%= employee.id %>" name="id" id="id" required>
            <div class="col-md-2 form-group">
              <label for="matricule">Matricule</label>
              <input type="text" value="<%= employee.matricule %>" class="form-control form-control-sm" id="matricule" name="matricule" readonly >
            </div>
            <div class="col-md-4 form-group">
              <label for="name">Nom</label>
              <input type="text" value="<%= employee.name_employee + ' ' + employee.last_name_employee %>" class="form-control form-control-sm" id="name" name="name" readonly value="">
            </div>                 
            <% if( 
              req.session 
              && req.session.admin 
              && (req.session.admin.role == 'Super admin' || req.session.admin.role == 'Manager' || req.session.admin.role == 'Admin') 
              && req.session.admin.matriculeEmployee !== employee.matricule // l'admin ne peut pas valider leur propre conge
            ) { %>
              <div class="col-md-2 form-group d-flex align-items-center">
                <% if(permission.isConfirmed) { %>
                    <label for="valid" style="margin: 0 10px;">
                      Valider par 
                      <%= permission.validateur.firstName %> 
                      <%= permission.validateur.lastName %>
                    </label>
                <% } else { %>                    
                    <input type="hidden" <% if(permission.isConfirmed) { %> checked disabled <% } %> name="valid" id="valid">
                    <input type="hidden" name="validator" value="<%= req.session.admin.id %>">
                <% } %>
                  
              </div>
            <% } %>
            
          </div>
          <div class="row info-custom">
                       
          </div>
             <div class="row info-custom">                    
            <div class="col-md-4 form-group">
              <label for="name">Nom et prénom(s) intérimaire</label>
              <input type="text" value="<%= employee.name_interim %>" class="form-control form-control-sm" id="name_interim" name="name" readonly>
            </div>
            <div class="col-md-3 form-group">
              <label for="solde">Fonction intérimaire</label>
              <input type="text" value="<%= employee.fonction_interim %>" class="form-control form-control-sm" id="fonction_interim" name="fonction_interim" readonly>
            </div>                                                    
          </div> 
          <div class="form-group" id="reason">            
          </div>
          <% if( req.session && req.session.admin && (req.session.admin.role == 'Super admin' || req.session.admin.role == 'Manager' || req.session.admin.role == 'Admin'  )) { %>            
            <% if(!permission.isConfirmed) { %>
              <button id="validate" class="btn btn-success">Valider</button>
            <% } %>
            <button id="reject" class="btn btn-danger">Rejeter</button>
          <% } %>
        </form>              
      </div>
    </div>
    </div>       

    <!-- Modals formulaire -->
    <% if(!permission.passingFile) {%>            
    <div class="modal" id="modal">
      <div id="eventModal" class="eventModal event-passation">
        <div id="eventTitle">
          <h1>Fiche de passation</h1>
        </div>
        <div id="eventBody-passation">
          <form action="/permission/passingFile" method="post">
            <input type="hidden" name="permissionId" value="<%= permission.id %>">
            <div class="row">
              <div class="form-group col-md-6">
                <label for="">Intitulé du poste</label>
                <input type="text" name="fonction" class="form-control form-control-sm" value="<%= employee.fonction %>" readonly>
              </div>
              <div class="form-group col-md-6">
                <label for="">Direction</label>
                <input type="text" name="direction" class="form-control form-control-sm" >
              </div>
            </div>
            <div class="row">
              <h4>Intérim durant la période du: <b><%= permission.startDate %></b>  au <b><%= permission.endDate %></b> inclus (jj/mm/aaaa)</h4>
            </div>
            <br>
            <div class="row">
              <div class="form-group col-md-6">
                <label for="">Titulaire du poste</label>
                <input type="text" name="titulaire" value="<%= employee.name_employee %> <%= employee.last_name_employee %>" class="form-control form-control-sm" readonly >
              </div>
              <div class="form-group col-md-6">
                <label for="">Intérimaire</label>
                <input type="text" name="interimaire" class="form-control form-control-sm" required>
              </div>
            </div>
            <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>
            <div id="eventFoot">            
              <button type="submit" class="btn btn-primary">Enregistrer</button>            
              <button class="btn btn-primary" id="close-modal">Fermer</button>
            </div>
          </form>                  
        </div>          
      </div> 
    </div>
    <% } %>

    <% if(permission.passingFile) {%>            
    <div class="modal" id="modal">
      <div id="eventModal" class="eventModal event-passation">
        <div id="eventTitle">
          <h1>Fiche de passation</h1>          
        </div>
        <div id="eventBody-passation">
          <form action="#" method="post">
            <input type="hidden" name="permissionId" value="<%= permission.id %>">
            <div class="row">
              <div class="form-group col-md-6">
                <label for="">Intitulé du poste</label>
                <input type="text" name="fonction" class="form-control form-control-sm" value="<%= employee.fonction %>" readonly>
              </div>
              <div class="form-group col-md-6">
                <label for="">Direction</label>
                <input type="text" name="direction" class="form-control form-control-sm" value="<%= permission.passingFile.direction %>" readonly >
              </div>
            </div>
            <div class="row">
              <h4>Intérim durant la période du: <b><%= permission.startDate %></b>  au <b><%= permission.endDate %></b> inclus (jj/mm/aaaa)</h4>
            </div>
            <br>
            <div class="row">
              <div class="form-group col-md-6">
                <label for="">Titulaire du poste</label>
                <input type="text" name="titulaire" value="<%= employee.name_employee %> <%= employee.last_name_employee %>" class="form-control form-control-sm" readonly >
              </div>
              <div class="form-group col-md-6">
                <label for="">Intérimaire</label>
                <input type="text" name="interimaire" class="form-control form-control-sm" value="<%= permission.passingFile.interim %>" required readonly>
              </div>
            </div>
            <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">
                  <% if( permission.passingFile.tasks && permission.passingFile.tasks.length > 0) { %>
                    <% permission.passingFile.tasks.forEach((task) => { %>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm " value="<%= task.description %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= task.deliverable %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= task.reference %>" readonly></td>  
                        </tr>
                    <% }) %>
                  <% } %>                    
                </tbody>                
              </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">
                  <% if( permission.passingFile.personnels && permission.passingFile.personnels.length > 0) { %>
                    <% permission.passingFile.personnels.forEach((personnel) => { %>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm " value="<%= personnel.name_and_last %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= personnel.fonction %>" readonly></td>                              
                        </tr>
                    <% }) %>
                  <% } %>                
                </tbody>                
              </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"> 
                  <% if( permission.passingFile.materials && permission.passingFile.materials.length > 0) { %>
                    <% permission.passingFile.materials.forEach((material) => { %>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm " value="<%= material.description %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= material.quantity %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= material.state %>" readonly></td>  
                        </tr>
                    <% }) %>
                  <% } %>                
                </tbody>                
              </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">
                  <% if( permission.passingFile.signatures && permission.passingFile.signatures.length > 0) { %>
                    <% permission.passingFile.signatures.forEach((signature) => { %>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm " value="<%= signature.doc_type %>" readonly></td>  
                            <td><input type="text" class="form-control form-control-sm " value="<%= signature.responsabily_level %>" readonly></td>                              
                        </tr>
                    <% }) %>
                  <% } %>                    
                </tbody>                
              </table>    
            </div>
          </form>                  
          <div id="eventFoot">            
            <a href="/permission/export-passingFile/<%= permission.passingFile.id %>"><button class="btn btn-primary">Exporter</button></a>
            <button class="btn btn-primary" id="close-modal">Fermer</button>
          </div>          
        </div>
      </div>      
    </div>
    <% } %>

    <script>
      const nbrPermission = document.getElementById('nbrPermission');
      nbrPermission.value = "<%= employee.permission %>" + ' ' + "<%= (employee.permission > 1 ? 'jours' : 'jour' ) %>"; 
    </script>


    <script>
        let currentYear = document.getElementById('yearNow');
    currentYear.textContent += ' ' + new Date().getFullYear();
      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 modal = document.getElementById('modal');                        
    var eventModal = document.getElementById('eventModal');
    activeModal.addEventListener('click', () => {
      modal.classList.add('show-modal');
      eventModal.classList.add('show-event-modal');
    });


    let closeModal = document.getElementById('close-modal');               
    closeModal.addEventListener('click', () => {                    
        eventModal.classList.remove('show-event-modal');
        modal.classList.remove('show-modal');
    })
  </script>

  <!-- ouvrir le modal de formulaire de passation rempli -->
  <script>
    // Afficher le modal
    let activeModal2 = document.getElementById('affiche-passation');
    console.log(activeModal2)
    var modal = document.getElementById('modal');                        
    var eventModal = document.getElementById('eventModal');
    activeModal2.addEventListener('click', () => {
      modal.classList.add('show-modal');
      eventModal.classList.add('show-event-modal');
    });


    let closeModal2 = document.getElementById('close-modal');               
    closeModal2.addEventListener('click', () => {                    
        eventModal.classList.remove('show-event-modal');
        modal.classList.remove('show-modal');
    })
  </script>
  
  <script>
    function deletePassingFile(id) {
        //  Demande de confirmation de suppression de cet enfant
        const confirmation = confirm("Vous voulez vraiment supprimer le fiche de passation ?");
    
        if(confirmation) {        
            // Effectuez une requête AJAX pour supprimer l'enfant
            fetch(`/vacation/delete-passing-file/${id}`, {
                method: 'DELETE',
            })
                .then(response => {          
                if (response.ok) {
                    // La suppression de l'enfant a réussi, vous pouvez effectuer des actions supplémentaires si nécessaire                    
                    //  Recharger la page
                    location.reload();
                } else {
                    // Gérez les erreurs lors de la suppression de l'enfant
                    console.error('Une erreur est survenue lors de la suppression du fiche');
                }
                })
        }
    }   
    function deletePieceJust(id) {
        //  Demande de confirmation de suppression de cet enfant
        const confirmation = confirm("Vous voulez vraiment supprimer le pièce justificatif ?");
    
        if(confirmation) {        
            // Effectuez une requête AJAX pour supprimer l'enfant
            fetch(`/permission/delete-piece-just/${id}`, {
                method: 'DELETE',
            })
                .then(response => {          
                if (response.ok) {
                    // La suppression de l'enfant a réussi, vous pouvez effectuer des actions supplémentaires si nécessaire                    
                    //  Recharger la page
                    location.reload();
                } else {
                    // Gérez les erreurs lors de la suppression de l'enfant
                    console.error('Une erreur est survenue lors de la suppression du fiche');
                }
                })
        }
    }   
</script>

  <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 = 'Importer le fiche de passation';
    }
    });

</script>  

  <script>
    let validate = document.getElementById('validate');
    let validInput = document.getElementById('valid');
    console.log(validInput)
    let form = document.getElementById('form');
    validate.addEventListener('click', async (e) => {
      e.preventDefault();
      validInput.value = 'on';
      console.log(validInput)
      form.submit();
    }); 
  </script>


  <script>
    //  Pour gerer le texte nbr du congee
    let nbrDays = document.getElementById('nbrDays');   

    let chaine = "<%= permission.nbrDays %>" + "<%= (permission.nbrDays == 1) ? ' jour' : ' jours'%>";    
  </script>
  <% if(permission.half) { %>
    <script> 
        chaine += " et demi-journée";
    </script>
  <% } %>
  <script>
    nbrDays.value = chaine;
  </script>

  <!-- Script pour le rejection de congee -->
  <script>
    const reject = document.getElementById('reject');
    var reason = document.getElementById('reason');    
    var oneClick = false;
    reject.addEventListener('click', function(e) {
      e.preventDefault();
      console.log(oneClick)
      if(!oneClick) {
        var label = document.createElement('label');
        var textarea = document.createElement('textarea');
        label.textContent = "Cause de rejection ";
        textarea.classList.add('form-control');
        textarea.classList.add('form-control-sm');
        textarea.id = 'rejectReason';
        reason.appendChild(label);
        reason.appendChild(textarea);
        oneClick = true;
      }
      else {        
        var rejectReason = document.getElementById('rejectReason');

        // Effectuez une requête AJAX 
        fetch(`/permission/reject`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ reject: rejectReason.value, idPermission: "<%= permission.id %>" }),            
          })
            .then(response => {          
              if (response.ok) {                
                console.log('Rejection effectuee');
                
                window.location.href = '/';
              } else {
                // Gérez les erreurs lors de la suppression de l'enfant
                console.error('Une erreur est survenue lors de la suppression de l\'enfant');
              }
            })
            .catch(error => {
              // Gérez les erreurs lors de la requête AJAX
              console.error('Une erreur est survenue lors de la requête AJAX', error);
            });
      }      
    })
    
    </script>