<% if( waitingVac.length > 0 || waitingPermiss.length > 0 || waitingMedical.length > 0) {%>
    <div class="corps">

        <section class="card">
            <div class="card-header">
                <% if( waitingVac.length > 1 ) {%>
                <h2>Congé en attente de validation</h2>
                <% }else{ %>
                    <h2>Congés en attente de validation</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 = [];
            var vacationLength = 0;
            var permissionLength = 0;
            var medicalLength = 0;
        </script>            

        <!-- Congés -->
        <% for(let i = 0; i < waitingVac.length; i++ ){ %>

            <script>            
                event = {};
                event.nom = "<%= waitingVac[i].name_employee %>";                
                event.prenom = "<%= (waitingVac[i].last_name_employee) ? waitingVac[i].last_name_employee : '' %>";
                event.fonction = "<%= (waitingVac[i].fonction) ? waitingVac[i].fonction.nameFunction : ''%>";
                event.totalVacation = "<%= (waitingVac[i].prevVacation) ? waitingVac[i].prevVacation.totalVacation : '' %>";
                event.start = "<%= waitingVac[i].vacation.startDate %>";
                event.startHour = "<%= waitingVac[i].vacation.startHour %>";
                event.end = "<%= waitingVac[i].vacation.endDate %>";
                event.endHour = "<%= waitingVac[i].vacation.endHour %>";
                event.validator = "<%= (waitingVac[i].vacation.validateur) ? waitingVac[i].vacation.validateur.firstName : ''%> <%= (waitingVac[i].vacation.validateur) ? waitingVac[i].vacation.validateur.lastName : '' %>";
                event.applicant = "<%= (waitingVac[i].vacation.applicant) ? waitingVac[i].vacation.applicant.firstName : '' %> <%=  (waitingVac[i].vacation.applicant) ?  waitingVac[i].vacation.applicant.lastName : ''%>";
                event.vacationId = 'VAC' + "<%= waitingVac[i].vacation.id %>";                  
                vacationLength++;              
                evenements.push(event);                
            </script>                                       
        <% }; %>

        <!-- Permission -->
        <% for(let i = 0; i < waitingPermiss.length; i++ ){ %>
            <script>            
                event = {};
                event.nom = "<%= waitingPermiss[i].name_employee %>";                
                event.prenom = "<%= (waitingPermiss[i].last_name_employee) ? waitingPermiss[i].last_name_employee : '' %>";
                event.fonction = "<%= (waitingPermiss[i].fonction) ? waitingPermiss[i].fonction.nameFunction : ''%>";
                event.evenement = "<%= (waitingPermiss[i].permission) ? waitingPermiss[i].permission.event : '' %>";
                event.start = "<%= waitingPermiss[i].permission.startDate %>";
                event.end = "<%= waitingPermiss[i].permission.endDate %>";
                event.validator = "<%= (waitingPermiss[i].permission.validateur) ? waitingPermiss[i].permission.validateur.firstName : ''%> <%= (waitingPermiss[i].permission.validateur) ? waitingPermiss[i].permission.validateur.lastName : '' %>";
                event.applicant = "<%= (waitingPermiss[i].permission.applicant) ? waitingPermiss[i].permission.applicant.firstName : '' %> <%=  (waitingPermiss[i].permission.applicant) ?  waitingPermiss[i].permission.applicant.lastName : ''%>";
                event.permissionId = "PER" + "<%= waitingPermiss[i].permission.id %>"; 
                permissionLength++;               
                evenements.push(event);                                
            </script>                                       
        <% }; %>

        <!-- Medical -->
        <% for(let i = 0; i < waitingMedical.length; i++ ){ %>
            <script>            
                event = {};
                event.nom = "<%= waitingMedical[i].name_employee %>";                
                event.prenom = "<%= (waitingMedical[i].last_name_employee) ? waitingMedical[i].last_name_employee : '' %>";
                event.fonction = "<%= (waitingMedical[i].fonction) ? waitingMedical[i].fonction.nameFunction : ''%>";
                event.sick = "<%= (waitingMedical[i].medical) ? waitingMedical[i].medical.sick : '' %>";
                event.start = "<%= waitingMedical[i].medical.startDate %>";
                event.end = "<%= waitingMedical[i].medical.endDate %>";
                event.validator = "<%= (waitingMedical[i].medical.validateur) ? waitingMedical[i].medical.validateur.firstName : ''%> <%= (waitingMedical[i].medical.validateur) ? waitingMedical[i].medical.validateur.lastName : '' %>";
                event.applicant = "<%= (waitingMedical[i].medical.applicant) ? waitingMedical[i].medical.applicant.firstName : '' %> <%=  (waitingMedical[i].medical.applicant) ?  waitingMedical[i].medical.applicant.lastName : ''%>";
                event.medicalId = "MED" + "<%= waitingMedical[i].medical.id %>"; 
                medicalLength++;               
                evenements.push(event);                                
            </script>                                       
        <% }; %>

        <script>
            var vacColor = 'rgb(249, 96, 36)';
            var permColor = 'rgb(250, 10, 10)';
            var medicalColor = 'rgb(243, 75, 75)';
            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) {                                               
                        info.el.style.border = 'none';
                        info.el.style.height = '40px';
                        info.el.style.display = 'flex';                        
                        info.el.style.alignItems = 'center';                        
                    },            
                    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 pSolde = document.getElementById('p-solde');
                        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';                        
                        pSolde.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 demandeur = document.getElementById('demandeur');                                                                        

                        //  L'evenement cliquer est une congee                                                  
                        if(evenementVac.length > 0) {                                                                                    
                            titleVac.style.display = 'flex';
                            pSolde.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 solde = document.getElementById('solde');
                            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;                            
    
                            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];

                            solde.textContent = evenementVac[0].totalVacation + ' jour(s)';
    
                            demandeur.textContent = evenementVac[0].applicant;                            
                            // // 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';
                            pSolde.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;
    
                            demandeur.textContent = evenementPer[0].applicant;
                            // validateur.textContent = evenement[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';
                            pSolde.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;
    
                            demandeur.textContent = evenementMed[0].applicant;
                            // validateur.textContent = evenement[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é en attente de validation</h1>
                <h1 id="title-permission">Permission en attente de validation</h1>
                <h1 id="title-medical">Repos maladie en attente de validation</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-solde">Solde: <span id="solde"></span></p>
                <p id="p-event">Evenements: <span id="event"></span></p>
                <p id="p-sick">Maladie: <span id="sick"></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 fin: <span id="fin"></span></p>
                <p id="p-heureFin">Heur de fin: <span id="heureFin"></span></p>
                <p>Demandeur: <span id="demandeur"></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>

    
<% } %>

