<?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-book-fill me-2 text-primary"></i>Mata Pelajaran</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">Mata Pelajaran</li>
        </ol>
      </nav>
    </div>
    <a href="<?= BASE_URL ?>/index.php?page=mapel_tambah" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i> Tambah Mapel
    </a>
  </div>

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

  <!-- Search Bar -->
  <div class="search-bar">
    <form method="GET" class="row g-2 align-items-end">
      <input type="hidden" name="page" value="mapel">
      <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 kode atau nama mata pelajaran..."
                 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=mapel" class="btn btn-outline-secondary ms-1">
          <i class="bi bi-x-lg"></i>
        </a>
      </div>
    </form>
  </div>

  <!-- Tabel -->
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0"><i class="bi bi-table me-2"></i>Daftar Mata Pelajaran</h6>
      <span class="badge bg-primary-subtle text-primary"><?= formatAngka(count($mapel)) ?> data</span>
    </div>
    <div class="card-body p-0">
      <?php if (empty($mapel)): ?>
        <div class="empty-state py-5">
          <div class="empty-icon">📚</div>
          <h6>Belum ada data mata pelajaran</h6>
          <?php if (!empty($search)): ?>
            <p class="text-muted">Tidak ada hasil untuk "<strong><?= e($search) ?></strong>"</p>
            <a href="<?= BASE_URL ?>/index.php?page=mapel" class="btn btn-outline-secondary btn-sm">Reset Pencarian</a>
          <?php else: ?>
            <a href="<?= BASE_URL ?>/index.php?page=mapel_tambah" class="btn btn-primary btn-sm mt-2">
              <i class="bi bi-plus-lg me-1"></i> Tambah Mata Pelajaran
            </a>
          <?php endif; ?>
        </div>
      <?php else: ?>
        <div class="table-responsive">
          <table class="table mb-0">
            <thead>
              <tr>
                <th style="width:50px">No</th>
                <th style="width:120px">Kode</th>
                <th>Nama Mata Pelajaran</th>
                <th style="width:80px" class="text-center">KKM</th>
                <th>Guru Pengampu</th>
                <th style="width:120px" class="text-center">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($mapel as $i => $mp): ?>
              <tr>
                <td class="text-muted"><?= $i + 1 ?></td>
                <td>
                  <span class="badge bg-primary-subtle text-primary fw-600">
                    <?= e($mp['kode']) ?>
                  </span>
                </td>
                <td class="fw-600"><?= e($mp['nama']) ?></td>
                <td class="text-center">
                  <span class="badge bg-secondary-subtle text-secondary"><?= (int)$mp['kkm'] ?></span>
                </td>
                <td class="text-muted">
                  <?= !empty($mp['nama_guru']) ? e($mp['nama_guru']) : '<span class="text-muted fst-italic">Belum ada</span>' ?>
                </td>
                <td class="text-center">
                  <a href="<?= BASE_URL ?>/index.php?page=mapel_edit&id=<?= $mp['id'] ?>"
                     class="btn btn-sm btn-outline-warning btn-icon"
                     data-bs-toggle="tooltip" title="Edit">
                    <i class="bi bi-pencil"></i>
                  </a>
                  <a href="<?= BASE_URL ?>/index.php?page=mapel_hapus&id=<?= $mp['id'] ?>&csrf=<?= generateCSRF() ?>"
                     class="btn btn-sm btn-outline-danger btn-icon ms-1"
                     data-confirm="Hapus mata pelajaran <?= e($mp['nama']) ?>?"
                     data-bs-toggle="tooltip" title="Hapus">
                    <i class="bi bi-trash"></i>
                  </a>
                </td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>

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