<?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-person-badge-fill me-2 text-primary"></i>Data Guru</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 Guru</li>
        </ol>
      </nav>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <a href="<?= BASE_URL ?>/index.php?page=guru_export" class="btn btn-success btn-sm">
        <i class="bi bi-file-earmark-excel me-1"></i> Export
      </a>
      <a href="<?= BASE_URL ?>/index.php?page=guru_import" class="btn btn-warning btn-sm">
        <i class="bi bi-upload me-1"></i> Import
      </a>
      <a href="<?= BASE_URL ?>/index.php?page=guru_tambah" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i> Tambah Guru
      </a>
    </div>
  </div>

  <?php if ($flash): ?>
  <div class="alert alert-<?= $flash['type'] ?> alert-dismissible alert-auto-dismiss fade show">
    <i class="bi bi-check-circle-fill me-2"></i><?= 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="guru">
      <div class="col-12 col-md-5">
        <label class="form-label mb-1">Cari Guru</label>
        <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="Nama, NIP, Mata Pelajaran..."
                 value="<?= e($search) ?>">
        </div>
      </div>
      <div class="col-6 col-md-3">
        <label class="form-label mb-1">Status</label>
        <select class="form-select" name="status">
          <option value="">Semua Status</option>
          <option value="Aktif" <?= $status === 'Aktif' ? 'selected' : '' ?>>Aktif</option>
          <option value="Tidak Aktif" <?= $status === 'Tidak Aktif' ? 'selected' : '' ?>>Tidak Aktif</option>
        </select>
      </div>
      <div class="col-6 col-md-4 d-flex gap-2">
        <button type="submit" class="btn btn-primary flex-fill">
          <i class="bi bi-search me-1"></i> Cari
        </button>
        <a href="<?= BASE_URL ?>/index.php?page=guru" class="btn btn-outline-secondary">
          <i class="bi bi-x-lg"></i>
        </a>
      </div>
    </form>
  </div>

  <!-- Table -->
  <div class="card">
    <div class="card-header">
      <h6 class="mb-0">
        <i class="bi bi-table me-2"></i>Daftar Guru
        <span class="badge bg-primary ms-1"><?= formatAngka($total) ?></span>
      </h6>
    </div>
    <div class="card-body p-0">
      <?php if (empty($guru)): ?>
        <div class="empty-state">
          <div class="empty-icon">👨‍🏫</div>
          <h6>Tidak ada data guru</h6>
          <a href="<?= BASE_URL ?>/index.php?page=guru_tambah" class="btn btn-primary btn-sm mt-2">
            <i class="bi bi-plus-lg me-1"></i> Tambah Guru
          </a>
        </div>
      <?php else: ?>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>No</th>
              <th>Nama Guru</th>
              <th>NIP</th>
              <th>Mata Pelajaran</th>
              <th>Status Kepegawaian</th>
              <th>No. HP</th>
              <th>Status</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($guru as $i => $g): ?>
            <tr>
              <td class="text-muted"><?= nomorUrut($i, $curPage, 15) ?></td>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <?php if (!empty($g['foto'])): ?>
                    <img src="<?= BASE_URL ?>/uploads/<?= e($g['foto']) ?>" class="avatar avatar-sm" alt="">
                  <?php else: ?>
                    <div class="avatar-placeholder avatar-sm" style="width:32px;height:32px;font-size:.75rem;">
                      <?= strtoupper(substr($g['nama'], 0, 1)) ?>
                    </div>
                  <?php endif; ?>
                  <div>
                    <div class="fw-600"><?= e($g['nama']) ?></div>
                    <div class="text-muted fs-sm"><?= e($g['jenis_kelamin']) ?></div>
                  </div>
                </div>
              </td>
              <td class="text-muted"><?= e($g['nip'] ?? '-') ?></td>
              <td>
                <?php if (!empty($g['kode_mapel'])): ?>
                  <span class="badge bg-primary-subtle text-primary fw-600">
                    <?= e($g['kode_mapel']) ?>
                  </span>
                  <?php if ($g['nama_mapel'] !== $g['kode_mapel']): ?>
                  <div class="text-muted fs-sm"><?= e($g['nama_mapel']) ?></div>
                  <?php endif; ?>
                <?php else: ?>
                  <span class="text-muted fst-italic" style="font-size:.82rem;">Belum diset</span>
                <?php endif; ?>
              </td>
              <td>
                <?php
                $kepClass = ['PNS'=>'bg-primary','GTT'=>'bg-info','GTY'=>'bg-success','Honorer'=>'bg-warning text-dark'][$g['status_kepegawaian']] ?? 'bg-secondary';
                ?>
                <span class="badge <?= $kepClass ?>"><?= e($g['status_kepegawaian']) ?></span>
              </td>
              <td><?= e($g['no_hp'] ?? '-') ?></td>
              <td>
                <span class="badge <?= $g['status'] === 'Aktif' ? 'badge-aktif' : 'badge-tidak-aktif' ?>">
                  <?= e($g['status']) ?>
                </span>
              </td>
              <td>
                <div class="d-flex gap-1">
                  <a href="<?= BASE_URL ?>/index.php?page=guru_detail&id=<?= $g['id'] ?>"
                     class="btn btn-sm btn-outline-info btn-icon" data-bs-toggle="tooltip" title="Detail">
                    <i class="bi bi-eye"></i>
                  </a>
                  <a href="<?= BASE_URL ?>/index.php?page=guru_edit&id=<?= $g['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=guru_hapus&id=<?= $g['id'] ?>&csrf=<?= generateCSRF() ?>"
                     class="btn btn-sm btn-outline-danger btn-icon"
                     data-confirm="Hapus data guru <?= e($g['nama']) ?>?"
                     data-bs-toggle="tooltip" title="Hapus">
                    <i class="bi bi-trash"></i>
                  </a>
                </div>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <?php if ($pagination): ?>
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-top flex-wrap gap-2">
        <small class="text-muted">Menampilkan <?= count($guru) ?> dari <?= formatAngka($total) ?> data</small>
        <?= $pagination ?>
      </div>
      <?php endif; ?>
      <?php endif; ?>
    </div>
  </div>
</div>

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