
<div class="corps">
    
<div class="card">
    <div class="card-header">        
        
    </div>
    <div class="head-main">
        <h2> Les jours férié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>
    <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">Description</th>                    
                        <th scope="col">Date</th>                        
                        <th scope="col">Actions</th>                
                    </tr>
                    <tbody id="tableBody">                
                    </tbody>
                </thead>
            </table>
        </div>
        </div>    
    </div>
      
</div>

<!-- Modal formulaire -->

<div class="modal" id="modal">
    <div id="eventModal" class="eventModal" style="height: auto;">        
        <form action="/setting/holidays" method="POST">
            <div id="eventTitle">
                <h1>Ajouter un jour férié</h1>
            </div>
            <div id="eventBody">
                <div class="form-group">
                    <label for="">Date</label>
                    <input type="date" name="date" id="date" class="form-control form-control-sm">
                </div>
                <div class="form-group">
                    <label for="">Description</label>
                    <input type="text" name="description" id="description" class="form-control form-control-sm">
                </div>
            </div>
            <div id="eventFoot" style="margin-bottom: 10px;">                
                <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 holidays = [];    
</script>

<% holidays.forEach(( value ) => { %>
    <script>        
        holiday = {};                
        holiday.id = "<%= value.id %>"; 
        holiday.date = "<%= value.date %>";                
        holiday.description = "<%= value.description %>";                
        holidays.push(holiday);          
    </script>
<% })%>
   
<script>          
console.log(holidays);
   const searchInput = document.getElementById('searchInput');
   const employeeTableBody = document.getElementById('tableBody');  
   
   // Fonction pour générer les lignes du tableau
    function generateTableRows() {
        let tableRows = '';        
        let counter = 1;
        for (const holiday of holidays) {        
            tableRows += `<tr>                    
                    <td>${holiday.description}</td>                    
                    <td>${holiday.date}</td>                                                                                
                    <td>                                                                        
                        <button class="btn btn-reaction" data-title="Supprimer">
                            <a href="/setting/holiday/delete/${holiday.id}">      
                                <ion-icon class="custom-icon-delete" name="trash-outline"></ion-icon>                      
                            </a>
                        </button>                                                     
                    </div>                            
                    </td>
                </tr>`;
            employeeTableBody.innerHTML = tableRows;                        
            counter++;
        }
    }

    generateTableRows();
</script>