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

{% block title %}Reporting & Statistiques{% endblock %}

{% block dashboard_stylesheets %}
<!-- CSS Responsive pour le reporting -->
<link rel="stylesheet" href="{{ asset('css/reporting-responsive.css') }}">

<style>
/* CSS pour le module de reporting */
.reporting-page { margin-top: 1rem; }

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; padding: 1.5rem 0; border-bottom: 2px solid var(--border-color);
}

.page-title {
    color: var(--text-primary); font-size: 1.75rem; font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 0.75rem;
}

.page-title i {
    color: var(--primary-blue); background: rgba(30, 64, 175, 0.1);
    padding: 0.5rem; border-radius: var(--border-radius);
}

.export-actions {
    display: flex; gap: 0.5rem;
}

.export-btn {
    background: var(--success); color: white; padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius); text-decoration: none; font-weight: 600;
    transition: var(--transition); border: none; box-shadow: var(--shadow);
    cursor: pointer;
}

.export-btn.excel { background: #217346; }
.export-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.section-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); box-shadow: var(--shadow);
    margin-bottom: 1.5rem; overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; gap: 0.5rem;
}

.section-body { padding: 1rem; }

.filters-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}

.filter-group { display: flex; flex-direction: column; }

.filter-label {
    font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);
    font-size: 0.875rem;
}

.filter-select, .filter-input {
    padding: 0.5rem; border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.875rem;
}

.filter-select:focus, .filter-input:focus {
    outline: none; border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}

.checkbox-group {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--primary-blue);
}

.stats-container {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-overview {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;
}

.stat-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); padding: 1rem; text-align: center;
    transition: var(--transition);
}

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

.stat-number {
    font-size: 2rem; font-weight: 700; line-height: 1;
    margin-bottom: 0.25rem; color: var(--primary-blue);
}

.stat-label {
    color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.chart-container {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); padding: 1rem; height: 350px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}

#mainChart {
    max-width: 100%; max-height: 100%; width: 100%; height: 100%;
}

.chart-placeholder {
    color: var(--text-secondary); text-align: center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.detailed-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}

.detailed-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); padding: 1rem;
}

.detailed-title {
    font-weight: 600; margin-bottom: 1rem; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;
}

.detailed-list {
    list-style: none; padding: 0; margin: 0;
}

.detailed-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.detailed-list li:last-child { border-bottom: none; }

.detailed-list .label { color: var(--text-primary); }
.detailed-list .value { font-weight: 600; color: var(--primary-blue); }

/* Spinner fullscreen avec blur et barre de progression */
.fullscreen-loading {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; /* Au-dessus de tout */
}

.loading-container {
    text-align: center; padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 320px;
}

.loading-icon {
    font-size: 3rem; color: var(--primary-blue);
    margin-bottom: 1rem; animation: pulse 2s infinite;
}

