
<div class="corps">
    
    <div class="card">
        <div class="card-header">
            
        </div>
        <div class="head-main">
            <h2> Ceux que <span style="color: rgba(0,0,0,.7);">
                    <%= admin.firstName %>
                        <%= admin.lastName %>
                </span> peut valider</h2>
        
            <a href="/admin">
                <button class="button-planning">
                    <!--<img src="/images/planning.png" class="svg-icon" alt="">-->
                    <ion-icon name="home-outline"></ion-icon>
                    <span class="label">Liste des utilisateurs</span>
                </button>
            </a>
        </div>
        <div class="card-body">
            <div class="container-custom-search mb-3">        
                <form class="search-form">
                    <div class="search-container">
                      <input type="text" name="search" id="searchInput" placeholder="Rechercher...">
                      <button type="submit"><ion-icon name="search-outline"></ion-icon></button>
                    </div>
                </form>
                            
                <% if( req.session.admin && req.session.admin.role === 'Super admin') {%>                
                    <button class="btn btn-primary" id="add-employee">
                        <ion-icon name="add-circle-outline"></ion-icon>
                        Ajouter
                    </button>                
                <% } %>
                  
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="employeeTable">
                    <thead>
                        <tr class="table-secondary">                   
                            <th scope="col">ID</th> 
                            <th scope="col">Nom et Prénom(s)</th>                        
                            <th scope="col">Fonction</th>                    
                            <th scope="col"></th>                
                        </tr>
                        <tbody id="employeeTableBody">                
                        </tbody>
                    </thead>
                </table>
            </div>
            </div>    
        </div>
          
    </div>
    <!-- Modal formulaire -->

<div class="modal" id="modal">
    <div id="eventModal" class="eventModal" style="height: auto;">
        <form action="/admin/canValidate" method="POST">
            <input type="hidden" name="adminId" value="<%= admin.id %>">
            <div id="eventTitle">
                <h1><span style="color: rgba(0,0,0,.7);"><%= admin.firstName %> <%= admin.lastName %></span> peut demander </h1>
            </div>
            <div id="eventBody">
                <div class="form-group">
                    <label for="">Nom et Prénom(s) - Fonction </label>
                    <select name="employeeId" id="" class="form-select">
                        <% if(employeesNotValidate.length > 0) { %>
                            <% employeesNotValidate.forEach(employee => { %>
                                <option value="<%= employee.id %>"><%= employee.name_employee %> <%= employee.last_name_employee %> - <%= employee.fonction %> </option>
                            <% }) %>
                        <% } %>
                    </select>
                </div>
            </div>
            <div id="eventFoot">                
                <button type="submit" class="btn btn-primary">Ajouter</button>                
                <button type="reset" class="btn btn-primary" id="close-modal">Fermer</button>
            </div>
        </form>
    </div>
</div>

<script>
    const Add = document.getElementById('add-employee');        
    var modal = document.getElementById('modal');                        
    var eventModal = document.getElementById('eventModal');
    const close = document.getElementById('close-modal');
    Add.addEventListener('click', () => {
        modal.classList.add('show-modal');
        eventModal.classList.add('show-event-modal');
    });

    close.addEventListener('click', () => {
        modal.classList.toggle('show-modal');
        eventModal.classList.toggle('show-event-modal');        
    })

</script>
    
    <script>
    
        // Données des employés
        var employees = [];    
    </script>
    
    <% employees.forEach(( value ) => { %>
        <script>        
            employee = {};                
            employee.id = "<%= value.id %>"; 
            employee.nom = "<%= value.name_employee %> <%= value.last_name_employee %>";                
            employee.fonction = "<%= value.fonction ? value.fonction : '' %>";                
            employees.push(employee);          
        </script>
    <% })%>
       
    <script>    
       // Récupérer les éléments du DOM
       console.log(employees)
       const searchInput = document.getElementById('searchInput');
       const employeeTableBody = document.getElementById('employeeTableBody');  
       
       // Fonction pour générer les lignes du tableau
        function generateTableRows() {
            let tableRows = '';
            var AdminActive = {};
            AdminActive.id = "<%= req.session.admin ? req.session.admin.id : 0 %>";
            AdminActive.role = "<%= req.session.admin ? req.session.admin.role : '' %>"
            let counter = 1;
            for (const employee of employees) {        
                tableRows += `<tr>
                        <td>${employee.id}</td>
                        <td>${employee.nom}</td>                    
                        <td>${employee.fonction}</td>                                                                                
                        <td>                            
                        <div class="reaction-icons" id="reactionIcons-${counter}">                                                        
                            <!--<button class="btn btn-reaction" data-title="Voir CV"><a href="/employee/cv/employee.id"><i class="mdi mdi-file-document custom-icon-file"></i></a></button>-->
                            <% if (req.session.admin && req.session.admin.role === 'Super admin') { %>
                                <a href="/admin/canValidate/<%= admin.id %>/delete/${ employee.id }">
                                    <button type="button" class="btn btn-danger" >
                                        Retirer
                                    </button>                            
                                </a>                             
                                <!-- <button class="btn btn-reaction" data-title="Supprimer">
                                    <a href="/employee/">                            
                                        <ion-icon class="custom-icon-delete" name="trash-outline"></ion-icon>                      
                                        </a>
                                        </button> 
                                        -->
                            <% } %>
                        </div>                            
                        </td>
                    </tr>`;
                employeeTableBody.innerHTML = tableRows;                        
                counter++;
            }
        }
    
       function addEdit() {
            
       }
          
    
       // Fonction pour filtrer les résultats du tableau
       function filterTable() {
         const searchValue = searchInput.value.toLowerCase();
         for (const row of employeeTableBody.rows) {
           const name = row.cells[0].textContent.toLowerCase();       
        //    const firstName = row.cells[3].textContent.toLowerCase();
       
           if (name.includes(searchValue)) {
             row.style.display = '';
           } else {
             row.style.display = 'none';
           }
         }
       }
       
       // Générer les lignes du tableau initialement
       generateTableRows();
       
       // Écouter les modifications de l'input de recherche
       searchInput.addEventListener('input', filterTable);   
    </script>
    
      
    
    