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

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

{# Configuration pour enseignant #}
{% set header_icon = 'fa-crown' %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '3' %}
{% set user_role = '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/course-assignment.css') }}">
{% endblock %}

{% block dashboard_content %}
<div class="assignment-container">
    <!-- En-tête du département -->
    <div class="assignment-header">
        <h1><i class="fas fa-building"></i> {{ department.name }}</h1>
        <p>Gestion des assignations de cours pour le département {{ department.name }} ({{ department.code }})</p>
    </div>

    <!-- Statistiques du département -->
    <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">{{ stats.total_courses }}</div>
                    <div class="stat-label">Total Cours</div>
                    <div class="stat-trend neutral">
                        <i class="fas fa-equals"></i>
                        Département
                    </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">{{ stats.assigned_courses }}</div>
                    <div class="stat-label">Cours Assignés</div>
                    <div class="stat-trend positive">
                        <i class="fas fa-arrow-up"></i>
                        {{ stats.assignment_rate }}% assignés
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ stats.assignment_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">{{ stats.unassigned_courses }}</div>
                    <div class="stat-label">Non Assignés</div>
                    <div class="stat-trend {{ stats.unassigned_courses > 0 ? 'negative' : 'positive' }}">
                        <i class="fas {{ stats.unassigned_courses > 0 ? 'fa-exclamation' : 'fa-check' }}"></i>
                        {{ stats.unassigned_courses > 0 ? 'À traiter' : 'Tous assignés' }}
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ 100 - stats.assignment_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">{{ stats.assignment_rate }}%</div>
                    <div class="stat-label">Taux d'Assignation</div>
                    <div class="stat-trend {{ stats.assignment_rate >= 80 ? 'positive' : (stats.assignment_rate >= 50 ? 'neutral' : 'negative') }}">
                        <i class="fas {{ stats.assignment_rate >= 80 ? 'fa-thumbs-up' : (stats.assignment_rate >= 50 ? 'fa-equals' : 'fa-thumbs-down') }}"></i>
                        {{ stats.assignment_rate >= 80 ? 'Excellent' : (stats.assignment_rate >= 50 ? 'Correct' : 'Améliorer') }}
                    </div>
                </div>
                <div class="stat-progress">
                    <div class="progress-bar" style="width: {{ stats.assignment_rate }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions rapides -->
    <div class="assignment-controls">
        <div class="controls-row">
            <div class="control-group">
                <label class="control-label">Actions rapides</label>
                <div style="display: flex; gap: 1rem;">
                    <button class="control-button" id="assign-all-btn">
                        <i class="fas fa-magic"></i>
                        Assignation Automatique
                    </button>
                    <a href="{{ path('app_teacher_course_assignment_index') }}" class="control-button" style="text-decoration: none;">
                        <i class="fas fa-arrow-left"></i>
                        Retour à la liste
                    </a>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">Filtrer par état</label>
                <select class="control-select" id="status-filter">
                    <option value="">Tous les cours</option>
                    <option value="assigned">Assignés</option>
                    <option value="unassigned">Non assignés</option>
                </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...">
            </div>
        </div>
    </div>

    <!-- Tableau détaillé des cours -->
    <div class="courses-table-container">
        <table class="courses-table" id="courses-table">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Nom du Cours</th>
                    <th>Niveau</th>
                    <th>Semestre</th>
                    <th>Crédits</th>
                    <th>Unité d'Enseignement</th>
                    <th>Professeur Assigné</th>
                    <th>État</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for course in courses %}
                <tr data-course-id="{{ course.id }}" data-status="{{ course.teacher ? 'assigned' : 'unassigned' }}">
                    <td><strong>{{ course.code }}</strong></td>
                    <td>
                        <div>
                            <strong>{{ course.name }}</strong>
                            {% if course.description %}
                                <br><small class="text-muted">{{ course.description|length > 60 ? course.description|slice(0, 60) ~ '...' : course.description }}</small>
                            {% endif %}
                        </div>
                    </td>
                    <td>{{ course.level.name }}</td>
                    <td>{{ course.semester.name }}</td>
                    <td>
                        <span class="badge badge-info">{{ course.credits }} ECTS</span>
                    </td>
                    <td>
                        {% if course.teachingUnit %}
                            {{ course.teachingUnit.name }}
                        {% else %}
                            <em class="text-muted">Non définie</em>
                        {% endif %}
                    </td>
                    <td>
                        {% if course.teacher %}
                            <div class="teacher-info">
                                <strong>{{ course.teacher.firstName }} {{ course.teacher.lastName }}</strong>
                                <br><small class="text-muted">{{ course.teacher.email }}</small>
                            </div>
                        {% else %}
                            <em class="text-muted">Non assigné</em>
                        {% endif %}
                    </td>
                    <td>
                        {% if course.teacher %}
                            <span class="assignment-status assigned">
                                <span class="status-dot"></span>
                                Assigné
                            </span>
                        {% else %}
                            <span class="assignment-status unassigned">
                                <span class="status-dot"></span>
                                Non assigné
                            </span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="action-buttons">
                            {% if course.teacher %}
                                <button class="action-btn reassign" title="Réassigner" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}">
                                    <i class="fas fa-exchange-alt"></i>
                                </button>
                                <button class="action-btn unassign" title="Désassigner" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}">
                                    <i class="fas fa-times"></i>
                                </button>
                            {% else %}
                                <button class="action-btn assign" title="Assigner" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}">
                                    <i class="fas fa-plus"></i>
                                </button>
                            {% endif %}
                            <button class="action-btn view" title="Détails du cours" data-course-id="{{ course.id }}">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal d'assignation -->