.loading-title {
    font-size: 1.25rem; font-weight: 600; color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.loading-subtitle {
    font-size: 0.9rem; color: var(--text-secondary);
    margin-bottom: 2rem;
}

.progress-container {
    width: 100%; height: 6px; background: rgba(30, 64, 175, 0.1);
    border-radius: 3px; overflow: hidden; margin-bottom: 1rem;
    position: relative;
}

.progress-bar {
    height: 100%; background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 3px; width: 0%; transition: width 0.3s ease;
    position: relative; overflow: hidden;
}

.progress-bar::before {
    content: ''; position: absolute; top: 0; left: -100%; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

.progress-text {
    font-size: 0.8rem; color: var(--text-secondary);
    font-weight: 500;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.student-search {
    margin-bottom: 1.5rem;
}

.search-results {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px); max-height: 200px;
    overflow-y: auto; display: none;
}

.search-result-item {
    padding: 0.75rem; border-bottom: 1px solid var(--border-color);
    cursor: pointer; transition: var(--transition);
}

.search-result-item:hover {
    background: var(--primary-blue); color: white;
}

.search-result-item:last-child { border-bottom: none; }

/* Mode sombre */
body.dark-mode .fullscreen-loading { 
    background: rgba(0, 0, 0, 0.95); 
    backdrop-filter: blur(12px);
}
body.dark-mode .loading-container {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
body.dark-mode .loading-title { color: var(--text-primary); }
body.dark-mode .loading-subtitle { color: var(--text-secondary); }

body.dark-mode .filter-select, body.dark-mode .filter-input {
    background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary);
}
body.dark-mode .stat-card { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .chart-container { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .detailed-card { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .search-results { background: var(--card-bg); border-color: var(--border-color); }

/* Styles spécifiques pour la page de reporting en plus du fichier externe */
@media (max-width: 575.98px) {
    /* Amélioration des filtres sur très petit écran */
    .filter-select, .filter-input {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Menu déroulant plus visible */
    .filter-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    /* Optimisation pour tablettes */
    .section-header {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .page-title {
        font-size: 1.625rem;
    }
}

/* Styles pour l'aperçu du rapport détaillé */
.report-preview-container {
    min-height: 200px;
    position: relative;
}

.report-loading, .report-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

.report-loading i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.table-responsive {
    overflow-x: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--bg-secondary);
}

.report-table th, .report-table td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    vertical-align: middle;
}

.report-table th {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.module-header {
    background: linear-gradient(135deg, #374151, #4b5563) !important;
    font-weight: 700;
    min-width: 150px;
    text-align: left !important;
    padding-left: 1rem !important;
}

.total-header {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    font-weight: 700;
}

.effectif-header, .percentage-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)) !important;
}

.report-table tbody tr:nth-child(even) {
    background: rgba(30, 64, 175, 0.05);
}

.report-table tbody tr:hover {
    background: rgba(30, 64, 175, 0.1);
    transition: background-color 0.2s ease;
}

.report-table td.module-cell {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    padding-left: 1rem;
}

.report-table td.total-cell {
    font-weight: 700;
    color: var(--success);
    background: rgba(5, 150, 105, 0.1);
}

.report-table td.percentage-cell {
    font-weight: 600;
    color: var(--primary-blue);
    font-style: italic;
}

.report-table tfoot th, .report-table tfoot td {
    background: linear-gradient(135deg, #374151, #4b5563);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.report-table tfoot .total-cell {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

/* Responsive pour le tableau */
@media (max-width: 767.98px) {
    .report-table {
        font-size: 0.75rem;
    }
    
    .report-table th, .report-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .module-header {
        min-width: 120px;
    }
    
    .report-table th {
        font-size: 0.7rem;
    }
}

@media (max-width: 575.98px) {
    .table-responsive {
        border-radius: 4px;
    }
    
    .report-table {
        font-size: 0.7rem;
    }
    
    .report-table th, .report-table td {
        padding: 0.4rem 0.2rem;
    }
}

/* CORRECTIONS SPÉCIFIQUES RESPONSIVE POUR STATS-CONTAINER ET DETAILED-STATS */
/* Mobile (moins de 768px) */
@media (max-width: 767.98px) {
    .stats-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .detailed-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .chart-container {
        height: 300px !important;
        padding: 0.5rem !important;
    }
}

/* Tablettes (768px à 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .stats-container {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .detailed-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    .chart-container {
        height: 340px !important;
    }
}

/* Desktop (992px et plus) - layout original */
@media (min-width: 992px) {
    .stats-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    .detailed-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    .chart-container {
        height: 350px !important;
    }
}

/* Styles pour le dropdown d'export */
.export-dropdown-container .dropdown-toggle {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.export-dropdown-container .dropdown-toggle:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.export-dropdown-container .dropdown-toggle:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.export-dropdown-container .dropdown-menu {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    min-width: 200px;
}

.export-dropdown-container .dropdown-item {
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    border-radius: 0;
    color: #374151;
    font-weight: 500;
}

.export-dropdown-container .dropdown-item:hover {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #1f2937;
    transform: translateX(2px);
}

.export-dropdown-container .dropdown-item i {
    width: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .export-dropdown-container .dropdown-toggle {
        padding: 0.4rem 0.8rem;
        font-size: 0.875rem;
    }
    
    .export-dropdown-container .dropdown-menu {
        min-width: 180px;
    }
    
    .export-dropdown-container .dropdown-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.875rem;
    }
}

/* Styles pour la section relevés de notes */
.transcript-filters .filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.student-info-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.student-info-header h4 {
    color: #1e40af;
    margin: 0;
    font-weight: 600;
}

.student-info-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #1f2937;
    font-size: 1rem;
}

.transcript-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.transcript-table th {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--primary-blue);
    font-weight: 600;
    font-size: 0.8rem;
}

.transcript-table td {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.transcript-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.transcript-table tbody tr:hover {
    background: var(--border-color);
    transition: var(--transition-fast);
}

.transcript-table .course-name {
    text-align: left !important;
    font-weight: 500;
    color: var(--text-primary);
}

.transcript-table .grade-cell {
    font-weight: 600;
}

.transcript-table .coefficient {
    text-align: center;
    font-weight: bold;
    color: var(--text-secondary);
}

.transcript-table .grade-cell.passed {
    color: var(--success);
}

.transcript-table .grade-cell.failed {
    color: var(--danger);
}

.transcript-table .status-passed {
    background: color-mix(in srgb, var(--success) 20%, var(--card-bg) 80%);
    color: var(--success);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent 70%);
}

.transcript-table .status-failed {
    background: color-mix(in srgb, var(--danger) 20%, var(--card-bg) 80%);
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent 70%);
}

.transcript-table .status-makeup {
    background: color-mix(in srgb, var(--warning) 20%, var(--card-bg) 80%);
    color: var(--warning);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent 70%);
}

.transcript-table .status-draft {
    background: color-mix(in srgb, var(--text-secondary) 20%, var(--card-bg) 80%);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent 70%);
}

.transcript-table .status-submitted {
    background: color-mix(in srgb, var(--info) 20%, var(--card-bg) 80%);
    color: var(--info);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent 70%);
}

