<?php
// Démarrage de la session pour stocker les données de l'utilisateur et du bulletin
session_start();

// Configuration
$config = [
    'url_login' => 'https://ainur.iut-fbleau.fr/auth/login?service=https%3A%2F%2Fnotes.iut-fbleau.fr%2Fservices%2FdoAuth.php%3Fhref%3Dhttps%3A%2F%2Fnotes.iut-fbleau.fr%2F',
    'url_data_prefix' => 'https://notes.iut-fbleau.fr/services/data.php?q=relev%C3%A9Etudiant&semestre=',
    'semestre_mapping' => [
		'BUT2FI_S1' => '154',
		'BUT2FI_S2' => '248',
		'BUT2FI_S3' => '263',
		'BUT2FI_S4' => '351',
        'BUT2FA_S1' => '154',
        'BUT2FA_S2' => '248',
        'BUT2FA_S3' => '265'
    ]
];

// Couleurs pour les UEs
$ue_colors = [
    'UE.1.1' => '#b80004',
    'UE.1.2' => '#f97b3d',
    'UE.1.3' => '#feb40b',
    'UE.1.4' => '#80cb3f',
    'UE.1.5' => '#05162e',
    'UE.1.6' => '#548687',
    'UE.2.1' => '#b80004',
    'UE.2.2' => '#f97b3d',
    'UE.2.3' => '#feb40b',
    'UE.2.4' => '#80cb3f',
    'UE.2.5' => '#05162e',
    'UE.2.6' => '#548687',
    'UE.3.1' => '#b80004',
    'UE.3.2' => '#f97b3d',
    'UE.3.3' => '#feb40b',
    'UE.3.4' => '#80cb3f',
    'UE.3.5' => '#05162e',
    'UE.3.6' => '#548687'
];

// Fonction pour se connecter et récupérer les données
function fetchData($username, $password, $formation, $semestre) {
    global $config;
    
    // Vérifier si un semestre est sélectionné
    if (!isset($semestre)) {
        return ['error' => 'Semestre non valide'];
    }
    
    // Initialiser cURL pour simuler le navigateur
    $ch = curl_init();
    $cookie_file = tempnam(sys_get_temp_dir(), 'cookies');
    
    // Configuration initiale de cURL avec un User-Agent de navigateur
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_COOKIEFILE, $cookie_file);
    curl_setopt($ch, CURLOPT_COOKIEJAR, $cookie_file);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36');
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    
    // 1. Récupérer le formulaire de login pour obtenir les tokens potentiels
    curl_setopt($ch, CURLOPT_URL, $config['url_login']);
    $login_page = curl_exec($ch);
    
    if ($login_page === false) {
        return ['error' => 'Impossible de se connecter au serveur: ' . curl_error($ch)];
    }
    
    // Extraire le token CSRF ou lt/execution s'ils existent
    $lt_token = '';
    $execution_token = '';
    
    // Chercher lt et execution dans le formulaire CAS
    if (preg_match('/<input type="hidden" name="lt" value="([^"]+)"/', $login_page, $matches)) {
        $lt_token = $matches[1];
    }
    
    if (preg_match('/<input type="hidden" name="execution" value="([^"]+)"/', $login_page, $matches)) {
        $execution_token = $matches[1];
    }
    
    // 2. Soumettre le formulaire avec les identifiants et tokens
    curl_setopt($ch, CURLOPT_URL, $config['url_login']);
    curl_setopt($ch, CURLOPT_POST, true);
    
    $post_data = [
        'username' => $username,
        'password' => $password,
        'submitBtn' => 'Connexion'
    ];
    
    // Ajouter les tokens s'ils existent
    if (!empty($lt_token)) {
        $post_data['lt'] = $lt_token;
    }
    
    if (!empty($execution_token)) {
        $post_data['execution'] = $execution_token;
        $post_data['_eventId'] = 'submit'; // Souvent utilisé avec 'execution'
    }
    
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_data));
    
    // Configurer les en-têtes pour simuler une requête de formulaire
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/x-www-form-urlencoded',
        'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
        'Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7',
        'Referer: ' . $config['url_login']
    ]);
    
    $response_post = curl_exec($ch);
    
    if ($response_post === false) {
        return ['error' => 'Échec de la connexion: ' . curl_error($ch)];
    }
    
    // La redirection devrait nous amener à la page du bulletin
    // Vérifier l'URL actuelle après redirection
    $current_url = curl_getinfo($ch, CURLINFO_EFFECTIVE_URL);
    
    // Aller directement à la page des notes après l'authentification
    curl_setopt($ch, CURLOPT_URL, 'https://notes.iut-fbleau.fr/');
    curl_setopt($ch, CURLOPT_POST, false);
    $bulletin_page = curl_exec($ch);
    
    if ($bulletin_page === false) {
        return ['error' => 'Impossible d\'accéder à la page des notes: ' . curl_error($ch)];
    }
    
    // Vérifier si la connexion a réussi
    if (strpos($bulletin_page, "Ce relevé de notes est provisoire") === false && 
        strpos($bulletin_page, "ScoDoc") === false) {
        return ['error' => 'Identifiants incorrects ou problème de connexion'];
    }
    
    // 3. Récupérer les données JSON
    $data_url = $config['url_data_prefix'] . $semestre;
    curl_setopt($ch, CURLOPT_URL, $data_url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Accept: application/json',
        'Referer: https://notes.iut-fbleau.fr/'
    ]);
    $json_response = curl_exec($ch);
    
    curl_close($ch);
    
    if ($json_response === false) {
        return ['error' => 'Impossible de récupérer les données'];
    }
    
    // Décoder les données JSON
    $data = json_decode($json_response, true);
    
    if (json_last_error() !== JSON_ERROR_NONE) {
        return ['error' => 'Format de données invalide: ' . json_last_error_msg()];
    }
    
    return $data;
}

