<% if(nextVac.length > 0 || nextPermiss.length > 0 || nextMed.length > 0) {%>
    <div class="corps">

        <section class="card">
            <div class="card-header">
                Les congés prochains
            </div>
            <div class="card-body">              
                <div id="calendrier"></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 = [];
                var vacationLength = 0;
                var permissionLength = 0;
                var medicalLength = 0;
            </script>            
    
            <!-- Congés -->
            <% for(let i = 0; i < nextVac.length; i++ ){ %>
    
                <script>            
                    event = {};
                    event.nom = "<%= nextVac[i].name_employee %>";                
                    event.prenom = "<%= (nextVac[i].last_name_employee) ? nextVac[i].last_name_employee : '' %>";
                    event.fonction = "<%= (nextVac[i].fonction) ? nextVac[i].fonction.nameFunction : ''%>";
                    event.totalVacation = "<%= (nextVac[i].prevVacation) ? nextVac[i].prevVacation.totalVacation : '' %>";
                    event.start = "<%= nextVac[i].vacation.startDate %>";
                    event.startHour = "<%= nextVac[i].vacation.startHour ?? 'MT' %>";
                    event.end = "<%= nextVac[i].vacation.endDate %>";
                    event.endHour = "<%= nextVac[i].vacation.endHour ?? 'SR' %>";
                    event.validator = "<%= (nextVac[i].vacation.validateur) ? nextVac[i].vacation.validateur.firstName : ''%> <%= (nextVac[i].vacation.validateur) ? nextVac[i].vacation.validateur.lastName : '' %>";
                    event.applicant = "<%= (nextVac[i].vacation.applicant) ? nextVac[i].vacation.applicant.firstName : '' %> <%=  (nextVac[i].vacation.applicant) ?  nextVac[i].vacation.applicant.lastName : ''%>";
                    event.vacationId = 'VAC' + "<%= nextVac[i].vacation.id %>";  
                    x = new Date();
                    y = new Date(event.start);
                    event.nbrDayBefor = Math.floor((y - x) / (1000 * 60 * 60 * 24)) + 1;
                    vacationLength++;              
                    evenements.push(event);  
                    console.log(event)                                  
                </script>                                       
            <% }; %>
    
            <!-- Permission -->
            <% for(let i = 0; i < nextPermiss.length; i++ ){ %>
                <script>            
                    event = {};
                    event.nom = "<%= nextPermiss[i].name_employee %>";                
                    event.prenom = "<%= (nextPermiss[i].last_name_employee) ? nextPermiss[i].last_name_employee : '' %>";
                    event.fonction = "<%= (nextPermiss[i].fonction) ? nextPermiss[i].fonction.nameFunction : ''%>";
                    event.evenement = "<%= (nextPermiss[i].permission) ? nextPermiss[i].permission.event : '' %>";
                    event.start = "<%= nextPermiss[i].permission.startDate %>";
                    event.end = "<%= nextPermiss[i].permission.endDate %>";
                    event.validator = "<%= (nextPermiss[i].permission.validateur) ? nextPermiss[i].permission.validateur.firstName : ''%> <%= (nextPermiss[i].permission.validateur) ? nextPermiss[i].permission.validateur.lastName : '' %>";
                    event.applicant = "<%= (nextPermiss[i].permission.applicant) ? nextPermiss[i].permission.applicant.firstName : '' %> <%=  (nextPermiss[i].permission.applicant) ?  nextPermiss[i].permission.applicant.lastName : ''%>";
                    event.permissionId = "PER" + "<%= nextPermiss[i].permission.id %>"; 
                    permissionLength++;               
                    evenements.push(event);                                
                </script>                                       
            <% }; %>

            <!-- Medical -->
            <% for(let i = 0; i < nextMed.length; i++ ){ %>
                <script>            
                    event = {};
                    event.nom = "<%= nextMed[i].name_employee %>";                
                    event.prenom = "<%= (nextMed[i].last_name_employee) ? nextMed[i].last_name_employee : '' %>";
                    event.fonction = "<%= (nextMed[i].fonction) ? nextMed[i].fonction.nameFunction : ''%>";
                    event.sick = "<%= (nextMed[i].medical) ? nextMed[i].medical.sick : '' %>";
                    event.start = "<%= nextMed[i].medical.startDate %>";
                    event.end = "<%= nextMed[i].medical.endDate %>";
                    event.validator = "<%= (nextMed[i].medical.validateur) ? nextMed[i].medical.validateur.firstName : ''%> <%= (nextMed[i].medical.validateur) ? nextMed[i].medical.validateur.lastName : '' %>";
                    event.applicant = "<%= (nextMed[i].medical.applicant) ? nextMed[i].medical.applicant.firstName : '' %> <%=  (nextMed[i].medical.applicant) ?  nextMed[i].medical.applicant.lastName : ''%>";
                    event.medicalId = "MED" + "<%= nextMed[i].medical.id %>"; 
                    medicalLength++;               
                    evenements.push(event);                                
                </script>                                       
            <% }; %>
    
            <script>                
                var vacColor = 'rgba(249, 150, 36, 0.788)';                
                var permColor = 'rgba(255, 33, 33, 0.8)';
                var medicalColor = 'rgba(243, 75, 75, 0.5)';
                const sortToLong = {
                    "MT": " Matin",
                    "MD": " Midi",
                    "SR": " Soir",
                    "": "",
                }
                var events = evenements.map(( value, index )=> {                     
                            if(index < vacationLength) {
                                return {
                                    id: value.vacationId,
                                    title: 'Congé - ' + 
                                            value.nom + ' ' + 
                                            value.prenom + ' - ' + 
                                            value.fonction + " " +
                                            value.start + sortToLong[value.startHour] + ' au ' +
                                            value.end + sortToLong[value.endHour],
                                    start: new Date(value.start),
                                    end: new Date(value.end),       
                                    backgroundColor: vacColor, 
                                }
                            }
                            else if( index < vacationLength + permissionLength) {
                            return {
                                id: value.permissionId,
                                title: 'Permission - ' + value.nom + ' ' + value.prenom + ' - ' + value.fonction,
                                start: new Date(value.start),
                                end: new Date(value.end),    
                                backgroundColor: permColor,                        
                            }
                            }
                            else if( index < vacationLength + permissionLength + medicalLength) {
                                return {
                                    id: value.medicalId,
                                    title: 'Repos maladie - ' + value.nom + ' ' + value.prenom + ' - ' + value.fonction,
                                    start: new Date(value.start),
                                    end: new Date(value.end),    
                                    backgroundColor: medicalColor,                        
                                }
                            }});                
            </script>
                   
            <script>                      
                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: events,
                        displayEventTime: false,                                 
                        eventDidMount: function(info) {                                                                                
                            // Appliquer la couleur de fond à l'événement                                                     
                            info.el.style.border = 'none';
                            info.el.style.height = '40px';
                            info.el.style.display = 'flex';                        
                            info.el.style.alignItems = 'center';
                            info.el.style.color = 'white';
                        },            
                        eventClick: function(info) {
                            // Récupérer les détails de l'événement cliqué
                            let id = info.event.id;
                            let evenementVac = evenements.filter( value => value.vacationId === id);
                            let evenementPer = evenements.filter( value => value.permissionId === id);                       
                            let evenementMed = evenements.filter( value => value.medicalId === id);

                            //  Les informations spécifiques à masquer par défaut                                    
                            let titleVac = document.getElementById('title-vacation');
                            let titlePermis = document.getElementById('title-permission');
                            let titleMedical = document.getElementById('title-medical');                        
                            let pNbrDayBefore = document.getElementById('p-nbrDayBefore');
                            let pEvent = document.getElementById('p-event');
                            let pSick = document.getElementById('p-sick');
                            let pHeureDeb = document.getElementById('p-heureDeb'); 
                            let pHeureFin = document.getElementById('p-heureFin');       
                            
                            titleVac.style.display = 'none';
                            titlePermis.style.display = 'none';                        
                            titleMedical.style.display = 'none';                        
                            pNbrDayBefore.style.display = 'none';                        
                            pEvent.style.display = 'none';                        
                            pSick.style.display = 'none';                        
                            pHeureDeb.style.display = 'none';                        
                            pHeureFin.style.display = 'none';                        

                            //  Les informations toujours affichées
                            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 validateur = document.getElementById('validateur');                                                                      

                            //  L'evenement cliquer est une congee                                                  
                            if(evenementVac.length > 0) {                
                                titleVac.style.display = 'flex';
                                pNbrDayBefore.style.display = 'flex';
                                pHeureDeb.style.display = 'flex';                        
                                pHeureFin.style.display = 'flex';                        
                                titlePermis.style.display = 'none';
                                pEvent.style.display = 'none';
                                titleMedical.style.display = 'none';
                                pSick.style.display = 'none';    
                                
                                let nbrJrAvant = document.getElementById('nbrDayBefore');
                                let heureDebut = document.getElementById('heureDebut');
                                let heureFin = document.getElementById('heureFin');                                                                                  
        
                                nom.textContent = evenementVac[0].nom;
                                prenom.textContent = evenementVac[0].prenom;
                                fonction.textContent = evenementVac[0].fonction;
                                nbrJrAvant.textContent = evenementVac[0].nbrDayBefor + (evenementVac[0].nbrDayBefor == 1 ? ' jour' : ' jours'); 
                                validateur.textContent = evenementVac[0].validator;                                                                                 
        
                                let dateObjDebut = new Date(evenementVac[0].start);
                                let dateObjFin = new Date(evenementVac[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'
                                ];
                                let signification = {
                                    "MT": "Matin",
                                    "MD": "Midi",
                                    "SR": "Soir",
                                }
        
                                // 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;                            
                                heureDebut.textContent = signification[evenementVac[0].startHour];
                                fin.textContent = dateFin;
                                heureFin.textContent = signification[evenementVac[0].endHour];

        
                                // // Afficher le modal
                                let lien = document.getElementById('link-modal');
                                lien.href = '/vacation/' + evenementVac[0].vacationId.replace('VAC', '');
                                var modal = document.getElementById('modal');                        
                                var eventModal = document.getElementById('eventModal');
                                modal.classList.add('show-modal');
                                eventModal.classList.add('show-event-modal');
                            }

                            if(evenementPer.length > 0) {
                                titleVac.style.display = 'none';
                                pNbrDayBefore.style.display = 'none';
                                pHeureDeb.style.display = 'none';                        
                                pHeureFin.style.display = 'none';                        
                                titlePermis.style.display = 'flex';
                                pEvent.style.display = 'flex';
                                titleMedical.style.display = 'none';
                                pSick.style.display = 'none';                                 
                                                                                                

                                nom.textContent = evenementPer[0].nom;
                                prenom.textContent = evenementPer[0].prenom;
                                fonction.textContent = evenementPer[0].fonction; 
                                let event = document.getElementById('event'); 
                                event.textContent = ' ' + evenementPer[0].evenement;                          
        
                                let dateObjDebut = new Date(evenementPer[0].start);
                                let dateObjFin = new Date(evenementPer[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;
                                        
                                validateur.textContent = evenementPer[0].validator;

                                // // Afficher le modal
                                let lien = document.getElementById('link-modal');
                                lien.href = '/permission/' + evenementPer[0].permissionId.replace('PER','');
                                var modal = document.getElementById('modal');                        
                                var eventModal = document.getElementById('eventModal');
                                modal.classList.add('show-modal');
                                eventModal.classList.add('show-event-modal');
                            }     
                            if(evenementMed.length > 0) {           
                                titleVac.style.display = 'none';
                                pNbrDayBefore.style.display = 'none';
                                pHeureDeb.style.display = 'none';                        
                                pHeureFin.style.display = 'none';                        
                                titlePermis.style.display = 'none';
                                pEvent.style.display = 'none';
                                titleMedical.style.display = 'flex';
                                pSick.style.display = 'flex';                              
                                
                                nom.textContent = evenementMed[0].nom;
                                prenom.textContent = evenementMed[0].prenom;
                                fonction.textContent = evenementMed[0].fonction;      
                                let sick = document.getElementById('sick');
                                sick.textContent = evenementMed[0].sick;                                    
        
                                let dateObjDebut = new Date(evenementMed[0].start);
                                let dateObjFin = new Date(evenementMed[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;
                                        
                                validateur.textContent = evenementMed[0].validator;

                                // // Afficher le modal
                                let lien = document.getElementById('link-modal');
                                lien.href = '/medical/' + evenementMed[0].medicalId.replace('MED','');
                                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 id="title-vacation">Congé prochain</h1>
                        <h1 id="title-permission">Permission prochain</h1>
                        <h1 id="title-medical">Repos maladie prochain</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 id="p-event">Evenement: <span id="event"></span></p>
                        <p id="p-sick">Maladie: <span id="sick"></span></p>
                        <p id="p-nbrDayBefore">Congé dans: <span id="nbrDayBefore"></span></p>
                        <p>Date de départ: <span id="debut"></span></p>
                        <p id="p-heureDeb">Heure de départ: <span id="heureDebut"></span></p>
                        <p>Date de retour: <span id="fin"></span></p>
                        <p id="p-heureFin">Heur de fin: <span id="heureFin"></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>

        </section>
    </div>
<% } %>