<!DOCTYPE html>
<html lang="id" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jadwal Pelajaran — SIA SD Cerdas</title>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
  body{ font-family:'Inter', sans-serif; background:#f3f5f4; }
  .hero{ background:linear-gradient(135deg,#1d7a6e,#145e54); color:#fff; padding:32px 0; }
  .hero h1{ font-family:'Sora', sans-serif; font-weight:800; }
  .panel{ background:#fff; border:1px solid #e3e8e6; border-radius:14px; box-shadow:0 1px 2px rgba(16,36,32,.04); }
  .table thead th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#677a76; }
  .day-badge{ background:#e2f1ee; color:#1d7a6e; font-weight:700; font-size:.72rem; padding:3px 10px; border-radius:99px; }
</style>
</head>
<body>

<div class="hero">
  <div class="container">
    <h1 class="mb-1"><i class="fa-solid fa-calendar-days me-2"></i> Jadwal Pelajaran</h1>
    <p class="mb-0 opacity-75">SIA SD Cerdas — informasi jadwal yang sudah dipublikasikan</p>
  </div>
</div>

<div class="container py-4">
  <form method="GET" class="row g-2 mb-3 align-items-end">
    <div class="col-auto">
      <label class="form-label small">Filter Kelas</label>
      <select name="class" class="form-select" onchange="this.form.submit()">
        <option value="">Semua Kelas</option>
        @foreach ($classes as $class)
          <option value="{{ $class }}" {{ request('class') == $class ? 'selected' : '' }}>{{ $class }}</option>
        @endforeach
      </select>
    </div>
  </form>

  <div class="panel">
    <div class="table-responsive">
      <table class="table mb-0">
        <thead>
          <tr>
            <th>Hari</th>
            <th>Jam</th>
            <th>Kelas</th>
            <th>Mata Pelajaran</th>
            <th>Guru</th>
            <th>Ruang</th>
          </tr>
        </thead>
        <tbody>
          @forelse ($schedules as $schedule)
            <tr>
              <td><span class="day-badge">{{ $schedule->day }}</span></td>
              <td>{{ $schedule->timeslot->label }} <span class="text-muted small">({{ \Illuminate\Support\Carbon::parse($schedule->timeslot->start_time)->format('H:i') }}–{{ \Illuminate\Support\Carbon::parse($schedule->timeslot->end_time)->format('H:i') }})</span></td>
              <td class="fw-semibold">{{ $schedule->class }}</td>
              <td>{{ $schedule->subject }}</td>
              <td>{{ $schedule->teacher->name ?? '-' }}</td>
              <td>{{ $schedule->classroom->name ?? '-' }}</td>
            </tr>
          @empty
            <tr><td colspan="6" class="text-center text-muted py-4">Belum ada jadwal yang dipublikasikan.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

</body>
</html>
