<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  --ff: 'DM Sans', sans-serif;
  --fm: 'DM Mono', monospace;
  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --text: #1a1a1a;
  --muted: #6b7280;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-dark: #0C447C;
  --teal: #0F6E56;
  --teal-light: #E1F5EE;
  --teal-dark: #085041;
  --indigo: #6366f1;
  --indigo-light: #ede9fe;
  --indigo-dark: #4338ca;
}

.rek-root { font-family: var(--ff); padding: 1.5rem 0; color: var(--text); }

/* Header */
.page-title { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.title-icon { width: 36px; height: 36px; background: var(--indigo); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.title-icon i { color: #fff; font-size: 15px; }
.page-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; padding-left: 46px; }

/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px; padding: 13px 18px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.filter-input { background: #fafafa; border: 0.5px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 12px; font-size: 13px; outline: none; font-family: var(--ff); transition: border-color .15s, box-shadow .15s; }
.filter-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; }
.btn-filter { background: var(--indigo); border: none; color: #fff; border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff); transition: background .15s; }
.btn-filter:hover { background: var(--indigo-dark); }

/* Panel */
.rek-panel { background: var(--surface); border: 0.5px solid var(--border); border-radius: 16px; overflow: hidden; }
.panel-head { padding: 13px 18px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.head-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.count-chip { font-size: 11px; color: var(--muted); background: #f1f5f9; padding: 3px 10px; border-radius: 20px; font-weight: 500; }

/* Table */
.tbl-wrap { overflow-x: auto; }
.rek-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rek-table thead tr { background: #fafafa; }
.rek-table thead th { padding: 10px 14px; text-align: left; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; border-bottom: 0.5px solid var(--border); white-space: nowrap; }
.rek-table tbody tr { border-bottom: 0.5px solid var(--border); transition: background .1s; }
.rek-table tbody tr:last-child { border-bottom: none; }
.rek-table tbody tr:hover { background: #fafafa; }
.rek-table tbody td { padding: 11px 14px; vertical-align: middle; }

/* Cells */
.no-cell { font-family: var(--fm); font-size: 11px; color: var(--muted); font-weight: 500; }
.name-cell { font-weight: 500; font-size: 13px; }
.badge-pos { font-size: 11px; color: var(--muted); background: #f1f5f9; padding: 3px 8px; border-radius: 5px; font-weight: 500; }
.hadir-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--teal-light); color: var(--teal-dark); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; font-family: var(--fm); }
.jam-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-light); color: var(--blue-dark); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; font-family: var(--fm); }
</style>

<div class="rek-root">

  <div class="page-title">
    <div class="title-icon">
      <i class="bi bi-file-earmark-bar-graph-fill"></i>
    </div>
    Rekap Absensi
  </div>
  <div class="page-sub">Ringkasan kehadiran dan jam kerja per karyawan</div>

  <form method="get" class="filter-bar">
    <span class="filter-label">Periode</span>
    <input type="month"
           name="bulan"
           value="<?= $bulan ?>"
           class="filter-input">
    <button class="btn-filter">
      <i class="bi bi-funnel-fill" style="font-size:11px"></i>
      Filter
    </button>
  </form>

  <div class="rek-panel">
    <div class="panel-head">
      <div class="panel-head-title">
        <div class="head-icon" style="background:var(--indigo-light)">
          <i class="bi bi-table" style="color:var(--indigo);font-size:12px"></i>
        </div>
        Detail Rekap Karyawan
      </div>
      <span class="count-chip"><?= count($laporan) ?> karyawan</span>
    </div>
    <div class="tbl-wrap">
      <table class="rek-table">
        <thead>
          <tr>
            <th>No</th>
            <th>Nama Karyawan</th>
            <th>Posisi</th>
            <th>Total Hadir</th>
            <th>Total Jam Kerja</th>
          </tr>
        </thead>
        <tbody>
          <?php if(empty($laporan)): ?>
            <tr>
              <td colspan="5" style="text-align:center;padding:32px;color:var(--muted);font-size:13px">
                <i class="bi bi-inbox" style="font-size:28px;display:block;margin-bottom:8px;opacity:.4"></i>
                Tidak ada data
              </td>
            </tr>
          <?php endif; ?>

          <?php $no = 1; ?>
          <?php foreach($laporan as $l): ?>
            <tr>
              <td><span class="no-cell"><?= $no++ ?></span></td>
              <td><div class="name-cell"><?= esc($l['nama_karyawan']) ?></div></td>
              <td><span class="badge-pos"><?= esc($l['posisi_karyawan']) ?></span></td>
              <td><span class="hadir-pill"><?= $l['total_hadir'] ?> Hari</span></td>
              <td><span class="jam-pill"><?= $l['total_jam'] ?> Jam</span></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>

</div>

<?= $this->endSection() ?>

<?= $this->section('css') ?>
<style>
/* Aktifkan menu Rekap Absensi di sidebar */
a[href*="rekap-absensi"],
a[href*="rekap_absensi"] {
  color: var(--accent, #4f6ef7) !important;
  background: var(--accent-soft, #eef0fe) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--accent, #4f6ef7) !important;
}
a[href*="rekap-absensi"] i,
a[href*="rekap_absensi"] i {
  color: var(--accent, #4f6ef7) !important;
}
</style>
<?= $this->endSection() ?>