<?php include __DIR__ . '/../../views/layouts/header.php'; ?>
<div class="wrapper">
<?php include __DIR__ . '/../../views/layouts/sidebar.php'; ?>
<div class="main-content">
<?php include __DIR__ . '/../../views/layouts/topbar.php'; ?>

<div class="page-content">
  <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <h1><i class="bi bi-building-fill me-2 text-primary"></i>Data Kelas</h1>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/index.php?page=dashboard">Dashboard</a></li>
          <li class="breadcrumb-item active">Data Kelas</li>
        </ol>
      </nav>
    </div>
    <a href="<?= BASE_URL ?>/index.php?page=kelas_tambah" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i> Tambah Kelas
    </a>
  </div>

  <?php if ($flash): ?>
  <div class="alert alert-<?= $flash['type'] ?> alert-dismissible alert-auto-dismiss fade show">
    <?= e($flash['message']) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  <?php endif; ?>

  <!-- Filter -->
  <div class="search-bar">
    <form method="GET" class="row g-2 align-items-end">
      <input type="hidden" name="page" value="kelas">
      <div class="col-12 col-md-6">
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-search"></i></span>
          <input type="text" class="form-control" name="search" placeholder="Cari nama kelas..."
                 value="<?= e($search ?? '') ?>">
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary"><i class="bi bi-search me-1"></i> Cari</button>
        <a href="<?= BASE_URL ?>/index.php?page=kelas" class="btn btn-outline-secondary ms-1"><i class="bi bi-x-lg"></i></a>
      </div>
    </form>
  </div>

  <!-- Cards Grid -->
  <?php if (empty($kelas)): ?>
    <div class="empty-state card py-5">
      <div class="empty-icon">🏫</div>
      <h6>Belum ada data kelas</h6>
      <a href="<?= BASE_URL ?>/index.php?page=kelas_tambah" class="btn btn-primary btn-sm mt-2">Tambah Kelas</a>
    </div>
  <?php else: ?>
  <div class="row g-3">
    <?php foreach ($kelas as $k): ?>
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
              <h5 class="fw-700 mb-1"><?= e($k['nama_kelas']) ?></h5>
              <span class="badge bg-primary-subtle text-primary">Tingkat <?= e($k['tingkat']) ?></span>
              <?php if ($k['jurusan']): ?>
                <span class="badge bg-secondary-subtle text-secondary ms-1"><?= e($k['jurusan']) ?></span>
              <?php endif; ?>
            </div>
            <div class="stat-icon blue" style="width:44px;height:44px;font-size:1.1rem;">
              <i class="bi bi-building"></i>
            </div>
          </div>

          <div class="d-flex align-items-center gap-2 mb-2">
            <i class="bi bi-people text-muted"></i>
            <span class="fw-600"><?= $k['jumlah_siswa'] ?></span>
            <span class="text-muted fs-sm">/ <?= $k['kapasitas'] ?> siswa</span>
          </div>

          <div class="progress mb-3" style="height:6px;">
            <?php $pct = $k['kapasitas'] > 0 ? min(100, round($k['jumlah_siswa']/$k['kapasitas']*100)) : 0; ?>
            <div class="progress-bar <?= $pct >= 90 ? 'bg-danger' : ($pct >= 70 ? 'bg-warning' : 'bg-success') ?>"
                 style="width:<?= $pct ?>%"></div>
          </div>

          <div class="d-flex align-items-center gap-2 mb-3">
            <i class="bi bi-person-badge text-muted"></i>
            <span class="fs-sm"><?= e($k['nama_wali_kelas'] ?? 'Belum ada wali kelas') ?></span>
          </div>

          <div class="d-flex gap-2">
            <a href="<?= BASE_URL ?>/index.php?page=kelas_anggota&kelas_id=<?= $k['id'] ?>"
               class="btn btn-sm btn-outline-info flex-fill">
              <i class="bi bi-people me-1"></i> Anggota
            </a>
            <a href="<?= BASE_URL ?>/index.php?page=kelas_edit&id=<?= $k['id'] ?>"
               class="btn btn-sm btn-outline-warning btn-icon">
              <i class="bi bi-pencil"></i>
            </a>
            <a href="<?= BASE_URL ?>/index.php?page=kelas_hapus&id=<?= $k['id'] ?>&csrf=<?= generateCSRF() ?>"
               class="btn btn-sm btn-outline-danger btn-icon"
               data-confirm="Hapus kelas <?= e($k['nama_kelas']) ?>?">
              <i class="bi bi-trash"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>
</div>

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