<div class="assignment-modal hidden" id="assignment-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">Assigner un cours</h3>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <form class="modal-form" id="assignment-form">
            <div class="form-group">
                <label class="form-label">Cours</label>
                <input type="text" class="form-input" id="course-name" readonly>
                <input type="hidden" id="course-id">
            </div>
            <div class="form-group">
                <label class="form-label">Professeur</label>
                <select class="form-select" id="teacher-select" required>
                    <option value="">Sélectionner un professeur</option>
                    {% for teacher in available_teachers %}
                        <option value="{{ teacher.id }}">
                            {{ teacher.firstName }} {{ teacher.lastName }}
                            {% if teacher.email %}
                                ({{ teacher.email }})
                            {% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </form>
        <div class="modal-actions">
            <button class="modal-btn secondary" id="modal-cancel">Annuler</button>
            <button class="modal-btn primary" id="modal-confirm">Confirmer</button>
        </div>
    </div>
</div>

<!-- Zone de notifications -->
<div id="notification-container"></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Configuration des routes
        const routes = {
            assign: '{{ path('app_teacher_course_assignment_assign') }}',
            unassign: '{{ path('app_teacher_course_assignment_unassign') }}',
            reassign: '{{ path('app_teacher_course_assignment_reassign') }}'
        };

        // Données des cours et professeurs
        const coursesData = {{ courses|json_encode|raw }};
        const teachersData = {{ available_teachers|json_encode|raw }};

        // Initialisation
        document.addEventListener('DOMContentLoaded', function() {
            initDepartmentDetail();
        });

        function initDepartmentDetail() {
            setupFilters();
            setupModals();
            setupActions();
        }

        function setupFilters() {
            const statusFilter = document.getElementById('status-filter');
            const searchInput = document.getElementById('search-input');

            [statusFilter, searchInput].forEach(element => {
                element.addEventListener('change', filterCourses);
                element.addEventListener('input', filterCourses);
            });
        }

        function filterCourses() {
            const statusFilter = document.getElementById('status-filter').value;
            const searchTerm = document.getElementById('search-input').value.toLowerCase();
            
            const rows = document.querySelectorAll('#courses-table tbody tr');
            
            rows.forEach(row => {
                const status = row.dataset.status;
                const text = row.textContent.toLowerCase();
                
                const matchesStatus = !statusFilter || status === statusFilter;
                const matchesSearch = !searchTerm || text.includes(searchTerm);
                
                row.style.display = matchesStatus && matchesSearch ? '' : 'none';
            });
        }

        function setupModals() {
            const modal = document.getElementById('assignment-modal');
            const closeBtn = document.getElementById('modal-close');
            const cancelBtn = document.getElementById('modal-cancel');

            [closeBtn, cancelBtn].forEach(btn => {
                btn.addEventListener('click', () => {
                    modal.classList.add('hidden');
                });
            });

            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });
        }

        function setupActions() {
            document.addEventListener('click', (e) => {
                if (e.target.closest('.action-btn.assign')) {
                    const btn = e.target.closest('.action-btn');
                    openAssignModal(btn.dataset.courseId, btn.dataset.courseName);
                } else if (e.target.closest('.action-btn.reassign')) {
                    const btn = e.target.closest('.action-btn');
                    openReassignModal(btn.dataset.courseId, btn.dataset.courseName);
                } else if (e.target.closest('.action-btn.unassign')) {
                    const btn = e.target.closest('.action-btn');
                    unassignCourse(btn.dataset.courseId, btn.dataset.courseName);
                }
            });

            document.getElementById('modal-confirm').addEventListener('click', confirmAssignment);
        }

        function openAssignModal(courseId, courseName) {
            document.getElementById('modal-title').textContent = 'Assigner un cours';
            document.getElementById('course-name').value = courseName;
            document.getElementById('course-id').value = courseId;
            document.getElementById('teacher-select').value = '';
            
            document.getElementById('assignment-modal').classList.remove('hidden');
        }

        function openReassignModal(courseId, courseName) {
            document.getElementById('modal-title').textContent = 'Réassigner un cours';
            document.getElementById('course-name').value = courseName;
            document.getElementById('course-id').value = courseId;
            document.getElementById('teacher-select').value = '';
            
            document.getElementById('assignment-modal').classList.remove('hidden');
        }

        function confirmAssignment() {
            const courseId = document.getElementById('course-id').value;
            const teacherId = document.getElementById('teacher-select').value;
            const isReassign = document.getElementById('modal-title').textContent.includes('Réassigner');

            if (!teacherId) {
                showNotification('Veuillez sélectionner un professeur', 'error');
                return;
            }

            const url = isReassign ? routes.reassign : routes.assign;
            const data = new FormData();
            data.append('course_id', courseId);
            data.append(isReassign ? 'new_teacher_id' : 'teacher_id', teacherId);

            fetch(url, {
                method: 'POST',
                body: data
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showNotification(result.message, 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showNotification(result.message, 'error');
                }
                document.getElementById('assignment-modal').classList.add('hidden');
            })
            .catch(error => {
                showNotification('Erreur lors de l\'assignation', 'error');
                console.error('Error:', error);
            });
        }

        function unassignCourse(courseId, courseName) {
            if (!confirm(`Êtes-vous sûr de vouloir désassigner le cours "${courseName}" ?`)) {
                return;
            }

            const data = new FormData();
            data.append('course_id', courseId);

            fetch(routes.unassign, {
                method: 'POST',
                body: data
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showNotification(result.message, 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showNotification(result.message, 'error');
                }
            })
            .catch(error => {
                showNotification('Erreur lors de la désassignation', 'error');
                console.error('Error:', error);
            });
        }

        function showNotification(message, type) {
            const container = document.getElementById('notification-container');
            const notification = document.createElement('div');
            notification.className = `assignment-notification ${type}`;
            notification.textContent = message;
            
            container.appendChild(notification);
            
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);
            
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    container.removeChild(notification);
                }, 300);
            }, 4000);
        }
    </script>
{% endblock %}