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

{% block title %}Assignation des Cours - Centre Informatique{% endblock %}

{# Configuration pour enseignant #}
{% set header_icon = is_admin ? 'fa-user-shield' : (is_study_director ? 'fa-graduation-cap' : 'fa-crown') %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '3' %}
{% set user_role = is_admin ? 'Administrateur' : (is_study_director ? 'Directeur des Études' : 'Chef de Département') %}
{% set offcanvas_title = 'EnseignantPortal' %}
{% set notifications_url = path('app_teacher_notifications') %}

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

{% block dashboard_content %}
<div class="assignment-container">
    <!-- En-tête -->
    <div class="assignment-header">
        <h1><i class="fas fa-chalkboard-teacher"></i> Assignation des Cours</h1>
        <p>Gérez l'assignation des matières aux professeurs de votre département</p>
    </div>

    <!-- Statistiques -->
    {% if departments|length > 0 %}
    {% set assigned_count = 0 %}
    {% for course in courses %}
        {% if course.teacher %}
            {% set assigned_count = assigned_count + 1 %}
        {% endif %}
    {% endfor %}
    {% set rate = courses|length > 0 ? (assigned_count / courses|length * 100)|round(1) : 0 %}
    
    <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"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="total-courses">{{ courses|length }}</div>
                    <div class="stat-label">Total Cours</div>
                    <div class="stat-trend neutral">
                        <i class="fas fa-equals"></i>
                        Tous départements
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: 100%"></div>
                </div>
            </div>

            <div class="stat-card students">
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="assigned-courses">{{ assigned_count }}</div>
                    <div class="stat-label">Cours Assignés</div>
                    <div class="stat-trend positive">
                        <i class="fas fa-arrow-up"></i>
                        {{ rate }}% assignés
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ rate }}%"></div>
                </div>
            </div>

            <div class="stat-card evaluations">
                <div class="stat-icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="unassigned-courses">{{ courses|length - assigned_count }}</div>
                    <div class="stat-label">Non Assignés</div>
                    <div class="stat-trend {{ (courses|length - assigned_count) > 0 ? 'negative' : 'positive' }}">
                        <i class="fas {{ (courses|length - assigned_count) > 0 ? 'fa-exclamation' : 'fa-check' }}"></i>
                        {{ (courses|length - assigned_count) > 0 ? 'À traiter' : 'Tous assignés' }}
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ 100 - rate }}%"></div>
                </div>
            </div>

            <div class="stat-card hours">
                <div class="stat-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="assignment-rate">{{ rate }}%</div>
                    <div class="stat-label">Taux d'Assignation</div>
                    <div class="stat-trend {{ rate >= 80 ? 'positive' : (rate >= 50 ? 'neutral' : 'negative') }}">
                        <i class="fas {{ rate >= 80 ? 'fa-thumbs-up' : (rate >= 50 ? 'fa-equals' : 'fa-thumbs-down') }}"></i>
                        {{ rate >= 80 ? 'Excellent' : (rate >= 50 ? 'Correct' : 'Améliorer') }}
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ rate }}%"></div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Contrôles et filtres -->
    <div class="assignment-controls">
        <div class="controls-row">
            <div class="control-group">
                <label class="control-label">Actions</label>
                <button class="control-button primary" id="open-assignment-modal">
                    <i class="fas fa-plus"></i>
                    Assigner un Cours
                </button>
            </div>

            <div class="control-group">
                <label class="control-label">Département</label>
                <select class="control-select" id="department-filter">
                    <option value="">Tous les départements</option>
                    {% for department in departments %}
                        <option value="{{ department.id }}">{{ department.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="control-group">
                <label class="control-label">Rechercher</label>
                <input type="text" class="control-input" id="search-input" placeholder="Nom du cours ou professeur...">
            </div>

            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <button class="control-button" id="refresh-btn">
                    <i class="fas fa-sync-alt"></i>
                    Actualiser
                </button>
            </div>
        </div>
    </div>

    <!-- Cours assignés en cartes -->
    <div class="courses-grid-container">
        <div class="grid-header">
            <h3><i class="fas fa-list"></i> Cours Assignés</h3>
            <span class="assigned-count">{{ assigned_count }} cours assignés</span>
        </div>
        
        <div class="courses-grid" id="courses-grid">
            {% for course in courses %}
                {% if course.teacher %}
                <div class="course-card" 
                     data-course-id="{{ course.id }}" 
                     data-department="{{ course.department.id }}" 
                     data-status="assigned"
                     data-search="{{ course.name|lower }} {{ course.code|lower }} {{ course.teacher.firstName|lower }} {{ course.teacher.lastName|lower }} {{ course.department.name|lower }}">
                    
                    <!-- En-tête de la carte -->
                    <div class="course-card-header">
                        <div class="course-status-badge status-active">
                            <i class="fas fa-check-circle"></i>
                            Assigné
                        </div>
                        <div class="course-progress-indicator">
                            <div class="progress-circle" data-progress="100">
                                <span class="progress-text">50%</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.cycle}} {{ course.level.number }}</span>
                                <span class="course-semester">Semestre {{ course.semester.number }}</span>
                            </div>
                            <p class="course-description">{{ course.department.name }} - {{ course.credits }} crédits</p>
                        </div>
                        
                        <!-- Informations rapides
                        <div class="course-quick-stats">
                            <div class="quick-stat">
                                <i class="fas fa-building"></i>
                                <span class="stat-value">{{ course.department.code }}</span>
                                <span class="stat-label">Département</span>
                            </div>
                            <div class="quick-stat">
                                <i class="fas fa-credit-card"></i>
                                <span class="stat-value">{{ course.credits }}</span>
                                <span class="stat-label">Crédits</span>
                            </div>
                            <div class="quick-stat">
                                <i class="fas fa-layer-group"></i>
                                <span class="stat-value">L{{ course.level.number }}</span>
                                <span class="stat-label">Niveau</span>
                            </div>
                        </div>
                         -->
                        <!-- Professeur assigné -->
                        <div class="course-schedule">
                            <i class="fas fa-user-tie"></i>
                            <span>{{ course.teacher.firstName }} {{ course.teacher.lastName }}</span>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="course-card-actions">
                        <button class="btn btn-orange course-action-btn action-btn unassign"
                                data-course-uuid="{{ course.uuid }}" 
                                data-course-name="{{ course.name }}"
                                title="Retirer l'assignation">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
        
        <!-- Message si aucun cours assigné -->
        {% if assigned_count == 0 %}
        <div class="no-courses-message">
            <div class="empty-state">
                <i class="fas fa-clipboard-list"></i>
                <h3>Aucun cours assigné</h3>
                <p>Commencez par assigner des cours à vos professeurs en utilisant le bouton "Assigner un Cours" ci-dessus.</p>
                <button class="btn btn-primary" id="open-assignment-modal-empty">
                    <i class="fas fa-plus"></i>
                    Assigner un Cours
                </button>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Belle modale d'assignation -->
