<?php session_start(); ?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Liste des Absences par Cycle</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --navy:    #0f172a;
            --teal:    #0d9488;
            --teal-lt: #ccfbf1;
            --sky:     #e0f2fe;
            --slate:   #475569;
            --border:  #e2e8f0;
            --white:   #ffffff;
            --danger:  #dc2626;
            --shadow:  0 4px 24px rgba(15,23,42,.08);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f1f5f9;
            color: var(--navy);
            min-height: 100vh;
        }

        /* ── Top bar ── */
        .topbar {
            background: var(--navy);
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,.25);
        }
        .topbar-icon {
            width: 36px; height: 36px;
            background: var(--teal);
            border-radius: 8px;
            display: grid; place-items: center;
            flex-shrink: 0;
        }
        .topbar-icon svg { width: 20px; height: 20px; fill: #fff; }
        .topbar h1 { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.2; }
        .topbar p  { font-size: .72rem; color: #94a3b8; font-weight: 400; }

        /* ── Card wrapper ── */
        .card {
            background: var(--white);
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin: 18px 14px;
        }
        .card-title {
            font-size: .78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--teal);
            margin-bottom: 14px;
        }

        /* ── Form grid ── */
        .form-grid {
            display: grid;
            gap: 14px;
        }
        @media (min-width: 600px) {
            .form-grid { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
        }

        label.field-label {
            display: block;
            font-size: .76rem;
            font-weight: 600;
            color: var(--slate);
            margin-bottom: 5px;
        }
        select, input[type="date"] {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid var(--border);
            border-radius: 9px;
            font-family: inherit;
            font-size: .88rem;
            color: var(--navy);
            background: var(--white);
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            transition: border-color .2s;
        }
        select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230d9488' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
                  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
        select:focus, input[type="date"]:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }

        .btn-search {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--teal);
            color: #fff;
            border: none;
            border-radius: 9px;
            padding: 10px 22px;
            font-family: inherit;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: background .2s, transform .1s;
        }
        .btn-search:active { transform: scale(.97); }
        .btn-search:hover  { background: #0b7c70; }
        .btn-search svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; }
        @media (min-width: 600px) { .btn-search { width: auto; white-space: nowrap; } }

        /* ── Results ── */
        .results-card { margin-top: 0; }

        /* Summary banner */
        .summary-banner {
            background: linear-gradient(135deg, var(--teal) 0%, #0b7c70 100%);
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 18px;
            flex-wrap: wrap;
        }
        .summary-banner .label { font-size: .82rem; color: rgba(255,255,255,.8); font-weight: 500; }
        .summary-banner .value { font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
        .summary-banner .icon { width: 48px; height: 48px; background: rgba(255,255,255,.15); border-radius: 12px; display: grid; place-items: center; }
        .summary-banner .icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; }

        /* Table – desktop */
        .abs-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem;
        }
        .abs-table thead th {
            background: #f8fafc;
            padding: 10px 14px;
            text-align: left;
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .07em;
            color: var(--slate);
            border-bottom: 2px solid var(--border);
        }
        .abs-table tbody tr {
            border-bottom: 1px solid var(--border);
            transition: background .15s;
        }
        .abs-table tbody tr:hover { background: #f8fafc; }
        .abs-table tbody td { padding: 12px 14px; vertical-align: middle; }
        .badge-class {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            background: var(--teal-lt);
            color: var(--teal);
            font-size: .75rem;
            font-weight: 700;
        }
        .days-pill {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--sky);
            color: #0369a1;
            font-weight: 700;
            font-size: .78rem;
            padding: 4px 12px;
            border-radius: 20px;
        }

        /* Card list – mobile */
        .abs-list { display: none; }
        @media (max-width: 599px) {
            .abs-table { display: none; }
            .abs-list   { display: flex; flex-direction: column; gap: 10px; }
        }
        .abs-item {
            background: #f8fafc;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px;
        }
        .abs-item .student-name { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
        .abs-item .meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }

        /* Empty state */
        .empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--slate);
        }
        .empty svg { width: 48px; height: 48px; stroke: #cbd5e1; fill: none; stroke-width: 1.5; margin-bottom: 12px; }
        .empty p { font-size: .88rem; }

        .noprint { }
        @media print {
            .noprint { display: none; }
            body { background: #fff; }
            .card { box-shadow: none; margin: 0; }
        }
    </style>
</head>
<body>

<?php
include '_serveur.php';
include 'header.php';
?>

<!-- Top bar -->
<div class="topbar noprint">
    <div class="topbar-icon">
        <svg viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
    </div>
    <div>
        <h1>Liste des Absences</h1>
        <p>Recherche par cycle et période</p>
    </div>
</div>

<!-- Search form -->
<div class="card noprint">
    <div class="card-title">🔍 Critères de recherche</div>
    <form method="post" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
        <div class="form-grid">

            <!-- Cycle -->
            <div>
                <label class="field-label" for="cycle">Cycle</label>
                <?php
                $sql = 'SELECT * FROM cycles ORDER BY name ASC';
                $req = mysqli_query($link, $sql);
                echo '<select name="cycle" id="cycle">';
                while ($data = mysqli_fetch_assoc($req)) {
                    $sel = (isset($_POST['cycle']) && $_POST['cycle'] == $data['id']) ? 'selected' : '';
                    echo '<option value="' . htmlspecialchars($data['id']) . '" ' . $sel . '>' . htmlspecialchars($data['name']) . '</option>';
                }
                echo '</select>';
                ?>
            </div>

            <!-- Date début -->
            <div>
                <label class="field-label" for="date">Date début</label>
                <input type="date" id="date" name="date"
                       value="<?php echo isset($_POST['date']) ? htmlspecialchars($_POST['date']) : ''; ?>">
            </div>

            <!-- Date fin -->
            <div>
                <label class="field-label" for="date1">Date fin</label>
                <input type="date" id="date1" name="date1"
                       value="<?php echo isset($_POST['date1']) ? htmlspecialchars($_POST['date1']) : date('Y-m-d'); ?>">
            </div>

            <!-- Submit -->
            <div>
                <button class="btn-search" name="envoyer" type="submit">
                    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    Chercher
                </button>
            </div>

        </div>
    </form>
</div>

<?php if (isset($_POST['envoyer'])):
    $date    = $link->real_escape_string($_POST['date']);
    $date1   = $link->real_escape_string($_POST['date1']);
    $cycleid = (int) $_POST['cycle'];

    $sql = "SELECT absences.studentID, absences.message, classes.name AS className
            FROM absences
            INNER JOIN classes ON absences.classID = classes.id
            INNER JOIN cycles  ON cycles.id = classes.cycleID
            WHERE cycles.id = $cycleid
              AND absences.date BETWEEN '$date' AND '$date1'
            ORDER BY absences.classID, absences.studentID";

    $req = mysqli_query($link, $sql);

    if (!$req) {
        echo '<div class="card" style="color:var(--danger)">Erreur SQL : ' . htmlspecialchars(mysqli_error($link)) . '</div>';
    } else {
        // Aggregate: count days per student
        $rows = [];
        while ($data = mysqli_fetch_assoc($req)) {
            $sid = $data['studentID'];
            if (!isset($rows[$sid])) {
                $rows[$sid] = ['name' => $data['message'], 'class' => $data['className'], 'days' => 0];
            }
            $rows[$sid]['days']++;
        }

        $totalDays = array_sum(array_column($rows, 'days'));
?>

<!-- Results -->
<div class="card results-card">
    <div class="card-title">📋 Résultats</div>

    <!-- Summary banner -->
    <div class="summary-banner">
        <div>
            <div class="label">Total des absences</div>
            <div class="value"><?php echo $totalDays; ?> <span style="font-size:1rem;font-weight:500;opacity:.8">jours</span></div>
        </div>
        <div class="icon">
            <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
        </div>
    </div>

    <?php if (empty($rows)): ?>
        <div class="empty">
            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <p>Aucune absence trouvée pour cette période.</p>
        </div>
    <?php else: ?>

        <!-- Desktop table -->
        <table class="abs-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Élève</th>
                    <th>Classe</th>
                    <th>Jours d'absence</th>
                </tr>
            </thead>
            <tbody>
                <?php $i = 1; foreach ($rows as $r): ?>
                <tr>
                    <td style="color:var(--slate);font-size:.8rem"><?php echo $i++; ?></td>
                    <td><strong><?php echo htmlspecialchars($r['name']); ?></strong></td>
                    <td><span class="badge-class"><?php echo htmlspecialchars($r['class']); ?></span></td>
                    <td><span class="days-pill">📅 <?php echo $r['days']; ?> jr</span></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- Mobile card list -->
        <div class="abs-list">
            <?php $i = 1; foreach ($rows as $r): ?>
            <div class="abs-item">
                <div class="student-name"><?php echo $i++; ?>. <?php echo htmlspecialchars($r['name']); ?></div>
                <div class="meta">
                    <span class="badge-class"><?php echo htmlspecialchars($r['class']); ?></span>
                    <span class="days-pill">📅 <?php echo $r['days']; ?> jour<?php echo $r['days'] > 1 ? 's' : ''; ?></span>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

    <?php endif; ?>
</div>

<?php } endif; ?>

</body>
</html>
