modifier popover

assets/js/modules/agenda-fullcalendar.js

@@ -685,7 +685,9 @@ export function initializeCalendar() {
             
             // Déterminer la couleur pour le popover (utiliser la même logique que pour l'événement)
             const popoverColor = bgColor || '#6c757d';
-            const popoverTextColor = txtColor || '#ffffff';
+            // Recalculer la couleur du texte en fonction de la luminosité du fond du popover
+            // pour éviter un texte blanc sur fond blanc pour les permanences non attribuées
+            const popoverTextColor = getTextColor(popoverColor);
             
             console.log('🎨 [POPOVER] Couleurs déterminées:', {
                 eventId: event.id,
@@ -725,6 +727,47 @@ export function initializeCalendar() {
                 return statutConfig ? statutConfig.couleur : '#6c757d';
             }
             
+            // Fonction pour obtenir le statut et sa couleur avec gestion des cas spéciaux
+            function getStatutDisplay(statut, eventType) {
+                let displayText = statut;
+                let displayColor = '#6c757d'; // Gris par défaut
+                
+                // Cas spécial : permanence non attribuée
+                if (!statut && eventType === 'permanence') {
+                    displayText = 'Non attribué';
+                    displayColor = '#6c757d'; // Gris
+                    return { text: displayText, color: displayColor };
+                }
+                
+                // Si pas de statut, retourner une valeur par défaut
+                if (!statut) {
+                    displayText = 'Non défini';
+                    return { text: displayText, color: displayColor };
+                }
+                
+                // Normaliser le statut (enlever accents et mettre en minuscules pour comparaison)
+                const statutLower = statut.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+                
+                // Déterminer la couleur selon le statut
+                if (statutLower.includes('absent')) {
+                    displayColor = '#ffb3ba'; // Rouge pastel
+                } else if (statutLower.includes('present')) {
+                    displayColor = '#90ee90'; // Vert clair
+                } else if (statutLower.includes('prevu')) {
+                    displayColor = '#add8e6'; // Bleu clair
+                } else {
+                    // Essayer de récupérer depuis les données ACF
+                    if (crviACFData && crviACFData.statuts) {
+                        const statutConfig = crviACFData.statuts[statut];
+                        if (statutConfig && statutConfig.couleur) {
+                            displayColor = statutConfig.couleur;
+                        }
+                    }
+                }
+                
+                return { text: displayText, color: displayColor };
+            }
+            
             // Fonction utilitaire pour extraire le nom complet d'une entité
             function getEntityDisplayName(entity, entityType = '') {
                 if (!entity) return '';
@@ -757,6 +800,9 @@ export function initializeCalendar() {
 
             console.log('eventProps:', eventProps);
             
+            // Obtenir le statut formaté avec sa couleur
+            const statutDisplay = getStatutDisplay(eventProps.statut, eventProps.type);
+            
             // Créer le contenu du popover avec titre coloré
             const popoverContent = `
                 <div class="event-popover">
@@ -769,7 +815,7 @@ export function initializeCalendar() {
                     ${eventProps.intervenant ? `<div class="mb-1"><strong>Intervenant:</strong> ${getEntityDisplayName(eventProps.intervenant, 'intervenant')}</div>` : ''}
                     ${eventProps.local ? `<div class="mb-1"><strong>Local:</strong> ${getEntityDisplayName(eventProps.local, 'local')}</div>` : ''}
                     ${eventProps.commentaire ? `<div class="mb-1"><strong>Commentaire:</strong> ${eventProps.commentaire}</div>` : ''}
-                    <div class="mb-1"><strong>Statut:</strong> <span class="event-status" style="background-color: ${getStatutColor(eventProps.statut)};">${eventProps.statut}</span></div>
+                    <div class="mb-1"><strong>Statut:</strong> <span class="event-status" style="background-color: ${statutDisplay.color}; color: ${getTextColor(statutDisplay.color)}; padding: 2px 8px; border-radius: 3px;">${statutDisplay.text}</span></div>
                     <div class="mt-2">
                         <small class="text-muted">Cliquez pour plus de détails</small>
                     </div>