// Simuler les données pour le débogage
function getSimulatedData() {
    // Détecter si un fichier data.json existe localement
    if (file_exists('data.json')) {
        $json_data = file_get_contents('data.json');
        return json_decode($json_data, true);
    }
    
    // Structure simplifiée des données simulées
    return [
        'relevé' => [
            'etudiant' => [
                'nom' => 'DUPONT',
                'prenom' => 'Jean'
            ],
            'formation' => [
                'acronyme' => 'BUT INFO'
            ],
            'semestre' => [
                'numero' => 2,
                'notes' => [
                    'value' => '14.50',
                    'min' => '6.75',
                    'max' => '16.20',
                    'moy' => '12.35'
                ],
                'rang' => [
                    'value' => '5',
                    'total' => '86'
                ]
            ],
            'ues' => [
                'UE.1.1' => [
                    'titre' => 'Développer des applications',
                    'moyenne' => [
                        'value' => '15.75',
                        'min' => '7.50',
                        'max' => '18.00',
                        'moy' => '13.25',
                        'rang' => '4',
                        'total' => '86'
                    ],
                    'ressources' => [
                        'R1.01' => [
                            'coef' => 42,
                            'moyenne' => '16.50'
                        ],
                        'R1.02' => [
                            'coef' => 18,
                            'moyenne' => '15.00'
                        ]
                    ],
                    'saes' => [
                        'S1.01' => [
                            'coef' => 40,
                            'moyenne' => '16.00'
                        ]
                    ]
                ],
                'UE.1.2' => [
                    'titre' => 'Optimiser des applications',
                    'moyenne' => [
                        'value' => '14.00',
                        'min' => '6.00',
                        'max' => '17.50',
                        'moy' => '12.00',
                        'rang' => '8',
                        'total' => '86'
                    ],
                    'ressources' => [
                        'R1.03' => [
                            'coef' => 24,
                            'moyenne' => '14.50'
                        ],
                        'R1.04' => [
                            'coef' => 16,
                            'moyenne' => '13.50'
                        ]
                    ],
                    'saes' => [
                        'S1.02' => [
                            'coef' => 40,
                            'moyenne' => '15.00'
                        ]
                    ]
                ]
            ],
            'ressources' => [
                'R1.01' => [
                    'titre' => 'Initiation au développement',
                    'evaluations' => [
                        [
                            'id' => 1001,
                            'description' => 'TP noté 1',
                            'date' => '2023-10-15T10:00:00+02:00',
                            'note' => [
                                'value' => '17.00',
                                'min' => '8.00',
                                'max' => '19.00',
                                'moy' => '14.50'
                            ],
                            'coef' => '1.00'
                        ],
                        [
                            'id' => 1002,
                            'description' => 'Examen final',
                            'date' => '2023-12-20T14:00:00+01:00',
                            'note' => [
                                'value' => '16.00',
                                'min' => '7.00',
                                'max' => '18.50',
                                'moy' => '13.75'
                            ],
                            'coef' => '2.00'
                        ]
                    ]
                ],
                'R1.02' => [
                    'titre' => 'Programmation orientée objet',
                    'evaluations' => [
                        [
                            'id' => 1003,
                            'description' => 'Projet',
                            'date' => '2023-11-10T10:00:00+01:00',
                            'note' => [
                                'value' => '15.00',
                                'min' => '9.00',
                                'max' => '18.00',
                                'moy' => '14.00'
                            ],
                            'coef' => '1.50'
                        ]
                    ]
                ],
                'R1.03' => [
                    'titre' => 'Architecture des systèmes',
                    'evaluations' => [
                        [
                            'id' => 1004,
                            'description' => 'Contrôle',
                            'date' => '2023-10-05T08:00:00+02:00',
                            'note' => [
                                'value' => '14.50',
                                'min' => '6.00',
                                'max' => '17.00',
                                'moy' => '12.00'
                            ],
                            'coef' => '1.00'
                        ]
                    ]
                ],
                'R1.04' => [
                    'titre' => 'Systèmes d\'exploitation',
                    'evaluations' => [
                        [
                            'id' => 1005,
                            'description' => 'TP noté',
                            'date' => '2023-11-25T14:00:00+01:00',
                            'note' => [
                                'value' => '13.50',
                                'min' => '7.50',
                                'max' => '16.50',
                                'moy' => '12.50'
                            ],
                            'coef' => '1.00'
                        ]
                    ]
                ]
            ],
            'saes' => [
                'S1.01' => [
                    'titre' => 'Implémentation d\'un besoin client',
                    'evaluations' => [
                        [
                            'id' => 2001,
                            'description' => 'Livrable',
                            'date' => '2023-12-10T10:00:00+01:00',
                            'note' => [
                                'value' => '16.00',
                                'min' => '8.50',
                                'max' => '18.00',
                                'moy' => '13.75'
                            ],
                            'coef' => '1.00'
                        ]
                    ]
                ],
                'S1.02' => [
                    'titre' => 'Comparaison d\'approches algorithmiques',
                    'evaluations' => [
                        [
                            'id' => 2002,
                            'description' => 'Rapport',
                            'date' => '2023-11-30T16:00:00+01:00',
                            'note' => [
                                'value' => '15.00',
                                'min' => '7.00',
                                'max' => '17.50',
                                'moy' => '12.50'
                            ],
                            'coef' => '1.00'
                        ]
                    ]
                ]
            ]
        ]
    ];
}

// Analyser les statistiques globales
function calculateOverallStats($data) {
    $allGrades = [];
    
    // Récupérer toutes les notes des ressources
    foreach ($data['relevé']['ressources'] as $resource) {
        foreach ($resource['evaluations'] as $eval) {
            if (isset($eval['note']['value'])) {
                $allGrades[] = (float)$eval['note']['value'];
            }
        }
    }
    
    // Récupérer toutes les notes des SAEs
    foreach ($data['relevé']['saes'] as $sae) {
        foreach ($sae['evaluations'] as $eval) {
            if (isset($eval['note']['value'])) {
                $allGrades[] = (float)$eval['note']['value'];
            }
        }
    }
    
    // Calculer les statistiques
    $min = !empty($allGrades) ? min($allGrades) : 0;
    $max = !empty($allGrades) ? max($allGrades) : 0;
    $avg = !empty($allGrades) ? array_sum($allGrades) / count($allGrades) : 0;
    $below10Count = count(array_filter($allGrades, function($grade) { return $grade < 10; }));
    $above15Count = count(array_filter($allGrades, function($grade) { return $grade >= 15; }));
    
    return [
        'count' => count($allGrades),
        'min' => number_format($min, 2),
        'max' => number_format($max, 2),
        'avg' => number_format($avg, 2),
        'below10Percent' => !empty($allGrades) ? number_format(($below10Count / count($allGrades)) * 100, 1) : 0,
        'above15Percent' => !empty($allGrades) ? number_format(($above15Count / count($allGrades)) * 100, 1) : 0
    ];
}

// Traiter la demande de connexion
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['username'], $_POST['password'], $_POST['formation'])) {
    $username = $_POST['username'];
    $password = $_POST['password'];
    $formation = $_POST['formation'];


    // Déterminer le semestre à utiliser
    $semestre = isset($config['semestre_mapping'][$formation]) ? $config['semestre_mapping'][$formation] : null;
    
    // Vérifier si le mode de simulation est activé
    if ($username === 'demo' && $password === 'demo') {
        $result = getSimulatedData();
        $simulation_mode = true;
    } else {
        $result = fetchData($username, $password, $formation, $semestre);
        $simulation_mode = false;
    }
    
    if (isset($result['error'])) {
        $error_message = $result['error'];
    } else {
        // Stocker les données dans la session
        $_SESSION['bulletin_data'] = $result;
        $_SESSION['username'] = $username;
        $_SESSION['formation'] = $formation;
        $_SESSION['simulation_mode'] = $simulation_mode;
        
        // Rediriger vers la page du bulletin
        header('Location: ' . $_SERVER['PHP_SELF'] . '?view=dashboard');
        exit;
    }
}

