<% if( historic.length > 0) {%>
    <div class="corps">
        <section class="card">
            <div class="card-header">
                <h2>Historique des congés</h2>
            </div>
            <div class="card-body">
                <div id="calendrier"></div>                
            </div>
        </section>

        <!-- Inclure les fichiers JS de FullCalendar -->        
        
        <script src="/calendar/lib/main.js"></script>

        <!-- Prend tout les donnees de l'api -->        
        <script>
            var evenements = [];
        </script>            
        <% for(let i = 0; i < historic.length; i++ ){ %>

            <script>            
                event = {};
                event.nom = "<%= historic[i].name_employee %>";                
                event.prenom = "<%= (historic[i].last_name_employee) ? historic[i].last_name_employee : '' %>";
                event.fonction = "<%= (historic[i].fonction) ? historic[i].fonction.nameFunction : ''%>";
                event.totalVacation = "<%= (historic[i].prevVacation) ? historic[i].prevVacation.totalVacation : '' %>";
                event.start = "<%= historic[i].vacation.startDate %>";
                event.end = "<%= historic[i].vacation.endDate %>";
                event.validator = "<%= (historic[i].vacation.validateur) ? historic[i].vacation.validateur.firstName : ''%> <%= (historic[i].vacation.validateur) ? historic[i].vacation.validateur.lastName : '' %>";
                event.applicant = "<%= (historic[i].vacation.applicant) ? historic[i].vacation.applicant.firstName : '' %> <%=  (historic[i].vacation.applicant) ?  historic[i].vacation.applicant.lastName : ''%>";
                event.vacationId = "<%= historic[i].vacation.id %>";
                evenements.push(event);                
                </script>                                       
        <% }; %>
               
        <script>
            console.log(evenements);
            function simpleHash(str) {
                var hash = 0;
                for (var i = 0; i < str.length; i++) {
                hash += str.charCodeAt(i);
                }
                return hash;
            }            
            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendrier');
                var calendar = new FullCalendar.Calendar(calendarEl, {                     
                    headerToolbar: {
                        start: 'prev today next', // will normally be on the left. if RTL, will be on the right
                        center: 'title',                        
                        right: ''
                    },                    
                    titleFormat: { 
                        year: 'numeric', 
                        month: 'long',                         
                    },
                    buttonText: {
                        today:    'Aujourd\'hui',
                        month:    'Mois',
                        week:     'Semaine',
                        day:      'Jour',
                        list:     'Liste'
                    },
                    locale: 'fr',
                    events: evenements.map( value => {                                       
                        return {
                            id: value.vacationId,
                            title: value.nom + ' ' + value.prenom + ' - ' + value.fonction,
                            start: new Date(value.start),
                            end: new Date(value.end),                            
                        }
                    }),       
                    displayEventTime: false,              
                    eventDidMount: function(info) {                        
                        // Convertir la valeur numérique en couleur hexadécimale
                        var color = 'rgba(0, 0, 0, 0.5)';
                        // Appliquer la couleur de fond à l'événement
                        info.el.style.backgroundColor = color;
                        info.el.style.border = 'none';
                        info.el.style.height = '40px';
                        info.el.style.display = 'flex';                        
                        info.el.style.alignItems = 'center';
                        info.el.style.color = 'rgb(255,255,255)';
                    },            
                    eventClick: function(info) {
                        // Récupérer les détails de l'événement cliqué
                        let id = info.event.id;
                        let evenement = evenements.filter( value => value.vacationId === id)                        

                        // // Afficher les détails de l'événement dans le modal               
                        console.log(evenement)         
                        let nom = document.getElementById('nom');
                        let prenom = document.getElementById('prenom');
                        let fonction = document.getElementById('fonction');                          
                        let debut = document.getElementById('debut');
                        let fin = document.getElementById('fin');
                        let demandeur = document.getElementById('demandeur');
                        let validateur = document.getElementById('validateur');

                        nom.textContent = evenement[0].nom;
                        prenom.textContent = evenement[0].prenom;
                        fonction.textContent = evenement[0].fonction;                        

                        let dateObjDebut = new Date(evenement[0].start);
                        let dateObjFin = new Date(evenement[0].end);

                        // Tableau des noms des mois en français
                        let moisFrancais = [
                        'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
                        'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
                        ];

                        // Formater la date selon le format souhaité 'dd Mois yyyy'
                        let dateDebut = dateObjDebut.getDate() + ' ' + moisFrancais[dateObjDebut.getMonth()] + ' ' + dateObjDebut.getFullYear();
                        let dateFin = dateObjFin.getDate() + ' ' + moisFrancais[dateObjFin.getMonth()] + ' ' + dateObjFin.getFullYear();
                        debut.textContent = dateDebut;
                        fin.textContent = dateFin;

                        demandeur.textContent = evenement[0].applicant;
                        // validateur.textContent = evenement[0].validator;

                        // // Afficher le modal
                        // let lien = document.getElementById('link-modal');
                        // lien.href = '/vacation/' + evenement[0].vacationId;
                        var modal = document.getElementById('modal');                        
                        var eventModal = document.getElementById('eventModal');
                        modal.classList.add('show-modal');
                        eventModal.classList.add('show-event-modal');
                    },
                });
                calendar.render();
                calendar.setOption('height', '80vh');

                let closeModal = document.getElementById('close-modal');               
                closeModal.addEventListener('click', () => {                    
                    eventModal.classList.remove('show-event-modal');
                    modal.classList.remove('show-modal');
                })
            });
        </script>
    </div>
    <div class="modal" id="modal">
        <div id="eventModal" class="eventModal">
            <div id="eventTitle">
                <h1>Historique de congé</h1>
            </div>
            <div id="eventBody">
                <p>Nom: <span id="nom">RAKOTO</span></p>
                <p>Prénom(s): <span id="prenom">Jean</span></p>
                <p>Fonction: <span id="fonction"></span></p>                
                <p>Date de départ: <span id="debut"></span></p>
                <p>Date de retour: <span id="fin"></span></p>
                <p>Démandeur: <span id="demandeur"></span></p>
                <!-- <p>Validateur: <span id="validateur"></span></p> -->
            </div>
            <div id="eventFoot">
                <!-- <a id="link-modal">
                    <button class="btn btn-primary">Voir</button>
                </a> -->
                <button class="btn btn-primary" id="close-modal">Fermer</button>
            </div>
        </div>
    </div>

    
<% } %>

