<!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">
    <style>
        /* Additional styles for group headers and multi-select actions */
        .group-header td {
            background-color: #f0f4f8;
            font-weight: bold;
            padding: 10px 15px;
            border-bottom: 2px solid #d1d9e6;
        }
        .group-header td:first-child {
            border-radius: 8px 0 0 8px;
        }
        .group-header td:last-child {
            border-radius: 0 8px 8px 0;
        }
        .group-header .group-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .group-header .group-title .badge-group {
            background: #2c3e50;
            color: white;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        .multi-select-actions {
            margin: 15px 0;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        .multi-select-actions .selected-info {
            font-size: 0.9rem;
            color: #495057;
        }
        .multi-select-actions .selected-info strong {
            color: #0d6efd;
        }
        .multi-select-actions .btn-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .table-container .checkbox-col {
            width: 40px;
            text-align: center;
        }
        .table-container .checkbox-col input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #0d6efd;
        }
        /* Badge styles */
        .badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-block;
        }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
        .badge-secondary { background: #e2e3e5; color: #383d41; }
        .badge-active { background: #d4edda; color: #155724; }
        .badge-inactive { background: #f8d7da; color: #721c24; }
        .badge-group { background: #6c757d; color: white; padding: 2px 10px; border-radius: 12px; font-size: 0.7rem; }
    </style>
</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="searchResultat">Résultat</label>
                    <select id="searchResultat">
                        <option value="">Tous</option>
                        <option value="ELIGIBLE_ORALE">ELIGIBLE ORALE</option>
                        <option value="NON_ELIGIBLE_ORALE">NON ELIGIBLE ORALE</option>
                        <option value="ELLIBGIBLE_ECRIT">ELLIBGIBLE ECRIT</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="searchStudent">Rechercher un étudiant</label>
                    <input type="text" id="searchStudent" placeholder="Nom, prénom, email ou CIN...">
                </div>
                <div class="form-group">
                    <label for="searchDiplome">Type Diplôme</label>
                    <select id="searchDiplome">
                        <option value="">Tous</option>
                    </select>
                </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-info" onclick="openImportAvantFinaleModal()">
                        <i class="fas fa-file-import"></i> Importer Notes (Orale + Avant Final)
                    </button>
                </div>
            </form>
        </div>

        <!-- Download Section -->
        <div class="download-section">
            <span style="font-weight: 600; color: #495057;">📥 Télécharger :</span>
            <div class="btn-group" role="group">
                <button class="btn btn-primary" onclick="downloadInscriptions('ALL')">
                    <i class="fas fa-file-excel"></i> Tous
                </button>
                <button class="btn btn-success" onclick="downloadInscriptions('ADMIS_ORALE')">
                    <i class="fas fa-file-excel"></i> Admis Orale
                </button>
                <!-- زر العرض الإداري الخاص بصفحة الناجحين نهائياً -->
                <button class="btn btn-info" onclick="downloadAdministrativeAdmisOral('ADMIS_ORALE')">
                    <i class="fas fa-file-excel"></i> Affichage Administratif
                </button>
                <button class="btn btn-warning" onclick="downloadListeAttente()" style="background-color: #ffc107; color: #000; border: none;">
                    <i class="fas fa-list-ol"></i> Liste d'Attente
                </button>
            </div>
        </div>


        <!-- Multi-Select Actions Bar -->
        <div class="multi-select-actions" id="multiSelectActions" style="display: none;">
            <div class="selected-info">
                <span id="selectedCount">0</span> inscription(s) sélectionnée(s)
            </div>
            <div class="btn-group">
                <button class="btn btn-success btn-sm" onclick="batchUpdateResultat('ADMIS_ORALE')">✅ Admis</button>
                <button class="btn btn-danger btn-sm" onclick="batchUpdateResultat('NON_ADMIS_ORALE')">❌ Non Admis</button>
                <button class="btn btn-secondary btn-sm" onclick="batchUpdateResultat('ELIGIBLE_ORALE')">🔄 En Cours</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="clearSelection()">Désélectionner tout</button>
            </div>
        </div>

        <!-- Table -->
        <div class="table-container">
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th class="checkbox-col">
                            <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                        </th>
                        <th>CONCOURS</th>
                        <th>ÉTUDIANT</th>
                        <th>TYPE BAC</th>
                        <th>ANNÉE BAC</th>
                        <th>MOYENNE</th>
                        <th>ORALE</th>
                        <th>AVANT FINAL</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>
    </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>

<!-- Modal: Import Notes Orale + Avant Final (par CIN) -->
<div id="importAvantFinaleModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:10px; width:90%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
        <div style="display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e9ecef;">
            <h3 style="margin:0; font-size:18px;">📥 Importer Notes (Orale + Avant Final)</h3>
            <button type="button" onclick="closeImportAvantFinaleModal()" style="background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#6c757d;">&times;</button>
        </div>
        <form id="importAvantFinaleForm" style="padding:20px;">
            <div class="form-group" style="margin-bottom:16px;">
                <label for="importFinaleConcoursId" style="display:block; margin-bottom:6px; font-weight:600;">Concours *</label>
                <select id="importFinaleConcoursId" required style="width:100%; padding:8px; border:1px solid #ced4da; border-radius:6px;">
                    <option value="">-- Sélectionner un concours --</option>
                </select>
            </div>
            <div class="form-group" style="margin-bottom:8px;">
                <label for="importAvantFinaleFile" style="display:block; margin-bottom:6px; font-weight:600;">Fichier CSV *</label>
                <input type="file" id="importAvantFinaleFile" accept=".csv" required style="width:100%;">
            </div>
            <p style="font-size:13px; color:#6c757d; margin:0 0 12px 0;">
                Format attendu (séparateur <strong>;</strong>) :<br>
                <code>CIN;moyenne_orale;moyenne_calcule_avant_finale</code><br>
                Exemple : <code>RT901234;13.5;14.2</code><br>
                <span style="color:#856404;">Une colonne peut être laissée vide si non disponible.</span>
            </p>
            <div style="margin-bottom:20px;">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="downloadSampleCsvOraleAvantFinale()">
                    <i class="fas fa-file-csv"></i> Télécharger un exemple CSV
                </button>
            </div>
            <div style="display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #e9ecef; padding-top:16px;">
                <button type="button" class="btn btn-secondary" onclick="closeImportAvantFinaleModal()">Annuler</button>
                <button type="submit" class="btn btn-primary">📥 Importer</button>
            </div>
        </form>
    </div>
</div>

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