// Déconnexion
if (isset($_GET['logout'])) {
    session_unset();
    session_destroy();
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// Récupérer la vue actuelle (dashboard ou login)
$current_view = isset($_GET['view']) && $_GET['view'] === 'dashboard' && isset($_SESSION['bulletin_data']) ? 'dashboard' : 'login';

// Récupérer l'onglet actif
$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'overview';

// Si on est sur le dashboard, calculer les statistiques
if ($current_view === 'dashboard') {
    $data = $_SESSION['bulletin_data'];
    $stats = calculateOverallStats($data);
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Bulletins BUT</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <?php if ($current_view === 'login'): ?>
        <!-- Page de connexion -->
        <div class="min-h-screen flex items-center justify-center">
            <div class="max-w-md w-full bg-white rounded-lg shadow p-8">
                <h1 class="text-2xl font-bold mb-6 text-center">Connexion à votre bulletin</h1>
                
                <?php if (isset($error_message)): ?>
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        <?php echo htmlspecialchars($error_message); ?>
                    </div>
                <?php endif; ?>
                
                <form method="post" action="">
                    <div class="mb-4">
                        <label for="username" class="block text-gray-700 text-sm font-bold mb-2">Nom d'utilisateur</label>
                        <input type="text" id="username" name="username" required 
                               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    
                    <div class="mb-6">
                        <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Mot de passe</label>
                        <input type="password" id="password" name="password" required 
                               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    
					<div class="mb-6">
						<label for="formation" class="block text-gray-700 text-sm font-bold mb-2">
							Formation et Semestre
						</label>
						<select id="formation" name="formation" required 
								class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
							<option value="">Sélectionnez votre formation</option>

							<optgroup label="BUT1 - Promotion 2023">
								<option value="BUT2FI_S1">BUT1 - Semestre 1</option>
								<option value="BUT2FI_S2">BUT2 - Semestre 2</option>
							</optgroup>
							
							<optgroup label="Formation Initiale (FI) - Promotion 2023">
								<option value="BUT2FI_S3">BUT2 FI - Semestre 3</option>
								<option value="BUT2FI_S4">BUT2 FI - Semestre 4</option>
							</optgroup>

							<optgroup label="Formation en Alternance (FA) - Promotion 2023">
								<option value="BUT2FA_S3">BUT2 FA - Semestre 3</option>
							</optgroup>
						</select>
					</div>

                    
                    <div class="flex items-center justify-center">
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                            Se connecter
                        </button>
                    </div>
                    
                    <div class="mt-4 text-center text-xs text-gray-500">
                        <p>Utilisez "demo/demo" pour tester l'application avec des données simulées</p>
                    </div>
                </form>
            </div>
        </div>
    <?php else: ?>
        <!-- Dashboard -->
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">
                        Dashboard <?php echo htmlspecialchars($data['relevé']['formation']['acronyme']); ?>
                    </h1>
                    <p class="text-gray-600">
                        <?php echo htmlspecialchars($data['relevé']['etudiant']['nom'] . ' ' . $data['relevé']['etudiant']['prenom']); ?> 
                        - Semestre <?php echo htmlspecialchars($data['relevé']['semestre']['numero']); ?>
                    </p>
                    <?php if (isset($_SESSION['simulation_mode']) && $_SESSION['simulation_mode']): ?>
                        <p class="text-xs text-red-500">Mode simulation - Données non réelles</p>
                    <?php endif; ?>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold"><?php echo htmlspecialchars($data['relevé']['semestre']['notes']['value']); ?>/20</div>
                    <div class="text-sm text-gray-600">Moyenne générale</div>
                    <div class="text-sm font-medium mt-1">
                        Rang : <?php echo htmlspecialchars($data['relevé']['semestre']['rang']['value']); ?>/<?php echo htmlspecialchars($data['relevé']['semestre']['rang']['total']); ?>
                    </div>
                    <a href="?logout=1" class="text-sm text-red-600 hover:text-red-800">Déconnexion</a>
                </div>
            </div>
        </header>

        <!-- Navigation Tabs -->
        <div class="border-b border-gray-200 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex space-x-8">
                    <a href="?view=dashboard&tab=overview" 
                       class="py-4 px-1 border-b-2 font-medium text-sm <?php echo $active_tab === 'overview' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'; ?>">
                        Vue d'ensemble
                    </a>
                    <a href="?view=dashboard&tab=ues" 
                       class="py-4 px-1 border-b-2 font-medium text-sm <?php echo $active_tab === 'ues' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'; ?>">
                        Unités d'Enseignement
                    </a>
                    <a href="?view=dashboard&tab=resources" 
                       class="py-4 px-1 border-b-2 font-medium text-sm <?php echo $active_tab === 'resources' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'; ?>">
                        Ressources
                    </a>
                    <a href="?view=dashboard&tab=saes" 
                       class="py-4 px-1 border-b-2 font-medium text-sm <?php echo $active_tab === 'saes' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'; ?>">
                        SAE
                    </a>
                    <a href="?view=dashboard&tab=evolution" 
                       class="py-4 px-1 border-b-2 font-medium text-sm <?php echo $active_tab === 'evolution' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'; ?>">
                        Évolution
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <?php if ($active_tab === 'overview'): ?>
                <!-- Overview Tab -->
                <div>
                    <div class="flex justify-end mb-2">
                        <button id="exportAllBtn" class="bg-green-500 hover:bg-green-700 text-white font-medium py-2 px-4 rounded flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            Exporter tous les graphiques
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="px-4 py-5 sm:p-6">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                        </svg>
                                    </div>
                                    <div class="ml-5 w-0 flex-1">
                                        <dt class="text-sm font-medium text-gray-500 truncate">
                                            Moyenne générale
                                        </dt>
                                        <dd class="flex items-baseline">
                                            <div class="text-2xl font-semibold text-gray-900">
                                                <?php echo htmlspecialchars($data['relevé']['semestre']['notes']['value']); ?>/20
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="px-4 py-5 sm:p-6">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                        </svg>
                                    </div>
                                    <div class="ml-5 w-0 flex-1">
                                        <dt class="text-sm font-medium text-gray-500 truncate">
                                            Meilleure note
                                        </dt>
                                        <dd class="flex items-baseline">
                                            <div class="text-2xl font-semibold text-gray-900">
                                                <?php echo $stats['max']; ?>/20
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="px-4 py-5 sm:p-6">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                        </svg>
                                    </div>
                                    <div class="ml-5 w-0 flex-1">
                                        <dt class="text-sm font-medium text-gray-500 truncate">
                                            Notes > 15
                                        </dt>
                                        <dd class="flex items-baseline">
                                            <div class="text-2xl font-semibold text-gray-900">
                                                <?php echo $stats['above15Percent']; ?>%
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="px-4 py-5 sm:p-6">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </div>
                                    <div class="ml-5 w-0 flex-1">
                                        <dt class="text-sm font-medium text-gray-500 truncate">
                                            Notes < 10
                                        </dt>
                                        <dd class="flex items-baseline">
                                            <div class="text-2xl font-semibold text-gray-900">
                                                <?php echo $stats['below10Percent']; ?>%
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <!-- UE Performance Chart -->
                        <div class="bg-white shadow rounded-lg p-6 relative">
                            <div class="flex justify-between items-center mb-4">
                                <h2 class="text-lg font-medium text-gray-900">Performance par UE</h2>
                                <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartUE">
                                    Exporter
                                </button>
                            </div>
                            <canvas id="chartUE" height="300"></canvas>
                        </div>

                        <!-- Radar Chart -->
                        <div class="bg-white shadow rounded-lg p-6 relative">
                            <div class="flex justify-between items-center mb-4">
                                <h2 class="text-lg font-medium text-gray-900">Profil de compétences</h2>
                                <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartRadar">
                                    Exporter
                                </button>
                            </div>
                            <canvas id="chartRadar" height="300"></canvas>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <!-- Best Performances -->
                        <div class="bg-white shadow rounded-lg p-6">
                            <h2 class="text-lg font-medium text-gray-900 mb-4">Meilleures performances</h2>
                            <div class="space-y-4">
                                <?php
                                // Récupérer toutes les évaluations
                                $allEvals = [];
                                foreach ($data['relevé']['ressources'] as $resourceId => $resource) {
                                    foreach ($resource['evaluations'] as $eval) {
                                        if (isset($eval['note']['value'])) {
                                            $allEvals[] = [
                                                'resourceId' => $resourceId,
                                                'resourceTitle' => $resource['titre'],
                                                'evalId' => $eval['id'],
                                                'description' => $eval['description'],
                                                'note' => (float)$eval['note']['value'],
                                                'coef' => (float)$eval['coef']
                                            ];
                                        }
                                    }
                                }
                                
                                foreach ($data['relevé']['saes'] as $saeId => $sae) {
                                    foreach ($sae['evaluations'] as $eval) {
                                        if (isset($eval['note']['value'])) {
                                            $allEvals[] = [
                                                'resourceId' => $saeId,
                                                'resourceTitle' => $sae['titre'],
                                                'evalId' => $eval['id'],
                                                'description' => $eval['description'],
                                                'note' => (float)$eval['note']['value'],
                                                'coef' => (float)$eval['coef']
                                            ];
                                        }
                                    }
                                }
                                
                                // Trier par note (décroissant)
                                usort($allEvals, function($a, $b) {
                                    return $b['note'] <=> $a['note'];
                                });
                                
                                // Afficher les 5 meilleures
                                $bestEvals = array_slice($allEvals, 0, 5);
                                
                                foreach ($bestEvals as $eval):
                                ?>
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                                            <span class="text-green-600 font-medium"><?php echo $eval['note']; ?></span>
                                        </div>
                                        <div class="ml-4">
                                            <h3 class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($eval['resourceId'] . ' - ' . $eval['description']); ?></h3>
                                            <p class="text-sm text-gray-500"><?php echo htmlspecialchars($eval['resourceTitle'] . ' (Coef: ' . $eval['coef'] . ')'); ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <!-- Worst Performances -->
                        <div class="bg-white shadow rounded-lg p-6">
                            <h2 class="text-lg font-medium text-gray-900 mb-4">Performances à améliorer</h2>
                            <div class="space-y-4">
                                <?php
                                // Trier par note (croissant)
                                usort($allEvals, function($a, $b) {
                                    return $a['note'] <=> $b['note'];
                                });
                                
                                // Afficher les 5 moins bonnes
                                $worstEvals = array_slice($allEvals, 0, 5);
                                
                                foreach ($worstEvals as $eval):
                                ?>
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
                                            <span class="text-red-600 font-medium"><?php echo $eval['note']; ?></span>
                                        </div>
                                        <div class="ml-4">
                                            <h3 class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($eval['resourceId'] . ' - ' . $eval['description']); ?></h3>
                                            <p class="text-sm text-gray-500"><?php echo htmlspecialchars($eval['resourceTitle'] . ' (Coef: ' . $eval['coef'] . ')'); ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>

                    <!-- Grade Distribution -->
                    <div class="bg-white shadow rounded-lg p-6 relative">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-medium text-gray-900">Distribution des notes</h2>
                            <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartDistribution">
                                Exporter
                            </button>
                        </div>
                        <canvas id="chartDistribution" height="300"></canvas>
                    </div>
                </div>
            <?php elseif ($active_tab === 'ues'): ?>
                <!-- UEs Tab -->
                <div class="bg-white shadow rounded-lg p-6 relative">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-medium text-gray-900">Performances par UE</h2>
                        <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartUEComparison">
                            Exporter
                        </button>
                    </div>
                    <canvas id="chartUEComparison" height="400"></canvas>
                    
                    <div class="mt-8">
                        <h3 class="text-md font-medium text-gray-900 mb-4">Détails des unités d'enseignement</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <?php foreach ($data['relevé']['ues'] as $ueId => $ue): ?>
                                <div class="border-l-4 bg-white shadow rounded-lg overflow-hidden" 
                                     style="border-color: <?php echo isset($ue_colors[$ueId]) ? $ue_colors[$ueId] : '#8884d8'; ?>">
                                    <div class="px-4 py-5">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="text-lg font-medium text-gray-900"><?php echo htmlspecialchars($ueId); ?></h3>
                                                <p class="text-sm text-gray-500"><?php echo htmlspecialchars($ue['titre']); ?></p>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-2xl font-bold"><?php echo htmlspecialchars($ue['moyenne']['value']); ?>/20</div>
                                                <div class="text-xs text-gray-500">Moy. promo: <?php echo htmlspecialchars($ue['moyenne']['moy']); ?>/20</div>
                                            </div>
                                        </div>
                                        <div class="mt-4">
                                            <div class="flex justify-between text-sm">
                                                <span>Rang: <?php echo htmlspecialchars($ue['moyenne']['rang']); ?>/<?php echo htmlspecialchars($ue['moyenne']['total']); ?></span>
                                                <span class="font-medium" style="color: <?php echo isset($ue_colors[$ueId]) ? $ue_colors[$ueId] : '#8884d8'; ?>">
                                                    <?php echo number_format((1 - (int)$ue['moyenne']['rang'] / (int)$ue['moyenne']['total']) * 100, 1); ?>%
                                                </span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                                                <div class="h-2.5 rounded-full" 
                                                     style="width: <?php echo (1 - (int)$ue['moyenne']['rang'] / (int)$ue['moyenne']['total']) * 100; ?>%; 
                                                            background-color: <?php echo isset($ue_colors[$ueId]) ? $ue_colors[$ueId] : '#8884d8'; ?>">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Détails de l'UE (ressources et SAEs) -->
                                        <div class="mt-4 pt-4 border-t border-gray-200">
                                            <h4 class="text-sm font-medium text-gray-900 mb-2">Ressources</h4>
                                            <div class="space-y-2">
                                                <?php if (isset($ue['ressources'])): ?>
                                                    <?php foreach ($ue['ressources'] as $resourceId => $resourceInfo): ?>
                                                        <?php $resource = $data['relevé']['ressources'][$resourceId]; ?>
                                                        <div class="flex justify-between text-sm">
                                                            <span><?php echo htmlspecialchars($resourceId . ' - ' . $resource['titre']); ?></span>
                                                            <span class="font-medium"><?php echo htmlspecialchars($resourceInfo['moyenne']); ?>/20</span>
                                                        </div>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <p class="text-sm text-gray-500">Aucune ressource associée</p>
                                                <?php endif; ?>
                                            </div>
                                            
                                            <h4 class="text-sm font-medium text-gray-900 mt-4 mb-2">SAEs</h4>
                                            <div class="space-y-2">
                                                <?php if (isset($ue['saes'])): ?>
                                                    <?php foreach ($ue['saes'] as $saeId => $saeInfo): ?>
                                                        <?php $sae = $data['relevé']['saes'][$saeId]; ?>
                                                        <div class="flex justify-between text-sm">
                                                            <span><?php echo htmlspecialchars($saeId . ' - ' . $sae['titre']); ?></span>
                                                            <span class="font-medium"><?php echo htmlspecialchars($saeInfo['moyenne']); ?>/20</span>
                                                        </div>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <p class="text-sm text-gray-500">Aucune SAE associée</p>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            <?php elseif ($active_tab === 'resources'): ?>
                <!-- Resources Tab -->
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="mb-6">
                        <input type="text" id="resourceSearch" placeholder="Rechercher une ressource..." 
                               class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm p-2 border">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="resourcesContainer">
                        <?php foreach ($data['relevé']['ressources'] as $resourceId => $resource): ?>
                            <?php
                            // Calculer la moyenne des notes pour cette ressource
                            $grades = array_map(function($eval) {
                                return (float)$eval['note']['value'];
                            }, $resource['evaluations']);
                            
                            $avgGrade = !empty($grades) ? array_sum($grades) / count($grades) : 0;
                            
                            // Trouver les UEs associées
                            $linkedUEs = [];
                            foreach ($data['relevé']['ues'] as $ueId => $ue) {
                                if (isset($ue['ressources']) && array_key_exists($resourceId, $ue['ressources'])) {
                                    $linkedUEs[] = $ueId;
                                }
                            }
                            ?>
                            <div class="resource-card bg-white shadow rounded-lg overflow-hidden border hover:shadow-md" 
                                 data-id="<?php echo $resourceId; ?>" 
                                 data-title="<?php echo htmlspecialchars($resource['titre']); ?>">
                                <div class="px-4 py-5">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h3 class="text-lg font-medium text-gray-900"><?php echo htmlspecialchars($resourceId); ?></h3>
                                            <p class="text-sm text-gray-500"><?php echo htmlspecialchars($resource['titre']); ?></p>
                                            <div class="flex flex-wrap mt-2">
                                                <?php foreach ($linkedUEs as $ueId): ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mr-2 mb-1 text-white"
                                                          style="background-color: <?php echo isset($ue_colors[$ueId]) ? $ue_colors[$ueId] : '#8884d8'; ?>">
                                                        <?php echo htmlspecialchars($ueId); ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <div class="text-2xl font-bold"><?php echo number_format($avgGrade, 2); ?>/20</div>
                                            <div class="text-xs text-gray-500"><?php echo count($resource['evaluations']); ?> éval.</div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-4 border-t pt-4 resource-details">
                                        <h4 class="text-sm font-medium text-gray-900 mb-2">Évaluations</h4>
                                        <div class="space-y-2">
                                            <?php foreach ($resource['evaluations'] as $eval): ?>
                                                <div class="flex justify-between text-sm">
                                                    <span><?php echo htmlspecialchars($eval['description']); ?></span>
                                                    <span class="font-medium"><?php echo htmlspecialchars($eval['note']['value']); ?>/20</span>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                        
                                        <?php if (count($resource['evaluations']) > 1): ?>
                                            <div class="mt-4">
                                                <div class="w-full h-64">
                                                    <canvas id="resource-<?php echo $resourceId; ?>"></canvas>
                                                </div>
                                                <button class="export-chart-btn mt-2 bg-green-500 hover:bg-green-700 text-white text-xs py-1 px-2 rounded" 
                                                        data-canvas-id="resource-<?php echo $resourceId; ?>">
                                                    Exporter le graphique
                                                </button>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php elseif ($active_tab === 'saes'): ?>
                <!-- SAEs Tab -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">Situations d'Apprentissage et d'Évaluation</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <?php foreach ($data['relevé']['saes'] as $saeId => $sae): ?>
                            <?php
                            // Calculer la moyenne
                            $grades = array_map(function($eval) {
                                return (float)$eval['note']['value'];
                            }, $sae['evaluations']);
                            
                            $avgGrade = !empty($grades) ? array_sum($grades) / count($grades) : 0;
                            
                            // Trouver les UEs associées
                            $linkedUEs = [];
                            foreach ($data['relevé']['ues'] as $ueId => $ue) {
                                if (isset($ue['saes']) && array_key_exists($saeId, $ue['saes'])) {
                                    $linkedUEs[] = $ueId;
                                }
                            }
                            ?>
                            <div class="bg-white shadow rounded-lg overflow-hidden border hover:shadow-md">
                                <div class="px-4 py-5">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h3 class="text-lg font-medium text-gray-900"><?php echo htmlspecialchars($saeId); ?></h3>
                                            <p class="text-sm text-gray-500"><?php echo htmlspecialchars($sae['titre']); ?></p>
                                            <div class="flex flex-wrap mt-2">
                                                <?php foreach ($linkedUEs as $ueId): ?>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mr-2 mb-1 text-white"
                                                          style="background-color: <?php echo isset($ue_colors[$ueId]) ? $ue_colors[$ueId] : '#8884d8'; ?>">
                                                        <?php echo htmlspecialchars($ueId); ?>
                                                    </span>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <div class="text-2xl font-bold"><?php echo number_format($avgGrade, 2); ?>/20</div>
                                            <div class="text-xs text-gray-500"><?php echo count($sae['evaluations']); ?> éval.</div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-4 border-t pt-4">
                                        <h4 class="text-sm font-medium text-gray-900 mb-2">Évaluations</h4>
                                        <div class="space-y-2">
                                            <?php foreach ($sae['evaluations'] as $eval): ?>
                                                <div class="flex justify-between text-sm">
                                                    <span><?php echo htmlspecialchars($eval['description']); ?></span>
                                                    <span class="font-medium"><?php echo htmlspecialchars($eval['note']['value']); ?>/20</span>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                        
                                        <?php if (count($sae['evaluations']) > 1): ?>
                                            <div class="mt-4">
                                                <div class="w-full h-64">
                                                    <canvas id="sae-<?php echo $saeId; ?>"></canvas>
                                                </div>
                                                <button class="export-chart-btn mt-2 bg-green-500 hover:bg-green-700 text-white text-xs py-1 px-2 rounded" 
                                                        data-canvas-id="sae-<?php echo $saeId; ?>">
                                                    Exporter le graphique
                                                </button>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php elseif ($active_tab === 'evolution'): ?>
                <!-- Evolution Tab -->
                <div class="bg-white shadow rounded-lg p-6 relative">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-medium text-gray-900">Évolution des notes</h2>
                        <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartEvolution">
                            Exporter
                        </button>
                    </div>
                    <canvas id="chartEvolution" height="400"></canvas>
                    
                    <h3 class="text-md font-medium text-gray-900 mt-8 mb-4">Historique des évaluations</h3>
                    <div class="flow-root">
                        <ul class="-mb-8">
                            <?php
                            // Collecter toutes les évaluations avec date
                            $gradesOverTime = [];
						
                            
                            foreach ($data['relevé']['ressources'] as $resourceId => $resource) {
                                foreach ($resource['evaluations'] as $eval) {
                                    if (isset($eval['date']) && $eval['date']) {
                                        $gradesOverTime[] = [
                                            'date' => new DateTime($eval['date']),
                                            'name' => $resourceId . ' - ' . $eval['description'],
                                            'grade' => (float)$eval['note']['value'],
                                            'type' => 'resource'
                                        ];
                                    }
                                }
                            }
                            
                            foreach ($data['relevé']['saes'] as $saeId => $sae) {
                                foreach ($sae['evaluations'] as $eval) {
                                    if (isset($eval['date']) && $eval['date']) {
                                        $gradesOverTime[] = [
                                            'date' => new DateTime($eval['date']),
                                            'name' => $saeId . ' - ' . $eval['description'],
                                            'grade' => (float)$eval['note']['value'],
                                            'type' => 'sae'
                                        ];
                                    }
                                }
                            }
                            
                            // Trier par date
                            usort($gradesOverTime, function($a, $b) {
                                return $a['date'] <=> $b['date'];
                            });
                            
                            foreach ($gradesOverTime as $index => $event):
                                $colorClass = $event['grade'] >= 16 ? 'bg-green-500' : ($event['grade'] >= 10 ? 'bg-blue-500' : 'bg-red-500');
                            ?>
                                <li>
                                    <div class="relative pb-8">
                                        <?php if ($index !== count($gradesOverTime) - 1): ?>
                                            <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                        <?php endif; ?>
                                        <div class="relative flex space-x-3">
                                            <div>
                                                <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white <?php echo $colorClass; ?>">
                                                    <span class="text-white text-xs font-medium"><?php echo $event['grade']; ?></span>
                                                </span>
                                            </div>
                                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                <div>
                                                    <p class="text-sm text-gray-900">
                                                        <?php echo htmlspecialchars($event['name']); ?>
                                                    </p>
                                                </div>
                                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                    <?php echo $event['date']->format('d/m/Y'); ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            <?php elseif ($active_tab === 'comparison'): ?>
                <!-- Comparison Tab -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">Comparaison d'éléments</h2>
                    
                    <div class="mb-6">
                        <input type="text" id="comparisonSearch" placeholder="Rechercher UEs, ressources, SAEs..." 
                               class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm p-2 border">
                    </div>
                    
                    <div id="comparisonResults" class="mt-2 border border-gray-200 rounded-md max-h-60 overflow-y-auto hidden">
                        <ul class="divide-y divide-gray-200" id="comparisonResultsList"></ul>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="text-md font-medium text-gray-900 mb-2">Éléments sélectionnés</h3>
                        <div id="selectedItems" class="flex flex-wrap">
                            <p class="text-sm text-gray-500" id="noItemsSelected">Aucun élément sélectionné pour la comparaison</p>
                        </div>
                    </div>
                    
                    <div id="comparisonChartContainer" class="hidden relative">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-md font-medium text-gray-900">Graphique de comparaison</h3>
                            <button class="export-btn bg-green-500 hover:bg-green-700 text-white text-sm py-1 px-2 rounded" data-chart="chartComparison">
                                Exporter
                            </button>
                        </div>
                        <canvas id="chartComparison" height="400"></canvas>
                    </div>
                </div>
            <?php endif; ?>
        </main>

        <!-- JavaScript pour les graphiques et l'interactivité -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // ========== DONNÉES ==========
                // Données pour les graphiques
                const bulletinData = <?php echo json_encode($data['relevé']); ?>;
                const ueColors = <?php echo json_encode($ue_colors); ?>;
                
                // ========== FONCTION UTILITAIRES ==========
                // Fonction pour obtenir une couleur par défaut
                function getDefaultColor(index) {
                    const colors = [
                        '#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#a4de6c', 
                        '#d0ed57', '#83a6ed', '#8dd1e1', '#82ca9d', '#e67c7c'
                    ];
                    return colors[index % colors.length];
                }
                
                // Fonction pour exporter un graphique
                function exportChart(chartId, filename) {
                    const canvas = document.getElementById(chartId);
                    if (!canvas) {
                        console.error(`Canvas element with ID ${chartId} not found`);
                        return;
                    }
                    
                    try {
                        // Créer un lien temporaire et déclencher le téléchargement
                        canvas.toBlob(function(blob) {
                            if (!blob) return;
                            
                            const defaultFilename = chartId + '.png';
                            saveAs(blob, filename || defaultFilename);
                        });
                    } catch (e) {
                        console.error("Erreur lors de l'exportation du graphique:", e);
                    }
                }
                
                // ========== INITIALISATION DES GRAPHIQUES PRINCIPAUX ==========
                
                // Graphique de performance par UE (overview)
                const chartUE = document.getElementById('chartUE');
                if (chartUE) {
                    const labels = [];
                    const studentValues = [];
                    const classAvgValues = [];
                    const backgroundColors = [];
                    
                    Object.entries(bulletinData.ues).forEach(([ueId, ue], index) => {
                        labels.push(ueId);
                        studentValues.push(parseFloat(ue.moyenne.value));
                        classAvgValues.push(parseFloat(ue.moyenne.moy));
                        backgroundColors.push(ueColors[ueId] || getDefaultColor(index));
                    });
                    
                    new Chart(chartUE, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: 'Ta note',
                                    data: studentValues,
                                    backgroundColor: backgroundColors
                                },
                                {
                                    label: 'Moyenne promo',
                                    data: classAvgValues,
                                    backgroundColor: '#82ca9d'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 20
                                }
                            }
                        }
                    });
                }

                // Graphique UE pour l'onglet UEs
                const chartUEComparison = document.getElementById('chartUEComparison');
                if (chartUEComparison) {
                    const labels = [];
                    const studentValues = [];
                    const classAvgValues = [];
                    const backgroundColors = [];
                    
                    Object.entries(bulletinData.ues).forEach(([ueId, ue], index) => {
                        labels.push(ueId);
                        studentValues.push(parseFloat(ue.moyenne.value));
                        classAvgValues.push(parseFloat(ue.moyenne.moy));
                        backgroundColors.push(ueColors[ueId] || getDefaultColor(index));
                    });
                    
                    new Chart(chartUEComparison, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: 'Ta note',
                                    data: studentValues,
                                    backgroundColor: backgroundColors
                                },
                                {
                                    label: 'Moyenne promo',
                                    data: classAvgValues,
                                    backgroundColor: '#82ca9d'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 20
                                }
                            }
                        }
                    });
                }
                
                // Graphique radar des compétences (overview)
                const chartRadar = document.getElementById('chartRadar');
                if (chartRadar) {
                    const radarLabels = [];
                    const radarValues = [];
                    
                    Object.entries(bulletinData.ues).forEach(([ueId, ue]) => {
                        radarLabels.push(ueId);
                        radarValues.push(parseFloat(ue.moyenne.value));
                    });
                    
                    new Chart(chartRadar, {
                        type: 'radar',
                        data: {
                            labels: radarLabels,
                            datasets: [{
                                label: 'Notes',
                                data: radarValues,
                                fill: true,
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                borderColor: 'rgb(54, 162, 235)',
                                pointBackgroundColor: 'rgb(54, 162, 235)',
                                pointBorderColor: '#fff',
                                pointHoverBackgroundColor: '#fff',
                                pointHoverBorderColor: 'rgb(54, 162, 235)'
                            }]
                        },
                        options: {
                            scales: {
                                r: {
                                    angleLines: {
                                        display: true
                                    },
                                    suggestedMin: 0,
                                    suggestedMax: 20
                                }
                            }
                        }
                    });
                }
                
                // Graphique de distribution des notes (overview)
                const chartDistribution = document.getElementById('chartDistribution');
                if (chartDistribution) {
                    // Collecter toutes les notes
                    const allGrades = [];
                    
                    Object.values(bulletinData.ressources).forEach(resource => {
                        resource.evaluations.forEach(eval => {
                            if (eval.note && eval.note.value) {
                                allGrades.push(parseFloat(eval.note.value));
                            }
                        });
                    });
                    
                    Object.values(bulletinData.saes).forEach(sae => {
                        sae.evaluations.forEach(eval => {
                            if (eval.note && eval.note.value) {
                                allGrades.push(parseFloat(eval.note.value));
                            }
                        });
                    });
                    
                    // Définir les tranches
                    const ranges = [
                        { name: '0-5', min: 0, max: 5, count: 0 },
                        { name: '5-10', min: 5, max: 10, count: 0 },
                        { name: '10-12', min: 10, max: 12, count: 0 },
                        { name: '12-14', min: 12, max: 14, count: 0 },
                        { name: '14-16', min: 14, max: 16, count: 0 },
                        { name: '16-18', min: 16, max: 18, count: 0 },
                        { name: '18-20', min: 18, max: 21, count: 0 }
                    ];
                    
                    // Compter les notes dans chaque tranche
                    allGrades.forEach(grade => {
                        const range = ranges.find(r => grade >= r.min && grade < r.max);
                        if (range) range.count++;
                    });
                    
                    // Calculer les pourcentages
                    ranges.forEach(range => {
                        range.percentage = allGrades.length > 0 ? (range.count / allGrades.length) * 100 : 0;
                    });
                    
                    new Chart(chartDistribution, {
                        type: 'bar',
                        data: {
                            labels: ranges.map(r => r.name),
                            datasets: [{
                                label: 'Pourcentage des notes',
                                data: ranges.map(r => r.percentage),
                                backgroundColor: 'rgba(54, 162, 235, 0.5)'
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100,
                                    title: {
                                        display: true,
                                        text: 'Pourcentage (%)'
                                    }
                                }
                            }
                        }
                    });
                }
                
                // Graphique d'évolution des notes (onglet Evolution)
                const chartEvolution = document.getElementById('chartEvolution');
                if (chartEvolution) {
                    // Collecter les évaluations avec date
                    const gradesOverTime = [];
                    
                    Object.entries(bulletinData.ressources).forEach(([resourceId, resource]) => {
                        resource.evaluations.forEach(eval => {
                            if (eval.date) {
                                gradesOverTime.push({
                                    date: new Date(eval.date),
                                    name: `${resourceId} - ${eval.description}`,
                                    grade: parseFloat(eval.note.value)
                                });
                            }
                        });
                    });
                    
                    Object.entries(bulletinData.saes).forEach(([saeId, sae]) => {
                        sae.evaluations.forEach(eval => {
                            if (eval.date) {
                                gradesOverTime.push({
                                    date: new Date(eval.date),
                                    name: `${saeId} - ${eval.description}`,
                                    grade: parseFloat(eval.note.value)
                                });
                            }
                        });
                    });
                    
                    // Trier par date
                    gradesOverTime.sort((a, b) => a.date - b.date);
                    
                    if (gradesOverTime.length > 0) {
                        new Chart(chartEvolution, {
                            type: 'line',
                            data: {
                                labels: gradesOverTime.map(g => g.date.toLocaleDateString('fr-FR')),
                                datasets: [{
                                    label: 'Note',
                                    data: gradesOverTime.map(g => g.grade),
                                    borderColor: 'rgb(75, 192, 192)',
                                    tension: 0.1,
                                    fill: false,
                                    pointBackgroundColor: gradesOverTime.map(g => 
										g.grade >= 16 ? 'rgb(34, 197, 94)' : // vert
										g.grade >= 10 ? 'rgb(59, 130, 246)' : // bleu
										'rgb(239, 68, 68)' // rouge
									),
                                    pointRadius: 6
                                }]
                            },
                            options: {
                                responsive: true,
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        max: 20
                                    }
                                }
                            }
                        });
                    } else {
                        // Si aucune donnée de date, afficher un message
                        chartEvolution.parentElement.innerHTML = '<p class="text-center text-gray-500 py-10">Aucune donnée d\'évolution disponible</p>';
                    }
                }
                
                // ========== GRAPHIQUES POUR LES RESSOURCES ET SAEs ==========
                
                // Créer les graphiques pour les ressources
                Object.entries(bulletinData.ressources).forEach(([resourceId, resource]) => {
                    const canvasId = `resource-${resourceId}`;
                    const canvas = document.getElementById(canvasId);
                    
                    if (canvas && resource.evaluations.length > 1) {
                        const labels = [];
                        const data = [];
                        const avgData = [];
                        const colors = [];
                        
                        resource.evaluations.forEach(eval => {
                            labels.push(eval.description);
                            data.push(parseFloat(eval.note.value));
                            avgData.push(parseFloat(eval.note.moy));
                            colors.push(
                                parseFloat(eval.note.value) >= 16 ? 'rgb(34, 197, 94)' : // vert
                                parseFloat(eval.note.value) >= 10 ? 'rgb(59, 130, 246)' : // bleu
                                'rgb(239, 68, 68)' // rouge
                            );
                        });
                        
                        new Chart(canvas, {
                            type: 'bar',
                            data: {
                                labels: labels,
                                datasets: [
                                    {
                                        label: 'Ta note',
                                        data: data,
                                        backgroundColor: colors
                                    },
                                    {
                                        label: 'Moyenne promo',
                                        data: avgData,
                                        backgroundColor: 'rgba(153, 102, 255, 0.5)'
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        max: 20
                                    }
                                },
                                plugins: {
                                    legend: {
                                        position: 'bottom'
                                    }
                                }
                            }
                        });
                    }
                });
                
                // Créer les graphiques pour les SAEs
                Object.entries(bulletinData.saes).forEach(([saeId, sae]) => {
                    const canvasId = `sae-${saeId}`;
                    const canvas = document.getElementById(canvasId);
                    
                    if (canvas && sae.evaluations.length > 1) {
                        const labels = [];
                        const data = [];
                        const avgData = [];
                        const colors = [];
                        
                        sae.evaluations.forEach(eval => {
                            labels.push(eval.description);
                            data.push(parseFloat(eval.note.value));
                            avgData.push(parseFloat(eval.note.moy));
                            colors.push(
                                parseFloat(eval.note.value) >= 16 ? 'rgb(34, 197, 94)' : // vert
                                parseFloat(eval.note.value) >= 10 ? 'rgb(59, 130, 246)' : // bleu
                                'rgb(239, 68, 68)' // rouge
                            );
                        });
                        
                        new Chart(canvas, {
                            type: 'bar',
                            data: {
                                labels: labels,
                                datasets: [
                                    {
                                        label: 'Ta note',
                                        data: data,
                                        backgroundColor: colors
                                    },
                                    {
                                        label: 'Moyenne promo',
                                        data: avgData,
                                        backgroundColor: 'rgba(153, 102, 255, 0.5)'
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        max: 20
                                    }
                                },
                                plugins: {
                                    legend: {
                                        position: 'bottom'
                                    }
                                }
                            }
                        });
                    }
                });
                
                // ========== INTERACTIVITÉ ==========
                
                // Boutons d'exportation généraux
                document.querySelectorAll('.export-btn').forEach(button => {
                    const chartId = button.getAttribute('data-chart');
                    if (document.getElementById(chartId)) {
                        button.addEventListener('click', function() {
                            exportChart(chartId, chartId + '.png');
                        });
                    } else {
                        // Si le graphique n'existe pas, masquer le bouton
                        button.style.display = 'none';
                    }
                });
                
                // Boutons d'exportation pour les graphiques des ressources et SAEs
                document.querySelectorAll('.export-chart-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const canvasId = this.getAttribute('data-canvas-id');
                        if (document.getElementById(canvasId)) {
                            exportChart(canvasId, canvasId + '.png');
                        }
                    });
                });
                
                // Bouton pour exporter tous les graphiques
                const exportAllBtn = document.getElementById('exportAllBtn');
                if (exportAllBtn) {
                    exportAllBtn.addEventListener('click', function() {
                        alert('Tous les graphiques vont être exportés. Veuillez patienter pendant le téléchargement de chaque fichier.');
                        
                        // Liste des graphiques principaux
                        const mainCharts = ['chartUE', 'chartRadar', 'chartDistribution', 'chartUEComparison', 'chartEvolution', 'chartComparison'];
                        
                        // Exporter les graphiques principaux qui existent
                        mainCharts.forEach((chartId, index) => {
                            if (document.getElementById(chartId)) {
                                setTimeout(() => {
                                    exportChart(chartId, chartId + '.png');
                                }, index * 500);
                            }
                        });
                        
                        // Collecter et exporter les graphiques des ressources
                        const resourceCharts = [];
                        document.querySelectorAll('[id^="resource-"]').forEach(canvas => {
                            resourceCharts.push(canvas.id);
                        });
                        
                        resourceCharts.forEach((chartId, index) => {
                            setTimeout(() => {
                                exportChart(chartId, chartId + '.png');
                            }, (mainCharts.length + index) * 500);
                        });
                        
                        // Collecter et exporter les graphiques des SAEs
                        const saeCharts = [];
                        document.querySelectorAll('[id^="sae-"]').forEach(canvas => {
                            saeCharts.push(canvas.id);
                        });
                        
                        saeCharts.forEach((chartId, index) => {
                            setTimeout(() => {
                                exportChart(chartId, chartId + '.png');
                            }, (mainCharts.length + resourceCharts.length + index) * 500);
                        });
                    });
                }
                
                // Recherche de ressources
                const resourceSearch = document.getElementById('resourceSearch');
                if (resourceSearch) {
                    resourceSearch.addEventListener('input', function() {
                        const searchTerm = this.value.toLowerCase();
                        const resourceCards = document.querySelectorAll('.resource-card');
                        
                        resourceCards.forEach(card => {
                            const id = card.dataset.id.toLowerCase();
                            const title = card.dataset.title.toLowerCase();
                            const isMatch = id.includes(searchTerm) || title.includes(searchTerm);
                            
                            card.style.display = isMatch ? '' : 'none';
                        });
                    });
                }
                
                // Masquer les détails des ressources au chargement (pour économiser de l'espace)
                const resourceDetails = document.querySelectorAll('.resource-details');
                resourceDetails.forEach(detail => {
                    detail.classList.add('hidden');
                });
                
                // Afficher/masquer les détails au clic sur la carte
                const resourceCards = document.querySelectorAll('.resource-card');
                resourceCards.forEach(card => {
                    card.addEventListener('click', function() {
                        const details = this.querySelector('.resource-details');
                        if (details) {
                            details.classList.toggle('hidden');
                        }
                    });
                });
                
                // ========== SYSTÈME DE COMPARAISON ==========
                
                // Variables pour le système de comparaison
                let comparisonChart = null;
                const selectedComparisonItems = [];
                
                // Éléments du DOM pour la comparaison
                const comparisonSearch = document.getElementById('comparisonSearch');
                const comparisonResults = document.getElementById('comparisonResults');
                const comparisonResultsList = document.getElementById('comparisonResultsList');
                const selectedItems = document.getElementById('selectedItems');
                const noItemsSelected = document.getElementById('noItemsSelected');
                const comparisonChartContainer = document.getElementById('comparisonChartContainer');
                
                // Fonction de recherche d'éléments pour la comparaison
                if (comparisonSearch) {
                    comparisonSearch.addEventListener('input', function() {
                        const searchTerm = this.value.toLowerCase();
                        
                        if (searchTerm.length === 0) {
                            comparisonResults.classList.add('hidden');
                            return;
                        }
                        
                        comparisonResultsList.innerHTML = '';
                        const results = [];
                        
                        // Rechercher dans les UEs
                        Object.entries(bulletinData.ues).forEach(([ueId, ue]) => {
                            if (ueId.toLowerCase().includes(searchTerm) || ue.titre.toLowerCase().includes(searchTerm)) {
                                results.push({
                                    id: ueId,
                                    name: ueId,
                                    fullName: ue.titre,
                                    type: 'UE',
                                    grade: parseFloat(ue.moyenne.value),
                                    classAvg: parseFloat(ue.moyenne.moy)
                                });
                            }
                        });
                        
                        // Rechercher dans les ressources
                        Object.entries(bulletinData.ressources).forEach(([resourceId, resource]) => {
                            if (resourceId.toLowerCase().includes(searchTerm) || resource.titre.toLowerCase().includes(searchTerm)) {
                                // Calculer la moyenne des notes
                                const grades = resource.evaluations.map(e => parseFloat(e.note.value));
                                const avgGrade = grades.length > 0 ? grades.reduce((sum, grade) => sum + grade, 0) / grades.length : 0;
                                
                                results.push({
                                    id: resourceId,
                                    name: resourceId,
                                    fullName: resource.titre,
                                    type: 'resource',
                                    grade: avgGrade
                                });
                            }
                        });
                        
                        // Rechercher dans les SAEs
                        Object.entries(bulletinData.saes).forEach(([saeId, sae]) => {
                            if (saeId.toLowerCase().includes(searchTerm) || sae.titre.toLowerCase().includes(searchTerm)) {
                                // Calculer la moyenne des notes
                                const grades = sae.evaluations.map(e => parseFloat(e.note.value));
                                const avgGrade = grades.length > 0 ? grades.reduce((sum, grade) => sum + grade, 0) / grades.length : 0;
                                
                                results.push({
                                    id: saeId,
                                    name: saeId,
                                    fullName: sae.titre,
                                    type: 'sae',
                                    grade: avgGrade
                                });
                            }
                        });
                        
                        // Afficher les résultats
                        if (results.length > 0) {
                            results.forEach(item => {
                                const li = document.createElement('li');
                                li.className = 'px-4 py-3 hover:bg-gray-50';
                                li.innerHTML = `
                                    <div class="flex justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">${item.name} (${item.type})</p>
                                            <p class="text-sm text-gray-500">${item.fullName}</p>
                                        </div>
                                        <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none">
                                            Ajouter
                                        </button>
                                    </div>
                                `;
                                
                                li.querySelector('button').addEventListener('click', function() {
                                    addComparisonItem(item);
                                });
                                
                                comparisonResultsList.appendChild(li);
                            });
                            
                            comparisonResults.classList.remove('hidden');
                        } else {
                            const li = document.createElement('li');
                            li.className = 'px-4 py-3 text-sm text-gray-500';
                            li.textContent = 'Aucun résultat trouvé';
                            comparisonResultsList.appendChild(li);
                            
                            comparisonResults.classList.remove('hidden');
                        }
                    });
                }
                
                // Fonction pour ajouter un élément à la comparaison
                function addComparisonItem(item) {
                    // Vérifier si l'élément est déjà sélectionné
                    if (selectedComparisonItems.some(i => i.id === item.id && i.type === item.type)) {
                        return;
                    }
                    
                    selectedComparisonItems.push(item);
                    updateComparisonUI();
                }
                
                // Fonction pour supprimer un élément de la comparaison
                function removeComparisonItem(itemId, itemType) {
                    const index = selectedComparisonItems.findIndex(i => i.id === itemId && i.type === itemType);
                    if (index !== -1) {
                        selectedComparisonItems.splice(index, 1);
                        updateComparisonUI();
                    }
                }
                
                // Fonction pour mettre à jour l'interface de comparaison
                function updateComparisonUI() {
                    if (!selectedItems || !noItemsSelected || !comparisonChartContainer) {
                        return;
                    }
                    
                    // Masquer le message "aucun élément sélectionné" si nécessaire
                    if (selectedComparisonItems.length > 0) {
                        noItemsSelected.classList.add('hidden');
                    } else {
                        noItemsSelected.classList.remove('hidden');
                        comparisonChartContainer.classList.add('hidden');
                    }
                    
                    // Mettre à jour la liste des éléments sélectionnés
                    const itemsContainer = document.createElement('div');
                    itemsContainer.className = 'flex flex-wrap';
                    
                    selectedComparisonItems.forEach(item => {
                        const itemElement = document.createElement('div');
                        itemElement.className = 'flex items-center bg-gray-100 rounded-full py-1 px-3 mr-2 mb-2';
                        itemElement.innerHTML = `
                            <span class="text-sm font-medium text-gray-900 mr-1">${item.name}</span>
                            <button class="h-4 w-4 flex items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>
                        `;
                        
                        itemElement.querySelector('button').addEventListener('click', function() {
                            removeComparisonItem(item.id, item.type);
                        });
                        
                        itemsContainer.appendChild(itemElement);
                    });
                    
                    // Remplacer le contenu du conteneur
                    while (selectedItems.firstChild) {
                        if (selectedItems.firstChild === noItemsSelected) {
                            break;
                        }
                        selectedItems.removeChild(selectedItems.firstChild);
                    }
                    
                    if (selectedComparisonItems.length > 0) {
                        selectedItems.insertBefore(itemsContainer, noItemsSelected);
                    }
                    
                    // Mettre à jour le graphique de comparaison
                    if (selectedComparisonItems.length > 0) {
                        updateComparisonChart();
                        comparisonChartContainer.classList.remove('hidden');
                    }
                }
                
                // Fonction pour mettre à jour le graphique de comparaison
                function updateComparisonChart() {
                    const chartComparison = document.getElementById('chartComparison');
                    if (!chartComparison) {
                        return;
                    }
                    
                    const labels = selectedComparisonItems.map(item => item.name);
                    const values = selectedComparisonItems.map(item => item.grade);
                    const classAvgs = selectedComparisonItems.map(item => item.classAvg || null);
                    const colors = selectedComparisonItems.map((item, index) => 
                        item.type === 'UE' ? (ueColors[item.id] || getDefaultColor(index)) : getDefaultColor(index)
                    );
                    
                    // Détruire le graphique existant
                    if (comparisonChart) {
                        comparisonChart.destroy();
                    }
                    
                    // Créer le nouveau graphique
                    comparisonChart = new Chart(chartComparison, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: 'Note',
                                    data: values,
                                    backgroundColor: colors
                                },
                                {
                                    label: 'Moyenne promo',
                                    data: classAvgs,
                                    backgroundColor: '#82ca9d'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 20
                                }
                            }
                        }
                    });
                }
            });
        </script>
    <?php endif; ?>
</body>
</html>