<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - EST</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js 3 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

    <link rel="stylesheet" href="../../../../css/admin-styles.css">
    <link rel="stylesheet" href="dashboard-styles.css">
</head>
<body>

<?php include "../../../../layouts/admin/header.php" ?>

<main class="main-content">
    <div class="container dashboard-container">
        <!-- Dashboard Header -->
        <div class="dashboard-header">
            <div>
                <h1><i class="fas fa-chart-line me-2" style="color: var(--primary-color);"></i>Tableau de bord</h1>
                <p>Vue d'ensemble de l'activité de l'établissement</p>
            </div>
            <div class="header-actions">
                <span class="quick-stat">
                    <span class="dot green"></span>
                    Système en ligne
                </span>
                <button class="btn btn-primary btn-sm" onclick="refreshDashboard()">
                    <i class="fas fa-sync-alt me-1"></i> Rafraîchir
                </button>
            </div>
        </div>

        <!-- Stats Cards - 4 per row -->
        <div class="stats-grid" id="stats-container">
            <div class="stat-card loading-card" style="grid-column: 1 / -1; text-align: center; min-height: 200px; display: flex; align-items: center; justify-content: center; border-left-color: transparent;">
                <div class="dashboard-loading">
                    <div class="spinner"></div>
                    <p>Chargement des statistiques...</p>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="row g-4 mt-2">
            <div class="col-md-6">
                <div class="chart-container">
                    <h6><i class="fas fa-chart-pie me-2"></i>Répartition des inscriptions</h6>
                    <div class="chart-wrapper">
                        <canvas id="concoursChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart-container">
                    <h6><i class="fas fa-chart-bar me-2"></i>Évolution des demandes</h6>
                    <div class="chart-wrapper">
                        <canvas id="demandesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Second Row Charts + Activity -->
        <div class="row g-4 mt-4">
            <div class="col-md-8">
                <div class="chart-container">
                    <h6><i class="fas fa-arrow-up me-2"></i>Évolution des avancements</h6>
                    <div class="chart-wrapper">
                        <canvas id="avancementsChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="recent-activity">
                    <h6><i class="fas fa-bolt me-2"></i>Activité récente</h6>
                    <div id="recentActivity">
                        <div class="activity-item">
                            <div class="activity-icon green">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="activity-content">
                                <p class="activity-text"><strong>Nouvel étudiant</strong> inscrit</p>
                                <p class="activity-time">Il y a 5 minutes</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon blue">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="activity-content">
                                <p class="activity-text"><strong>Demande</strong> de document traitée</p>
                                <p class="activity-time">Il y a 12 minutes</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon orange">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="activity-content">
                                <p class="activity-text"><strong>Concours</strong> publié avec succès</p>
                                <p class="activity-time">Il y a 1 heure</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon purple">
                                <i class="fas fa-arrow-up"></i>
                            </div>
                            <div class="activity-content">
                                <p class="activity-text"><strong>Avancement</strong> approuvé</p>
                                <p class="activity-time">Il y a 2 heures</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon pink">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="activity-content">
                                <p class="activity-text"><strong>Validation</strong> de dossier effectuée</p>
                                <p class="activity-time">Il y a 3 heures</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="main.js"></script>
</body>
</html>
