<?php
// app/view/admin/pedagogie/inscription-module-detail/list/index.php

require_once __DIR__ . '/../../../../../../model/service/InscriptionModuleDetailService.php';
require_once __DIR__ . '/../../../../../../model/service/InscriptionModuleService.php';
require_once __DIR__ . '/../../../../../../model/service/StudentService.php';

$detailService = new InscriptionModuleDetailService();
$inscriptionService = new InscriptionModuleService();
$studentService = new StudentService();

// Récupérer l'ID de l'inscription module depuis l'URL
$inscriptionModuleId = isset($_GET['inscription_module_id']) ? (int)$_GET['inscription_module_id'] : 0;

if (!$inscriptionModuleId) {
    header('Location: /est-concours/app/view/admin/pedagogie/inscription-module/list/index.php');
    exit;
}

// Récupérer les informations de l'inscription
$inscription = $inscriptionService->getById($inscriptionModuleId);

// Récupérer les étudiants déjà inscrits
$students = $detailService->getStudentsByInscriptionId($inscriptionModuleId);
$stats = $detailService->getStats();

// Récupérer la liste des étudiants disponibles (pour le select)
$allStudents = $studentService->findAll('nom ASC, prenom ASC');
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Étudiants Inscrits - EST</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../../../../../css/admin-styles.css">
</head>
<body>
<?php include __DIR__ . '/../../../../../layouts/admin/header.php'; ?>
<?php include __DIR__ . '/../../../../../layouts/admin/pedagogie/nav-second-level.php'; ?>

<main class="main-content" data-inscription-id="<?= $inscriptionModuleId ?>">
    <div class="container">

        <!-- En-tête avec informations de l'inscription -->
        <div class="page-header">
            <div class="header-left">
                <h1><i class="fas fa-users"></i> Étudiants Inscrits</h1>
                <p class="breadcrumb">
                    <a href="/est-concours/app/view/admin/pedagogie/inscription-module/list/index.php">Inscriptions Modules</a>
                    <i class="fas fa-chevron-right"></i>
                    <span><?= htmlspecialchars($inscription['module_libelle'] ?? 'Module') ?></span>
                </p>
            </div>
            <div class="header-right">
                <a href="/est-concours/app/view/admin/pedagogie/inscription-module/list/index.php" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Retour
                </a>
                <button class="btn btn-success" onclick="openInscriptionModuleDetailModal(<?= $inscriptionModuleId ?>)">
                    <i class="fas fa-user-plus"></i> Ajouter des Étudiants
                </button>
                <button class="btn btn-info" onclick="exportStudents(<?= $inscriptionModuleId ?>)">
                    <i class="fas fa-file-export"></i> Exporter CSV
                </button>
            </div>
        </div>

        <!-- Informations de l'inscription -->
        <div class="info-card">
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">Module</span>
                    <span class="info-value"><strong><?= htmlspecialchars($inscription['module_libelle'] ?? '-') ?></strong></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Filière</span>
                    <span class="info-value"><span class="badge badge-primary"><?= htmlspecialchars($inscription['filiere_libelle'] ?? '-') ?></span></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Année Universitaire</span>
                    <span class="info-value"><span class="badge badge-secondary"><?= htmlspecialchars($inscription['annee_universitaire'] ?? '-') ?></span></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Total Étudiants</span>
                    <span class="info-value"><span class="badge badge-success" style="font-size:18px;padding:8px 16px;"><?= count($students) ?></span></span>
                </div>
            </div>
        </div>

        <!-- Statistiques -->
        <div class="stats-grid" style="margin-top:20px;">
            <div class="stat-card">
                <div class="stat-icon">👨‍🎓</div>
                <div class="stat-info">
                    <span class="stat-label">Total Étudiants Inscrits</span>
                    <span class="stat-value" id="statTotal"><?= count($students) ?></span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">📊</div>
                <div class="stat-info">
                    <span class="stat-label">Total Inscriptions Détails</span>
                    <span class="stat-value" id="statInscriptions"><?= $stats['total_inscriptions_detail'] ?? 0 ?></span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🎯</div>
                <div class="stat-info">
                    <span class="stat-label">Total Étudiants Uniques</span>
                    <span class="stat-value" id="statEtudiants"><?= $stats['total_etudiants'] ?? 0 ?></span>
                </div>
            </div>
        </div>

        <!-- Section Recherche -->
        <div class="search-section">
            <form id="searchForm" class="search-form">
                <div class="form-group">
                    <label>Recherche</label>
                    <input type="text" id="searchStudent" placeholder="Rechercher par nom, prénom, CIN...">
                </div>
                <div class="search-actions">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Rechercher</button>
                    <button type="reset" class="btn btn-secondary" onclick="resetSearch()"><i class="fas fa-undo"></i> Réinitialiser</button>
                </div>
            </form>
        </div>

        <!-- Tableau des étudiants -->
        <div class="table-container">
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>CIN</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Date Inscription</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <?php if (!empty($students)): ?>
                            <?php $i = 1; foreach ($students as $student): ?>
                                <tr>
                                    <td><?= $i++ ?></td>
                                    <td><span class="badge badge-secondary"><?= htmlspecialchars($student['cin'] ?? '-') ?></span></td>
                                    <td><strong><?= htmlspecialchars($student['nom'] ?? '-') ?></strong></td>
                                    <td><?= htmlspecialchars($student['prenom'] ?? '-') ?></td>
                                    <td><?= htmlspecialchars($student['email'] ?? '-') ?></td>
                                    <td><?= htmlspecialchars($student['phone'] ?? '-') ?></td>
                                    <td><small><?= $student['created_at'] ? date('d/m/Y H:i', strtotime($student['created_at'])) : '-' ?></small></td>
                                    <td>
                                        <button class="btn btn-danger btn-sm" onclick="removeStudent(<?= $inscriptionModuleId ?>, <?= $student['student_id'] ?>)">
                                            <i class="fas fa-user-minus"></i> Retirer
                                        </button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="8" style="text-align:center;padding:40px;">
                                    <i class="fas fa-users" style="font-size:48px;color:#dee2e6;display:block;margin-bottom:10px;"></i>
                                    Aucun étudiant inscrit à ce module
                                    <br>
                                    <button class="btn btn-success" onclick="openInscriptionModuleDetailModal(<?= $inscriptionModuleId ?>)" style="margin-top:15px;">
                                        <i class="fas fa-user-plus"></i> Ajouter des étudiants
                                    </button>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <div class="pagination-info" id="paginationInfo">Affichage de 1 à <?= count($students) ?> sur <?= count($students) ?></div>
            </div>
        </div>
    </div>
