<!-- En cours  -->
<% if(currentMedical.length > 0) { %>
    <div class="corps">

        <section class="card">
            <div class="card-header">
                En repos maladie
            </div>
            <div class="card-body">
                <div id="calendrier"></div>  
            </div>                                  
    
            <!-- Inclure les fichiers JS de FullCalendar -->        
            
            <script src="/calendar/lib/main.js"></script>
    
            <!-- Prend tout les donnees de l'api -->
            <script>
                var evenements = [];
            </script>

            <% currentMedical.forEach(element => { %>    
                <script>
                    event = {};
                    event.nom = "<%= element.name_employee %>";
                    event.prenom = "<%= (element.last_name_employee) ? element.last_name_employee : '' %>";
                    event.fonction = "<%= (element.fonction) ? element.fonction.nameFunction : ''%>";
                    event.sick = "<%= element.medical.sick %>";
                    event.reste = "<%= element.restDay %> <%= (element.restDay == 1) ? 'jour' : 'jours' %>";
                    event.start = "<%= element.medical.startDate %>";
                    event.end = "<%= element.medical.endDate %>";
                    event.validator = "<%= (element.medical.validateur) ? element.medical.validateur.firstName : ''%> <%= (element.medical.validateur) ? element.medical.validateur.lastName : '' %>";                    
                    event.medicalId = "<%= element.medical.id %>";
                    evenements.push(event);
                </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: evenements.map( value => {                                       
                            return {
                                id: value.medicalId,
                                title: 'Repos maladie - ' + 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(13, 235, 103, 0.88)';
                            // 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 = 'white';
                        },            
                        eventClick: function(info) {
                            // Récupérer les détails de l'événement cliqué
                            let id = info.event.id;
                            console.log(evenements);
                            console.log(id);
                            let evenement = evenements.filter( value => value.medicalId === id)   
                            console.log(evenement);                     
    
                            // // Afficher les détails de l'événement dans le modal               
                            if(evenement.length > 0) {                                
                                let nom = document.getElementById('nom');
                                let prenom = document.getElementById('prenom');
                                let fonction = document.getElementById('fonction');  
                                let sick = document.getElementById('sick');  
                                let rest = document.getElementById('rest');
                                let debut = document.getElementById('debut');
                                let fin = document.getElementById('fin');                            
                                let validateur = document.getElementById('validateur');
        
                                nom.textContent = evenement[0].nom;
                                prenom.textContent = evenement[0].prenom;
                                fonction.textContent = evenement[0].fonction;
                                sick.textContent = evenement[0].sick;
                                rest.textContent = evenement[0].reste;
                                validateur.textContent = evenement[0].validator;
        
                                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;    
        
                                // // Afficher le modal
                                let lien = document.getElementById('link-modal');
                                lien.href = '/medical/' + evenement[0].medicalId;
                                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>            
        </section>
    </div>
    <div class="modal" id="modal">
        <div id="eventModal" class="eventModal">
            <div id="eventTitle">
                <h1>Congé 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>Maladie: <span id="sick"></span></p>
                <p>Reste de congé: <span id="rest"></span></p>
                <p>Date de départ: <span id="debut"></span></p>
                <p>Date de retour: <span id="fin"></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>                           
    <% } %>