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

{% block title %}Activation des Semestres{% endblock %}

{% block dashboard_content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-calendar-alt"></i>
                            Activation des Semestres
                        </h3>
                    </div>
                    <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 aux cours de ce semestre.
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Semestre</th>
                                        <th>Période</th>
                                        <th>Statut</th>
                                        <th>Étudiants inscrits</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for semester in semesters %}
                                        <tr data-semester-uuid="{{ semester.uuid }}">
                                            <td>
                                                <strong>Semestre {{ semester.number }}</strong>
                                                <br>
                                                <small class="text-muted">{{ semester.description }}</small>
                                            </td>
                                            <td>
                                                {{ semester.startDate|date('d/m/Y') }} - {{ semester.endDate|date('d/m/Y') }}
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ semester.status == 'ongoing' ? 'success' : 'secondary' }}">
                                                    {{ semester.status == 'ongoing' ? 'Actif' : 'Inactif' }}
                                                </span>
                                            </td>
                                            <td class="enrolled-count">
                                                <i class="fas fa-spinner fa-spin"></i>
                                            </td>
                                            <td>
                                                {% if semester.status != 'ongoing' %}
                                                    <button class="btn btn-primary btn-sm activate-semester" 
                                                            data-semester-uuid="{{ semester.uuid }}">
                                                        <i class="fas fa-play"></i>
                                                        Activer
                                                    </button>
                                                {% else %}
                                                    <button class="btn btn-success btn-sm" disabled>
                                                        <i class="fas fa-check"></i>
                                                        Actif
                                                    </button>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Fonction pour charger le statut des semestres
            function loadSemesterStatuses() {
                document.querySelectorAll('[data-semester-uuid]').forEach(row => {
                    const uuid = row.dataset.semesterUuid;
                    fetch(`/admin/semester/status/${uuid}`)
                        .then(response => response.json())
                        .then(data => {
                            const countCell = row.querySelector('.enrolled-count');
                            countCell.textContent = data.enrolled_count;
                        })
                        .catch(error => console.error('Erreur:', error));
                });
            }

            // Charger les statuts au chargement de la page
            loadSemesterStatuses();

            // Gestion de l'activation des semestres
            document.querySelectorAll('.activate-semester').forEach(button => {
                button.addEventListener('click', function() {
                    const uuid = this.dataset.semesterUuid;
                    const row = this.closest('tr');
                    
                    if (!confirm('Êtes-vous sûr de vouloir activer ce semestre ? Cela désactivera tous les autres semestres.')) {
                        return;
                    }

                    // Désactiver le bouton pendant le traitement
                    this.disabled = true;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Activation...';

                    fetch(`/admin/semester/activate/${uuid}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Afficher le message de succès
                            showNotification(data.message, 'success');
                            
                            // Recharger la page pour mettre à jour l'interface
                            setTimeout(() => window.location.reload(), 2000);
                        } else {
                            showNotification(data.error || 'Erreur lors de l\'activation', 'error');
                            this.disabled = false;
                            this.innerHTML = '<i class="fas fa-play"></i> Activer';
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        showNotification('Erreur de connexion', 'error');
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-play"></i> Activer';
                    });
                });
            });

            // Fonction d'aide pour les notifications
            function showNotification(message, type) {
                const notification = document.createElement('div');
                notification.className = `alert alert-${type} alert-dismissible fade show`;
                notification.innerHTML = `
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                
                document.querySelector('.card-body').insertBefore(
                    notification,
                    document.querySelector('.alert-info')
                );

                // Auto-fermeture après 5 secondes
                setTimeout(() => {
                    notification.remove();
                }, 5000);
            }
        });
    </script>
{% endblock %}