<?php
// app/view/admin/pedagogie/presence/list/index.php

require_once __DIR__ . '/../../../../../../model/service/PresenceService.php';
$service = new PresenceService();
$stats = $service->getStats();
$presences = $service->findAll();
$annees = $service->getAnneesUniversitaires();
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Présences - 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">
    <style>
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 15px;
            border: 1px solid #e9ecef;
        }
        .stat-icon { font-size: 32px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 10px; }
        .stat-label { display: block; font-size: 13px; color: #7f8c8d; font-weight: 500; }
        .stat-value { display: block; font-size: 26px; font-weight: 700; color: #2c3e50; }

        .filter-section { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 25px; border: 1px solid #dee2e6; }
        .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: end; }
        .form-group { display: flex; flex-direction: column; gap: 5px; }
        .form-group label { font-size: 13px; font-weight: 600; color: #2c3e50; }
        .form-group select, .form-group input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: white; }
        .form-group select:focus, .form-group input:focus { border-color: #3498db; outline: none; }

        .btn-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
        .btn-primary { background: #3498db; color: white; }
        .btn-primary:hover { background: #2980b9; }
        .btn-success { background: #27ae60; color: white; }
        .btn-success:hover { background: #1e8449; }
        .btn-danger { background: #e74c3c; color: white; }
        .btn-danger:hover { background: #c0392b; }
        .btn-warning { background: #f39c12; color: white; }
        .btn-warning:hover { background: #d68910; }
        .btn-secondary { background: #ecf0f1; color: #2c3e50; }
        .btn-secondary:hover { background: #d5dbdb; }
        .btn-sm { padding: 5px 10px; font-size: 12px; }

        .module-info { display: none; background: #eaf4ea; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #27ae60; }
        .student-list-container { display: none; border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; background: white; }
        .table-container { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e9ecef; margin-top: 30px; }
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        table th { background: #2c3e50; color: white; padding: 10px 12px; text-align: left; }
        table td { padding: 8px 12px; border-bottom: 1px solid #ecf0f1; }
        table tr:hover { background: #f8f9fa; }

        .badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .heure-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e0f2fe; color: #0369a1; }
        .btn-status { width: 40px; height: 36px; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; font-weight: 700; font-size: 14px; transition: all 0.2s; background: white; }
        .btn-status.active-present { background: #27ae60; color: white; border-color: #27ae60; }
        .btn-status.active-absent { background: #e74c3c; color: white; border-color: #e74c3c; }
        .status-legend { display: inline-block; padding: 3px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
        .status-legend.present { background: #d4edda; color: #155724; }
        .status-legend.absent { background: #f8d7da; color: #721c24; }

        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
        .toast { background: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: flex; justify-content: space-between; align-items: center; gap: 15px; animation: slideIn 0.3s ease; border-left: 4px solid #3498db; }
        .toast-success { border-left-color: #27ae60; }
        .toast-error { border-left-color: #e74c3c; }
        .toast button { background: none; border: none; font-size: 20px; cursor: pointer; color: #7f8c8d; padding: 0 5px; }
        @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        @media (max-width: 768px) { .filter-row { grid-template-columns: 1fr; } }
    </style>
    <script src="/est-concours/app/view/admin/pedagogie/presence/list/main.js"></script>
</head>
<body>

<!-- HEADER ET MENU DE NAVIGATION -->
<?php include __DIR__ . '/../../../../../layouts/admin/header.php'; ?>
<?php include __DIR__ . '/../../../../../layouts/admin/pedagogie/nav-second-level.php'; ?>

<!-- CONTENU PRINCIPAL -->
<main class="main-content">
    <div class="container">

        <h1><i class="fas fa-clipboard-list" style="color:#27ae60;"></i> Gestion des Présences</h1>

        <!-- Statistiques -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📅</div>
                <div class="stat-info">
                    <span class="stat-label">Total Séances</span>
                    <span class="stat-value"><?= $stats['total_seances'] ?? 0 ?></span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">✅</div>
                <div class="stat-info">
                    <span class="stat-label">Présences</span>
                    <span class="stat-value"><?= $stats['total_presences'] ?? 0 ?></span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">👨‍🏫</div>
                <div class="stat-info">
                    <span class="stat-label">Professeurs</span>
                    <span class="stat-value"><?= $stats['total_professeurs'] ?? 0 ?></span>
                </div>
            </div>
        </div>

        <!-- Filtres -->
        <div class="filter-section">
            <div class="filter-row">
                <div class="form-group">
                    <label><i class="fas fa-calendar-alt"></i> Année Universitaire</label>
                    <select id="filterAnnee">
                        <option value="">-- Sélectionner --</option>
                        <?php foreach ($annees as $annee): ?>
                            <option value="<?= $annee ?>"><?= $annee ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-graduation-cap"></i> Filière</label>
                    <select id="filterFiliere">
                        <option value="">-- Sélectionner --</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-layer-group"></i> Semestre</label>
                    <select id="filterSemestre">
                        <option value="">-- Sélectionner --</option>
                    </select>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-book"></i> Module</label>
                    <select id="filterModule">
                        <option value="">-- Sélectionner --</option>
                    </select>
                </div>
            </div>
            <div class="btn-group" style="margin-top:15px;">
                <button class="btn btn-primary" onclick="loadStudents()"><i class="fas fa-users"></i> Charger les étudiants</button>
                <button class="btn btn-success" onclick="savePresence()"><i class="fas fa-save"></i> Enregistrer</button>
                <button class="btn btn-warning" onclick="openPresenceModal()"><i class="fas fa-plus"></i> Nouvelle Séance</button>
                <button class="btn btn-secondary" onclick="resetFilters()"><i class="fas fa-undo"></i> Réinitialiser</button>
            </div>
        </div>

        <!-- Infos module -->
        <div class="module-info" id="moduleInfo">
            <div style="display:flex;flex-wrap:wrap;gap:20px;">
                <span><i class="fas fa-book" style="color:#27ae60;"></i> <strong>Module :</strong> <span id="moduleName">-</span></span>
                <span><i class="fas fa-user-tie" style="color:#27ae60;"></i> <strong>Professeur :</strong> <span id="moduleProf">-</span></span>
                <span><i class="fas fa-users" style="color:#27ae60;"></i> <strong>Étudiants :</strong> <span id="moduleNbStudents">0</span></span>
            </div>
        </div>

        <!-- Liste des étudiants -->
        <div class="student-list-container" id="studentListContainer">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;">
                <h3 style="margin:0;color:#2c3e50;">
                    <i class="fas fa-users"></i> Liste des étudiants
                    <span style="font-size:14px;font-weight:400;color:#7f8c8d;margin-left:10px;" id="totalStudents">(0)</span>
                </h3>
                <div style="display:flex;gap:10px;flex-wrap:wrap;">
                    <button class="btn btn-sm btn-success" onclick="markAllPresent()"><i class="fas fa-check"></i> Tout Présent (P)</button>
                    <button class="btn btn-sm btn-danger" onclick="markAllAbsent()"><i class="fas fa-times"></i> Tout Absent (A)</button>
                </div>
            </div>
            <div id="studentList" style="overflow-x:auto;">
                <div style="text-align:center;padding:40px;color:#7f8c8d;">
                    <i class="fas fa-hand-pointer" style="font-size:40px;display:block;margin-bottom:10px;"></i>
                    Sélectionnez un module et cliquez sur "Charger les étudiants"
                </div>
            </div>
        </div>

        <!-- Séances enregistrées -->
        <div class="table-container">
            <h3><i class="fas fa-history"></i> Séances enregistrées</h3>
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Heure</th>
                        <th>Durée</th>
                        <th>Jour</th>
                        <th>Module</th>
                        <th>Professeur</th>
                        <th>Présents / Total</th>
                        <th>Taux</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php if (empty($presences)): ?>
                        <tr>
                            <td colspan="9" style="text-align:center;padding:40px;">
                                <i class="fas fa-inbox" style="font-size:40px;display:block;margin-bottom:10px;color:#bdc3c7;"></i>
                                Aucune séance enregistrée
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($presences as $p):
                            $total = $p['total_students'] ?? 0;
                            $presents = $p['total_presents'] ?? 0;
                            $taux = $total > 0 ? round(($presents / $total) * 100) : 0;
                            $heure = isset($p['heure_debut']) ? substr($p['heure_debut'], 0, 5) : '--:--';
                            $nbHeures = isset($p['nb_heures']) ? $p['nb_heures'] : 2;
                            $jour = isset($p['jour_semaine']) ? $p['jour_semaine'] : '-';
                            $dateSeance = isset($p['date_seance']) ? $p['date_seance'] : null;
                            ?>
                            <tr>
                                <td><?= $dateSeance ? date('d/m/Y', strtotime($dateSeance)) : '-' ?></td>
                                <td><span class="heure-badge"><i class="fas fa-clock"></i> <?= $heure ?></span></td>
                                <td><span class="badge badge-info"><?= $nbHeures ?>h</span></td>
                                <td><?= htmlspecialchars($jour) ?></td>
                                <td><strong><?= htmlspecialchars($p['module_libelle'] ?? '-') ?></strong></td>
                                <td><?= htmlspecialchars($p['employee_fullname'] ?? '-') ?></td>
                                <td><span class="badge badge-success"><?= $presents ?> / <?= $total ?></span></td>
                                <td>
                                    <div style="display:flex;align-items:center;gap:8px;">
                                        <div style="width:80px;height:6px;background:#ecf0f1;border-radius:3px;overflow:hidden;">
                                            <div style="width:<?= $taux ?>%;height:100%;background:<?= $taux >= 80 ? '#27ae60' : ($taux >= 50 ? '#f39c12' : '#e74c3c') ?>;"></div>
                                        </div>
                                        <span style="font-size:12px;"><?= $taux ?>%</span>
                                    </div>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="viewPresence(<?= $p['id'] ?>)"><i class="fas fa-eye"></i></button>
                                    <button class="btn btn-sm btn-warning" onclick="editPresence(<?= $p['id'] ?>)"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-sm btn-danger" onclick="deletePresence(<?= $p['id'] ?>)"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</main>

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

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

<!-- MODALES -->
<?php include __DIR__ . '/../create-edit/modal.php'; ?>
<?php include __DIR__ . '/../view/modal.php'; ?>

<!-- ============================================ -->
<!-- JAVASCRIPT -->
<!-- ============================================ -->


</body>
</html>