.transcript-table tfoot th {
    background: linear-gradient(135deg, var(--danger) 0%, var(--orange) 100%);
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    border: 1px solid var(--danger);
}

@media (max-width: 768px) {
    .transcript-filters .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .student-info-content {
        grid-template-columns: 1fr;
    }
    
    .transcript-table {
        font-size: 0.75rem;
    }
    
    .transcript-table th {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }
    
    .transcript-table td {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
    }
}
</style>
{% endblock %}

{% block dashboard_content %}
<div class="reporting-page">
    <!-- En-tête de la page -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="fas fa-chart-bar"></i>
            <span class="responsive-text">Reporting & Statistiques</span>
        </h1>
    </div>

    <!-- Section 1: Filtres -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-filter"></i>
            Filtres de Recherche
        </div>
        <div class="section-body responsive-spacing">
            <div class="filters-grid">
                <div class="filter-group">
                    <label class="filter-label responsive-text">Année Scolaire</label>
                    <select class="filter-select" id="academicYearFilter">
                        <option value="">Toutes les années</option>
                        {% for year in academicYears %}
                            <option value="{{ year.id }}">{{ year.year }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label responsive-text">Semestre</label>
                    <select class="filter-select" id="semesterFilter">
                        <option value="">Tous les semestres</option>
                        {% for semester in semesters %}
                            <option value="{{ semester.id }}">Semestre {{ semester.number }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label responsive-text">Département</label>
                    <select class="filter-select" id="departmentFilter">
                        <option value="">Tous les départements</option>
                        {% for department in departments %}
                            <option value="{{ department.id }}">{{ department.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label responsive-text">Niveau</label>
                    <select class="filter-select" id="levelFilter">
                        <option value="">Tous les niveaux</option>
                        {% for level in levels %}
                            <option value="{{ level.id }}">[{{ level.department.code }}] {{ level.cycle }} {{ level.number }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="includeInactiveFilter">
                <label for="includeInactiveFilter">Inclure les étudiants inactifs</label>
            </div>
        </div>
    </div>

    <!-- Section 2: Vue d'ensemble -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-tachometer-alt"></i>
            Vue d'Ensemble
        </div>
        <div class="section-body">
            <div class="stats-overview" id="statsOverview">
                <div class="stat-card">
                    <div class="stat-number" id="totalStudents">{{ defaultStats.students.total }}</div>
                    <div class="stat-label">Étudiants</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="activeStudents">{{ defaultStats.students.active }}</div>
                    <div class="stat-label">Actifs</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="totalTeachers">{{ defaultStats.teachers.total }}</div>
                    <div class="stat-label">Enseignants</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="totalCourses">{{ defaultStats.courses.total }}</div>
                    <div class="stat-label">Matières</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="totalGrades">{{ defaultStats.grades.total }}</div>
                    <div class="stat-label">Notes</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 3: Graphiques et Statistiques Détaillées -->
    <div class="stats-container">
        <div class="section-card">
            <div class="section-header">
                <i class="fas fa-chart-pie"></i>
                Graphiques
            </div>
            <div class="section-body">
                <div class="chart-container" id="chartContainer">
                    <canvas id="mainChart" width="400" height="200"></canvas>
                    <div class="chart-placeholder" id="chartPlaceholder" style="display: none;">
                        <i class="fas fa-chart-bar" style="font-size: 3rem; opacity: 0.3;"></i>
                        <p>Sélectionnez des filtres pour afficher les graphiques</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <i class="fas fa-list-ul"></i>
                Détails des Statistiques
            </div>
            <div class="section-body">
                <div class="detailed-stats" id="detailedStats">
                    <div class="detailed-card">
                        <div class="detailed-title">
                            <i class="fas fa-users"></i>
                            Répartition par Statut
                        </div>
                        <ul class="detailed-list" id="statusDistribution">
                            <li><span class="label">Actifs</span><span class="value">{{ defaultStats.students.active }}</span></li>
                            <li><span class="label">Inactifs</span><span class="value">{{ defaultStats.students.inactive }}</span></li>
                        </ul>
                    </div>
                    
                    <div class="detailed-card">
                        <div class="detailed-title">
                            <i class="fas fa-building"></i>
                            Répartition par Département
                        </div>
                        <ul class="detailed-list" id="departmentDistribution">
                            <li><span class="label">En attente de données...</span><span class="value">-</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Section 5: Aperçu du Rapport Détaillé -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-table"></i>
            Aperçu du Rapport Détaillé
        </div>
        <div class="section-body">
            <!-- Bouton d'exportation du tableau avec dropdown -->
            <div class="export-dropdown-container" style="margin-bottom: 1rem; display: flex; justify-content: flex-end;">
                <div class="dropdown">
                    <button class="export-btn dropdown-toggle" type="button" id="exportTableDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-download"></i>
                        <span class="desktop-only">Exporter le Tableau</span>
                        <span class="mobile-only">Exporter</span>
                        <i class="fas fa-chevron-down ms-1"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="exportTableDropdown">
                        <li>
                            <a class="dropdown-item" href="#" id="exportTablePdfOption">
                                <i class="fas fa-file-pdf text-danger me-2"></i>
                                Format PDF
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#" id="exportTableExcelOption">
                                <i class="fas fa-file-excel text-success me-2"></i>
                                Format Excel
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#" id="exportTableCsvOption">
                                <i class="fas fa-file-csv text-info me-2"></i>
                                Format CSV
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="report-preview-container" id="reportPreviewContainer">
                <div class="report-loading" id="reportLoading" style="display: none;">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Génération de l'aperçu en cours...</p>
                </div>
                
                <div class="report-table-container" id="reportTableContainer">
                    <div class="table-responsive">
                        <table class="report-table" id="reportTable">
                            <thead>
                                <tr>
                                    <th rowspan="3" class="module-header">Niveau</th>
                                    <th colspan="3" class="effectif-header">Total Inscrits</th>
                                    <th colspan="3" class="effectif-header">Effectif Évalué</th>
                                    <th colspan="4" class="percentage-header">Admis</th>
                                    <th rowspan="3" class="total-header">Cours Validés</th>
                                    <th colspan="2" class="effectif-header">Abandon</th>
                                </tr>
                                <tr>
                                    <th colspan="2" class="effectif-header">Effectif</th>
                                    <th rowspan="2" class="total-header">Total</th>
                                    <th colspan="2" class="effectif-header">Effectif</th>
                                    <th rowspan="2" class="total-header">Total</th>
                                    <th colspan="2" class="percentage-header">Nombre</th>
                                    <th colspan="2" class="percentage-header">Pourcentage</th>
                                    <th colspan="2" class="effectif-header">Effectif</th>
                                </tr>
                                <tr>
                                    <th class="effectif-header">Fille</th>
                                    <th class="effectif-header">Garçon</th>
                                    <th class="effectif-header">Fille</th>
                                    <th class="effectif-header">Garçon</th>
                                    <th class="percentage-header">Total</th>
                                    <th class="percentage-header">Fille</th>
                                    <th class="percentage-header">Total</th>
                                    <th class="percentage-header">Fille</th>
                                    <th class="effectif-header">Total</th>
                                    <th class="effectif-header">Fille</th>
                                </tr>
                            </thead>
                            <tbody id="reportTableBody">
                                <!-- Les données du rapport seront ajoutées dynamiquement -->
                            </tbody>
                            <tfoot id="reportTableFooter">
                                <!-- Le pied de tableau avec les totaux sera ajouté dynamiquement -->
                            </tfoot>
                        </table>
                    </div>
                </div>
                
                <div class="report-empty" id="reportEmpty" style="display: none;">
                    <i class="fas fa-inbox" style="font-size: 3rem; opacity: 0.3; color: #9ca3af;"></i>
                    <p>Aucune donnée disponible pour les filtres sélectionnés</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 6: Relevés de Notes Étudiants -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-graduation-cap"></i>
            Relevés de Notes Étudiants
        </div>
        <div class="section-body">
            <!-- Filtres pour les relevés -->
            <div class="transcript-filters">
                <div class="filters-grid">
                    <div class="filter-group">
                        <label class="filter-label responsive-text">Matricule Étudiant</label>
                        <input type="text" class="filter-input" id="transcriptMatriculeInput" 
                               placeholder="Entrez le matricule...">
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label responsive-text">Année Académique</label>
                        <select class="filter-select" id="transcriptAcademicYearFilter">
                            <option value="">Toutes les années</option>
                            {% for year in academicYears %}
                                <option value="{{ year.id }}">{{ year.year }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label responsive-text">Semestre</label>
                        <select class="filter-select" id="transcriptSemesterFilter">
                            <option value="">Tous les semestres</option>
                            {% for semester in semesters %}
                                <option value="{{ semester.id }}">Semestre {{ semester.number }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label responsive-text">Matière</label>
                        <select class="filter-select" id="transcriptCourseFilter">
                            <option value="">Toutes les matières</option>
                            <!-- Les matières seront chargées dynamiquement -->
                        </select>
                    </div>
                </div>
                
                <div class="filter-actions" style="margin-top: 1rem;">
                    <button class="export-btn" id="generateTranscriptBtn">
                        <i class="fas fa-search"></i>
                        <span class="desktop-only">Générer l'Aperçu</span>
                        <span class="mobile-only">Aperçu</span>
                    </button>
                </div>
            </div>

            <!-- Aperçu du relevé -->
            <div class="transcript-preview-container" id="transcriptPreviewContainer" style="margin-top: 2rem; display: none;">
                <!-- En-tête étudiant -->
                <div class="student-info-card" id="studentInfoCard">
                    <div class="student-info-header">
                        <h4><i class="fas fa-user-graduate"></i> Informations Étudiant</h4>
                    </div>
                    <div class="student-info-content" id="studentInfoContent">
                        <!-- Les informations seront remplies dynamiquement -->
                    </div>
                </div>

                <!-- Boutons d'exportation du relevé -->
                <div class="export-dropdown-container" style="margin: 1rem 0; display: flex; justify-content: flex-end;">
                    <div class="dropdown">
                        <button class="export-btn dropdown-toggle" type="button" id="exportTranscriptDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-download"></i>
                            <span class="desktop-only">Exporter le Relevé</span>
                            <span class="mobile-only">Exporter</span>
                            <i class="fas fa-chevron-down ms-1"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="exportTranscriptDropdown">
                            <li>
                                <a class="dropdown-item" href="#" id="exportTranscriptPdfOption">
                                    <i class="fas fa-file-pdf text-danger me-2"></i>
                                    Format PDF
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" id="exportTranscriptExcelOption">
                                    <i class="fas fa-file-excel text-success me-2"></i>
                                    Format Excel
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Tableau des notes -->
                <div class="transcript-table-container" id="transcriptTableContainer">
                    <div class="table-responsive">
                        <table class="transcript-table" id="transcriptTable">
                            <thead>
                                <tr>
                                    <th>Matière</th>
                                    <th>Semestre</th>
                                    <th>Coefficient</th>
                                    <th>Note 1</th>
                                    <th>Note 2</th>
                                    <th>Note 3</th>
                                    <th>Note 4</th>
                                    <th>Moyenne</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody id="transcriptTableBody">
                                <!-- Les données seront ajoutées dynamiquement -->
                            </tbody>
                            <tfoot id="transcriptTableFooter">
                                <!-- Les totaux seront ajoutés dynamiquement -->
                            </tfoot>
                        </table>
                    </div>
                </div>

                <div class="transcript-empty" id="transcriptEmpty" style="display: none;">
                    <i class="fas fa-inbox" style="font-size: 3rem; opacity: 0.3; color: #9ca3af;"></i>
                    <p>Aucune note trouvée pour les critères sélectionnés</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Spinner fullscreen avec barre de progression -->
<div class="fullscreen-loading" id="fullscreenLoading" style="display: none;">
    <div class="loading-container">
        <div class="loading-icon">
            <i class="fas fa-chart-line"></i>
        </div>
        <div class="loading-title">Génération des statistiques</div>
        <div class="loading-subtitle">Analyse des données en cours...</div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="progress-text" id="progressText">0%</div>
    </div>
</div>

<!-- Chart.js pour les graphiques -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="{{ asset('js/reporting.js') }}"></script>
<script>
// Initialisation des URLs pour les appels AJAX
document.addEventListener('DOMContentLoaded', function() {
    if (typeof initializeReportingUrls === 'function') {
        initializeReportingUrls(
            '{{ path("app_admin_reporting_statistics") }}',
            '{{ path("app_admin_reporting_export") }}',
            '{{ path("app_admin_reporting_student_transcript", {"studentId": "__STUDENT_ID__"}) }}'
        );
    }
    
    // Passer les niveaux formatés au JavaScript avec leurs IDs
    window.formattedLevels = {{ formattedLevels|json_encode|raw }};
    
    // Afficher le tableau vide par défaut dès le chargement avec les vrais niveaux
    if (typeof buildEmptyLevelReportTableFromServer === 'function') {
        buildEmptyLevelReportTableFromServer();
    } else if (typeof buildEmptyLevelReportTable === 'function') {
        buildEmptyLevelReportTable();
    }
});
</script>
{% endblock %}