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

{% block title %}Mes Cours - Portail Enseignant{% 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') }}">
{% endblock %}

{% block dashboard_content %}
    <!-- En-tête avec filtres avancés -->
    <div class="courses-header animate-slide-in">
        <div class="courses-title-section">
            <h1 class="courses-main-title">
                <i class="fas fa-book-open"></i>
                Mes Cours
            </h1>
            <p class="courses-subtitle">Gérez vos cours et suivez la progression de vos étudiants</p>
        </div>
        
        <!-- Filtres avancés -->
        <div class="courses-filters">
            <div class="filter-group">
                <label class="filter-label">Année académique</label>
                <select class="filter-select" id="yearFilter">
                    <option value="">Toutes les années</option>
                    <option value="2024-2025" selected>2024-2025</option>
                    <option value="2023-2024">2023-2024</option>
                    <option value="2022-2023">2022-2023</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">Semestre</label>
                <select class="filter-select" id="semesterFilter">
                    <option value="">Tous les semestres</option>
                    <option value="Semestre 1" selected>Semestre 1</option>
                    <option value="Semestre 2">Semestre 2</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">Niveau</label>
                <select class="filter-select" id="levelFilter">
                    <option value="">Tous les niveaux</option>
                    <option value="L1">Licence 1</option>
                    <option value="L2">Licence 2</option>
                    <option value="L3">Licence 3</option>
                    <option value="Master">Master</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">Statut</label>
                <select class="filter-select" id="statusFilter">
                    <option value="">Tous les statuts</option>
                    <option value="active" selected>Cours actifs</option>
                    <option value="completed">Cours terminés</option>
                    <option value="upcoming">À venir</option>
                </select>
            </div>
            
            <div class="filter-group search-group">
                <label class="filter-label">Recherche</label>
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="Nom du cours, code..." id="searchInput">
                </div>
            </div>
        </div>
    </div>

    <!-- Grille des cours -->
    <div class="courses-grid animate-fade-in" id="coursesGrid">
        {% for course in courses %}
            <div class="course-card" 
                 data-year="{{ course.year }}" 
                 data-semester="{{ course.semester }}" 
                 data-level="{{ course.level }}" 
                 data-status="{{ course.status }}"
                 data-search="{{ course.name|lower }} {{ course.code|lower }}">
                
                <!-- En-tête de la carte -->
                <div class="course-card-header">
                    <div class="course-status-badge status-{{ course.status }}">
                        {% if course.status == 'active' %}
                            <i class="fas fa-play-circle"></i>
                            Actif
                        {% elseif course.status == 'completed' %}
                            <i class="fas fa-check-circle"></i>
                            Terminé
                        {% else %}
                            <i class="fas fa-clock"></i>
                            À venir
                        {% endif %}
                    </div>
                    <div class="course-progress-indicator">
                        <div class="progress-circle" data-progress="{{ course.progress }}">
                            <span class="progress-text">{{ course.progress }}%</span>
                        </div>
                    </div>
                </div>
                
                <!-- Contenu principal -->
                <div class="course-card-body">
                    <div class="course-main-info">
                        <h3 class="course-title">{{ course.name }}</h3>
                        <div class="course-code">{{ course.code }}</div>
                        <div class="course-meta">
                            <span class="course-level">{{ course.level }}</span>
                            <span class="course-semester">{{ course.semester }}</span>
                        </div>
                        <p class="course-description">{{ course.description }}</p>
                    </div>
                    
                    <!-- Informations rapides -->
                    <div class="course-quick-stats">
                        <div class="quick-stat">
                            <i class="fas fa-users"></i>
                            <span class="stat-value">{{ course.students_count }}</span>
                            <span class="stat-label">Étudiants</span>
                        </div>
                        <div class="quick-stat">
                            <i class="fas fa-clock"></i>
                            <span class="stat-value">{{ course.hours_per_week }}h</span>
                            <span class="stat-label">par semaine</span>
                        </div>
                        <div class="quick-stat">
                            <i class="fas fa-calendar-alt"></i>
                            <span class="stat-value">{{ course.year }}</span>
                            <span class="stat-label">Année</span>
                        </div>
                    </div>
                    
                    <!-- Planning -->
                    <div class="course-schedule">
                        <i class="fas fa-calendar-week"></i>
                        <span>{{ course.schedule }}</span>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="course-card-actions">
                    <a href="{{ path('app_teacher_course_detail', {uuid: course.uuid}) }}" class="btn btn-primary course-action-btn">
                        <i class="fas fa-eye"></i>
                        Voir le cours
                    </a>
                    <div class="course-quick-actions">
                        <a href="{{ path('app_teacher_course_grades', {uuid: course.uuid}) }}" class="quick-action-btn" title="Notes">
                            <i class="fas fa-chart-line"></i>
                        </a>
                        <a href="{{ path('app_teacher_course_students', {uuid: course.uuid}) }}" class="quick-action-btn" title="Étudiants">
                            <i class="fas fa-users"></i>
                        </a>
                        <a href="{{ path('app_teacher_course_attendance', {uuid: course.uuid}) }}" class="quick-action-btn" title="Présences">
                            <i class="fas fa-user-check"></i>
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Message si aucun cours trouvé -->
    <div class="no-courses-message" id="noCoursesMessage" style="display: none;">
        <div class="empty-state">
            <i class="fas fa-book-open"></i>
            <h3>Aucun cours trouvé</h3>
            <p>Aucun cours ne correspond à vos critères de recherche.</p>
            <button class="btn btn-primary" onclick="clearFilters()">
                <i class="fas fa-refresh"></i>
                Réinitialiser les filtres
            </button>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/courses-filters.js') }}"></script>
{% endblock %}