<div class="assignment-modal hidden" id="assignment-modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-icon">
                <i class="fas fa-user-plus"></i>
            </div>
            <div class="modal-title-section">
                <h3 class="modal-title" id="modal-title">Assigner un Cours</h3>
                <p class="modal-subtitle">Sélectionnez un cours et assignez-le à un professeur</p>
            </div>
            <button class="modal-close" id="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="modal-body">
            <form class="assignment-form" id="assignment-form">
                <!-- Sélection du cours -->
                <div class="form-section">
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-book"></i>
                            Cours à assigner
                        </label>
                        <select class="form-select" id="course-select" required>
                            <option value="">Sélectionner un cours non assigné</option>
                            {% for course in courses %}
                                {% if not course.teacher %}
                                    <option value="{{ course.uuid }}" 
                                            data-code="{{ course.code }}" 
                                            data-name="{{ course.name }}"
                                            data-credits="{{ course.credits }}"
                                            data-department="{{ course.department.name }}">
                                        {{ course.code }} - {{ course.name }} ({{ course.credits }} crédits)
                                    </option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Détails du cours sélectionné -->
                    <div class="course-details hidden" id="course-details">
                        <div class="details-grid">
                            <div class="detail-item">
                                <span class="detail-label">Code:</span>
                                <span class="detail-value" id="detail-code">-</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Crédits:</span>
                                <span class="detail-value" id="detail-credits">-</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Département:</span>
                                <span class="detail-value" id="detail-department">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sélection du professeur -->
                <div class="form-section">
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-user-tie"></i>
                            Professeur à assigner
                        </label>
                        <select class="form-select" id="teacher-select" required>
                            <option value="">Sélectionner un professeur</option>
                            {% for teacher in teachers %}
                                <option value="{{ teacher.id }}" 
                                        data-name="{{ teacher.firstName }} {{ teacher.lastName }}"
                                        data-email="{{ teacher.email }}">
                                    {{ teacher.firstName }} {{ teacher.lastName }}
                                    {% if teacher.email %} - {{ teacher.email }}{% endif %}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Détails du professeur sélectionné -->
                    <div class="teacher-details hidden" id="teacher-details">
                        <div class="teacher-card">
                            <div class="teacher-avatar">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="teacher-info">
                                <div class="teacher-name" id="detail-teacher-name">-</div>
                                <div class="teacher-email" id="detail-teacher-email">-</div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        
        <div class="modal-footer">
            <button class="modal-btn secondary" id="modal-cancel">
                <i class="fas fa-times"></i>
                Annuler
            </button>
            <button class="modal-btn primary" id="modal-confirm" disabled>
                <i class="fas fa-check"></i>
                Confirmer l'Assignation
            </button>
        </div>
    </div>
</div>

<!-- Zone de notifications -->
<div id="notification-container"></div>

<!-- Belle modale de confirmation -->
<div class="confirmation-modal hidden" id="confirmation-modal">
    <div class="modal-overlay"></div>
    <div class="confirmation-content">
        <div class="confirmation-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="confirmation-body">
            <h3 class="confirmation-title">Confirmer la suppression</h3>
            <p class="confirmation-message" id="confirmation-message">
                Êtes-vous sûr de vouloir retirer l'assignation de ce cours ?
            </p>
        </div>
        <div class="confirmation-actions">
            <button class="confirmation-btn secondary" id="confirmation-cancel">
                <i class="fas fa-times"></i>
                Annuler
            </button>
            <button class="confirmation-btn danger" id="confirmation-confirm">
                <i class="fas fa-trash"></i>
                Confirmer
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/course-filters.js') }}"></script>
    <script src="{{ asset('js/course-assignment-modal.js') }}"></script>
    <script>
        // Configuration des routes pour le module d'assignation
        window.assignmentRoutes = {
            assign: '{{ path('app_teacher_course_assignment_assign') }}',
            unassign: '{{ path('app_teacher_course_assignment_unassign') }}',
            reassign: '{{ path('app_teacher_course_assignment_reassign') }}'
        };
    </script>
{% endblock %}