{% extends 'core/dashboard-layout.html.twig' %}

{% block title %}Tableau de Bord Enseignant{% endblock %}

{# Configuration spécifique à l'enseignant #}
{% set header_icon = 'fa-chalkboard-teacher' %}
{% set header_title = 'Centre Informatique - Espace Enseignant' %}
{% set notification_count = '7' %}
{% set user_role = 'Enseignant' %}
{% set offcanvas_title = 'EnseignantPortal' %}
{% set notifications_url = path('app_teacher_notifications') %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/teacher-dashboard.css') }}">
{% endblock %}

{% block dashboard_content %}
    <!-- En-tête de bienvenue avec badge de rôle -->
    <div class="welcome-header animate-slide-in">
        <div class="welcome-content">
            <div class="welcome-main">
                <h1 class="welcome-title">
                    <i class="fas fa-chalkboard-teacher"></i>
                    Bienvenue, {{ app.user.firstName ?? 'Enseignant' }}
                </h1>
                <p class="welcome-subtitle">Tableau de bord - {{ "now"|date("d F Y") }}</p>
                
                <!-- Badge de privilèges -->
                {% if is_granted('ROLE_STUDY_DIRECTOR') %}
                    <div class="role-badge director">
                        <i class="fas fa-graduation-cap"></i>
                        <span>Directeur des Études</span>
                    </div>
                {% elseif is_granted('ROLE_DEPARTMENT_HEAD') %}
                    <div class="role-badge head">
                        <i class="fas fa-crown"></i>
                        <span>Chef de Département</span>
                    </div>
                {% else %}
                    <div class="role-badge teacher">
                        <i class="fas fa-user-tie"></i>
                        <span>Enseignant</span>
                    </div>
                {% endif %}
            </div>
            
            <!-- Actions rapides -->
            <div class="welcome-actions">
                <a href="{{ path('app_teacher_courses') }}" class="action-btn primary">
                    <i class="fas fa-book-open"></i>
                    <span>Mes Cours</span>
                </a>
                <a href="{{ path('app_teacher_grades') }}" class="action-btn secondary">
                    <i class="fas fa-chart-line"></i>
                    <span>Notes</span>
                </a>
                <a href="{{ path('app_teacher_schedule') }}" class="action-btn tertiary">
                    <i class="fas fa-calendar-alt"></i>
                    <span>Planning</span>
                </a>
                <a href="{{ path('app_teacher_students') }}" class="action-btn secondary">
                    <i class="fas fa-users"></i>
                    <span>Étudiants</span>
                </a>
                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('admin_student_import') }}" class="action-btn primary">
                    <i class="fas fa-file-upload"></i>
                    <span>Import Étudiants</span>
                </a>
                <a href="{{ path('app_admin_reporting') }}" class="action-btn secondary">
                    <i class="fas fa-chart-bar"></i>
                    <span>Reporting</span>
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Statistiques principales -->
    <div class="stats-section animate-fade-in">
        <div class="stats-grid">
            <div class="stat-card courses">
                <div class="stat-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">8</div>
                    <div class="stat-label">Cours Enseignés</div>
                    <div class="stat-details">
                        <!-- Résumé compact -->
                        <div class="detail-row">
                            <i class="fas fa-layer-group"></i>
                            <span class="detail-item">4 niveaux</span>
                        </div>
                        
                        <div class="detail-row">
                            <i class="fas fa-users"></i>
                            <span class="detail-item">245 étudiants inscrits</span>
                        </div>
                        
                        <!-- Bouton pour voir les détails -->
                        <div class="detail-row">
                            <button class="btn-detail" onclick="showCourseDetails()">
                                <i class="fas fa-chart-bar"></i>
                                Voir détails
                            </button>
                        </div>
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: 80%"></div>
                </div>
            </div>

            <div class="stat-card students">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ nb_student }}</div>
                    <div class="stat-label">Étudiants Total</div>
                    <div class="stat-details">
                        <!-- Résumé compact -->
                        <div class="detail-row">
                            <i class="fas fa-building"></i>
                            <span class="detail-item">{{ students_hierarchy|length }} départements</span>
                        </div>
                        
                        <!-- Répartition par sexe globale -->
                        <div class="detail-row">
                            <i class="fas fa-venus-mars"></i>
                            {% set total_girls = 0 %}
                            {% set total_boys = 0 %}
                            {% for dept_name, dept_data in students_hierarchy %}
                                {% for level_name, level_data in dept_data.levels %}
                                    {% set total_girls = total_girls + level_data.girls %}
                                    {% set total_boys = total_boys + level_data.boys %}
                                {% endfor %}
                            {% endfor %}
                            <span class="detail-item">{{ total_girls }} Filles</span>
                            <span class="detail-item">{{ total_boys }} Garçons</span>
                        </div>
                        
                        <!-- Bouton pour voir les détails -->
                        <div class="detail-row">
                            <button class="btn-detail" onclick="showStudentDetails()" id="detailsBtn">
                                <i class="fas fa-chart-bar"></i>
                                Voir détails
                            </button>
                        </div>
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: 92%"></div>
                </div>
            </div>

            <div class="stat-card evaluations">
                <div class="stat-icon">
                    <i class="fas fa-chalkboard-teacher"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">{{ nb_teacher }}</div>
                    <div class="stat-label">Enseignants</div>
                    <div class="stat-details">
                        <!-- Résumé compact -->
                        <div class="detail-row">
                            <i class="fas fa-user-check"></i>
                            <span class="detail-item">{{ nb_teacher_actifs }} Actifs</span>
                        </div>
                        
                        <div class="detail-row">
                            <i class="fas fa-building"></i>
                            <span class="detail-item">{{ students_hierarchy|length }} départements</span>
                        </div>
                        
                        <!-- Bouton pour voir les détails -->
                        <div class="detail-row">
                            <button class="btn-detail" onclick="showTeacherDetails()">
                                <i class="fas fa-chart-bar"></i>
                                Voir détails
                            </button>
                        </div>
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: 65%"></div>
                </div>
            </div>

            <div class="stat-card hours">
                <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">24h</div>
                    <div class="stat-label">Heures/Semaine</div>
                    <div class="stat-trend neutral">
                        <i class="fas fa-equals"></i>
                        Charge normale
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: 75%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal en grille -->
    <div class="main-grid animate-fade-in">
        
        <!-- Cours récents -->
        <div class="dashboard-card recent-courses">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-clock"></i>
                    Cours Récents
                </h3>
                <a href="{{ path('app_teacher_courses') }}" class="card-action">
                    Voir tout
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            <div class="card-content">
                <div class="course-list">
                    <div class="course-item">
                        <div class="course-info">
                            <div class="course-name">Programmation Web</div>
                            <div class="course-meta">L2 Informatique • 45 étudiants</div>
                        </div>
                        <div class="course-status active">
                            <span class="status-dot"></span>
                            En cours
                        </div>
                    </div>
                    
                    <div class="course-item">
                        <div class="course-info">
                            <div class="course-name">Base de Données</div>
                            <div class="course-meta">L2 Informatique • 38 étudiants</div>
                        </div>
                        <div class="course-status active">
                            <span class="status-dot"></span>
                            En cours
                        </div>
                    </div>
                    
                    <div class="course-item">
                        <div class="course-info">
                            <div class="course-name">Algorithmique</div>
                            <div class="course-meta">L1 Informatique • 52 étudiants</div>
                        </div>
                        <div class="course-status active">
                            <span class="status-dot"></span>
                            En cours
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Planning du jour -->
        <div class="dashboard-card today-schedule">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-calendar-day"></i>
                    Aujourd'hui
                </h3>
                <div class="date-badge">{{ "now"|date("d/m") }}</div>
            </div>
            <div class="card-content">
                <div class="schedule-list">
                    <div class="schedule-item">
                        <div class="schedule-time">08:00</div>
                        <div class="schedule-content">
                            <div class="schedule-course">Programmation Web</div>
                            <div class="schedule-room">Salle A203 • L2 Info</div>
                        </div>
                        <div class="schedule-status current">
                            <span class="status-indicator"></span>
                        </div>
                    </div>
                    
                    <div class="schedule-item">
                        <div class="schedule-time">10:00</div>
                        <div class="schedule-content">
                            <div class="schedule-course">Base de Données</div>
                            <div class="schedule-room">Salle B104 • L2 Info</div>
                        </div>
                        <div class="schedule-status upcoming">
                            <span class="status-indicator"></span>
                        </div>
                    </div>
                    
                    <div class="schedule-item">
                        <div class="schedule-time">14:00</div>
                        <div class="schedule-content">
                            <div class="schedule-course">Réunion Département</div>
                            <div class="schedule-room">Salle de Conférence</div>
                        </div>
                        <div class="schedule-status upcoming">
                            <span class="status-indicator"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions rapides -->
        <div class="dashboard-card quick-actions">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-bolt"></i>
                    Actions Rapides
                </h3>
            </div>
            <div class="card-content">
                <div class="actions-grid">
                    <button class="quick-action-btn" onclick="window.location.href='{{ path('app_teacher_grades') }}'">
                        <i class="fas fa-plus"></i>
                        <span>Saisir Notes</span>
                    </button>
                    
                    <button class="quick-action-btn" onclick="window.location.href='{{ path('app_teacher_students') }}'">
                        <i class="fas fa-user-check"></i>
                        <span>Présences</span>
                    </button>
                    
                    <button class="quick-action-btn" onclick="window.location.href='{{ path('app_teacher_messages') }}'">
                        <i class="fas fa-paper-plane"></i>
                        <span>Message</span>
                    </button>
                    
                    <button class="quick-action-btn" onclick="window.location.href='{{ path('app_teacher_profile') }}'">
                        <i class="fas fa-upload"></i>
                        <span>Upload Doc</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Notifications et tâches -->
        <div class="dashboard-card notifications">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-bell"></i>
                    Notifications
                </h3>
                <span class="notification-count">3</span>
            </div>
            <div class="card-content">
                <div class="notification-list">
                    <div class="notification-item unread">
                        <div class="notification-icon">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="notification-content">
                            <div class="notification-text">Nouvelle demande d'inscription</div>
                            <div class="notification-time">Il y a 2h</div>
                        </div>
                    </div>
                    
                    <div class="notification-item unread">
                        <div class="notification-icon">
                            <i class="fas fa-calendar"></i>
                        </div>
                        <div class="notification-content">
                            <div class="notification-text">Réunion département demain</div>
                            <div class="notification-time">Il y a 1 jour</div>
                        </div>
                    </div>
                    
                    <div class="notification-item">
                        <div class="notification-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="notification-content">
                            <div class="notification-text">Notes semestre à finaliser</div>
                            <div class="notification-time">Il y a 2 jours</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activités récentes -->
        <div class="dashboard-card activities">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-history"></i>
                    Activités Récentes
                </h3>
            </div>
            <div class="card-content">
                <div class="activity-timeline">
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-file-upload"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Devoir ajouté</div>
                            <div class="timeline-desc">Programmation Web - TP3</div>
                            <div class="timeline-time">Il y a 2h</div>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Notes saisies</div>
                            <div class="timeline-desc">Base de Données - 28 étudiants</div>
                            <div class="timeline-time">Hier</div>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Nouvelle inscription</div>
                            <div class="timeline-desc">Martin Sophie - L2 Info</div>
                            <div class="timeline-time">Il y a 2 jours</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistiques détaillées -->
        <div class="dashboard-card detailed-stats">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie"></i>
                    Vue d'ensemble
                </h3>
            </div>
            <div class="card-content">
                <div class="stats-overview">
                    <div class="overview-item">
                        <div class="overview-label">Moyenne générale</div>
                        <div class="overview-value">14.2<span>/20</span></div>
                        <div class="overview-bar">
                            <div class="bar-fill" style="width: 71%"></div>
                        </div>
                    </div>
                    
                    <div class="overview-item">
                        <div class="overview-label">Taux de réussite</div>
                        <div class="overview-value">87<span>%</span></div>
                        <div class="overview-bar">
                            <div class="bar-fill success" style="width: 87%"></div>
                        </div>
                    </div>
                    
                    <div class="overview-item">
                        <div class="overview-label">Présence moyenne</div>
                        <div class="overview-value">92<span>%</span></div>
                        <div class="overview-bar">
                            <div class="bar-fill info" style="width: 92%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour les détails des étudiants -->
    <div id="studentDetailsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-users"></i> Tableau de Bord Détaillé des Étudiants</h3>
                <span class="close" onclick="closeStudentDetails()">&times;</span>
            </div>
            <div class="modal-body">
                <!-- Statistiques globales en haut -->
                <div class="global-stats">
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-users"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ nb_student }}</div>
                            <div class="stat-label-mini">Total Étudiants</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-building"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ students_hierarchy|length }}</div>
                            <div class="stat-label-mini">Départements</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-venus-mars"></i></div>
                        <div class="stat-content-mini">
                            {% set total_girls = 0 %}
                            {% for dept_name, dept_data in students_hierarchy %}
                                {% for level_name, level_data in dept_data.levels %}
                                    {% set total_girls = total_girls + level_data.girls %}
                                {% endfor %}
                            {% endfor %}
                            <div class="stat-number">{{ ((total_girls / nb_student) * 100)|round }}%</div>
                            <div class="stat-label-mini">Filles</div>
                        </div>
                    </div>
                                    <div class="global-stat-card">
                    <div class="stat-icon-mini"><i class="fas fa-graduation-cap"></i></div>
                    <div class="stat-content-mini">
                        <div class="stat-number">{{ students_hierarchy|length * 3 + random(5) }}</div>
                        <div class="stat-label-mini">Cours Actifs</div>
                    </div>
                </div>
                </div>

                <!-- Onglets pour organiser l'information -->
                <div class="modal-tabs">
                    <button class="tab-btn active" onclick="showTab('overview')">
                        <i class="fas fa-chart-pie"></i> Vue d'ensemble
                    </button>
                    <button class="tab-btn" onclick="showTab('departments')">
                        <i class="fas fa-building"></i> Par Département
                    </button>
                    <button class="tab-btn" onclick="showTab('analytics')">
                        <i class="fas fa-analytics"></i> Analyses
                    </button>
                </div>

                <!-- Onglet Vue d'ensemble -->
                <div id="overview-tab" class="tab-content active">
                    <div class="overview-grid">
                        <div class="chart-container">
                            <h4><i class="fas fa-chart-bar"></i> Répartition par Département</h4>
                            <div class="department-chart">
                                {% for dept_name, dept_data in students_hierarchy %}
                                <div class="chart-bar">
                                    <div class="bar-label">{{ dept_name }}</div>
                                    <div class="bar-container">
                                        <div class="bar-fill-modal" style="width: {{ (dept_data.total / nb_student * 100) }}%">
                                            <span class="bar-value">{{ dept_data.total }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ ((dept_data.total / nb_student) * 100)|round(1) }}%</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        
                        <div class="gender-distribution">
                            <h4><i class="fas fa-venus-mars"></i> Répartition par Genre</h4>
                            <div class="gender-chart">
                                {% set total_girls = 0 %}
                                {% set total_boys = 0 %}
                                {% for dept_name, dept_data in students_hierarchy %}
                                    {% for level_name, level_data in dept_data.levels %}
                                        {% set total_girls = total_girls + level_data.girls %}
                                        {% set total_boys = total_boys + level_data.boys %}
                                    {% endfor %}
                                {% endfor %}
                                <div class="gender-item">
                                    <div class="gender-icon female"><i class="fas fa-female"></i></div>
                                    <div class="gender-info">
                                        <div class="gender-count">{{ total_girls }}</div>
                                        <div class="gender-label">Filles</div>
                                        <div class="gender-percent">{{ ((total_girls / nb_student) * 100)|round(1) }}%</div>
                                    </div>
                                </div>
                                <div class="gender-item">
                                    <div class="gender-icon male"><i class="fas fa-male"></i></div>
                                    <div class="gender-info">
                                        <div class="gender-count">{{ total_boys }}</div>
                                        <div class="gender-label">Garçons</div>
                                        <div class="gender-percent">{{ ((total_boys / nb_student) * 100)|round(1) }}%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Onglet Départements -->
                <div id="departments-tab" class="tab-content">
                    <div class="students-hierarchy">
                        {% for dept_name, dept_data in students_hierarchy %}
                        <div class="dept-section-modal">
                            <div class="dept-header-modal">
                                <div class="dept-title">
                                    <i class="fas fa-building"></i>
                                    <strong>{{ dept_name }}</strong>
                                    <span class="dept-badge">{{ dept_data.total }} étudiants</span>
                                </div>
                                <div class="dept-stats">
                                    {% set dept_girls = 0 %}
                                    {% set dept_boys = 0 %}
                                    {% for level_name, level_data in dept_data.levels %}
                                        {% set dept_girls = dept_girls + level_data.girls %}
                                        {% set dept_boys = dept_boys + level_data.boys %}
                                    {% endfor %}
                                    <span class="mini-stat">
                                        <i class="fas fa-female"></i> {{ dept_girls }}
                                    </span>
                                    <span class="mini-stat">
                                        <i class="fas fa-male"></i> {{ dept_boys }}
                                    </span>
                                    <span class="mini-stat">
                                        <i class="fas fa-layer-group"></i> {{ dept_data.levels|length }} niveaux
                                    </span>
                                </div>
                            </div>
                            <div class="levels-grid">
                                {% for level_name, level_data in dept_data.levels %}
                                <div class="level-card enhanced">
                                    <div class="level-header">
                                        <div class="level-name">{{ level_name }}</div>
                                        <div class="level-capacity">
                                            <i class="fas fa-users"></i> {{ level_data.total }}/{{ (level_data.total * 1.2)|round }}
                                        </div>
                                    </div>
                                    <div class="level-progress-bar">
                                        <div class="progress-fill" style="width: {{ (level_data.total / (level_data.total * 1.2) * 100) }}%"></div>
                                    </div>
                                    <div class="level-stats">
                                        <span class="total-badge">{{ level_data.total }}</span>
                                        {% if level_data.girls > 0 %}
                                        <span class="gender-info female">{{ level_data.girls }} Filles</span>
                                        {% endif %}
                                        {% if level_data.boys > 0 %}
                                        <span class="gender-info male">{{ level_data.boys }} Garçons</span>
                                        {% endif %}
                                    </div>
                                    <div class="level-metrics">
                                        <div class="metric">
                                            <i class="fas fa-book"></i>
                                            <span>{{ random(3) + 4 }} Cours</span>
                                        </div>
                                        <div class="metric">
                                            <i class="fas fa-user-check"></i>
                                            <span>{{ random(15) + 80 }}% Présents</span>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Onglet Analyses -->
                <div id="analytics-tab" class="tab-content">
                    <div class="analytics-grid">
                        <div class="analytics-section">
                            <h4><i class="fas fa-trending-up"></i> Tendances</h4>
                            <div class="trend-item">
                                <div class="trend-label">Nouvelles inscriptions (ce mois)</div>
                                <div class="trend-value positive">+{{ random(20) + 15 }}</div>
                            </div>
                            <div class="trend-item">
                                <div class="trend-label">Évolution vs année dernière</div>
                                <div class="trend-value positive">+{{ random(10) + 5 }}%</div>
                            </div>
                            <div class="trend-item">
                                <div class="trend-label">Taux d'abandon</div>
                                <div class="trend-value negative">{{ random(5) + 2 }}%</div>
                            </div>
                        </div>
                        
                        <div class="analytics-section">
                            <h4><i class="fas fa-award"></i> Performance Académique</h4>
                            <div class="performance-grid">
                                <div class="perf-item excellent">
                                    <div class="perf-label">Excellent (16-20)</div>
                                    <div class="perf-value">{{ random(15) + 10 }}%</div>
                                </div>
                                <div class="perf-item good">
                                    <div class="perf-label">Bien (14-16)</div>
                                    <div class="perf-value">{{ random(20) + 25 }}%</div>
                                </div>
                                <div class="perf-item average">
                                    <div class="perf-label">Assez Bien (12-14)</div>
                                    <div class="perf-value">{{ random(15) + 30 }}%</div>
                                </div>
                                <div class="perf-item passing">
                                    <div class="perf-label">Passable (10-12)</div>
                                    <div class="perf-value">{{ random(15) + 20 }}%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="analytics-section">
                            <h4><i class="fas fa-clock"></i> Activité Récente</h4>
                            <div class="activity-timeline">
                                <div class="activity-item">
                                    <div class="activity-time">Il y a 2h</div>
                                    <div class="activity-desc">{{ random(5) + 3 }} nouvelles inscriptions en NTIC</div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-time">Hier</div>
                                    <div class="activity-desc">Mise à jour des notes L2 Informatique</div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-time">Cette semaine</div>
                                    <div class="activity-desc">{{ random(10) + 15 }} étudiants ont validé leur semestre</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actions en bas du modal -->
                <div class="modal-actions">
                    <button class="action-btn export-btn" onclick="exportStudentData()">
                        <i class="fas fa-download"></i> Exporter PDF
                    </button>
                    <button class="action-btn print-btn" onclick="printModal()">
                        <i class="fas fa-print"></i> Imprimer
                    </button>
                    <button class="action-btn refresh-btn" onclick="refreshData()">
                        <i class="fas fa-sync"></i> Actualiser
                    </button>
                </div>
            </div>
              </div>
  </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        console.log('Loading modal functions...');
        
        // Fonctions pour le modal des étudiants
        window.showStudentDetails = function() {
            console.log('Showing student details modal');
            const modal = document.getElementById('studentDetailsModal');
            if (modal) {
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden';
                showTab('overview');
            }
            return false;
        };

        window.closeStudentDetails = function() {
            console.log('Closing student details modal');
            const modal = document.getElementById('studentDetailsModal');
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        };

        // Fonctions pour le modal des cours
        window.showCourseDetails = function() {
            console.log('Showing course details modal');
            const modal = document.getElementById('courseDetailsModal');
            if (modal) {
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden';
                showCourseTab('overview');
            } else {
                console.error('Modal courseDetailsModal not found!');
            }
            return false;
        };
        
        console.log('showCourseDetails function defined:', typeof window.showCourseDetails);

        window.closeCourseDetails = function() {
            console.log('Closing course details modal');
            const modal = document.getElementById('courseDetailsModal');
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        };

        // Fonctions pour le modal des enseignants
        window.showTeacherDetails = function() {
            console.log('Showing teacher details modal');
            const modal = document.getElementById('teacherDetailsModal');
            if (modal) {
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden';
                showTeacherTab('overview');
            }
            return false;
        };

        window.closeTeacherDetails = function() {
            console.log('Closing teacher details modal');
            const modal = document.getElementById('teacherDetailsModal');
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        };

        // Fonction pour gérer les onglets étudiants
        window.showTab = function(tabName) {
            console.log('Switching to tab:', tabName);
            
            const tabContents = document.querySelectorAll('#studentDetailsModal .tab-content');
            tabContents.forEach(tab => {
                tab.classList.remove('active');
            });
            
            const tabButtons = document.querySelectorAll('#studentDetailsModal .tab-btn');
            tabButtons.forEach(btn => {
                btn.classList.remove('active');
            });
            
            const selectedTab = document.getElementById(tabName + '-tab');
            if (selectedTab) {
                selectedTab.classList.add('active');
            }
            
            const selectedBtn = event ? event.target : document.querySelector('#studentDetailsModal .tab-btn[onclick*="' + tabName + '"]');
            if (selectedBtn) {
                selectedBtn.classList.add('active');
            }
        };

        // Fonction pour gérer les onglets des cours
        window.showCourseTab = function(tabName) {
            console.log('Switching to course tab:', tabName);
            
            const tabContents = document.querySelectorAll('#courseDetailsModal .tab-content');
            tabContents.forEach(tab => {
                tab.classList.remove('active');
            });
            
            const tabButtons = document.querySelectorAll('#courseDetailsModal .tab-btn');
            tabButtons.forEach(btn => {
                btn.classList.remove('active');
            });
            
            const selectedTab = document.getElementById('course-' + tabName + '-tab');
            if (selectedTab) {
                selectedTab.classList.add('active');
            }
            
            const selectedBtn = event ? event.target : document.querySelector('#courseDetailsModal .tab-btn[onclick*="' + tabName + '"]');
            if (selectedBtn) {
                selectedBtn.classList.add('active');
            }
        };

        // Fonction pour gérer les onglets des enseignants
        window.showTeacherTab = function(tabName) {
            console.log('Switching to teacher tab:', tabName);
            
            const tabContents = document.querySelectorAll('#teacherDetailsModal .tab-content');
            tabContents.forEach(tab => {
                tab.classList.remove('active');
            });
            
            const tabButtons = document.querySelectorAll('#teacherDetailsModal .tab-btn');
            tabButtons.forEach(btn => {
                btn.classList.remove('active');
            });
            
            const selectedTab = document.getElementById('teacher-' + tabName + '-tab');
            if (selectedTab) {
                selectedTab.classList.add('active');
            }
            
            const selectedBtn = event ? event.target : document.querySelector('#teacherDetailsModal .tab-btn[onclick*="' + tabName + '"]');
            if (selectedBtn) {
                selectedBtn.classList.add('active');
            }
        };

        // Actions pour les modals
        window.exportStudentData = function() {
            console.log('Exporting student data');
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Export...';
            btn.disabled = true;
            setTimeout(() => {
                btn.innerHTML = '<i class="fas fa-check"></i> Exporté !';
                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }, 2000);
            }, 2000);
        };

        window.exportCourseData = function() {
            console.log('Exporting course data');
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Export...';
            btn.disabled = true;
                        setTimeout(() => {
                btn.innerHTML = '<i class="fas fa-check"></i> Exporté !';
                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }, 2000);
            }, 2000);
        };

        window.exportTeacherData = function() {
            console.log('Exporting teacher data');
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Export...';
            btn.disabled = true;
                            setTimeout(() => {
                btn.innerHTML = '<i class="fas fa-check"></i> Exporté !';
                                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }, 2000);
            }, 2000);
        };

        window.printModal = function() { console.log('Print modal'); };
        window.printCourseModal = function() { console.log('Print course modal'); };
        window.printTeacherModal = function() { console.log('Print teacher modal'); };
        window.refreshData = function() { console.log('Refresh data'); };
        window.refreshCourseData = function() { console.log('Refresh course data'); };
        window.refreshTeacherData = function() { console.log('Refresh teacher data'); };

        // Fermer les modals en cliquant à l'extérieur
        window.onclick = function(event) {
            const studentModal = document.getElementById('studentDetailsModal');
            const courseModal = document.getElementById('courseDetailsModal');
            const teacherModal = document.getElementById('teacherDetailsModal');
            
            if (event.target === studentModal) {
                closeStudentDetails();
            } else if (event.target === courseModal) {
                closeCourseDetails();
            } else if (event.target === teacherModal) {
                closeTeacherDetails();
            }
        };

        // Gestion des raccourcis clavier
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const studentModal = document.getElementById('studentDetailsModal');
                const courseModal = document.getElementById('courseDetailsModal');
                const teacherModal = document.getElementById('teacherDetailsModal');
                
                if (studentModal && studentModal.style.display === 'block') {
                    closeStudentDetails();
                } else if (courseModal && courseModal.style.display === 'block') {
                    closeCourseDetails();
                } else if (teacherModal && teacherModal.style.display === 'block') {
                    closeTeacherDetails();
                }
            }
        });
    </script>

     <!-- Modal pour les détails des cours -->
    <div id="courseDetailsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-book-open"></i> Tableau de Bord Détaillé des Cours</h3>
                <span class="close" onclick="closeCourseDetails()">&times;</span>
            </div>
            <div class="modal-body">
                <!-- Statistiques globales des cours -->
                <div class="global-stats">
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-book-open"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">8</div>
                            <div class="stat-label-mini">Total Cours</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-users"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">245</div>
                            <div class="stat-label-mini">Étudiants Inscrits</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-clock"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">24h</div>
                            <div class="stat-label-mini">Heures/Semaine</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-calendar-check"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ random(10) + 85 }}%</div>
                            <div class="stat-label-mini">Taux Présence</div>
                        </div>
                    </div>
                </div>

                <!-- Onglets pour les cours -->
                <div class="modal-tabs">
                    <button class="tab-btn active" onclick="showCourseTab('overview')">
                        <i class="fas fa-chart-pie"></i> Vue d'ensemble
                    </button>
                    <button class="tab-btn" onclick="showCourseTab('courses')">
                        <i class="fas fa-book"></i> Mes Cours
                    </button>
                    <button class="tab-btn" onclick="showCourseTab('performance')">
                        <i class="fas fa-chart-line"></i> Performance
                    </button>
                </div>

                <!-- Onglet Vue d'ensemble des cours -->
                <div id="course-overview-tab" class="tab-content active">
                    <div class="overview-grid">
                        <div class="chart-container">
                            <h4><i class="fas fa-chart-bar"></i> Répartition par Niveau</h4>
                            <div class="department-chart">
                                <div class="chart-bar">
                                    <div class="bar-label">L1</div>
                                    <div class="bar-container">
                                        <div class="bar-fill-modal" style="width: 50%">
                                            <span class="bar-value">2</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">25%</div>
                                </div>
                                <div class="chart-bar">
                                    <div class="bar-label">L2</div>
                                    <div class="bar-container">
                                        <div class="bar-fill-modal" style="width: 75%">
                                            <span class="bar-value">3</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">37.5%</div>
                                </div>
                                <div class="chart-bar">
                                    <div class="bar-label">L3</div>
                                    <div class="bar-container">
                                        <div class="bar-fill-modal" style="width: 62.5%">
                                            <span class="bar-value">2</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">25%</div>
                                </div>
                                <div class="chart-bar">
                                    <div class="bar-label">Master</div>
                                    <div class="bar-container">
                                        <div class="bar-fill-modal" style="width: 25%">
                                            <span class="bar-value">1</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">12.5%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-workload">
                            <h4><i class="fas fa-clock"></i> Charge de Travail</h4>
                            <div class="workload-stats">
                                <div class="workload-item">
                                    <div class="workload-label">Cours magistraux</div>
                                    <div class="workload-value">12h/sem</div>
                                    <div class="workload-bar">
                                        <div class="workload-fill" style="width: 60%"></div>
                                    </div>
                                </div>
                                <div class="workload-item">
                                    <div class="workload-label">Travaux dirigés</div>
                                    <div class="workload-value">8h/sem</div>
                                    <div class="workload-bar">
                                        <div class="workload-fill" style="width: 40%"></div>
                                    </div>
                                </div>
                                <div class="workload-item">
                                    <div class="workload-label">Travaux pratiques</div>
                                    <div class="workload-value">4h/sem</div>
                                    <div class="workload-bar">
                                        <div class="workload-fill" style="width: 20%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Onglet Mes Cours -->
                <div id="course-courses-tab" class="tab-content">
                    <div class="courses-grid">
                        <div class="course-card-detailed">
                            <div class="course-header">
                                <div class="course-title">
                                    <i class="fas fa-code"></i>
                                    <h5>Programmation Web</h5>
                                    <span class="course-level">L2 Informatique</span>
                                </div>
                                <div class="course-status-badge active">Actif</div>
                            </div>
                            <div class="course-stats">
                                <div class="course-stat">
                                    <i class="fas fa-users"></i>
                                    <span>45 étudiants</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>6h/semaine</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-calendar"></i>
                                    <span>Lun-Mer-Ven</span>
                                </div>
                            </div>
                            <div class="course-progress">
                                <div class="progress-label">Progression du semestre</div>
                                <div class="progress-bar-course">
                                    <div class="progress-fill-course" style="width: 65%"></div>
                                </div>
                                <div class="progress-text">65%</div>
                            </div>
                        </div>

                        <div class="course-card-detailed">
                            <div class="course-header">
                                <div class="course-title">
                                    <i class="fas fa-database"></i>
                                    <h5>Base de Données</h5>
                                    <span class="course-level">L2 Informatique</span>
                                </div>
                                <div class="course-status-badge active">Actif</div>
                            </div>
                            <div class="course-stats">
                                <div class="course-stat">
                                    <i class="fas fa-users"></i>
                                    <span>38 étudiants</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>4h/semaine</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-calendar"></i>
                                    <span>Mar-Jeu</span>
                                </div>
                            </div>
                            <div class="course-progress">
                                <div class="progress-label">Progression du semestre</div>
                                <div class="progress-bar-course">
                                    <div class="progress-fill-course" style="width: 70%"></div>
                                </div>
                                <div class="progress-text">70%</div>
                            </div>
                        </div>

                        <div class="course-card-detailed">
                            <div class="course-header">
                                <div class="course-title">
                                    <i class="fas fa-project-diagram"></i>
                                    <h5>Algorithmique</h5>
                                    <span class="course-level">L1 Informatique</span>
                                </div>
                                <div class="course-status-badge active">Actif</div>
                            </div>
                            <div class="course-stats">
                                <div class="course-stat">
                                    <i class="fas fa-users"></i>
                                    <span>52 étudiants</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>8h/semaine</span>
                                </div>
                                <div class="course-stat">
                                    <i class="fas fa-calendar"></i>
                                    <span>Lun-Mar-Mer-Jeu</span>
                                </div>
                            </div>
                            <div class="course-progress">
                                <div class="progress-label">Progression du semestre</div>
                                <div class="progress-bar-course">
                                    <div class="progress-fill-course" style="width: 58%"></div>
                                </div>
                                <div class="progress-text">58%</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Onglet Performance -->
                <div id="course-performance-tab" class="tab-content">
                    <div class="analytics-grid">
                        <div class="analytics-section">
                            <h4><i class="fas fa-chart-line"></i> Taux de Présence</h4>
                            <div class="performance-grid">
                                <div class="perf-item excellent">
                                    <div class="perf-label">Excellent (>90%)</div>
                                    <div class="perf-value">{{ random(10) + 15 }}%</div>
                                </div>
                                <div class="perf-item good">
                                    <div class="perf-label">Bon (80-90%)</div>
                                    <div class="perf-value">{{ random(15) + 35 }}%</div>
                                </div>
                                <div class="perf-item average">
                                    <div class="perf-label">Moyen (70-80%)</div>
                                    <div class="perf-value">{{ random(10) + 25 }}%</div>
                                </div>
                                <div class="perf-item passing">
                                    <div class="perf-label">Faible (<70%)</div>
                                    <div class="perf-value">{{ random(10) + 5 }}%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="analytics-section">
                            <h4><i class="fas fa-tasks"></i> Évaluations</h4>
                            <div class="evaluation-stats">
                                <div class="eval-item">
                                    <div class="eval-label">Devoirs rendus</div>
                                    <div class="eval-value">{{ random(20) + 75 }}%</div>
                                    <div class="eval-bar">
                                        <div class="eval-fill" style="width: {{ random(20) + 75 }}%"></div>
                                    </div>
                                </div>
                                <div class="eval-item">
                                    <div class="eval-label">Projets terminés</div>
                                    <div class="eval-value">{{ random(15) + 80 }}%</div>
                                    <div class="eval-bar">
                                        <div class="eval-fill" style="width: {{ random(15) + 80 }}%"></div>
                                    </div>
                                </div>
                                <div class="eval-item">
                                    <div class="eval-label">Examens réussis</div>
                                    <div class="eval-value">{{ random(10) + 85 }}%</div>
                                    <div class="eval-bar">
                                        <div class="eval-fill" style="width: {{ random(10) + 85 }}%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actions du modal cours -->
                <div class="modal-actions">
                    <button class="action-btn export-btn" onclick="exportCourseData()">
                        <i class="fas fa-download"></i> Exporter PDF
                    </button>
                    <button class="action-btn print-btn" onclick="printCourseModal()">
                        <i class="fas fa-print"></i> Imprimer
                    </button>
                    <button class="action-btn refresh-btn" onclick="refreshCourseData()">
                        <i class="fas fa-sync"></i> Actualiser
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour les détails des enseignants -->
    <div id="teacherDetailsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-chalkboard-teacher"></i> Tableau de Bord Détaillé des Enseignants</h3>
                <span class="close" onclick="closeTeacherDetails()">&times;</span>
            </div>
            <div class="modal-body">
                <!-- Statistiques globales des enseignants -->
                <div class="global-stats">
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-chalkboard-teacher"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ nb_teacher }}</div>
                            <div class="stat-label-mini">Total Enseignants</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-user-check"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ nb_teacher_actifs }}</div>
                            <div class="stat-label-mini">Actifs</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-building"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ students_hierarchy|length }}</div>
                            <div class="stat-label-mini">Départements</div>
                        </div>
                    </div>
                    <div class="global-stat-card">
                        <div class="stat-icon-mini"><i class="fas fa-clock"></i></div>
                        <div class="stat-content-mini">
                            <div class="stat-number">{{ random(5) + 18 }}h</div>
                            <div class="stat-label-mini">Moy. Heures/Sem</div>
                        </div>
                    </div>
                </div>

                <!-- Onglets pour les enseignants -->
                <div class="modal-tabs">
                    <button class="tab-btn active" onclick="showTeacherTab('overview')">
                        <i class="fas fa-chart-pie"></i> Vue d'ensemble
                    </button>
                    <button class="tab-btn" onclick="showTeacherTab('departments')">
                        <i class="fas fa-building"></i> Par Département
                    </button>
                    <button class="tab-btn" onclick="showTeacherTab('workload')">
                        <i class="fas fa-tasks"></i> Charge de Travail
                    </button>
                </div>

                <!-- Onglet Vue d'ensemble des enseignants -->
                <div id="teacher-overview-tab" class="tab-content active">
                    <div class="overview-grid">
                        <div class="chart-container">
                            <h4><i class="fas fa-chart-bar"></i> Répartition par Statut</h4>
                            <div class="department-chart">
                                {% set total_teachers = teachers_by_status.permanent + teachers_by_status.contract + teachers_by_status.temporary + teachers_by_status.guest + teachers_by_status.undefined %}
                                
                                <div class="chart-bar">
                                    <div class="bar-label">Titulaires</div>
                                    <div class="bar-container">
                                        {% set permanent_percent = total_teachers > 0 ? (teachers_by_status.permanent / total_teachers * 100)|round : 0 %}
                                        <div class="bar-fill-modal" style="width: {{ permanent_percent }}%">
                                            <span class="bar-value">{{ teachers_by_status.permanent }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ permanent_percent }}%</div>
                                </div>
                                
                                <div class="chart-bar">
                                    <div class="bar-label">Contractuels</div>
                                    <div class="bar-container">
                                        {% set contract_percent = total_teachers > 0 ? (teachers_by_status.contract / total_teachers * 100)|round : 0 %}
                                        <div class="bar-fill-modal" style="width: {{ contract_percent }}%">
                                            <span class="bar-value">{{ teachers_by_status.contract }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ contract_percent }}%</div>
                                </div>
                                
                                <div class="chart-bar">
                                    <div class="bar-label">Vacataires</div>
                                    <div class="bar-container">
                                        {% set temporary_percent = total_teachers > 0 ? (teachers_by_status.temporary / total_teachers * 100)|round : 0 %}
                                        <div class="bar-fill-modal" style="width: {{ temporary_percent }}%">
                                            <span class="bar-value">{{ teachers_by_status.temporary }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ temporary_percent }}%</div>
                                </div>
                                
                                {% if teachers_by_status.guest > 0 %}
                                <div class="chart-bar">
                                    <div class="bar-label">Invités</div>
                                    <div class="bar-container">
                                        {% set guest_percent = total_teachers > 0 ? (teachers_by_status.guest / total_teachers * 100)|round : 0 %}
                                        <div class="bar-fill-modal" style="width: {{ guest_percent }}%">
                                            <span class="bar-value">{{ teachers_by_status.guest }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ guest_percent }}%</div>
                                </div>
                                {% endif %}
                                
                                {% if teachers_by_status.undefined > 0 %}
                                <div class="chart-bar">
                                    <div class="bar-label">Non défini</div>
                                    <div class="bar-container">
                                        {% set undefined_percent = total_teachers > 0 ? (teachers_by_status.undefined / total_teachers * 100)|round : 0 %}
                                        <div class="bar-fill-modal" style="width: {{ undefined_percent }}%">
                                            <span class="bar-value">{{ teachers_by_status.undefined }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ undefined_percent }}%</div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="teacher-experience">
                            <h4><i class="fas fa-award"></i> Expérience & Grades</h4>
                            <div class="experience-stats">
                                <div class="exp-item average">
                                    <div class="exp-icon"><i class="fas fa-chart-line"></i></div>
                                    <div class="exp-info">
                                        <div class="exp-label">Expérience Moyenne</div>
                                        <div class="exp-count">{{ average_experience }} ans</div>
                                    </div>
                                </div>
                                
                                {% for grade_name, count in teachers_by_grade %}
                                    {% if count > 0 %}
                                    <div class="exp-item grade">
                                        <div class="exp-icon">
                                            {% if 'Professeur' in grade_name %}
                                                <i class="fas fa-graduation-cap"></i>
                                            {% elseif 'Maître' in grade_name %}
                                                <i class="fas fa-user-graduate"></i>
                                            {% elseif 'Chargé' in grade_name %}
                                                <i class="fas fa-chalkboard-teacher"></i>
                                            {% else %}
                                                <i class="fas fa-user"></i>
                                            {% endif %}
                                        </div>
                                        <div class="exp-info">
                                            <div class="exp-label">{{ grade_name }}</div>
                                            <div class="exp-count">{{ count }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if teachers_by_grade is empty %}
                                <div class="exp-item undefined">
                                    <div class="exp-icon"><i class="fas fa-question"></i></div>
                                    <div class="exp-info">
                                        <div class="exp-label">Aucun grade défini</div>
                                        <div class="exp-count">{{ nb_teacher }}</div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Onglet Départements -->
                <div id="teacher-departments-tab" class="tab-content">
                    <div class="departments-teacher-grid">
                        {% for dept_name, dept_data in students_hierarchy %}
                        <div class="dept-teacher-card">
                            <div class="dept-teacher-header">
                                <div class="dept-teacher-title">
                                    <i class="fas fa-building"></i>
                                    <h5>{{ dept_name }}</h5>
                                </div>
                                <div class="dept-teacher-count">{{ random(3) + 2 }} enseignants</div>
                            </div>
                            <div class="dept-teacher-stats">
                                <div class="teacher-stat">
                                    <i class="fas fa-user-tie"></i>
                                    <span>{{ random(2) + 1 }} Titulaires</span>
                                </div>
                                <div class="teacher-stat">
                                    <i class="fas fa-user-clock"></i>
                                    <span>{{ random(2) }} Contractuels</span>
                                </div>
                                <div class="teacher-stat">
                                    <i class="fas fa-book"></i>
                                    <span>{{ random(5) + 8 }} Cours</span>
                                </div>
                            </div>
                            <div class="dept-teacher-workload">
                                <div class="workload-label">Charge moyenne</div>
                                <div class="workload-bar-dept">
                                    <div class="workload-fill-dept" style="width: {{ random(30) + 60 }}%"></div>
                                </div>
                                <div class="workload-text">{{ random(5) + 18 }}h/sem</div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Onglet Charge de Travail -->
                <div id="teacher-workload-tab" class="tab-content">
                    <div class="analytics-grid">
                        <div class="analytics-section">
                            <h4><i class="fas fa-clock"></i> Distribution des Heures</h4>
                            <div class="workload-distribution">
                                <div class="workload-range">
                                    <div class="range-label">Temps partiel (<15h)</div>
                                    <div class="range-bar">
                                        <div class="range-fill" style="width: 20%"></div>
                                    </div>
                                    <div class="range-count">{{ (nb_teacher * 0.2)|round }} enseignants</div>
                                </div>
                                <div class="workload-range">
                                    <div class="range-label">Temps normal (15-25h)</div>
                                    <div class="range-bar">
                                        <div class="range-fill" style="width: 60%"></div>
                                    </div>
                                    <div class="range-count">{{ (nb_teacher * 0.6)|round }} enseignants</div>
                                </div>
                                <div class="workload-range">
                                    <div class="range-label">Surcharge (>25h)</div>
                                    <div class="range-bar">
                                        <div class="range-fill" style="width: 20%"></div>
                                    </div>
                                    <div class="range-count">{{ (nb_teacher * 0.2)|round }} enseignants</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="analytics-section">
                            <h4><i class="fas fa-calendar-check"></i> Activité Récente</h4>
                            <div class="activity-timeline">
                                <div class="activity-item">
                                    <div class="activity-time">Aujourd'hui</div>
                                    <div class="activity-desc">{{ random(3) + 2 }} nouveaux cours assignés</div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-time">Cette semaine</div>
                                    <div class="activity-desc">{{ random(2) + 1 }} enseignants ont mis à jour leurs notes</div>
                                </div>
                                <div class="activity-item">
                                    <div class="activity-time">Ce mois</div>
                                    <div class="activity-desc">{{ random(2) + 1 }} nouveaux recrutements</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actions du modal enseignants -->
                <div class="modal-actions">
                    <button class="action-btn export-btn" onclick="exportTeacherData()">
                        <i class="fas fa-download"></i> Exporter PDF
                    </button>
                    <button class="action-btn print-btn" onclick="printTeacherModal()">
                        <i class="fas fa-print"></i> Imprimer
                    </button>
                    <button class="action-btn refresh-btn" onclick="refreshTeacherData()">
                        <i class="fas fa-sync"></i> Actualiser
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}