{# templates/formateur/apprenti_detail.html.twig #}
    {% extends 'base.html.twig' %}

    {% block title %}Modules de {{ apprenti.prenom }} {{ apprenti.nom }}{% endblock %}
        {% block stylesheets %}
            {{ parent() }}
            <link rel="stylesheet" href="{{ asset('css/apprenant.css') }}">
        {% endblock %}

    {% block content %}
        <div class="container">
            <div class="navigation-top">
                <a href="{{ path('app_formateur') }}" class="back-btn" title="Retour à l'accueil">
                    <i class="fas fa-arrow-left"></i>
                </a>

                <div class="btn-wrapper">
                    <a href="{{ path('app_formateur_modifier_apprenti', {'id': apprenti.id}) }}">
                        <button class="glow-btn glow-btn-xs" title="Modifier">
                            <span>Modifier <i class="fas fa-pencil-alt"></i></span>
                        </button>
                    </a>
                </div>

                <form method="post"
                      action="{{ path('app_formateur_supprimer_apprenti', {'id': apprenti.id}) }}"
                      onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet apprenant ?');"
                      style="display: inline;">
                    <button type="submit" class="bin-button" title="Supprimer">
                        <svg class="bin-top" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line y1="5" x2="39" y2="5" stroke="white" stroke-width="4"></line>
                            <line x1="12" y1="1.5" x2="26.0357" y2="1.5" stroke="white" stroke-width="3"></line>
                        </svg>
                        <svg class="bin-bottom" viewBox="0 0 33 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <mask id="path-1-inside-1_8_19" fill="white">
                                <path d="M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z" />
                            </mask>
                            <path d="M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z"
                                  fill="white" mask="url(#path-1-inside-1_8_19)" />
                            <path d="M12 6L12 29" stroke="white" stroke-width="4"></path>
                            <path d="M21 6V29" stroke="white" stroke-width="4"></path>
                        </svg>
                    </button>
                </form>
            </div>

            <div class="header-container">
                <div class="titre-section">
                    <h1>{{ apprenti.prenom }} {{ apprenti.nom }}</h1>
                    <h2>Groupe : {{ apprenti.groupe }}</h2>
                </div>
            </div>

            <!-- Conteneur avec résumé et sélecteur côte à côte -->
            <div class="summary-competence-container compact">
                <!-- Carte de résumé compacte (à gauche) -->
                <div class="resume-card compact">
                    <h2>Résumé</h2>

                    <div class="resume-item">
                        <p class="resume-label">Progression générale</p>
                        <p class="resume-value" id="progression-generale">{{ progressionGlobale|number_format(0) }}%</p>
                    </div>

                    <!-- Modules par compétence -->
                    <div class="resume-item modules-par-competence">
                        <p class="resume-label">Modules par compétence</p>
                        <div class="competence-progress-list">
                            {% for competence in competences %}
                                <div class="competence-progress-item">
                                    <div class="competence-label" style="color: {{ competence.couleur }}">
                                        <span class="competence-color-dot" style="background-color: {{ competence.couleur }}"></span>
                                        {{ competence.titre }}
                                    </div>
                                    {% set completedModules = 0 %}
                                    {% set totalModules = competence.modules|length %}

                                    {% for module in competence.modules %}
                                        {% if progressions[module.id] is defined and progressions[module.id] >= 100 %}
                                            {% set completedModules = completedModules + 1 %}
                                        {% endif %}
                                    {% endfor %}

                                    <div class="competence-count" id="competence-count-{{ competence.id }}" data-competence-id="{{ competence.id }}">{{ completedModules }}/{{ totalModules }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Sélecteur de compétences compact (à droite) -->
                <div class="competence-selector compact" style="padding-bottom: 0">
                    <h3>Sélectionner une compétence</h3>
                    <div class="competence-buttons">
                        {% for competence in competences %}
                            <button class="competence-btn {% if loop.first %}active{% endif %}"
                                    data-competence="{{ competence.id }}"
                                    style="background-color: {{ competence.couleur }}">
                                {{ competence.titre }}
                            </button>
                        {% endfor %}
                    </div>
                    <!-- Graphique de progression par module pour la compétence sélectionnée -->
                    <div class="progression-chart-container">
                        <div class="chart-card">
                            <div class="chart-wrapper">
                                <canvas id="competenceProgressChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Conteneur pour les compétences - sera rempli par AJAX -->
            <div class="competences" id="competences-container">
                <!-- Le contenu sera chargé en AJAX -->
                <div class="loading-spinner">
                    <div class="spinner"></div>
                </div>
            </div>
        </div>
    {% endblock %}

{% block javascripts %}
    {{ parent() }}
    <!-- Charger Chart.js AVANT notre code JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <style>
        /* Style pour l'animation de mise à jour */
        .updated-value {
            animation: highlight-update 0.8s ease-in-out;
        }

        @keyframes highlight-update {
            0% { background-color: transparent; }
            50% { background-color: rgba(76, 175, 80, 0.3); border-radius: 4px; }
            100% { background-color: transparent; }
        }

        /* Style pour l'animation de mise à jour du graphique */
        .chart-updated {
            animation: flash-update 0.5s ease-in-out;
        }

        @keyframes flash-update {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
    </style>
    <script>
        // Variables globales pour les graphiques
        let moduleChart;
        let competenceChart;

        // Variable globale pour stocker les progressions entre les compétences
        let globalProgressions = {};

        document.addEventListener('DOMContentLoaded', function() {
            console.log("DOM chargé, initialisation des fonctionnalités...");

            // Initialiser la variable globale avec les progressions initiales du serveur
            globalProgressions = {
            {% for moduleId, progression in progressions %}
            {{ moduleId }}: {{ progression|default(0) }},
            {% endfor %}
        };

            console.log("Progressions initiales chargées:", globalProgressions);

            // DEBUG: Vérifier la structure du DOM pour la progression générale au chargement
            const progressionInitiale = document.querySelector('.resume-item:first-child .resume-value');
            if (progressionInitiale) {
                console.log("Élément de progression générale trouvé:", progressionInitiale);
                console.log("Valeur initiale:", progressionInitiale.textContent);
            } else {
                console.error("Élément de progression générale non trouvé lors de l'initialisation");
            }

            // Fonction pour initialiser ou mettre à jour le graphique par compétence
            function updateCompetenceChart(competenceId) {
                console.log("Délégation à updateChartData pour la compétence:", competenceId);
                updateChartData(competenceId);
            }

            // Fonction pour mettre à jour les données du graphique - Améliorée pour utiliser globalProgressions
            function updateChartData(competenceId) {
                console.log("Mise à jour des données du graphique pour la compétence:", competenceId);

                // Si un graphique existe déjà, le détruire pour éviter les conflits
                if (competenceChart) {
                    competenceChart.destroy();
                }

                // Récupérer les données de la compétence sélectionnée en tenant compte des changements
                let competenceData = null;

                {% for competence in competences %}
                if (competenceId == {{ competence.id }}) {
                    competenceData = {
                        id: {{ competence.id }},
                        title: "{{ competence.titre|e('js') }}",
                        color: "{{ competence.couleur }}",
                        modules: []
                    };

                    // Vérifier si cette compétence a des modules
                    {% if competence.modules is defined and competence.modules|length > 0 %}
                    // Récupérer les progressions mises à jour pour chaque module
                    {% for module in competence.modules %}
                    // Priorité 1: Valeur dans globalProgressions (la plus récente)
                    if (globalProgressions[{{ module.id }}] !== undefined) {
                        competenceData.modules.push({
                            id: {{ module.id }},
                            title: "{{ module.titre|e('js') }}",
                            progress: globalProgressions[{{ module.id }}]
                        });
                    }
                    // Priorité 2: Valeur dans le DOM actuel
                    else {
                        const moduleProgBar{{ module.id }} = document.querySelector(`#progress-module-{{ module.id }} .progress-bar`);
                        if (moduleProgBar{{ module.id }}) {
                            let progressText = moduleProgBar{{ module.id }}.textContent;
                            let progress = parseFloat(progressText.replace('%', ''));

                            // Vérifier que progress est un nombre valide
                            if (isNaN(progress)) progress = 0;

                            competenceData.modules.push({
                                id: {{ module.id }},
                                title: "{{ module.titre|e('js') }}",
                                progress: progress
                            });

                            // Mettre à jour globalProgressions avec cette valeur
                            globalProgressions[{{ module.id }}] = progress;
                        }
                        // Priorité 3: Valeur initiale du serveur
                        else {
                            // Fallback aux données statiques si l'élément DOM n'est pas trouvé
                            let defaultProgress = 0;
                            {% if progressions[module.id] is defined %}
                            defaultProgress = {{ progressions[module.id]|default(0) }};
                            // Vérifier que c'est un nombre valide
                            if (isNaN(defaultProgress)) defaultProgress = 0;
                            {% endif %}

                            competenceData.modules.push({
                                id: {{ module.id }},
                                title: "{{ module.titre|e('js') }}",
                                progress: defaultProgress
                            });
                        }
                    }
                    {% endfor %}
                    {% else %}
                    // Compétence sans module - ajouter un module fictif pour afficher un graphique vide
                    competenceData.modules.push({
                        id: 0,
                        title: "Pas de modules",
                        progress: 0
                    });
                    {% endif %}
                }
                {% endfor %}

                if (!competenceData) {
                    console.warn("Aucune donnée disponible pour cette compétence:", competenceId);
                    return;
                }

                // Si pas de modules, ajouter un module fictif pour l'affichage
                if (competenceData.modules.length === 0) {
                    console.warn("Compétence sans modules:", competenceId);
                    competenceData.modules.push({
                        id: 0,
                        title: "Pas de modules",
                        progress: 0
                    });
                }

                console.log("Données mises à jour pour le graphique:", competenceData);

                // Préparer les données pour le graphique
                const labels = competenceData.modules.map(module => module.title);
                const data = competenceData.modules.map(module => module.progress);

                // Créer une teinte plus claire pour les barres
                let color = competenceData.color;
                let lighterColor = adjustColor(color, 120);

                // Créer le graphique
                const canvas = document.getElementById('competenceProgressChart');
                if (!canvas) {
                    console.error("Élément canvas du graphique par compétence non trouvé!");
                    return;
                }

                const ctx = canvas.getContext('2d');

                try {
                    competenceChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Progression (%)',
                                data: data,
                                backgroundColor: lighterColor,
                                borderColor: color,
                                borderWidth: 1,
                                borderRadius: 4,
                                barThickness: 30,
                                maxBarThickness: 50
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: `Progression par module - ${competenceData.title}`,
                                    font: {
                                        size: 16
                                    },
                                    padding: {
                                        top: 10,
                                        bottom: 20
                                    }
                                },
                                legend: {
                                    display: false
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return `Progression: ${context.parsed.y.toFixed(1)}%`;
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100,
                                    grid: {
                                        color: 'rgba(0, 0, 0, 0.05)'
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    }
                                },
                                x: {
                                    grid: {
                                        display: false
                                    },
                                    ticks: {
                                        display: false  // Cette ligne masque les étiquettes sur l'axe X
                                    }
                                }
                            },
                            animation: {
                                duration: 300,
                                easing: 'easeOutQuad'
                            },
                            responsive: true,
                            maintainAspectRatio: false
                        }
                    });
                    console.log("Graphique par compétence mis à jour avec succès!");
                } catch (error) {
                    console.error("Erreur lors de la mise à jour du graphique par compétence:", error);

                    // En cas d'erreur avec le graphique, afficher un message plus convivial
                    if (canvas) {
                        const container = canvas.closest('.chart-wrapper');
                        if (container) {
                            container.innerHTML = `
                                <div class="text-center p-4">
                                    <p class="text-muted">Aucune donnée à afficher pour cette compétence.</p>
                                </div>
                            `;
                        }
                    }
                }
            }

            // Fonction pour signaler visuellement la mise à jour du graphique
            function flashGraphContainer() {
                const container = document.querySelector('.progression-chart-container');
                if (container) {
                    // Ajouter une classe pour l'animation
                    container.classList.add('chart-updated');

                    // Retirer la classe après l'animation
                    setTimeout(() => {
                        container.classList.remove('chart-updated');
                    }, 500);
                }
            }

            // Fonction pour ajuster la couleur (assombrir/éclaircir)
            function adjustColor(color, amount) {
                // Convertir la couleur hexadécimale en rgb
                let colorObj;

                if (color.startsWith('#')) {
                    // Format hex
                    const hex = color.slice(1);
                    const bigint = parseInt(hex, 16);
                    const r = (bigint >> 16) & 255;
                    const g = (bigint >> 8) & 255;
                    const b = bigint & 255;
                    colorObj = { r, g, b };
                } else if (color.startsWith('rgb')) {
                    // Format rgb ou rgba
                    const matches = color.match(/(\d+),\s*(\d+),\s*(\d+)/);
                    if (matches) {
                        colorObj = {
                            r: parseInt(matches[1]),
                            g: parseInt(matches[2]),
                            b: parseInt(matches[3])
                        };
                    }
                } else {
                    // Si format non reconnu, retourner la couleur d'origine
                    return color;
                }

                if (!colorObj) return color;

                // Ajuster chaque composante
                colorObj.r = Math.max(0, Math.min(255, colorObj.r + amount));
                colorObj.g = Math.max(0, Math.min(255, colorObj.g + amount));
                colorObj.b = Math.max(0, Math.min(255, colorObj.b + amount));

                // Retourner au format rgb
                return `rgb(${colorObj.r}, ${colorObj.g}, ${colorObj.b})`;
            }

            // Fonction séparée pour gérer le changement de case à cocher - Modifiée pour mettre à jour globalProgressions
            function handleCheckboxChange() {
                const sousModuleId = this.dataset.sousModule;
                const apprentiId = this.dataset.apprenti;
                const moduleId = this.dataset.module;
                const competenceId = this.dataset.competence; // Assurez-vous d'ajouter cet attribut data aux cases à cocher

                // Vérifier que tous les attributs nécessaires sont présents
                if (!sousModuleId || !apprentiId || !moduleId) {
                    console.error('Attributs data manquants sur la case à cocher:', this);
                    return;
                }

                console.log('Case à cocher modifiée:', sousModuleId, apprentiId, moduleId, competenceId);

                // Stocker l'état actuel de la case
                const isChecked = this.checked;

                // Désactiver la case pendant la requête pour éviter les clics multiples
                this.disabled = true;
                fetch('{{ path('app_toggle_sous_module') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: `sousModuleId=${sousModuleId}&apprentiId=${apprentiId}`
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`Erreur HTTP: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Réponse du serveur:', data);

                        // Réactiver la case à cocher
                        this.disabled = false;

                        if (data.success) {
                            // S'assurer que la case à cocher reflète l'état du serveur
                            this.checked = data.estValide;

                            // Mettre à jour la barre de progression du module
                            updateModuleProgress(data.moduleId, data.moduleProgression);

                            // IMPORTANT: Mettre à jour globalProgressions avec la nouvelle valeur
                            globalProgressions[data.moduleId] = data.moduleProgression;
                            console.log('Progressions globales mises à jour:', globalProgressions);

                            // IMPORTANT: S'assurer que la valeur de progression globale est un nombre valide
                            const progressionGlobale = parseFloat(data.progressionGlobale);
                            if (!isNaN(progressionGlobale)) {
                                // Mettre à jour la progression globale avec la version améliorée
                                console.log('Progression globale reçue du serveur:', progressionGlobale);
                                updateGlobalProgress(progressionGlobale);
                            } else {
                                console.error('Valeur de progression globale invalide reçue:', data.progressionGlobale);
                            }

                            // Recalculer la progression des compétences
                            recalculateCompetenceProgress();

                            // IMPORTANT: Mise à jour du résumé des modules complétés
                            // avec un petit délai pour laisser le DOM se mettre à jour
                            setTimeout(() => {
                                try {
                                    updateCompletedModulesSummary();
                                } catch (e) {
                                    console.error('Erreur lors de la mise à jour du résumé des modules:', e);
                                }
                            }, 100);

                            // Trouver le bouton de compétence actif pour obtenir l'ID de la compétence active
                            const activeButton = document.querySelector('.competence-btn.active');
                            if (activeButton) {
                                const activeCompetenceId = activeButton.dataset.competence;

                                // Mettre à jour les données du graphique directement
                                updateChartData(activeCompetenceId);

                                // Signaler visuellement la mise à jour réussie
                                flashGraphContainer();
                            }
                        } else {
                            // En cas d'erreur, rétablir l'état précédent de la case
                            this.checked = isChecked;
                            alert(data.message || 'Une erreur est survenue');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        // Réactiver la case à cocher
                        this.disabled = false;
                        // En cas d'erreur, rétablir l'état précédent de la case
                        this.checked = isChecked;
                        alert('Une erreur est survenue lors de la communication avec le serveur.');
                    });
            }

            // Gérer les cases à cocher - Version améliorée avec vérification des attributs
            function attachCheckboxListeners() {
                document.querySelectorAll('.sous-module-checkbox').forEach(function(checkbox) {
                    // Vérifier que les attributs data nécessaires sont présents
                    if (!checkbox.dataset.sousModule || !checkbox.dataset.apprenti || !checkbox.dataset.module) {
                        console.warn('Case à cocher sans attributs data complets:', checkbox);
                        // Si l'attribut competence est manquant mais qu'on peut le récupérer d'un ancêtre
                        if (!checkbox.dataset.competence) {
                            // Chercher le parent avec attribut data-competence
                            const competenceParent = checkbox.closest('[data-competence-id]');
                            if (competenceParent) {
                                checkbox.dataset.competence = competenceParent.dataset.competenceId;
                            }
                        }
                    }

                    // Supprimer les écouteurs existants pour éviter les doublons
                    checkbox.removeEventListener('change', handleCheckboxChange);
                    // Ajouter le nouvel écouteur
                    checkbox.addEventListener('change', handleCheckboxChange);
                });
            }

            // Fonction améliorée pour mettre à jour la progression globale
            function updateGlobalProgress(progression) {
                console.log('Mise à jour progression globale:', progression);

                // S'assurer que progression est un nombre valide
                if (isNaN(progression)) {
                    console.error('Valeur de progression invalide:', progression);
                    progression = 0;
                }

                // Essayer plusieurs sélecteurs pour trouver l'élément (en ordre de préférence)

                // Option 1: Utiliser un ID spécifique (recommandé)
                let progressionElement = document.getElementById('progression-generale');

                // Option 2: Utiliser le sélecteur original s'il n'y a pas d'ID
                if (!progressionElement) {
                    progressionElement = document.querySelector('.resume-item:first-child .resume-value');
                    console.log('Utilisation du sélecteur de secours pour la progression globale');
                }

                // Option 3: Dernier recours - chercher tous les éléments resume-value et prendre le premier
                if (!progressionElement) {
                    const allElements = document.querySelectorAll('.resume-value');
                    if (allElements.length > 0) {
                        progressionElement = allElements[0];
                        console.log('Utilisation du sélecteur de dernier recours pour la progression globale');
                    }
                }

                if (progressionElement) {
                    // S'assurer que nous formatons toujours en pourcentage
                    const formattedValue = `${Math.round(progression)}%`;
                    progressionElement.textContent = formattedValue;
                    console.log('Progression globale mise à jour avec succès:', formattedValue);

                    // Animation pour indiquer la mise à jour
                    progressionElement.classList.add('updated-value');
                    setTimeout(() => {
                        progressionElement.classList.remove('updated-value');
                    }, 800);
                } else {
                    console.error('Élément de progression globale introuvable malgré plusieurs tentatives!');

                    // Débogage - Afficher tous les éléments .resume-value pour comprendre la structure
                    const allValues = document.querySelectorAll('.resume-value');
                    console.log(`Nombre d'éléments .resume-value trouvés: ${allValues.length}`);
                    allValues.forEach((el, i) => {
                        console.log(`Élément #${i}:`, el.textContent, el);
                    });

                    // Débogage - Afficher tous les éléments .resume-item pour comprendre la structure
                    const allItems = document.querySelectorAll('.resume-item');
                    console.log(`Nombre d'éléments .resume-item trouvés: ${allItems.length}`);
                    allItems.forEach((el, i) => {
                        console.log(`Item #${i}:`, el);
                    });
                }
            }

            // Fonction pour mettre à jour le résumé des modules complétés - CORRIGÉE pour utiliser globalProgressions
            function updateCompletedModulesSummary() {
                console.log('Mise à jour des compteurs de modules par compétence');

                // Pour chaque compétence, recalculer le nombre de modules complétés
                {% for competence in competences %}
                let competenceCompleted{{ competence.id }} = 0;
                let competenceTotal{{ competence.id }} = {{ competence.modules|length }};

                // Vérifier si la compétence a des modules
                {% if competence.modules is defined and competence.modules|length > 0 %}
                // Vérifier chaque module de cette compétence
                {% for module in competence.modules %}
                // D'abord vérifier dans globalProgressions (priorité 1)
                if (globalProgressions[{{ module.id }}] !== undefined && globalProgressions[{{ module.id }}] >= 100) {
                    competenceCompleted{{ competence.id }}++;
                }
                // Ensuite vérifier dans le DOM actuel (priorité 2)
                else {
                    const moduleProgress{{ module.id }} = document.querySelector(`#progress-module-{{ module.id }} .progress-bar`);
                    if (moduleProgress{{ module.id }}) {
                        // Utiliser la valeur actuelle de la barre de progression
                        let progressText = moduleProgress{{ module.id }}.textContent;
                        let progress = parseFloat(progressText.replace('%', ''));
                        if (!isNaN(progress) && progress >= 100) {
                            competenceCompleted{{ competence.id }}++;
                            // Mettre à jour globalProgressions
                            globalProgressions[{{ module.id }}] = progress;
                        }
                    }
                    // Sinon, fallback aux données serveur initiales (priorité 3)
                    else {
                        {% if progressions[module.id] is defined %}
                        let serverProgress = {{ progressions[module.id]|default(0) }};
                        if (!isNaN(serverProgress) && serverProgress >= 100) {
                            competenceCompleted{{ competence.id }}++;
                            // Mettre à jour globalProgressions si pas déjà fait
                            if (globalProgressions[{{ module.id }}] === undefined) {
                                globalProgressions[{{ module.id }}] = serverProgress;
                            }
                        }
                        {% endif %}
                    }
                }
                {% endfor %}
                {% endif %}

                // Mise à jour du compteur avec sélecteurs multiples pour plus de robustesse
                // Option 1: Utiliser l'ID spécifique
                const competenceCountElement{{ competence.id }} = document.getElementById(`competence-count-{{ competence.id }}`);
                if (competenceCountElement{{ competence.id }}) {
                    competenceCountElement{{ competence.id }}.textContent = `${competenceCompleted{{ competence.id }}}/{{ competence.modules|length }}`;

                    // Animation pour indiquer la mise à jour
                    competenceCountElement{{ competence.id }}.classList.add('updated-value');
                    setTimeout(() => {
                        competenceCountElement{{ competence.id }}.classList.remove('updated-value');
                    }, 800);
                } else {
                    // Option 2: Utiliser l'attribut data-competence-id
                    const countByData = document.querySelector(`.competence-count[data-competence-id="{{ competence.id }}"]`);
                    if (countByData) {
                        countByData.textContent = `${competenceCompleted{{ competence.id }}}/{{ competence.modules|length }}`;

                        // Animation pour indiquer la mise à jour
                        countByData.classList.add('updated-value');
                        setTimeout(() => {
                            countByData.classList.remove('updated-value');
                        }, 800);
                    } else {
                        // Option 3: Fallback par index
                        const countByIndex = document.querySelector(`.competence-progress-item:nth-child({{ loop.index }}) .competence-count`);
                        if (countByIndex) {
                            countByIndex.textContent = `${competenceCompleted{{ competence.id }}}/{{ competence.modules|length }}`;

                            // Animation pour indiquer la mise à jour
                            countByIndex.classList.add('updated-value');
                            setTimeout(() => {
                                countByIndex.classList.remove('updated-value');
                            }, 800);
                        } else {
                            console.warn(`Impossible de trouver l'élément compteur pour la compétence {{ competence.id }}`);
                        }
                    }
                }
                {% endfor %}
            }

            // Fonction pour mettre à jour la progression d'un module - Améliorée pour mettre à jour globalProgressions
            function updateModuleProgress(moduleId, progression) {
                console.log('Mise à jour progression module:', moduleId, progression);

                // S'assurer que progression est un nombre valide
                if (isNaN(progression)) {
                    console.error('Valeur de progression invalide pour le module:', moduleId, progression);
                    progression = 0;
                }

                // Mettre à jour globalProgressions
                globalProgressions[moduleId] = progression;

                const moduleProgressBar = document.querySelector(`#progress-module-${moduleId} .progress-bar`);
                if (moduleProgressBar) {
                    moduleProgressBar.style.width = `${progression}%`;
                    moduleProgressBar.textContent = `${progression.toFixed(1)}%`;

                    // Mettre à jour la classe en fonction du pourcentage
                    moduleProgressBar.classList.remove('bg-danger', 'bg-warning', 'bg-success');
                    if (progression < 30) {
                        moduleProgressBar.classList.add('bg-danger');
                    } else if (progression < 70) {
                        moduleProgressBar.classList.add('bg-warning');
                    } else {
                        moduleProgressBar.classList.add('bg-success');
                    }
                }

                // Trouver le badge correspondant au module
                const moduleElement = document.querySelector(`#progress-module-${moduleId}`);
                if (moduleElement) {
                    const detailsElement = moduleElement.closest('details');
                    if (detailsElement) {
                        const summary = detailsElement.querySelector('summary');
                        if (summary) {
                            const badge = summary.querySelector('.badge');
                            if (badge) {
                                badge.textContent = `${progression.toFixed(1)}%`;

                                // Mettre à jour la classe en fonction du pourcentage
                                badge.classList.remove('bg-danger', 'bg-warning', 'bg-success');
                                if (progression < 30) {
                                    badge.classList.add('bg-danger');
                                } else if (progression < 70) {
                                    badge.classList.add('bg-warning');
                                } else {
                                    badge.classList.add('bg-success');
                                }
                            }
                        }
                    }
                }
            }

            // Fonction pour recalculer la progression des compétences - Améliorée pour les nouveaux apprenants
            function recalculateCompetenceProgress() {
                console.log('Recalcul des progressions des compétences');
                const competenceData = {};

                // Collecter les données pour chaque compétence
                {% for competence in competences %}
                competenceData[{{ competence.id }}] = {
                    modules: [],
                    avgProgress: 0
                };

                // Vérifier si la compétence a des modules
                {% if competence.modules is defined and competence.modules|length > 0 %}
                {% for module in competence.modules %}
                // Priorité 1: Utiliser les valeurs de globalProgressions
                if (globalProgressions[{{ module.id }}] !== undefined) {
                    competenceData[{{ competence.id }}].modules.push(globalProgressions[{{ module.id }}]);
                }
                // Priorité 2: Valeurs dans le DOM actuel
                else {
                    const moduleProgressBar{{ module.id }} = document.querySelector(`#progress-module-{{ module.id }} .progress-bar`);
                    if (moduleProgressBar{{ module.id }}) {
                        let progressText = moduleProgressBar{{ module.id }}.textContent;
                        let progress = parseFloat(progressText.replace('%', ''));
                        if (!isNaN(progress)) {
                            competenceData[{{ competence.id }}].modules.push(progress);
                            // Mettre à jour globalProgressions
                            globalProgressions[{{ module.id }}] = progress;
                        } else {
                            competenceData[{{ competence.id }}].modules.push(0); // Valeur par défaut si c'est NaN
                        }
                    }
                }
                {% endfor %}
                {% endif %}
                {% endfor %}

                // Calculer et appliquer les moyennes pour chaque compétence
                for (const competenceId in competenceData) {
                    const competence = competenceData[competenceId];

                    if (competence.modules.length > 0) {
                        competence.avgProgress = competence.modules.reduce((a, b) => a + b, 0) / competence.modules.length;
                    }

                    const competenceProgressBar = document.querySelector(`#progress-competence-${competenceId} .progress-bar`);
                    if (competenceProgressBar) {
                        competenceProgressBar.style.width = `${competence.avgProgress}%`;
                        competenceProgressBar.textContent = `${competence.avgProgress.toFixed(1)}%`;

                        competenceProgressBar.classList.remove('bg-danger', 'bg-warning', 'bg-success');
                        if (competence.avgProgress < 30) {
                            competenceProgressBar.classList.add('bg-danger');
                        } else if (competence.avgProgress < 70) {
                            competenceProgressBar.classList.add('bg-warning');
                        } else {
                            competenceProgressBar.classList.add('bg-success');
                        }
                    }
                }
            }

            // Gestion des boutons de compétences
            const competenceButtons = document.querySelectorAll('.competence-btn');
            const competenceContainer = document.getElementById('competences-container');
            const apprentiId = {{ apprenti.id }};

            // Fonction pour charger une compétence spécifique - Améliorée pour utiliser globalProgressions
            function loadCompetence(competenceId) {
                console.log('Chargement de la compétence:', competenceId);

                // Sauvegarde de l'état actuel avant de charger une nouvelle compétence
                document.querySelectorAll('[id^="progress-module-"]').forEach(module => {
                    const moduleId = module.id.replace('progress-module-', '');
                    const progressBar = module.querySelector('.progress-bar');
                    if (progressBar) {
                        const progressText = progressBar.textContent;
                        const progress = parseFloat(progressText.replace('%', ''));
                        if (!isNaN(progress)) {
                            globalProgressions[moduleId] = progress;
                        }
                    }
                });

                // Afficher le spinner de chargement
                competenceContainer.innerHTML = '<div class="loading-spinner"><div class="spinner"></div></div>';

                // Faire la requête AJAX
                fetch(`{{ path('app_formateur_competence_ajax', {'apprentiId': 'APPRENTI_ID', 'competenceId': 'COMPETENCE_ID'}) }}`
                    .replace('APPRENTI_ID', apprentiId)
                    .replace('COMPETENCE_ID', competenceId))
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`Erreur HTTP: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            // Ajouter le HTML de la compétence au conteneur
                            competenceContainer.innerHTML = data.html || '<div class="alert alert-info">Aucun module trouvé pour cette compétence.</div>';

                            // Attacher les écouteurs d'événements aux nouvelles cases à cocher
                            attachCheckboxListeners();

                            // IMPORTANT: Restaurer les progressions depuis globalProgressions
                            setTimeout(() => {
                                // Parcourir toutes les progressions connues
                                for (const moduleId in globalProgressions) {
                                    updateModuleProgress(moduleId, globalProgressions[moduleId]);
                                }

                                // S'assurer que le résumé des modules est à jour après le chargement
                                try {
                                    updateCompletedModulesSummary();
                                } catch (e) {
                                    console.error('Erreur lors de la mise à jour du résumé après chargement:', e);
                                }
                            }, 300);
                        } else {
                            // Message d'erreur plus convivial pour une compétence vide
                            if (data.message && data.message.includes('Aucun module')) {
                                competenceContainer.innerHTML = `
                                    <div class="alert alert-info text-center my-4">
                                        <p>Cette compétence ne contient pas encore de modules.</p>
                                    </div>`;
                            } else {
                                competenceContainer.innerHTML = `
                                    <div class="error-message">
                                        Erreur: ${data.message || 'Une erreur est survenue lors du chargement de la compétence'}
                                    </div>`;
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        competenceContainer.innerHTML = `
                            <div class="alert alert-danger">
                                <p>Une erreur est survenue lors du chargement de la compétence.</p>
                                <small>Veuillez réessayer ou recharger la page.</small>
                            </div>`;
                    });
            }

            // Ajouter des écouteurs d'événements aux boutons
            competenceButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Enlever la classe active de tous les boutons
                    competenceButtons.forEach(btn => btn.classList.remove('active'));

                    // Ajouter la classe active au bouton cliqué
                    this.classList.add('active');

                    // Récupérer l'ID de la compétence
                    const competenceId = this.dataset.competence;

                    // Charger le contenu détaillé de la compétence
                    loadCompetence(competenceId);

                    // Mettre à jour le graphique pour la compétence sélectionnée après un court délai
                    setTimeout(() => {
                        updateCompetenceChart(competenceId);
                    }, 400);
                });
            });

            // Initialiser avec la première compétence - Délai augmenté pour les nouveaux apprenants
            if (competenceButtons.length > 0) {
                const firstCompetenceId = competenceButtons[0].dataset.competence;

                // Charger le contenu de la première compétence
                loadCompetence(firstCompetenceId);

                // Augmenter légèrement le délai pour laisser le contenu se charger complètement
                setTimeout(() => {
                    try {
                        console.log("Initialisation du graphique pour la première compétence");
                        updateCompetenceChart(firstCompetenceId);

                        // Assurons-nous que les compteurs sont également mis à jour
                        updateCompletedModulesSummary();
                    } catch (error) {
                        console.error("Erreur lors de l'initialisation du graphique:", error);
                    }
                }, 800); // Augmenter à 800ms au lieu de 500ms
            }

            // Attacher les écouteurs d'événements initiaux
            attachCheckboxListeners();
        });
    </script>
{% endblock %}