<?php session_start(); ?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Liste des Absences par Classe</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
<style>
:root {
  --navy:    #0d2158;
  --blue:    #1a4aad;
  --accent:  #2a6dd9;
  --light:   #93c5fd;
  --bg:      #f1f5fb;
  --panel:   #ffffff;
  --text:    #0f172a;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --success: #16a34a;
  --radius:  12px;
  --trans:   .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 32px 24px 48px;
}

/* ── Page header ── */
.page-header {
  margin-bottom: 28px;
}
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.page-header p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Filter card ── */
.filter-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.filter-card form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
}
.field label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.field select,
.field input[type="date"] {
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  color: var(--text);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
  cursor: pointer;
}
.field 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='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field select:focus,
.field input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,109,217,.12);
}

.btn-search {
  height: 42px;
  padding: 0 28px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-search:hover {
  background: var(--blue);
  transform: translateY(-1px);
}
.btn-search svg { flex-shrink: 0; }

/* ── Results section ── */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.results-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge {
  background: var(--blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: .03em;
}

/* ── Table ── */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
thead th {
  background: var(--navy);
  color: rgba(255,255,255,.9);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 13px 18px;
  text-align: left;
  white-space: nowrap;
}
thead th:first-child { border-radius: 0; }
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f8faff; }
tbody td {
  padding: 13px 18px;
  color: var(--text);
  vertical-align: middle;
}
.td-class {
  font-weight: 700;
  color: var(--blue);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.td-name {
  font-weight: 600;
}
.td-date {
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}
.absent-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--muted);
}
.empty-state svg {
  margin-bottom: 14px;
  opacity: .35;
}
.empty-state p {
  font-size: .9rem;
}

/* ── Row counter ── */
tbody td.row-num {
  width: 42px;
  font-size: .75rem;
  color: #cbd5e1;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 600px) {
  body { padding: 18px 14px 36px; }
  .filter-card { padding: 18px; }
  .field { flex: 1 1 140px; }
}
</style>
</head>
<body>

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

<div class="page-header">
  <h1>Liste des Absences</h1>
  <p>Recherche par classe et par date</p>
</div>

<!-- Filter card -->
<div class="filter-card">
  <form method="post" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
    <input name="cycle" type="hidden" value="<?php $cycle = $_REQUEST['cycle'] ?? ''; echo htmlspecialchars($cycle); ?>">

    <!-- Classe -->
    <div class="field">
      <label>Classe</label>
      <?php
      $sql = 'SELECT * FROM classes ORDER BY id ASC';
      $req = mysqli_query($link, $sql);
      echo '<select name="cla">';
      $selected_cla = $_POST['cla'] ?? '';
      while ($data = mysqli_fetch_array($req)) {
        $classeid = $data['id'];
        $classe   = strtoupper($data['name']);
        $sel = ($selected_cla == $classeid) ? 'selected' : '';
        echo "<option value=\"$classeid\" $sel>$classe</option>";
      }
      echo '</select>';
      ?>
    </div>

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

    <!-- Submit -->
    <button class="btn-search" name="envoyer" type="submit">
      <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
      </svg>
      Afficher
    </button>
  </form>
</div>

<?php
if (isset($_POST['envoyer'])) {
  $classeid = $_POST['cla'];
  $date     = $_POST['date'];

  $sql = 'SELECT * FROM absences
          JOIN students ON absences.studentID = students.id AND absences.classID = students.classID
          JOIN classes  ON classes.id = absences.classID
          WHERE absences.classID = "' . mysqli_real_escape_string($link, $classeid) . '"
            AND absences.date    = "' . mysqli_real_escape_string($link, $date) . '"
          ORDER BY students.firstName, students.lastName';

  $req   = mysqli_query($link, $sql);
  $count = $req ? mysqli_num_rows($req) : 0;
?>

<div class="results-header">
  <span class="results-title">
    Résultats
    <span class="badge"><?php echo $count; ?> élève<?php echo $count !== 1 ? 's' : ''; ?></span>
  </span>
</div>

<div class="table-wrap">
<?php if ($count > 0): ?>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Classe</th>
        <th>Élève</th>
        <th>Date</th>
        <th>Statut</th>
      </tr>
    </thead>
    <tbody>
    <?php
    $i = 1;
    while ($data = mysqli_fetch_array($req)):
      $d_date      = htmlspecialchars($data[3]);
      $firstName   = htmlspecialchars($data[7]);
      $lastName    = htmlspecialchars($data[8]);
      $classe_name = htmlspecialchars($data[12]);
    ?>
      <tr>
        <td class="row-num"><?php echo $i++; ?></td>
        <td class="td-class"><?php echo $classe_name; ?></td>
        <td class="td-name"><?php echo $firstName . ' ' . $lastName; ?></td>
        <td class="td-date"><?php echo $d_date; ?></td>
        <td><span class="absent-badge">
          <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/>
          </svg>
          Absent
        </span></td>
      </tr>
    <?php endwhile; ?>
    </tbody>
  </table>
<?php else: ?>
  <div class="empty-state">
    <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
      <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
    </svg>
    <p>Aucune absence trouvée pour cette classe à cette date.</p>
  </div>
<?php endif; ?>
</div>

<?php } ?>

</body>
</html>
