
<div class="corps">
    
<div class="card">
    <div class="head-main">
        <h2>Liste des utilisateurs</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">
        <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') {%>
            <a href="/admin/signup">
                <button class="btn btn-primary">
                    <ion-icon name="add-circle-outline"></ion-icon>
                    Nouveau
                </button>
            </a>
            <% } %>
              
        </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 d'utilisateur</th>
                        <th scope="col">E-mail</th>
                        <th scope="col">Contact</th>
                        <th scope="col">Rôle</th>                    
                        <th scope="col">Actions</th>                
                    </tr>
                    <tbody id="adminTableBody">                
                    </tbody>
                </thead>
            </table>
        </div>
        </div>    
    </div>
      
</div>

<script>

    // Données des employés
    var admins = [];    
</script>

<% admins.forEach(( value ) => { %>
    <script>        
        admin = {};                
        admin.id = "<%= value.id %>"; 
        admin.nom = "<%= value.firstName %> <%= value.lastName %>";
        admin.email = "<%= value.email %>";
        admin.contact = "<%= value.phoneNumber %>";
        admin.role = "<%= value.role %>";        
        // employee.contact = "<%# value.contact %>";
        admins.push(admin);          
    </script>
<% })%>
   
<script>    
   // Récupérer les éléments du DOM
   const searchInput = document.getElementById('searchInput');
   const employeeTableBody = document.getElementById('adminTableBody');  
   
   // 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 admin of admins) {        
            tableRows += `<tr>
                    <td>${admin.id}</td>
                    <td>${admin.nom}</td>
                    <td>${admin.email}</td>
                    <td>${admin.contact}</td>
                    <td>${admin.role}</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') { %>
                            <button class="btn btn-reaction" data-title="Editer">
                                <a href="/admin/${admin.id}">
                                    <ion-icon name="pencil-outline"></ion-icon>
                                </a>
                            </button>                            
                            <button class="btn btn-reaction" data-title="Demandables">
                                <a href="/admin/canApplicant/${admin.id}">
                                    <ion-icon name="send-outline"></ion-icon>
                                </a>
                            </button>                            
                            <button class="btn btn-reaction" data-title="Validables">
                                <a href="/admin/canValidate/${admin.id}">
                                    <ion-icon name="checkmark-done-outline"></ion-icon>
                                </a>
                            </button>                            
                            <!-- <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;            
            //  L'admin en cours peut modifier leur propre profil
            if(admin.id == AdminActive.id && AdminActive.role !== 'Super admin') {            
                let numero = counter;    
                //  Attend avant que le DOM soit entierement charge
                document.addEventListener('DOMContentLoaded', function() {
                    let reaction = document.getElementById("reactionIcons-" + numero);            
                    console.log(reaction)
                    reaction.innerHTML = `<button class="btn btn-reaction" data-title="Editer">
                            <a href="/admin/${admin.id}">
                                <ion-icon name="pencil-outline"></ion-icon>
                            </a>
                        </button>`
                })
            }

            //  Le super admin peut modifier leur mots de passe sans passee au mail
            if(AdminActive.role === 'Super admin' && AdminActive.id == admin.id) {
                let numero = counter;    
                //  Attend avant que le DOM soit entierement charge
                document.addEventListener('DOMContentLoaded', function() {
                    let reaction = document.getElementById("reactionIcons-" + numero);            
                    console.log(reaction)
                    reaction.innerHTML += `<button class="btn btn-reaction" data-title="Mot de passe">
                                <a href="/admin/super-reset">
                                    <ion-icon name="lock-closed-outline"></ion-icon>
                                </a>
                            </button>`
                })
            }
            counter++;
        }
    }

   function addEdit() {
        
   }
      

   // Fonction pour filtrer les résultats du tableau
   function filterTable() {
     const searchValue = searchInput.value.toLowerCase();
     for (const row of adminTableBody.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>

  

