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

{% block title %}Paramètres{% endblock %}

{# Configuration spécifique à l'admin #}
{% set header_icon = 'fa-user-shield' %}
{% set header_title = 'Centre Informatique - Administration' %}
{% set notification_count = '5' %}
{% set user_role = 'Administrateur' %}
{% set offcanvas_title = 'AdminPortal' %}
{% set notifications_url = '#' %}

{% block dashboard_content %}
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="h3 mb-0">
                        <i class="fas fa-cogs text-primary"></i>
                        Paramètres
                    </h1>
                </div>
            </div>
        </div>

        {# Affichage des messages flash #}
        <div class="row mb-4">
            <div class="col-12">
                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                            {{ message|raw }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>

        {# Onglets de navigation #}
        <div class="row mb-4">
            <div class="col-12">
                <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="semesters-tab" data-bs-toggle="tab" data-bs-target="#semesters" type="button" role="tab">
                            <i class="fas fa-calendar-alt me-2"></i>Semestres
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                            <i class="fas fa-sliders-h me-2"></i>Configuration Générale
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab">
                            <i class="fas fa-users me-2"></i>Utilisateurs
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance" type="button" role="tab">
                            <i class="fas fa-database me-2"></i>Maintenance
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs" type="button" role="tab">
                            <i class="fas fa-history me-2"></i>Journal
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        {# Contenu des onglets #}
        <div class="tab-content" id="settingsTabsContent">
            {# Onglet Semestres #}
            <div class="tab-pane fade show active" id="semesters" role="tabpanel">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            L'activation d'un semestre déclenchera automatiquement l'inscription des étudiants éligibles.
                        </div>

                        {# Filtre par année scolaire #}
                        <div class="mb-4">
                            <label for="academicYearFilter" class="form-label">Filtrer par année scolaire</label>
                            <select class="form-select" id="academicYearFilter">
                                <option value="">Toutes les années</option>
                                {% for year in academicYears %}
                                    <option value="{{ year.year }}">{{ year.year }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="row" id="semestersContainer">
                            {% for academicYear, yearSemesters in semesters %}
                                <div class="academic-year-group" data-academic-year="{{ academicYear }}">
                                    <h4 class="mb-3">{{ academicYear }}</h4>
                                    <div class="row">
                                        {% for semester in yearSemesters %}
                                            <div class="col-md-6 col-lg-4 mb-4">
                                                <div class="semester-card">
                                                    <div class="semester-header">
                                                        <h5 class="mb-2">Semestre {{ semester.number }}</h5>
                                                        <p class="text-muted mb-0">{{ semester.description }}</p>
                                                        <span class="semester-status {{ semester.status == 'ongoing' ? 'active' : 'inactive' }}">
                                                            {{ semester.status == 'ongoing' ? 'Actif' : 'Inactif' }}
                                                        </span>
                                                    </div>
                                                    <div class="semester-body">
                                                        <div class="semester-info">
                                                            <div class="semester-info-item">
                                                                <i class="fas fa-calendar"></i>
                                                                <span>{{ semester.startDate }} - {{ semester.endDate }}</span>
                                                            </div>
                                                            <div class="semester-info-item">
                                                                <i class="fas fa-users"></i>
                                                                <span>{{ semester.enrolledCount }} étudiants inscrits</span>
                                                            </div>
                                                            <div class="semester-info-item">
                                                                <i class="fas fa-book"></i>
                                                                <span>{{ semester.courseCount }} cours</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="semester-footer">
                                                        <div class="semester-stats">
                                                            <div class="stat-item">
                                                                <div class="stat-value">{{ semester.eligibleStudents }}</div>
                                                                <div class="stat-label">Inscrits</div>
                                                            </div>
                                                            <div class="stat-item">
                                                                <div class="stat-value">{{ semester.activeTeachers }}</div>
                                                                <div class="stat-label">Enseignants</div>
                                                            </div>
                                                        </div>
                                                        <div class="semester-actions">
                                                            {% if semester.status != 'ongoing' %}
                                                                <button class="btn btn-primary activate-semester me-2" 
                                                                        data-semester-id="{{ semester.id }}"
                                                                        data-semester-number="{{ semester.number }}"
                                                                        data-semester-period="{{ semester.startDate }} - {{ semester.endDate }}"
                                                                        data-eligible-students="{{ semester.eligibleStudents }}">
                                                                    <i class="fas fa-play me-2"></i>Activer
                                                                </button>
                                                                <button class="btn btn-warning edit-semester" 
                                                                        data-semester-id="{{ semester.id }}"
                                                                        data-semester-number="{{ semester.number }}"
                                                                        data-start-date="{{ semester.startDate }}"
                                                                        data-end-date="{{ semester.endDate }}">
                                                                    <i class="fas fa-edit me-2"></i>Modifier
                                                                </button>
                                                            {% else %}
                                                                <button class="btn btn-success" disabled>
                                                                    <i class="fas fa-check me-2"></i>Actif
                                                                </button>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            {# Onglet Configuration Générale #}
            <div class="tab-pane fade" id="general" role="tabpanel">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <form id="generalSettingsForm">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mb-3">Paramètres Académiques</h5>
                                    <div class="mb-3">
                                        <label class="form-label">Seuil de réussite (%)</label>
                                        <input type="number" class="form-control" name="passing_threshold" min="0" max="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Note maximale</label>
                                        <input type="number" class="form-control" name="max_grade" min="0" max="100">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-3">Paramètres Système</h5>
                                    <div class="mb-3">
                                        <label class="form-label">Délai d'inscription (jours)</label>
                                        <input type="number" class="form-control" name="enrollment_deadline" min="1">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Délai de modification des notes (jours)</label>
                                        <input type="number" class="form-control" name="grade_modification_deadline" min="1">
                                    </div>
                                </div>
                            </div>
                            <div class="text-end mt-3">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Enregistrer
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {# Onglet Utilisateurs #}
            <div class="tab-pane fade" id="users" role="tabpanel">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-3">
                            <h5 class="mb-0">Gestion des Utilisateurs</h5>
                            <button class="btn btn-primary" id="addUserBtn">
                                <i class="fas fa-plus me-2"></i>Nouvel Utilisateur
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover" id="usersTable">
                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Email</th>
                                        <th>Rôle</th>
                                        <th>Statut</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {# Le contenu sera chargé via AJAX #}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {# Onglet Maintenance #}
            <div class="tab-pane fade" id="maintenance" role="tabpanel">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <i class="fas fa-database text-primary me-2"></i>
                                            Sauvegarde
                                        </h5>
                                        <p class="text-muted">Dernière sauvegarde : <span id="lastBackupDate">-</span></p>
                                        <button class="btn btn-primary" id="backupBtn">
                                            <i class="fas fa-download me-2"></i>Créer une sauvegarde
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <i class="fas fa-broom text-warning me-2"></i>
                                            Nettoyage
                                        </h5>
                                        <p class="text-muted">Espace disque utilisé : <span id="diskUsage">-</span></p>
                                        <button class="btn btn-warning" id="cleanupBtn">
                                            <i class="fas fa-broom me-2"></i>Nettoyer le cache
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Onglet Journal #}
            <div class="tab-pane fade" id="logs" role="tabpanel">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-3">
                            <h5 class="mb-0">Journal d'Activité</h5>
                            <div class="btn-group">
                                <button class="btn btn-outline-secondary" id="refreshLogsBtn">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button class="btn btn-outline-secondary" id="exportLogsBtn">
                                    <i class="fas fa-download"></i>
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover" id="logsTable">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Utilisateur</th>
                                        <th>Action</th>
                                        <th>Détails</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {# Le contenu sera chargé via AJAX #}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Modal pour l'ajout/modification d'utilisateur #}
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Utilisateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="mb-3">
                            <label class="form-label">Nom</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Rôle</label>
                            <select class="form-select" name="role" required>
                                <option value="ROLE_ADMIN">Administrateur</option>
                                <option value="ROLE_TEACHER">Enseignant</option>
                                <option value="ROLE_STUDENT">Étudiant</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

    {# Modal d'avertissement pour l'activation du semestre #}
    <div class="modal fade" id="semesterActivationModal" tabindex="-1" aria-labelledby="semesterActivationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="semesterActivationModalLabel">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                        Confirmation d'activation
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <h6 class="alert-heading">Attention !</h6>
                        <p class="mb-0">L'activation de ce semestre va :</p>
                        <ul class="mb-0 mt-2">
                            <li>Inscrire automatiquement tous les étudiants éligibles</li>
                            <li>Désactiver le semestre précédent</li>
                            <li>Cette action est irréversible</li>
                        </ul>
                    </div>
                    <div class="semester-details mt-3">
                        <h6>Détails du semestre :</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1"><strong>Semestre :</strong> <span id="modalSemesterNumber"></span></p>
                                <p class="mb-1"><strong>Période :</strong> <span id="modalSemesterPeriod"></span></p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1"><strong>Étudiants inscrits :</strong> <span id="modalEligibleStudents"></span></p>
                                <p class="mb-1"><strong>Statut actuel :</strong> <span id="modalCurrentStatus"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary" id="confirmActivationBtn">
                        <i class="fas fa-check me-2"></i>Confirmer l'activation
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# Modal de modification du semestre #}
    <div class="modal fade" id="editSemesterModal" tabindex="-1" aria-labelledby="editSemesterModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editSemesterModalLabel">Modifier le semestre</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editSemesterForm">
                        <input type="hidden" id="editSemesterId" name="semesterId">
                        <div class="mb-3">
                            <label for="editStartDate" class="form-label">Date de début</label>
                            <input type="date" class="form-control" id="editStartDate" name="startDate" required>
                        </div>
                        <div class="mb-3">
                            <label for="editEndDate" class="form-label">Date de fin</label>
                            <input type="date" class="form-control" id="editEndDate" name="endDate" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary" id="saveSemesterChanges">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --border-color: #dee2e6;
            --hover-bg: #f8f9fa;
            --active-color: #0d6efd;
            --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        [data-bs-theme="dark"] {
            --text-primary: #e9ecef;
            --text-secondary: #adb5bd;
            --bg-primary: #212529;
            --bg-secondary: #343a40;
            --border-color: #495057;
            --hover-bg: #343a40;
            --active-color: #0d6efd;
            --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
        }

        .nav-tabs {
            border-bottom: 1px solid var(--border-color);
        }

        .nav-tabs .nav-link {
            color: var(--text-secondary);
            border: none;
            padding: 0.75rem 1.25rem;
            font-weight: 500;
            background: transparent;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--active-color);
            border-bottom: 2px solid var(--active-color);
            background: transparent;
        }
        
        .nav-tabs .nav-link:hover {
            border-color: transparent;
            color: var(--active-color);
            background: var(--hover-bg);
        }

        .card {
            background-color: var(--bg-primary);
            border-color: var(--border-color);
            transition: transform 0.2s ease-in-out;
            box-shadow: var(--card-shadow);
        }

        .card-body {
            color: var(--text-primary);
        }

        .table {
            color: var(--text-primary);
        }

        .table thead th {
            border-bottom-color: var(--border-color);
            color: var(--text-secondary);
        }

        .table td {
            border-top-color: var(--border-color);
        }

        .form-control, .form-select {
            background-color: var(--bg-primary);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .form-control:focus, .form-select:focus {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }

        .form-label {
            color: var(--text-primary);
        }

        .text-muted {
            color: var(--text-secondary) !important;
        }

        .modal-content {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }

        .modal-header {
            border-bottom-color: var(--border-color);
        }

        .modal-footer {
            border-top-color: var(--border-color);
        }

        .btn {
            transition: all 0.2s ease-in-out;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-outline-primary {
            color: var(--active-color);
            border-color: var(--active-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--active-color);
            color: #fff;
        }

        .alert {
            background-color: var(--bg-primary);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .alert-info {
            background-color: rgba(13, 110, 253, 0.1);
            border-color: rgba(13, 110, 253, 0.2);
            color: var(--active-color);
        }

        .badge {
            font-weight: 500;
        }

        .badge.bg-success {
            background-color: #198754 !important;
        }

        .badge.bg-danger {
            background-color: #dc3545 !important;
        }

        .badge.bg-secondary {
            background-color: #6c757d !important;
        }

        [data-bs-theme="dark"] .badge.bg-success {
            background-color: #2ea043 !important;
        }

        [data-bs-theme="dark"] .badge.bg-danger {
            background-color: #f85149 !important;
        }

        [data-bs-theme="dark"] .badge.bg-secondary {
            background-color: #8b949e !important;
        }

        /* Styles spécifiques pour les notifications */
        .alert-dismissible {
            background-color: var(--bg-primary);
            border-color: var(--border-color);
            color: var(--text-primary);
            box-shadow: var(--card-shadow);
        }

        .alert-success {
            background-color: rgba(25, 135, 84, 0.1);
            border-color: rgba(25, 135, 84, 0.2);
            color: #198754;
        }

        .alert-error {
            background-color: rgba(220, 53, 69, 0.1);
            border-color: rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }

        [data-bs-theme="dark"] .alert-success {
            background-color: rgba(46, 160, 67, 0.2);
            border-color: rgba(46, 160, 67, 0.3);
            color: #2ea043;
        }

        [data-bs-theme="dark"] .alert-error {
            background-color: rgba(248, 81, 73, 0.2);
            border-color: rgba(248, 81, 73, 0.3);
            color: #f85149;
        }

        /* Styles spécifiques pour les cartes de semestre */
        .semester-card {
            background-color: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            height: 100%;
        }

        .semester-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-shadow);
        }

        .semester-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .semester-status {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .semester-status.active {
            background-color: rgba(25, 135, 84, 0.1);
            color: #198754;
        }

        .semester-status.inactive {
            background-color: rgba(108, 117, 125, 0.1);
            color: var(--text-secondary);
        }

        .semester-body {
            padding: 1.5rem;
        }

        .semester-info {
            margin-bottom: 1rem;
        }

        .semester-info-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            color: var(--text-secondary);
        }

        .semester-info-item i {
            width: 1.5rem;
            margin-right: 0.5rem;
            color: var(--active-color);
        }

        .semester-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .semester-stats {
            display: flex;
            gap: 1rem;
        }

        .semester-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .semester-actions .btn {
            white-space: nowrap;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        [data-bs-theme="dark"] .semester-status.active {
            background-color: rgba(46, 160, 67, 0.2);
            color: #2ea043;
        }

        [data-bs-theme="dark"] .semester-status.inactive {
            background-color: rgba(173, 181, 189, 0.1);
            color: #adb5bd;
        }
    </style>

    {% block javascripts %}
        {{ parent() }}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Chargement initial des données
                loadSemesters();
                loadGeneralSettings();
                loadUsers();
                loadLogs();
                loadMaintenanceInfo();

                // Gestion des onglets
                document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(tab => {
                    tab.addEventListener('shown.bs.tab', function (e) {
                        const target = e.target.getAttribute('data-bs-target');
                        switch(target) {
                            case '#semesters':
                                loadSemesters();
                                break;
                            case '#users':
                                loadUsers();
                                break;
                            case '#logs':
                                loadLogs();
                                break;
                            case '#maintenance':
                                loadMaintenanceInfo();
                                break;
                        }
                    });
                });

                // Fonctions de chargement des données
                function loadSemesters() {
                    // Récupérer l'année sélectionnée
                    const selectedYear = document.getElementById('academicYearFilter').value;
                    const url = selectedYear ? `/admin/settings?year=${selectedYear}` : '/admin/settings';

                    fetch(url)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Erreur lors du chargement des semestres');
                            }
                            return response.text();
                        })
                        .then(html => {
                            // Mettre à jour le contenu de la page
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(html, 'text/html');
                            const newContainer = doc.querySelector('#semestersContainer');
                            const currentContainer = document.querySelector('#semestersContainer');
                            
                            if (newContainer && currentContainer) {
                                currentContainer.innerHTML = newContainer.innerHTML;
                                
                                // Réattacher les gestionnaires d'événements
                                attachEventHandlers();
                            }
                        })
                        .catch(error => {
                            console.error('Erreur:', error);
                            showNotification('Erreur lors du chargement des semestres', 'error');
                        });
                }

                // Fonction pour attacher les gestionnaires d'événements
                function attachEventHandlers() {
                    // Gestionnaire pour les boutons d'activation
                    document.querySelectorAll('.activate-semester').forEach(button => {
                        button.addEventListener('click', function() {
                            // Remplir les informations dans la modal
                            document.getElementById('modalSemesterNumber').textContent = `Semestre ${this.dataset.semesterNumber}`;
                            document.getElementById('modalSemesterPeriod').textContent = this.dataset.semesterPeriod;
                            document.getElementById('modalEligibleStudents').textContent = this.dataset.eligibleStudents;
                            document.getElementById('modalCurrentStatus').textContent = 'Inactif';
                            
                            // Stocker l'ID du semestre pour l'activation
                            document.getElementById('confirmActivationBtn').dataset.semesterId = this.dataset.semesterId;
                            
                            // Initialiser et afficher la modale
                            const modalElement = document.getElementById('semesterActivationModal');
                            if (modalElement) {
                                const modal = new bootstrap.Modal(modalElement);
                                modal.show();
                            } else {
                                console.error('Modal element not found');
                            }
                        });
                    });

                    // Gestionnaire pour les boutons de modification
                    document.querySelectorAll('.edit-semester').forEach(button => {
                        button.addEventListener('click', function() {
                            const semesterId = this.dataset.semesterId;
                            const semesterNumber = this.dataset.semesterNumber;
                            const startDate = this.dataset.startDate.split('/').reverse().join('-');
                            const endDate = this.dataset.endDate.split('/').reverse().join('-');
                            
                            document.getElementById('editSemesterModalLabel').textContent = `Modifier le semestre ${semesterNumber}`;
                            document.getElementById('editSemesterId').value = semesterId;
                            document.getElementById('editStartDate').value = startDate;
                            document.getElementById('editEndDate').value = endDate;
                            
                            const modalElement = document.getElementById('editSemesterModal');
                            const modal = new bootstrap.Modal(modalElement);
                            modal.show();
                        });
                    });
                }

                function loadGeneralSettings() {
                    fetch('/admin/settings/general')
                        .then(response => response.json())
                        .then(data => {
                            Object.entries(data).forEach(([key, value]) => {
                                const input = document.querySelector(`[name="${key}"]`);
                                if (input) input.value = value;
                            });
                        });
                }

                function loadUsers() {
                    fetch('/admin/settings/users')
                        .then(response => response.json())
                        .then(data => {
                            const tbody = document.querySelector('#usersTable tbody');
                            tbody.innerHTML = data.map(user => `
                                <tr>
                                    <td>${user.name}</td>
                                    <td>${user.email}</td>
                                    <td>${user.role}</td>
                                    <td>
                                        <span class="badge bg-${user.status === 'active' ? 'success' : 'danger'}">
                                            ${user.status}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary edit-user" data-user-id="${user.id}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger delete-user" data-user-id="${user.id}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            `).join('');
                        });
                }

                function loadLogs() {
                    fetch('/admin/settings/logs')
                        .then(response => response.json())
                        .then(data => {
                            const tbody = document.querySelector('#logsTable tbody');
                            tbody.innerHTML = data.map(log => `
                                <tr>
                                    <td>${log.date}</td>
                                    <td>${log.user}</td>
                                    <td>${log.action}</td>
                                    <td>${log.details}</td>
                                </tr>
                            `).join('');
                        });
                }

                function loadMaintenanceInfo() {
                    fetch('/admin/settings/maintenance-info')
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('lastBackupDate').textContent = data.lastBackup;
                            document.getElementById('diskUsage').textContent = data.diskUsage;
                        });
                }

                // Gestionnaires d'événements
                document.getElementById('generalSettingsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    fetch('/admin/settings/general', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification('Paramètres enregistrés avec succès', 'success');
                        } else {
                            showNotification('Erreur lors de l\'enregistrement', 'error');
                        }
                    });
                });

                document.getElementById('addUserBtn').addEventListener('click', function() {
                    const modal = new bootstrap.Modal(document.getElementById('userModal'));
                    modal.show();
                });

                document.getElementById('saveUserBtn').addEventListener('click', function() {
                    const formData = new FormData(document.getElementById('userForm'));
                    fetch('/admin/settings/users', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
                            loadUsers();
                            showNotification('Utilisateur enregistré avec succès', 'success');
                        } else {
                            showNotification('Erreur lors de l\'enregistrement', 'error');
                        }
                    });
                });

                document.getElementById('backupBtn').addEventListener('click', function() {
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Création en cours...';
                    fetch('/admin/settings/backup', { method: 'POST' })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showNotification('Sauvegarde créée avec succès', 'success');
                                loadMaintenanceInfo();
                            } else {
                                showNotification('Erreur lors de la sauvegarde', 'error');
                            }
                            this.disabled = false;
                            this.innerHTML = '<i class="fas fa-download me-2"></i>Créer une sauvegarde';
                        });
                });

                document.getElementById('cleanupBtn').addEventListener('click', function() {
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Nettoyage en cours...';
                    fetch('/admin/settings/cleanup', { method: 'POST' })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showNotification('Cache nettoyé avec succès', 'success');
                                loadMaintenanceInfo();
                            } else {
                                showNotification('Erreur lors du nettoyage', 'error');
                            }
                            this.disabled = false;
                            this.innerHTML = '<i class="fas fa-broom me-2"></i>Nettoyer le cache';
                        });
                });

                // Gestionnaire d'événement pour le bouton de confirmation d'activation
                document.getElementById('confirmActivationBtn').addEventListener('click', function() {
                    const semesterId = this.dataset.semesterId;
                    const button = this;
                    
                    button.disabled = true;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Activation en cours...';
                    
                    console.log('Tentative d\'activation du semestre:', semesterId);
                    
                    fetch(`/admin/settings/semester/${semesterId}/activate`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    })
                    .then(response => {
                        console.log('Réponse brute:', response);
                        console.log('Status:', response.status);
                        
                        // Vérifier si la réponse est OK
                        if (!response.ok) {
                            return response.text().then(text => {
                                console.error('Réponse d\'erreur:', text);
                                throw new Error(`Erreur HTTP: ${response.status} - ${text}`);
                            });
                        }
                        
                        // Vérifier le type de contenu
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            throw new TypeError("La réponse n'est pas au format JSON");
                        }
                        
                        return response.json();
                    })
                    .then(data => {
                        console.log('Traitement des données:', data);
                        if (data.success) {
                            // Afficher les messages de débogage dans la console
                            if (data.debug_messages) {
                                console.group('Messages de débogage');
                                data.debug_messages.forEach(message => {
                                    console.log(message);
                                });
                                console.groupEnd();
                            }

                            const modalElement = document.getElementById('semesterActivationModal');
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            }
                            showNotification(data.message, 'success');
                            // Actualiser la page après un court délai
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        } else {
                            console.error('Erreur lors de l\'activation:', data.message);
                            showNotification(data.message || 'Erreur lors de l\'activation', 'error');
                            button.disabled = false;
                            button.innerHTML = '<i class="fas fa-check me-2"></i>Confirmer l\'activation';
                        }
                    })
                    .catch(error => {
                        console.error('Erreur détaillée:', error);
                        showNotification('Erreur lors de l\'activation du semestre: ' + error.message, 'error');
                        button.disabled = false;
                        button.innerHTML = '<i class="fas fa-check me-2"></i>Confirmer l\'activation';
                    });
                });

                // Fonction pour gérer la fermeture de la modale
                function handleModalHidden() {
                    // Supprimer le backdrop manuellement si nécessaire
                    const backdrop = document.querySelector('.modal-backdrop');
                    if (backdrop) {
                        backdrop.remove();
                    }
                    
                    // Réactiver le défilement de la page
                    document.body.classList.remove('modal-open');
                    document.body.style.overflow = '';
                    document.body.style.paddingRight = '';
                }

                // Gestionnaire pour le bouton Enregistrer
                document.getElementById('saveSemesterChanges').addEventListener('click', function() {
                    const semesterId = document.getElementById('editSemesterId').value;
                    const startDate = document.getElementById('editStartDate').value;
                    const endDate = document.getElementById('editEndDate').value;

                    fetch(`/admin/semester/${semesterId}/update`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            startDate: startDate,
                            endDate: endDate
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Fermer la modale proprement
                            const modalElement = document.getElementById('editSemesterModal');
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            }
                            
                            // Afficher un message de succès
                            showNotification(data.message, 'success');
                            
                            // Recharger la page après un court délai
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        } else {
                            // Afficher un message d'erreur
                            showNotification(data.message, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showNotification('Une erreur est survenue', 'error');
                    });
                });

                // Fonction d'aide pour les notifications
                function showNotification(message, type) {
                    const notification = document.createElement('div');
                    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
                    notification.style.zIndex = '9999';
                    notification.innerHTML = `
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    `;
                    document.body.appendChild(notification);
                    setTimeout(() => notification.remove(), 5000);
                }

                // Gestionnaire pour le filtre d'année scolaire
                document.getElementById('academicYearFilter').addEventListener('change', function() {
                    const selectedYear = this.value;
                    // Rediriger vers la même page avec le paramètre year
                    window.location.href = `/admin/settings${selectedYear ? '?year=' + selectedYear : ''}`;
                });

                // Sélectionner l'année dans le select si elle est présente dans l'URL
                const urlParams = new URLSearchParams(window.location.search);
                const yearParam = urlParams.get('year');
                if (yearParam) {
                    document.getElementById('academicYearFilter').value = yearParam;
                }
            });
        </script>
    {% endblock %}
{% endblock %}