<?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">
  <!-- Page Header -->
  <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <h1><i class="bi bi-speedometer2 me-2 text-primary"></i>Dashboard</h1>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb"><li class="breadcrumb-item active">Dashboard</li></ol>
      </nav>
    </div>
    <div class="text-muted fs-sm">
      <i class="bi bi-calendar3 me-1"></i><?= formatTanggal(date('Y-m-d'), 'd F Y') ?>
    </div>
  </div>

  <!-- Stat Cards Baris 1 -->
  <div class="row g-3 mb-4">
    <!-- Total Siswa -->
    <div class="col-6 col-lg-3">
      <a href="<?= BASE_URL ?>/index.php?page=siswa" class="text-decoration-none">
        <div class="stat-card">
          <div class="stat-icon blue"><i class="bi bi-people-fill"></i></div>
          <div class="stat-info">
            <div class="stat-value" data-target="<?= $totalSiswa ?>"><?= formatAngka($totalSiswa) ?></div>
            <div class="stat-label">Total Siswa</div>
            <div class="d-flex gap-2 mt-1 flex-wrap">
              <a href="<?= BASE_URL ?>/index.php?page=siswa&status=Aktif"
                 class="text-decoration-none"
                 style="font-size:.72rem;background:#dcfce7;color:#15803d;padding:2px 7px;border-radius:4px;font-weight:600;">
                Aktif: <?= $totalSiswaAktif ?>
              </a>
              <?php if ($totalSiswaGaib > 0): ?>
              <a href="<?= BASE_URL ?>/index.php?page=siswa&status=Gaib"
                 class="text-decoration-none"
                 style="font-size:.72rem;background:#fef3c7;color:#d97706;padding:2px 7px;border-radius:4px;font-weight:600;">
                <i class="bi bi-person-exclamation"></i> Gaib: <?= $totalSiswaGaib ?>
              </a>
              <?php endif; ?>
              <?php
              // Tampilkan status lain jika ada
              $statusMap = [];
              foreach ($siswaStatus as $ss) { $statusMap[$ss['status']] = $ss['total']; }
              $statusMini = [
                'Lulus'      => ['bg'=>'#dbeafe','color'=>'#1d4ed8'],
                'Pindah'     => ['bg'=>'#fef9c3','color'=>'#854d0e'],
                'Keluar'     => ['bg'=>'#fee2e2','color'=>'#dc2626'],
                'Tidak Aktif'=> ['bg'=>'#f1f5f9','color'=>'#64748b'],
              ];
              foreach ($statusMini as $sn => $sc):
                $cnt = $statusMap[$sn] ?? 0;
                if ($cnt == 0) continue;
              ?>
              <a href="<?= BASE_URL ?>/index.php?page=siswa&status=<?= urlencode($sn) ?>"
                 class="text-decoration-none"
                 style="font-size:.72rem;background:<?= $sc['bg'] ?>;color:<?= $sc['color'] ?>;padding:2px 7px;border-radius:4px;font-weight:600;">
                <?= $sn ?>: <?= $cnt ?>
              </a>
              <?php endforeach; ?>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon green"><i class="bi bi-person-badge-fill"></i></div>
        <div class="stat-info">
          <div class="stat-value" data-target="<?= $totalGuru ?>"><?= formatAngka($totalGuru) ?></div>
          <div class="stat-label">Total Guru Aktif</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon orange"><i class="bi bi-building-fill"></i></div>
        <div class="stat-info">
          <div class="stat-value" data-target="<?= $totalKelas ?>"><?= formatAngka($totalKelas) ?></div>
          <div class="stat-label">Total Kelas</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon purple"><i class="bi bi-book-fill"></i></div>
        <div class="stat-info">
          <div class="stat-value" data-target="<?= $totalMapel ?>"><?= formatAngka($totalMapel) ?></div>
          <div class="stat-label">Mata Pelajaran</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <!-- Siswa per Kelas -->
    <div class="col-12 col-lg-8">
      <div class="card h-100">
        <div class="card-header">
          <h6><i class="bi bi-bar-chart-fill me-2 text-primary"></i>Siswa per Kelas</h6>
          <a href="<?= BASE_URL ?>/index.php?page=kelas" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
        </div>
        <div class="card-body">
          <?php if (empty($siswaPerKelas)): ?>
            <div class="empty-state"><div class="empty-icon">📊</div><p>Belum ada data</p></div>
          <?php else: ?>
          <div class="table-responsive">
            <table class="table table-sm">
              <thead>
                <tr>
                  <th>Kelas</th>
                  <th class="text-center">Aktif</th>
                  <th class="text-center" style="color:#d97706;">Gaib</th>
                  <th class="text-center">Total</th>
                  <th style="width:35%">Grafik</th>
                </tr>
              </thead>
              <tbody>
                <?php
                $maxSiswa = max(array_column($siswaPerKelas, 'total')) ?: 1;
                foreach ($siswaPerKelas as $k):
                  $pct = round(($k['total'] / $maxSiswa) * 100);
                  $pctGaib = $k['total'] > 0 ? round(($k['total_gaib'] / $k['total']) * 100) : 0;
                ?>
                <tr>
                  <td class="fw-600"><?= e($k['nama_kelas']) ?></td>
                  <td class="text-center">
                    <span class="badge" style="background:#dcfce7;color:#15803d;"><?= $k['total_aktif'] ?></span>
                  </td>
                  <td class="text-center">
                    <?php if ($k['total_gaib'] > 0): ?>
                    <span class="badge" style="background:#fef3c7;color:#d97706;"><?= $k['total_gaib'] ?></span>
                    <?php else: ?>
                    <span class="text-muted">-</span>
                    <?php endif; ?>
                  </td>
                  <td class="text-center fw-600"><?= $k['total'] ?></td>
                  <td>
                    <div class="progress" style="height:8px;">
                      <div class="progress-bar bg-primary" style="width:<?= $pct - $pctGaib ?>%"></div>
                      <div class="progress-bar" style="width:<?= $pctGaib ?>%;background:#f59e0b;"></div>
                    </div>
                  </td>
                </tr>
                <?php endforeach; ?>
              </tbody>
            </table>
          </div>
          <!-- Legend -->
          <div class="d-flex gap-3 mt-2" style="font-size:.75rem;">
            <span><span style="display:inline-block;width:12px;height:12px;background:#2563eb;border-radius:2px;margin-right:4px;"></span>Aktif</span>
            <span><span style="display:inline-block;width:12px;height:12px;background:#f59e0b;border-radius:2px;margin-right:4px;"></span>Gaib</span>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>

    <!-- Statistik Ringkas -->
    <div class="col-12 col-lg-4">
      <div class="row g-3">
        <!-- Jenis Kelamin -->
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h6><i class="bi bi-gender-ambiguous me-2 text-info"></i>Jenis Kelamin</h6>
            </div>
            <div class="card-body py-2">
              <?php
              $laki = 0; $perempuan = 0;
              foreach ($siswaJK as $jk) {
                if ($jk['jenis_kelamin'] === 'Laki-laki') $laki = $jk['total'];
                else $perempuan = $jk['total'];
              }
              $totalJK = $laki + $perempuan ?: 1;
              ?>
              <div class="d-flex gap-3 mb-2">
                <div class="text-center flex-fill">
                  <div class="fw-700 text-primary" style="font-size:1.5rem;"><?= $laki ?></div>
                  <div class="text-muted fs-sm"><i class="bi bi-gender-male"></i> Laki-laki</div>
                </div>
                <div class="text-center flex-fill">
                  <div class="fw-700 text-danger" style="font-size:1.5rem;"><?= $perempuan ?></div>
                  <div class="text-muted fs-sm"><i class="bi bi-gender-female"></i> Perempuan</div>
                </div>
              </div>
              <div class="progress" style="height:10px;border-radius:5px;">
                <div class="progress-bar bg-primary" style="width:<?= round($laki/$totalJK*100) ?>%"></div>
                <div class="progress-bar bg-danger"  style="width:<?= round($perempuan/$totalJK*100) ?>%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Status Guru -->
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h6><i class="bi bi-person-badge me-2 text-success"></i>Status Guru</h6>
            </div>
            <div class="card-body py-2">
              <?php foreach ($guruStatus as $gs): ?>
              <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
                <span class="fs-sm"><?= e($gs['status_kepegawaian']) ?></span>
                <span class="badge bg-success-subtle text-success"><?= $gs['total'] ?></span>
              </div>
              <?php endforeach; ?>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Siswa Terbaru -->
  <div class="card">
    <div class="card-header">
      <h6><i class="bi bi-clock-history me-2 text-warning"></i>Siswa Terbaru Ditambahkan</h6>
      <a href="<?= BASE_URL ?>/index.php?page=siswa" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
    </div>
    <div class="card-body p-0">
      <?php if (empty($siswaTerbaru)): ?>
        <div class="empty-state"><div class="empty-icon">👨‍🎓</div><p>Belum ada data siswa</p></div>
      <?php else: ?>
      <div class="table-responsive">
        <table class="table mb-0">
          <thead>
            <tr>
              <th>Nama Siswa</th>
              <th>NIS</th>
              <th>Kelas</th>
              <th>Status</th>
              <th>Tanggal Input</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($siswaTerbaru as $s): ?>
            <tr>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <div class="avatar-placeholder avatar-sm"
                       style="width:32px;height:32px;font-size:.75rem;border-radius:50%;
                              background:<?= $s['status'] === 'Gaib' ? '#fef3c7' : '#dbeafe' ?>;
                              color:<?= $s['status'] === 'Gaib' ? '#d97706' : '#2563eb' ?>;
                              display:flex;align-items:center;justify-content:center;font-weight:700;">
                    <?= strtoupper(substr($s['nama'], 0, 1)) ?>
                  </div>
                  <span class="fw-600"><?= e($s['nama']) ?></span>
                </div>
              </td>
              <td class="text-muted"><?= e($s['nis']) ?></td>
              <td><?= e($s['nama_kelas'] ?? '-') ?></td>
              <td>
                <?php
                $stClass = [
                  'Aktif'      => 'badge-aktif',
                  'Gaib'       => '',
                  'Lulus'      => 'badge-lulus',
                  'Pindah'     => 'badge-pindah',
                  'Keluar'     => 'badge-keluar',
                  'Tidak Aktif'=> 'badge-tidak-aktif',
                ][$s['status']] ?? 'bg-secondary';
                ?>
                <?php if ($s['status'] === 'Gaib'): ?>
                  <span class="badge" style="background:#fef3c7;color:#d97706;">
                    <i class="bi bi-person-exclamation me-1"></i>Gaib
                  </span>
                <?php else: ?>
                  <span class="badge <?= $stClass ?>"><?= e($s['status']) ?></span>
                <?php endif; ?>
              </td>
              <td class="text-muted fs-sm"><?= formatTanggal($s['created_at']) ?></td>
              <td>
                <a href="<?= BASE_URL ?>/index.php?page=siswa_detail&id=<?= $s['id'] ?>"
                   class="btn btn-sm btn-outline-primary btn-icon">
                  <i class="bi bi-eye"></i>
                </a>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <?php endif; ?>
    </div>
  </div>

</div><!-- /page-content -->
<?php include __DIR__ . '/../../views/layouts/footer.php'; ?>
</div>
</div>
