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

{% block title %}{{ course.name }} - Détail du Cours{% endblock %}

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/courses.css') }}">
    <link rel="stylesheet" href="{{ asset('css/course-detail.css') }}">
    <link rel="stylesheet" href="{{ asset('css/grade-workflow.css') }}">
{% endblock %}

{% block dashboard_content %}
    <!-- Données du cours pour JavaScript -->
    <div id="course-data" data-course-uuid="{{ course.uuid }}" style="display: none;"></div>

    <!-- Navigation par onglets avec en-tête intégré -->

    <div class="course-tabs-container animate-fade-in">
        <!-- Bouton hamburger pour mobile -->
        <div class="course-mobile-header">
            <button class="course-hamburger-btn" id="courseInfoToggle">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
            <h1 class="course-title-mobile">{{ course.name }}</h1>
            <div class="course-stats-mobile-header">
                <div class="stat-item-mini">
                    <span class="stat-value">{{ course.students_count }}</span>
                    <span class="stat-label">Étudiants</span>
                </div>
                <div class="stat-item-mini">
                    <span class="stat-value">{{ course.validated_students ?? 0 }}</span>
                    <span class="stat-label">Validés</span>
                </div>
            </div>
        </div>

        <!-- En-tête compact intégré (desktop) -->
        <div class="course-compact-header">
            <div class="course-info">
                <h1 class="course-title">{{ course.name }}</h1>
                <div class="course-meta">
                    <span class="course-code">{{ course.code }}</span>
                    <span class="course-credits">{{ course.credits }} crédits</span>
                    <span class="course-department">{{ course.department }}</span>
                </div>
            </div>
            <div class="course-stats">
                <div class="stat-item">
                    <span class="stat-value">{{ course.students_count }}</span>
                    <span class="stat-label">Étudiants</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ course.pending_enrollments }}</span>
                    <span class="stat-label">En attente</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ course.validated_students ?? 0 }}</span>
                    <span class="stat-label">Validés</span>
                </div>
                <div class="stat-item">
                    <span class="stat-value">{{ course.attendance_rate }}%</span>
                    <span class="stat-label">Présence</span>
                </div>
            </div>
        </div>
        
        <!-- Onglets de navigation (desktop uniquement) -->
        <nav class="course-tabs course-tabs-desktop">
            <button class="course-tab active" data-tab="overview">
                <i class="fas fa-eye"></i>
                <span>Vue d'ensemble</span>
            </button>
            <button class="course-tab" data-tab="grades">
                <i class="fas fa-chart-line"></i>
                <span>Notations</span>
            </button>
            <button class="course-tab" data-tab="attendance">
                <i class="fas fa-user-check"></i>
                <span>Présences</span>
            </button>
            <button class="course-tab" data-tab="students">
                <i class="fas fa-users"></i>
                <span>Étudiants inscrits</span>
            </button>
            <button class="course-tab" data-tab="enrollments">
                <i class="fas fa-user-plus"></i>
                <span>Demandes d'inscription</span>
            </button>
            <button class="course-tab" data-tab="materials">
                <i class="fas fa-book"></i>
                <span>Supports de cours</span>
            </button>
            <button class="course-tab" data-tab="assignments">
                <i class="fas fa-tasks"></i>
                <span>Devoirs & Évaluations</span>
            </button>
            <button class="course-tab" data-tab="schedule">
                <i class="fas fa-calendar-alt"></i>
                <span>Planning</span>
            </button>
        </nav>
    </div>

    <!-- Offcanvas pour la navigation (mobile) -->
    <div class="course-offcanvas" id="courseOffcanvas">
        <div class="offcanvas-backdrop" id="offcanvasBackdrop"></div>
        <div class="offcanvas-content">
            <div class="offcanvas-header">
                <h2 class="offcanvas-title">Navigation</h2>
                <button class="offcanvas-close" id="offcanvasClose">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="offcanvas-body">
                <nav class="course-tabs-mobile">
                    <button class="course-tab-mobile active" data-tab="overview" onclick="switchTabMobile('overview')">
                        <i class="fas fa-eye"></i>
                        <span>Vue d'ensemble</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="grades" onclick="switchTabMobile('grades')">
                        <i class="fas fa-chart-line"></i>
                        <span>Notations</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="attendance" onclick="switchTabMobile('attendance')">
                        <i class="fas fa-user-check"></i>
                        <span>Présences</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="students" onclick="switchTabMobile('students')">
                        <i class="fas fa-users"></i>
                        <span>Étudiants inscrits</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="enrollments" onclick="switchTabMobile('enrollments')">
                        <i class="fas fa-user-plus"></i>
                        <span>Demandes d'inscription</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="materials" onclick="switchTabMobile('materials')">
                        <i class="fas fa-book"></i>
                        <span>Supports de cours</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="assignments" onclick="switchTabMobile('assignments')">
                        <i class="fas fa-tasks"></i>
                        <span>Devoirs & Évaluations</span>
                    </button>
                    <button class="course-tab-mobile" data-tab="schedule" onclick="switchTabMobile('schedule')">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Planning</span>
                    </button>
                </nav>
            </div>
        </div>
    </div>

    <!-- Contenu des onglets -->
    <div class="course-tab-content animate-fade-in">
        
        <!-- Onglet Vue d'ensemble -->
        <div class="tab-pane active" id="overview">
            <div class="overview-grid">
                <!-- Informations générales -->
                <div class="overview-card">
                    <div class="overview-card-header">
                        <h3><i class="fas fa-info-circle"></i> Informations générales</h3>
                    </div>
                    <div class="overview-card-body">
                        <div class="info-item">
                            <span class="info-label">Code du cours :</span>
                            <span class="info-value">{{ course.code }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Niveau :</span>
                            <span class="info-value">{{ course.level }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Semestre :</span>
                            <span class="info-value">{{ course.semester }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Année académique :</span>
                            <span class="info-value">{{ course.year }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Heures par semaine :</span>
                            <span class="info-value">{{ course.hours_per_week }}h</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Progression :</span>
                            <span class="info-value">{{ course.progress }}%</span>
                        </div>
                    </div>
                </div>

                <!-- Actions rapides -->
                <div class="overview-card">
                    <div class="overview-card-header">
                        <h3><i class="fas fa-bolt"></i> Actions rapides</h3>
                    </div>
                    <div class="overview-card-body">
                        <div class="quick-actions-grid">
                            <button class="quick-action-card" onclick="switchTab('grades')">
                                <i class="fas fa-chart-line"></i>
                                <span>Saisir des notes</span>
                            </button>
                            <button class="quick-action-card" onclick="switchTab('attendance')">
                                <i class="fas fa-user-check"></i>
                                <span>Marquer présences</span>
                            </button>
                            <button class="quick-action-card" onclick="switchTab('enrollments')">
                                <i class="fas fa-user-plus"></i>
                                <span>Valider inscriptions</span>
                            </button>
                            <button class="quick-action-card" onclick="switchTab('materials')">
                                <i class="fas fa-upload"></i>
                                <span>Ajouter support</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Activités récentes -->
                <div class="overview-card full-width">
                    <div class="overview-card-header">
                        <h3><i class="fas fa-clock"></i> Activités récentes</h3>
                    </div>
                    <div class="overview-card-body">
                        <div class="activity-timeline">
                            <div class="timeline-item">
                                <div class="timeline-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="timeline-content">
                                    <h4>Notes saisies pour l'examen partiel</h4>
                                    <p>{{ course.students_count }} étudiants notés - Moyenne : {{ course.average_grade }}/20</p>
                                    <span class="timeline-date">Il y a 2 heures</span>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-icon">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <div class="timeline-content">
                                    <h4>Nouvelles demandes d'inscription</h4>
                                    <p>{{ course.pending_enrollments }} demandes en attente de validation</p>
                                    <span class="timeline-date">Hier à 15:30</span>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-icon">
                                    <i class="fas fa-book"></i>
                                </div>
                                <div class="timeline-content">
                                    <h4>Support de cours ajouté</h4>
                                    <p>Chapitre 5 - Bases de données relationnelles.pdf</p>
                                    <span class="timeline-date">Il y a 2 jours</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Onglet Notations -->
        <div class="tab-pane" id="grades" role="tabpanel" aria-labelledby="grades-tab" tabindex="0">
            <div class="grades-section">
                <div class="section-header">
                    <h3><i class="fas fa-chart-line"></i> Gestion des Notes</h3>
                    <div class="section-actions">
                        <button class="btn btn-warning" id="test-workflow-route">
                            <i class="fas fa-bug"></i>
                            Test Route
                        </button>
                        <button class="btn btn-success" id="submit-grades-workflow" data-course-uuid="{{ course.uuid }}">
                            <i class="fas fa-paper-plane"></i>
                            Soumettre pour validation
                        </button>
                        <button class="btn btn-info" id="view-workflow-stats" data-course-uuid="{{ course.uuid }}">
                            <i class="fas fa-tasks"></i>
                            Statut workflow
                        </button>
                        <button class="btn btn-secondary" id="export-grades" data-course-uuid="{{ course.uuid }}">
                            <i class="fas fa-download"></i>
                            Exporter CSV
                        </button>
                        <button class="btn btn-primary" id="refresh-grades">
                            <i class="fas fa-sync-alt"></i>
                            Actualiser
                        </button>
                    </div>
                </div>

                <!-- Statistiques -->
                <div class="grades-stats-section" data-course-uuid="{{ course.uuid }}">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value" id="total-students">{{ course.students_count }}</div>
                            <div class="stat-label">Étudiants inscrits</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value" id="graded-students">0</div>
                            <div class="stat-label">Étudiants notés</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value" id="average-grade">{{ course.average_grade }}/10</div>
                            <div class="stat-label">Moyenne générale</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value" id="success-rate">0%</div>
                            <div class="stat-label">Taux de réussite</div>
                        </div>
                    </div>
                </div>

                <!-- Tableau des notes -->
                <div class="grades-content">
                    <div class="grade-table-wrapper">
                        <div class="table-responsive">
                            <table class="table table-hover grade-table" id="grades-table">
                                <thead class="table-header">
                                    <tr>
                                        <th>Matricule</th>
                                        <th>Prénom</th>
                                        <th>Nom</th>
                                        <th>Note 1</th>
                                        <th>Note 2</th>
                                        <th>Note 3</th>
                                        <th>Note 4</th>
                                        <th>Moyenne</th>
                                        <th>Statut</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="students-grades-list">
                                    <tr class="text-center">
                                        <td colspan="10" id="grades-placeholder">
                                            <div class="d-flex justify-content-center align-items-center p-4">
                                                <div class="spinner-border text-primary me-3" role="status">
                                                    <span class="visually-hidden">Chargement...</span>
                                                </div>
                                                <span>Chargement des données des étudiants...</span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Onglet Présences -->
        <div class="tab-pane" id="attendance">
            <div class="attendance-section">
                <div class="section-header">
                    <h3><i class="fas fa-user-check"></i> Gestion des Présences</h3>
                    <div class="section-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-calendar-alt"></i>
                            Voir historique
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-check"></i>
                            Marquer présences
                        </button>
                    </div>
                </div>
                
                <div class="attendance-content">
                    <p class="coming-soon-message">
                        <i class="fas fa-tools"></i>
                        Interface de présences en cours de développement
                    </p>
                    <p class="coming-soon-description">
                        Cette section permettra de marquer les présences, voir les statistiques d'assiduité et générer des rapports.
                    </p>
                </div>
            </div>
        </div>

        <!-- Onglet Étudiants inscrits -->
        <div class="tab-pane" id="students">
            <div class="students-section">
                <div class="section-header">
                    <h3><i class="fas fa-users"></i> Étudiants Inscrits ({{ course.students_count }})</h3>
                    <div class="section-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-download"></i>
                            Exporter liste
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-user-plus"></i>
                            Ajouter étudiant
                        </button>
                    </div>
                </div>
                
                <div class="students-content">
                    <!-- Le contenu sera généré par JavaScript -->
                    <div class="students-list-container">
                        <div class="students-list-header">
                            <div class="students-search">
                                <input type="text" class="form-control" placeholder="Rechercher un étudiant..." id="student-search">
                                <button class="btn btn-outline-secondary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            <div class="students-filters">
                                <select class="form-select" id="students-filter">
                                    <option value="all">Tous les étudiants</option>
                                    <option value="graded">Avec notes</option>
                                    <option value="not-graded">Sans notes</option>
                                </select>
                            </div>
                        </div>
                        <div class="students-list" id="students-list">
                            <!-- Liste générée par JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Onglet Demandes d'inscription -->
        <div class="tab-pane" id="enrollments">
            <div class="enrollments-section">
                <div class="section-header">
                    <h3><i class="fas fa-user-plus"></i> Demandes d'Inscription ({{ course.pending_enrollments }})</h3>
                    <div class="section-actions">
                        <button class="btn btn-info auto-enrollment-btn" data-course-uuid="{{ course.uuid }}">
                            <i class="fas fa-magic"></i>
                            Inscrire automatiquement
                        </button>
                        <button class="btn btn-success">
                            <i class="fas fa-check-double"></i>
                            Tout accepter
                        </button>
                        <button class="btn btn-danger">
                            <i class="fas fa-times"></i>
                            Tout refuser
                        </button>
                    </div>
                </div>
                
                <div class="enrollments-content">
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle"></i> Inscription Automatique</h5>
                        <p>Les étudiants du même niveau que ce cours et dont le compte est actif peuvent être automatiquement inscrits si le semestre est en cours.</p>
                        <p><strong>Cours :</strong> {{ course.name }} ({{ course.level }})</p>
                        <p><strong>Statut du semestre :</strong> 
                            <span class="badge 
                                {% if course.semester_status is defined %}
                                    {% if course.semester_status == 'ongoing' %}bg-success
                                    {% elseif course.semester_status == 'upcoming' %}bg-warning
                                    {% else %}bg-secondary{% endif %}
                                {% else %}bg-secondary{% endif %}">
                                {% if course.semester_status is defined %}
                                    {% if course.semester_status == 'ongoing' %}En cours
                                    {% elseif course.semester_status == 'upcoming' %}À venir
                                    {% else %}Terminé{% endif %}
                                {% else %}Inconnu{% endif %}
                            </span>
                        </p>
                    </div>
                    
                    <p class="coming-soon-message">
                        <i class="fas fa-tools"></i>
                        Gestion manuelle des demandes en cours de développement
                    </p>
                    <p class="coming-soon-description">
                        Cette section permettra de valider ou refuser manuellement les demandes d'inscription des étudiants.
                    </p>
                </div>
            </div>
        </div>

        <!-- Onglet Supports de cours -->
        <div class="tab-pane" id="materials">
            <div class="materials-section">
                <div class="section-header">
                    <h3><i class="fas fa-book"></i> Supports de Cours</h3>
                    <div class="section-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-folder"></i>
                            Organiser
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-upload"></i>
                            Ajouter fichier
                        </button>
                    </div>
                </div>
                
                <div class="materials-content">
                    <p class="coming-soon-message">
                        <i class="fas fa-tools"></i>
                        Gestionnaire de fichiers en cours de développement
                    </p>
                    <p class="coming-soon-description">
                        Cette section permettra de télécharger, organiser et partager les supports de cours avec les étudiants.
                    </p>
                </div>
            </div>
        </div>

        <!-- Onglet Devoirs & Évaluations -->
        <div class="tab-pane" id="assignments">
            <div class="assignments-section">
                <div class="section-header">
                    <h3><i class="fas fa-tasks"></i> Devoirs & Évaluations</h3>
                    <div class="section-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-eye"></i>
                            Voir archives
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            Créer devoir
                        </button>
                    </div>
                </div>
                
                <div class="assignments-content">
                    <p class="coming-soon-message">
                        <i class="fas fa-tools"></i>
                        Gestionnaire de devoirs en cours de développement
                    </p>
                    <p class="coming-soon-description">
                        Cette section permettra de créer des devoirs, gérer les remises et corriger les travaux des étudiants.
                    </p>
                </div>
            </div>
        </div>

        <!-- Onglet Planning -->
        <div class="tab-pane" id="schedule">
            <div class="schedule-section">
                <div class="section-header">
                    <h3><i class="fas fa-calendar-alt"></i> Planning du Cours</h3>
                    <div class="section-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-print"></i>
                            Imprimer
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-edit"></i>
                            Modifier planning
                        </button>
                    </div>
                </div>
                
                <div class="schedule-content">
                    <div class="schedule-info">
                        <h4>Horaires actuels</h4>
                        <p class="schedule-details">{{ course.schedule }}</p>
                    </div>
                    
                    <p class="coming-soon-message">
                        <i class="fas fa-tools"></i>
                        Calendrier interactif en cours de développement
                    </p>
                    <p class="coming-soon-description">
                        Cette section affichera un calendrier complet avec les séances, examens et événements du cours.
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/grade-management.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialisation du gestionnaire de notes
            const courseUuid = document.getElementById('course-data').dataset.courseUuid;
            window.gradeManager = new GradeManager(courseUuid);
            window.gradeManager.init();

            // Gestion des onglets
            const tabs = document.querySelectorAll('.course-tab');
            const tabPanes = document.querySelectorAll('.tab-pane');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.dataset.tab;
                    switchTab(targetTab);
                });
            });
            
            // Fonction globale pour changer d'onglet
            window.switchTab = function(targetTab) {
                // Retirer la classe active de tous les onglets et panneaux
                tabs.forEach(t => t.classList.remove('active'));
                tabPanes.forEach(p => p.classList.remove('active'));
                
                // Ajouter la classe active à l'onglet et panneau ciblés
                const activeTab = document.querySelector(`[data-tab="${targetTab}"]`);
                const activePane = document.getElementById(targetTab);
                
                if (activeTab && activePane) {
                    activeTab.classList.add('active');
                    activePane.classList.add('active');
                    
                    // Charger les données spécifiques à l'onglet si nécessaire
                    if (targetTab === 'grades' && window.gradeManager) {
                        window.gradeManager.loadGrades();
                    }
                }
            };
            
            // Fonction pour charger la liste des étudiants
            window.loadStudentsList = async function() {
                if (!window.gradeManager) return;
                
                const studentsList = document.getElementById('students-list');
                if (!studentsList) return;
                
                try {
                    const students = window.gradeManager.students;
                    
                    studentsList.innerHTML = students.map(student => `
                        <div class="student-card">
                            <div class="student-header">
                                <div class="student-main-info">
                                    <h5 class="student-name">${student.last_name} ${student.first_name}</h5>
                                    <div class="student-details">
                                        <span><i class="fas fa-id-card"></i> ${student.matricule}</span>
                                        <span><i class="fas fa-envelope"></i> ${student.email}</span>
                                    </div>
                                </div>
                                <div class="student-grade-summary">
                                    <span class="grade-average ${window.gradeManager.getGradeClass(student.final_grade)}">
                                        ${student.final_grade ? student.final_grade.toFixed(1) + '/20' : 'Non noté'}
                                    </span>
                                    <span class="grade-count">
                                        ${[student.grade1, student.grade2, student.grade3, student.grade4].filter(g => g !== null).length}/4 notes
                                    </span>
                                </div>
                            </div>
                            <div class="student-actions">
                                <button class="btn btn-sm btn-outline-primary" onclick="switchTab('grades'); setTimeout(() => { document.querySelector('[data-student-id=\\"${student.id}\\"]').scrollIntoView({behavior: 'smooth', block: 'center'}); }, 100);">
                                    <i class="fas fa-chart-line"></i>
                                    Noter
                                </button>
                                <button class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-user"></i>
                                    Profil
                                </button>
                                <button class="btn btn-sm btn-outline-success">
                                    <i class="fas fa-envelope"></i>
                                    Contact
                                </button>
                            </div>
                        </div>
                    `).join('');
                    
                    // Fonctionnalité de recherche
                    const searchInput = document.getElementById('student-search');
                    if (searchInput) {
                        searchInput.addEventListener('input', function() {
                            const searchTerm = this.value.toLowerCase();
                            const studentCards = document.querySelectorAll('.student-card');
                            
                            studentCards.forEach(card => {
                                const text = card.textContent.toLowerCase();
                                card.style.display = text.includes(searchTerm) ? 'block' : 'none';
                            });
                        });
                    }
                    
                } catch (error) {
                    console.error('Erreur lors du chargement de la liste des étudiants:', error);
                    studentsList.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle"></i>
                            Erreur lors du chargement de la liste des étudiants
                        </div>
                    `;
                }
            };
            
            // Gestion du bouton d'inscription automatique
            document.addEventListener('click', (e) => {
                if (e.target.matches('.auto-enrollment-btn') || e.target.closest('.auto-enrollment-btn')) {
                    e.preventDefault();
                    
                    const button = e.target.matches('.auto-enrollment-btn') ? e.target : e.target.closest('.auto-enrollment-btn');
                    const courseUuid = button.dataset.courseUuid;
                    
                    if (!courseUuid) return;
                    
                    // Désactiver le bouton pendant le traitement
                    button.disabled = true;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Traitement...';
                    
                    // Appel à l'API
                    fetch(`/teacher/course/${courseUuid}/process-auto-enrollments`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Afficher le message de succès
                            showNotification(data.message, 'success');
                            
                            // Recharger les données si des étudiants ont été inscrits
                            if (data.enrolled_count > 0 && window.gradeManager) {
                                window.gradeManager.loadGrades();
                                // Recharger aussi la liste des étudiants si l'onglet est actif
                                if (document.getElementById('students').classList.contains('active')) {
                                    loadStudentsList();
                                }
                            }
                        } else {
                            showNotification(data.message || data.error || 'Erreur lors du traitement', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showNotification('Erreur de connexion lors du traitement des inscriptions automatiques', 'error');
                    })
                    .finally(() => {
                        // Réactiver le bouton
                        button.disabled = false;
                        button.innerHTML = '<i class="fas fa-magic"></i> Inscrire automatiquement';
                    });
                }
            });
            
            // Fonction d'aide pour les notifications
            function showNotification(message, type) {
                // Créer ou réutiliser le conteneur de notifications
                let container = document.querySelector('.notification-container');
                if (!container) {
                    container = document.createElement('div');
                    container.className = 'notification-container';
                    document.body.appendChild(container);
                }

                const notification = document.createElement('div');
                notification.className = `notification notification-${type}`;
                notification.innerHTML = `
                    <div class="notification-content">
                        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                        <span>${message}</span>
                    </div>
                    <button class="notification-close">&times;</button>
                `;

                container.appendChild(notification);

                // Auto-fermeture après 5 secondes
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 5000);

                // Fermeture manuelle
                notification.querySelector('.notification-close').onclick = () => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                };
            }
            
            // Alias pour compatibilité avec le JavaScript
            window.showToast = function(message, type = 'info', duration = 4000) {
                showNotification(message, type);
            };
            
            // Animation d'entrée pour les statistiques
            const stats = document.querySelectorAll('.detail-stat');
            stats.forEach((stat, index) => {
                setTimeout(() => {
                    stat.style.opacity = '1';
                    stat.style.transform = 'translateY(0)';
                }, index * 100);
            });

            // Gestion de l'offcanvas mobile
            const courseInfoToggle = document.getElementById('courseInfoToggle');
            const courseOffcanvas = document.getElementById('courseOffcanvas');
            const offcanvasClose = document.getElementById('offcanvasClose');
            const offcanvasBackdrop = document.getElementById('offcanvasBackdrop');

            function openOffcanvas() {
                courseOffcanvas.classList.add('active');
                document.body.style.overflow = 'hidden';
                
                // Synchroniser l'état actif des onglets mobiles avec les onglets desktop
                syncMobileTabsWithDesktop();
            }

            function closeOffcanvas() {
                courseOffcanvas.classList.remove('active');
                document.body.style.overflow = '';
            }

            if (courseInfoToggle) {
                courseInfoToggle.addEventListener('click', openOffcanvas);
            }

            if (offcanvasClose) {
                offcanvasClose.addEventListener('click', closeOffcanvas);
            }

            if (offcanvasBackdrop) {
                offcanvasBackdrop.addEventListener('click', closeOffcanvas);
            }

            // Fermer avec la touche Escape
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && courseOffcanvas.classList.contains('active')) {
                    closeOffcanvas();
                }
            });

            // Synchroniser les onglets mobiles avec l'état desktop
            function syncMobileTabsWithDesktop() {
                // Trouver l'onglet desktop actuellement actif
                const activeDesktopTab = document.querySelector('.course-tab.active');
                if (!activeDesktopTab) return;
                
                const activeTabName = activeDesktopTab.getAttribute('data-tab');
                
                // Mettre à jour les onglets mobiles
                const mobileTabButtons = document.querySelectorAll('.course-tab-mobile');
                mobileTabButtons.forEach(btn => {
                    const tabName = btn.getAttribute('data-tab');
                    if (tabName === activeTabName) {
                        btn.classList.add('active');
                    } else {
                        btn.classList.remove('active');
                    }
                });
            }

            // Intercepter la fonction switchTab existante pour synchroniser
            const originalSwitchTab = window.switchTab;
            if (originalSwitchTab) {
                window.switchTab = function(tabName) {
                    // Appeler la fonction originale
                    originalSwitchTab(tabName);
                    
                    // Synchroniser avec les onglets mobiles
                    setTimeout(() => {
                        syncMobileTabsWithDesktop();
                    }, 50);
                };
            }

            // Navigation mobile - switcher d'onglet depuis l'offcanvas
            window.switchTabMobile = function(tabName) {
                // Mettre à jour visuellement l'onglet mobile actif immédiatement
                const mobileTabButtons = document.querySelectorAll('.course-tab-mobile');
                mobileTabButtons.forEach(btn => {
                    const btnTabName = btn.getAttribute('data-tab');
                    if (btnTabName === tabName) {
                        btn.classList.add('active');
                    } else {
                        btn.classList.remove('active');
                    }
                });
                
                // Fermer l'offcanvas
                closeOffcanvas();
                
                // Petite attente pour l'animation de fermeture
                setTimeout(() => {
                    // Utiliser la fonction switchTab existante
                    switchTab(tabName);
                }, 200);
            };

            // Gestion du workflow de validation des notes
            document.addEventListener('click', (e) => {
                // Test simple pour vérifier les routes
                if (e.target.matches('#test-workflow-route')) {
                    e.preventDefault();
                    
                    fetch('/teacher/test/workflow-test', {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Test route response:', data);
                        showNotification(data.message, 'success');
                    })
                    .catch(error => {
                        console.error('Erreur test route:', error);
                        showNotification('Erreur de connexion pour le test', 'error');
                    });
                }

                // Bouton de soumission pour validation
                if (e.target.matches('#submit-grades-workflow') || e.target.closest('#submit-grades-workflow')) {
                    e.preventDefault();
                    
                    const button = e.target.matches('#submit-grades-workflow') ? e.target : e.target.closest('#submit-grades-workflow');
                    const courseUuid = button.dataset.courseUuid;
                    
                    if (!courseUuid) return;
                    
                    // Confirmation avant soumission
                    if (!confirm('Êtes-vous sûr de vouloir soumettre les notes pour validation ? Cette action ne peut pas être annulée.')) {
                        return;
                    }
                    
                    // Désactiver le bouton pendant le traitement
                    button.disabled = true;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Soumission...';
                    
                    // Appel à l'API
                    fetch(`/teacher/workflow/submit/${courseUuid}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        console.log('Response status:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Submit response:', data);
                        if (data.success) {
                            showNotification(data.message, 'success');
                            // Recharger les données si nécessaire
                            if (window.gradeManager) {
                                window.gradeManager.loadGrades();
                            }
                        } else {
                            showNotification(data.message || data.error || 'Erreur lors de la soumission', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showNotification('Erreur de connexion lors de la soumission: ' + error.message, 'error');
                    })
                    .finally(() => {
                        // Réactiver le bouton
                        button.disabled = false;
                        button.innerHTML = '<i class="fas fa-paper-plane"></i> Soumettre pour validation';
                    });
                }

                // Bouton de visualisation des statistiques du workflow
                if (e.target.matches('#view-workflow-stats') || e.target.closest('#view-workflow-stats')) {
                    e.preventDefault();
                    
                    const button = e.target.matches('#view-workflow-stats') ? e.target : e.target.closest('#view-workflow-stats');
                    const courseUuid = button.dataset.courseUuid;
                    
                    if (!courseUuid) return;
                    
                    // Désactiver le bouton pendant le traitement
                    button.disabled = true;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Chargement...';
                    
                    // Appel à l'API
                    fetch(`/teacher/workflow/stats/${courseUuid}`, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        console.log('Stats response status:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Stats response:', data);
                        if (data.success) {
                            // Afficher les statistiques dans une modal
                            showWorkflowStatsModal(data.stats);
                        } else {
                            showNotification(data.message || data.error || 'Erreur lors du chargement des statistiques', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showNotification('Erreur de connexion lors du chargement des statistiques: ' + error.message, 'error');
                    })
                    .finally(() => {
                        // Réactiver le bouton
                        button.disabled = false;
                        button.innerHTML = '<i class="fas fa-tasks"></i> Statut workflow';
                    });
                }
            });

            // Fonction pour afficher la modal des statistiques du workflow
            function showWorkflowStatsModal(stats) {
                // Créer la modal si elle n'existe pas
                let modal = document.getElementById('workflow-stats-modal');
                if (!modal) {
                    modal = document.createElement('div');
                    modal.id = 'workflow-stats-modal';
                    modal.className = 'modal fade';
                    modal.innerHTML = `
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">
                                        <i class="fas fa-tasks"></i> Statut du Workflow de Validation
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="workflow-stats-grid">
                                        <div class="stat-card">
                                            <div class="stat-icon draft">
                                                <i class="fas fa-edit"></i>
                                            </div>
                                            <div class="stat-info">
                                                <div class="stat-value" id="draft-count">0</div>
                                                <div class="stat-label">Brouillons</div>
                                            </div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-icon submitted">
                                                <i class="fas fa-paper-plane"></i>
                                            </div>
                                            <div class="stat-info">
                                                <div class="stat-value" id="submitted-count">0</div>
                                                <div class="stat-label">Soumises</div>
                                            </div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-icon validated">
                                                <i class="fas fa-check-circle"></i>
                                            </div>
                                            <div class="stat-info">
                                                <div class="stat-value" id="validated-count">0</div>
                                                <div class="stat-label">Validées (Chef)</div>
                                            </div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-icon published">
                                                <i class="fas fa-globe"></i>
                                            </div>
                                            <div class="stat-info">
                                                <div class="stat-value" id="published-count">0</div>
                                                <div class="stat-label">Publiées</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="workflow-timeline mt-4">
                                        <h6><i class="fas fa-history"></i> Timeline du Workflow</h6>
                                        <div id="workflow-timeline-content">
                                            <!-- Timeline générée dynamiquement -->
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                </div>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(modal);
                }

                // Mettre à jour les statistiques
                document.getElementById('draft-count').textContent = stats.draft || 0;
                document.getElementById('submitted-count').textContent = stats.submitted || 0;
                document.getElementById('validated-count').textContent = stats.validated_by_dept_head || 0;
                document.getElementById('published-count').textContent = stats.published || 0;

                // Afficher la modal
                const bootstrapModal = new bootstrap.Modal(modal);
                bootstrapModal.show();
            }
        });
    </script>
{% endblock %}