<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Concours - EST</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Separate CSS file (employee-styles.css) -->
    <link rel="stylesheet" href="../../../../../css/employee-styles.css">
</head>
<body>

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

<?php include "../../../../../layouts/employee/concours/nav-second-level.php" ?>


<!-- ====== MAIN CONTENT ====== -->
<main class="main-content">
    <div class="container">

        <!-- Stats Cards -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-icon">📊</div>
                <div class="stat-info">
                    <span class="stat-label">Total Inscriptions</span>
                    <span class="stat-value" id="statTotal">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">✅</div>
                <div class="stat-info">
                    <span class="stat-label">Validées</span>
                    <span class="stat-value" id="statValide">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">⏳</div>
                <div class="stat-info">
                    <span class="stat-label">En Attente</span>
                    <span class="stat-value" id="statEnAttente">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🎓</div>
                <div class="stat-info">
                    <span class="stat-label">Admis</span>
                    <span class="stat-value" id="statAdmis">0</span>
                </div>
            </div>
        </div>

        <!-- Search Section -->
        <div class="search-section">
            <form id="searchForm" class="search-form">

                <div class="form-group">
                    <label for="searchConcours">Concours</label>
                    <select id="searchConcours">
                        <option value="">Tous les concours</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="searchEtat">État Inscription</label>
                    <select id="searchEtat">
                        <option value="">Tous</option>
                        <option value="EN_ATTENTE">En Attente</option>
                        <option value="VALIDE">Validée</option>
                        <option value="REJETE">Rejetée</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="searchResultat">Résultat</label>
                    <select id="searchResultat">
                        <option value="">Tous</option>
                        <option value="EN_COURS">En Cours</option>
                        <option value="ADMIS">Admis</option>
                        <option value="LISTE_ATTENTE">Liste Attente</option>
                        <option value="NON_ADMIS">Non Admis</option>
                    </select>
                </div>


                <div class="form-group">
                    <label for="searchStudent">Rechercher un étudiant</label>
                    <input type="text" id="searchStudent" placeholder="Nom, prénom, email ou CIN...">
                </div>


                <div class="search-actions">
                    <button type="submit" class="btn btn-primary">🔍 Rechercher</button>
                    <button type="reset" class="btn btn-secondary" onclick="resetSearch()">🔄 Réinitialiser</button>


                    <button type="button" class="btn btn-success" onclick="openCreateModal()">➕ Nouvelle Inscription
                    </button>
                    <button type="button" class="btn btn-success" onclick="importCsv()">
                        <i class="fas fa-file-csv"></i> Importer CSV
                    </button>
                    <button type="button" class="btn btn-primary" onclick="downloadAllDocsByConcours()">
                        <i class="fas fa-file-archive"></i> Télécharger Docs par Concours
                    </button>
                </div>
            </form>
        </div>

        <!-- Table -->
        <div class="table-container">
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>Concours</th>
                        <th>Étudiant</th>
                        <th>Email</th>
                        <th>CIN</th>
                        <th>Moyenne</th>
                        <th>État</th>
                        <th>Résultat</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="tableBody">
                    <tr>
                        <td colspan="10" style="text-align: center; padding: 40px;">
                            <div class="loading active">
                                <div class="spinner"></div>
                                <p style="margin-top: 10px;">Chargement des données...</p>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <div class="pagination-info" id="paginationInfo">Affichage de 0 à 0 sur 0</div>
                <div class="pagination-buttons" id="paginationButtons">
                    <button onclick="changePage('prev')" id="prevBtn">◀ Précédent</button>
                    <span id="pageNumbers"></span>
                    <button onclick="changePage('next')" id="nextBtn">Suivant ▶</button>
                </div>
            </div>
        </div>
    </div>
</main>

<?php include "../../../../../layouts/employee/footer.php" ?>


<!-- Modal for Create/Update -->
<?php include "../create-edit/modal.php" ?>

<!-- Detail Modal -->
<?php include "../view/modal.php" ?>

<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<script src="main.js"></script>
</body>
</html>
