
<div class="corps">
    <div class="card">
        <div class="head-main">
            <h2>Liste des employés</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>     
        <% if (msg !== null ) { %>            
            <div class="alert alert-success" role="alert">
                <p><%= msg %></p>
            </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 && req.session.admin && req.session.admin.role == 'Super admin') { %>        
                <!-- <form action="/employee/information-excel" method="POST" enctype="multipart/form-data">            
                    <label for="excelFile">Renseignement .fichier Excel</label>
                    <input type="file"  name="file2" id="excelFile" accept=".xlsx, .xls" required>
                    <button type="submit" class="btn-import">Importer</button>
                </form> -->
                    <a href="/employee/newEmpl">
                        <button class="btn btn-primary">
                            <ion-icon name="add-circle-outline"></ion-icon>
                            Ajouter
                        </button>
                    </a>                    
                <% } %>

                <!-- <% if(req.session && req.session.admin && req.session.admin.role == 'Super admin') { %>        
                <form action="/employee/import-excel" method="POST" enctype="multipart/form-data">            
                    <label for="excelFile">Congé .fichier Excel</label>
                    <input type="file"  name="file" id="excelFile" accept=".xlsx, .xls" required>
                    <button type="submit" class="btn-import">Importer</button>
                </form>
                <% } %> -->

                <% if(req.session && req.session.admin && req.session.admin.role == 'Super admin') { %>        
                    <form action="/employee/export" method="POST" style="display: flex; flex-direction: row; align-items: end;">   
                        <div class="form-group" style="margin: 0 5px 0 0;">
                            <label for="start" style="padding: 0; box-shadow: 0 0 0 #fff;">Mois</label>
                            <input type="month" name="startDate" class="form-control form-control-sm">                                                  
                        </div>   
                        <!-- <div class="form-group" style="margin: 0 5px 0 0;">
                            <label for="end" style="padding: 0; box-shadow: 0 0 0 #fff;">Fin</label>
                            <input type="date" name="endDate" id="end" class="form-control form-control-sm">
                        </div>                                                     -->
                        <button type="submit" class="btn-import">Exporter</button>                        
                    </form>
                <% } %>
                
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="employeeTable">
                    <thead>
                        <tr class="table-secondary">
                            <th scope="col">#</th>
                            <th scope="col">Matricule</th>
                            <th scope="col">Nom</th>
                            <th scope="col">Prénom(s)</th>
                            <th scope="col">Contact</th>
                            <th scope="col">Fonction</th>
                            <th scope="col">Congées</th>
                            <% if( req.session && req.session.admin && req.session.admin.role === 'Super admin') {%>
                                <th scope="col">Actions</th>                
                            <% } %>
                        </tr>
                        <tbody id="employeeTableBody">                
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>            
    </div>
      
</div>

<script>
    function deleteEmployee(id) {
        //  Demande de confirmation de suppression de cet enfant
        const confirmation = confirm("Vous voulez vraiment supprimer l' employée ?");
    
        if(confirmation) {        
            // Effectuez une requête AJAX pour supprimer l'enfant
            fetch(`/employee/${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
                    console.log('Enfant supprimé avec succès');
                    //  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 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>


<script>
    //  Script pour l'import excel

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

    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 Excel ';
    }
    });

</script>  


<script>

    // Données des employés
    var employees = [];
    var fonctions = [];
    var vacations = [];
</script>

<% data.employees.forEach(( value ) => { %>
    <script>        
        employee = {}; 
        employee.id = parseInt("<%= value.id %>");
        employee.matricule = "<%= value.matricule %>";
        employee.nom = "<%= value.name_employee %>";
        employee.prenom = "<%= value.last_name_employee %>";
        employee.contact = "<%= value.contact_airtel || value.contact_telma || value.contact_orange || value.contact_flotte %>";
        employee.fonctionId = parseInt("<%= value.fonction %>");
        employee.soldeVacation = "<%= value.vacation ? value.vacation.totalVacation : '' %>";
        // employee.contact = "<%# value.contact %>";
        employees.push(employee);  
        console.log(employee)      
    </script>
<% })%>

<% data.fonctions.forEach((value) => { %>
    <script>
        fonction = {};
        fonction.id = parseInt("<%= value.id %>");
        fonction.nameFunction = "<%= value.nameFunction %>";      
        fonctions.push(fonction);
        console.log(fonction)
    </script>
<% }) %>
   
<script>    
   // Récupérer les éléments du DOM
   const searchInput = document.getElementById('searchInput');
   const employeeTableBody = document.getElementById('employeeTableBody');

    function functionEmployee(employeeFonction) {        
        let name = '';
        fonctions.forEach(function(fonction) {
            if(fonction.id === employeeFonction) {
                console.log(fonction.nameFunction);
                name = fonction.nameFunction;       
                return;
            }
        });
        return name;        
    }

    // 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[2].textContent.toLowerCase();
            const firstName = row.cells[3].textContent.toLowerCase();

            if (name.includes(searchValue) || firstName.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);
   
   // Fonction pour générer les lignes du tableau
   function generateTableRows() {
     let tableRows = '';
   
     for (const employee of employees) {
        let fonction = functionEmployee(employee.fonctionId)
        tableRows += `<tr>
                <td>${employee.id}</td>
                <td>${employee.matricule}</td>
                <td>${employee.nom}</td>
                <td>${employee.prenom}</td>
                <td>${employee.contact}</td>                
                <td>${fonction}</td>            
                <td>${employee.soldeVacation}</td>              
                <% if(
                    req.session
                    && req.session.admin
                    && req.session.admin.role === 'Super admin'
                ) { %>    
                <td>                            
                <div class="reaction-icons" id="reactionIcons">
                    <button class="btn btn-reaction" data-title="Editer"><a href="/employee/${employee.id}"><i class="mdi mdi mdi-pencil-box-outline custom-icon-info"></i></a></button>
                    <button class="btn btn-reaction" data-title="Historique"><a href="/vacation/historic/${employee.id}"><i class="mdi mdi-file-document custom-icon-file"></i></a></button> 
                    <button class="btn btn-reaction" data-title="Supprimer" onclick="deleteEmployee(${employee.id})" ><i class="mdi mdi-delete custom-icon-delete"></i></button> 
                  <!--  <button class="btn btn-reaction" data-title="Congées"><a href="/employee/"><i class="mdi mdi-dots-horizontal custom-icon-etc"></i></a></button> 
                -->
                </div>                            
                </td>
                <% }%>
            </tr>`;
     }
   
     employeeTableBody.innerHTML = tableRows;
   }
   
    function generateOptions(employeeFonctionId) {
        let options = '<option value="">Sélectionnez une fonction</option>';
        fonctions.forEach(function(fonction) {
            const selected = employeeFonctionId === fonction.id ? 'selected' : '';
            options += `<option ${selected} value=${fonction.id}>${fonction.nameFunction}</option>`;
        });
        return options;
    }    

   // 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[2].textContent.toLowerCase();       
       const firstName = row.cells[3].textContent.toLowerCase();
   
       if (name.includes(searchValue) || firstName.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>

  
