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

{% block title %}Dashboard Étudiant - Notes CI{% endblock %}

{# Configuration pour étudiant #}
{% set header_icon = 'fa-graduation-cap' %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '2' %}
{% set user_role = 'Étudiant' %}
{% set offcanvas_title = 'ÉtudiantPortal' %}
{% set notifications_url = path('app_notifications') %}

{% block dashboard_content %}
    <div class="container-fluid">
        <!-- En-tête de la page -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0">🎓 Dashboard Étudiant</h1>
                <p class="text-muted mb-0">Bienvenue, {{ app.user.firstName }} {{ app.user.lastName }}</p>
            </div>
            <div class="text-end">
                <small class="text-muted">Matricule: {{ app.user.matricule }}</small>
                    </div>
                        </div>

        <div class="row">
            <!-- Statistiques rapides -->
            <div class="col-md-3 mb-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title">📚</h4>
                                <p class="card-text">Cours suivis</p>
                            </div>
                            <div class="text-end">
                                <h3>5</h3>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

            <div class="col-md-3 mb-4">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title">📊</h4>
                                <p class="card-text">Moyenne générale</p>
                    </div>
                            <div class="text-end">
                                <h3>14.5</h3>
                    </div>
                </div>
                    </div>
                </div>
                        </div>
                        
            <div class="col-md-3 mb-4">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title">📝</h4>
                                <p class="card-text">Examens à venir</p>
                        </div>
                            <div class="text-end">
                                <h3>3</h3>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        
            <div class="col-md-3 mb-4">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title">🔔</h4>
                                <p class="card-text">Notifications</p>
                        </div>
                            <div class="text-end">
                                <h3>2</h3>
                        </div>
                        </div>
                    </div>
                                </div>
                            </div>
                        </div>

        <div class="row">
            <!-- Actions principales -->
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">🚀 Actions Principales</h5>
                                </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <a href="{{ path('app_student_courses') }}" class="btn btn-outline-primary btn-lg w-100">
                                    <i class="fas fa-book me-2"></i>
                                    Mes Cours
                                </a>
                            </div>
                            <div class="col-md-6 mb-3">
                                <a href="{{ path('app_student_grades') }}" class="btn btn-outline-success btn-lg w-100">
                                    <i class="fas fa-chart-bar me-2"></i>
                                    Mes Notes
                                </a>
                            </div>
                            <div class="col-md-6 mb-3">
                                <a href="{{ path('app_student_enrollment') }}" class="btn btn-outline-info btn-lg w-100">
                                    <i class="fas fa-user-plus me-2"></i>
                                    Inscriptions
                                </a>
                            </div>
                            <div class="col-md-6 mb-3">
                                <a href="{{ path('app_student_complaints') }}" class="btn btn-outline-warning btn-lg w-100">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Réclamations
                                </a>
                            </div>
                        </div>
                    </div>
                            </div>
                        </div>

            <!-- Dernières notes -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">📊 Dernières Notes</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <div class="list-group-item d-flex justify-content-between">
                                <span>Mathématiques</span>
                                <span class="badge bg-success">16/20</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between">
                                <span>Physique</span>
                                <span class="badge bg-warning text-dark">12/20</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between">
                                <span>Informatique</span>
                                <span class="badge bg-success">18/20</span>
                            </div>
                            <div class="list-group-item d-flex justify-content-between">
                                <span>Français</span>
                                <span class="badge bg-info">14/20</span>
                            </div>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ path('app_student_grades') }}" class="btn btn-sm btn-outline-primary">
                                Voir toutes les notes
                            </a>
                        </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    
        <div class="row">
            <!-- Prochains examens -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">📅 Prochains Examens</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="mb-1">Mathématiques - Analyse</h6>
                                        <small class="text-muted">Salle A101</small>
                    </div>
                                    <div class="text-end">
                                        <small class="text-primary fw-bold">15 Jan 2024</small><br>
                                        <small class="text-muted">14h00</small>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="mb-1">Physique Générale</h6>
                                        <small class="text-muted">Salle B203</small>
                        </div>
                                    <div class="text-end">
                                        <small class="text-primary fw-bold">18 Jan 2024</small><br>
                                        <small class="text-muted">10h00</small>
                                </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="mb-1">Programmation Web</h6>
                                        <small class="text-muted">Salle C105</small>
                                    </div>
                                    <div class="text-end">
                                        <small class="text-primary fw-bold">22 Jan 2024</small><br>
                                        <small class="text-muted">16h00</small>
                                    </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>

            <!-- Annonces récentes -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">📢 Annonces Récentes</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <div class="list-group-item">
                                <h6 class="mb-1">Modification d'horaire</h6>
                                <p class="mb-1 small">Le cours de Physique du 15 janvier est reporté à 15h00.</p>
                                <small class="text-muted">Il y a 2 heures</small>
                            </div>
                            <div class="list-group-item">
                                <h6 class="mb-1">Nouvelle ressource disponible</h6>
                                <p class="mb-1 small">Les supports de cours de Mathématiques sont en ligne.</p>
                                <small class="text-muted">Hier</small>
                            </div>
                            <div class="list-group-item">
                                <h6 class="mb-1">Rappel inscription</h6>
                                <p class="mb-1 small">N'oubliez pas de confirmer vos inscriptions avant le 20 janvier.</p>
                                <small class="text-muted">Il y a 2 jours</small>
                            </div>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ path('app_notifications') }}" class="btn btn-sm btn-outline-primary">
                                Voir toutes les annonces
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        {% endblock %}