</main>

<?php include __DIR__ . '/../../../../../layouts/admin/footer.php'; ?>

<!-- Inclusion des modals -->
<?php
$inscriptionModuleIdForModal = $inscriptionModuleId;
$studentsList = $students;
$allStudentsList = $allStudents;
include __DIR__ . '/../create-edit/modal.php';
?>
<?php include __DIR__ . '/../view/modal.php'; ?>

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

<script>
    var currentInscriptionModuleId = <?= json_encode($inscriptionModuleId) ?>;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="main.js"></script>

<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.header-left h1 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 5px 0;
}

.breadcrumb {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}
.breadcrumb a {
    color: #27ae60;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb i {
    font-size: 12px;
    margin: 0 8px;
    color: #bdc3c7;
}

.header-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.info-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px 25px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

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

.info-label {
    font-size: 12px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.info-value {
    font-size: 15px;
    color: #2c3e50;
}

.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-primary { background: #cce5ff; color: #004085; }
.badge-secondary { background: #e9ecef; color: #495057; }
.badge-success { background: #d4edda; color: #155724; }
.badge-info { background: #d1ecf1; color: #0c5460; }
.badge-danger { background: #f8d7da; color: #721c24; }

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1e8449, #27ae60);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-secondary {
    background: #ecf0f1;
    color: #34495e;
}
.btn-secondary:hover {
    background: #dde1e3;
}

.btn-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}
.btn-success:hover {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

.btn-danger {
    background: #e74c3c;
    color: white;
}
.btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.btn-info {
    background: linear-gradient(135deg, #3498db, #2e86c1);
    color: white;
}
.btn-info:hover {
    background: linear-gradient(135deg, #2e86c1, #2471a3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .page-header { flex-direction: column; align-items: flex-start; }
    .header-right { width: 100%; justify-content: stretch; }
    .header-right .btn { flex: 1; justify-content: center; }
    .info-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .info-grid { grid-template-columns: 1fr; }
    .header-right { flex-direction: column; }
    .header-right .btn { width: 100%; }
}
</style>
</body>
</html>