<?php
session_start();
include '_serveur.php';
mysqli_set_charset($link, "utf8");

$cycle = intval($_GET['cycle'] ?? 0);

$doRedirect = false;
if (isset($_POST['envoyer'])) {
    $cellm = explode(';', $_POST['cont'], 2);
    $_SESSION['classeid'] = intval($cellm[0]);
    $_SESSION['classe1']  = $cellm[1] ?? '';
    $_SESSION['date1']    = $_POST['date1'];
    $doRedirect = true;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Saisir Absence</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Segoe UI",Arial,sans-serif;background:#f0f4ff;min-height:100vh;color:#1f2937;}

.topbar{background:#1e3a8a;color:white;padding:14px 24px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.topbar h1{font-size:18px;font-weight:700;}
.topbar i{font-size:20px;opacity:.85;}

.container{max-width:560px;margin:48px auto;padding:0 16px;}

.card{background:white;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.1);padding:36px 40px;}
.card-title{font-size:.72rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#1e3a8a;margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.card-title::after{content:'';flex:1;height:1px;background:#e5e7eb;}

.field{margin-bottom:20px;}
.field label{display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px;}
.field select,
.field input[type="date"]{
  width:100%;padding:11px 14px;
  border:1.5px solid #d1d5db;border-radius:10px;
  font-size:.95rem;color:#1f2937;background:white;
  transition:border-color .2s;appearance:none;
  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 fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input[type="date"]{background-image:none;}
.field select:focus,
.field input[type="date"]:focus{outline:none;border-color:#1e3a8a;background:#eff6ff;}

.btn-row{display:flex;gap:12px;margin-top:28px;}
.btn{padding:11px 24px;border:none;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;text-decoration:none;}
.btn-primary{background:#1e3a8a;color:white;flex:1;justify-content:center;}
.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 14px rgba(30,58,138,.35);}
.btn-reset{background:#f3f4f6;color:#374151;border:1.5px solid #d1d5db;}
.btn-reset:hover{background:#e5e7eb;}
</style>
</head>
<body>

<?php if ($doRedirect): ?>
<script>
  // Works both in full page and inside iframe/loadPage()
  if (window.parent && window.parent !== window) {
    window.parent.location.href = 'continuerabsencec1.php';
  } else {
    window.location.href = 'continuerabsencec1.php';
  }
</script>
<noscript><meta http-equiv="refresh" content="0;url=continuerabsencec1.php"></noscript>
<?php endif; ?>

<div class="topbar">
  <i class="fa fa-calendar-xmark"></i>
  <h1>Saisir les Absences</h1>
</div>

<div class="container">
  <div class="card">
    <div class="card-title"><i class="fa fa-pen-to-square"></i> Sélection</div>
    <form method="post" action="<?= htmlspecialchars($_SERVER['REQUEST_URI']) ?>">

      <div class="field">
        <label><i class="fa fa-users"></i> Classe</label>
        <select name="cont" required>
          <?php
          $sql = 'SELECT id, name FROM classes WHERE cycleID="' . $cycle . '" ORDER BY id ASC';
          $req = mysqli_query($link, $sql);
          while ($data = mysqli_fetch_assoc($req)) {
              $n = strtoupper($data['name']);
              echo '<option value="' . $data['id'] . ';' . $n . '">' . htmlspecialchars($n) . '</option>';
          }
          ?>
        </select>
      </div>

      <div class="field">
        <label><i class="fa fa-calendar-day"></i> Date</label>
        <input type="date" name="date1" value="<?= date('Y-m-d') ?>" required>
      </div>

      <div class="btn-row">
        <button type="reset" class="btn btn-reset"><i class="fa fa-rotate-left"></i> Effacer</button>
        <button type="submit" name="envoyer" class="btn btn-primary"><i class="fa fa-arrow-right"></i> Continuer</button>
      </div>

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

</body>
</html>
