<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard — E-Book SMA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="<?= base_url('assets/css/style.css') ?>" rel="stylesheet">
</head>
<body class="app-body">

<div id="toastContainer" class="toast-container"></div>

<!-- Admin Sidebar -->
<aside class="sidebar sidebar-admin" id="sidebar">
  <div class="sidebar-brand">
    <div class="sidebar-logo admin-logo"><i class="fas fa-shield-halved"></i></div>
    <span class="sidebar-brand-name">Admin Panel</span>
  </div>
  <nav class="sidebar-nav">
    <div class="sidebar-section-label">Manajemen</div>
    <a href="<?= base_url('admin/dashboard') ?>" class="sidebar-link active">
      <i class="fas fa-chart-pie"></i><span>Dashboard</span>
    </a>
    <a href="<?= base_url('admin/ebooks') ?>" class="sidebar-link">
      <i class="fas fa-book-medical"></i><span>Kelola E-Book</span>
    </a>
    <div class="sidebar-section-label mt-3">Developer</div>
    <a href="<?= base_url('admin/api-docs') ?>" class="sidebar-link">
      <i class="fas fa-code"></i><span>API Docs</span>
    </a>
    <div class="sidebar-section-label mt-3">Akses Cepat</div>
    <a href="<?= base_url('user/dashboard') ?>" class="sidebar-link" target="_blank">
      <i class="fas fa-eye"></i><span>Lihat Tampilan User</span>
    </a>
  </nav>
  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="sidebar-user-avatar admin-avatar"><?= strtoupper(substr($user['nama'] ?? 'A', 0, 1)) ?></div>
      <div class="sidebar-user-info">
        <div class="sidebar-user-name"><?= htmlspecialchars($user['nama'] ?? '') ?></div>
        <div class="sidebar-user-role admin-role"><i class="fas fa-crown me-1"></i>Administrator</div>
      </div>
    </div>
    <a href="<?= base_url('logout') ?>" class="sidebar-logout"><i class="fas fa-sign-out-alt"></i> Keluar</a>
  </div>
</aside>

<div class="main-wrapper">
  <header class="topbar topbar-admin">
    <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
    <div class="topbar-title">
      <h1 class="page-title">Admin Dashboard</h1>
    </div>
    <div class="topbar-right">
      <div class="topbar-badge-admin"><i class="fas fa-crown me-1"></i>Admin</div>
      <div class="topbar-user ms-3">
        <div class="topbar-avatar admin-avatar-top"><?= strtoupper(substr($user['nama'] ?? 'A', 0, 1)) ?></div>
      </div>
    </div>
  </header>

  <main class="main-content">
    <!-- Admin Stats -->
    <div class="stats-grid stats-admin">
      <div class="stat-card stat-blue">
        <div class="stat-icon"><i class="fas fa-book"></i></div>
        <div class="stat-info">
          <div class="stat-number counter" data-target="<?= $total_ebook ?>"><?= $total_ebook ?></div>
          <div class="stat-label">Total E-Book</div>
        </div>
        <div class="stat-trend"><i class="fas fa-arrow-up"></i> Aktif</div>
      </div>
      <div class="stat-card stat-purple">
        <div class="stat-icon"><i class="fas fa-users"></i></div>
        <div class="stat-info">
          <div class="stat-number counter" data-target="<?= $total_user ?>"><?= $total_user ?></div>
          <div class="stat-label">Total Pengguna</div>
        </div>
        <div class="stat-trend"><i class="fas fa-arrow-up"></i> Terdaftar</div>
      </div>
      <div class="stat-card stat-green">
        <div class="stat-icon"><i class="fas fa-tags"></i></div>
        <div class="stat-info">
          <div class="stat-number"><?= count($categories) ?></div>
          <div class="stat-label">Kategori</div>
        </div>
        <div class="stat-trend"><i class="fas fa-layer-group"></i> Mapel</div>
      </div>
    </div>

    <div class="row g-4">
      <!-- Recent Uploads -->
      <div class="col-lg-8">
        <div class="admin-card">
          <div class="admin-card-header">
            <h3 class="admin-card-title"><i class="fas fa-clock me-2"></i>Upload Terbaru</h3>
            <a href="<?= base_url('admin/ebooks') ?>" class="btn-card-action">Kelola Semua</a>
          </div>
          <div class="admin-table-wrap">
            <table class="admin-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Cover</th>
                  <th>Judul</th>
                  <th>Kategori</th>
                  <th>Penulis</th>
                  <th>Tanggal</th>
                </tr>
              </thead>
              <tbody>
                <?php if (!empty($recent_ebooks)): ?>
                  <?php foreach ($recent_ebooks as $i => $e): ?>
                  <tr>
                    <td><?= $i + 1 ?></td>
                    <td>
                      <?php if ($e->cover): ?>
                        <img src="<?= base_url('uploads/covers/' . $e->cover) ?>" class="table-cover" alt="">
                      <?php else: ?>
                        <div class="table-cover-placeholder"><i class="fas fa-book"></i></div>
                      <?php endif; ?>
                    </td>
                    <td><span class="table-title"><?= htmlspecialchars($e->judul) ?></span></td>
                    <td><span class="badge-kategori"><?= htmlspecialchars($e->kategori) ?></span></td>
                    <td><?= htmlspecialchars($e->penulis) ?></td>
                    <td><?= date('d M Y', strtotime($e->created_at)) ?></td>
                  </tr>
                  <?php endforeach; ?>
                <?php else: ?>
                  <tr><td colspan="6" class="text-center py-4 text-muted">Belum ada ebook</td></tr>
                <?php endif; ?>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Category Breakdown -->
      <div class="col-lg-4">
        <div class="admin-card">
          <div class="admin-card-header">
            <h3 class="admin-card-title"><i class="fas fa-chart-bar me-2"></i>Per Kategori</h3>
          </div>
          <div class="category-list">
            <?php if (!empty($categories)): ?>
              <?php $max = max(array_column((array)$categories, 'total')) ?>
              <?php foreach ($categories as $cat): ?>
              <div class="category-item">
                <div class="category-item-header">
                  <span class="category-name"><?= htmlspecialchars($cat->kategori) ?></span>
                  <span class="category-count"><?= $cat->total ?></span>
                </div>
                <div class="category-bar-wrap">
                  <div class="category-bar-fill" style="width: <?= ($cat->total / $max) * 100 ?>%"></div>
                </div>
              </div>
              <?php endforeach; ?>
            <?php else: ?>
              <div class="text-center text-muted py-3">Belum ada data</div>
            <?php endif; ?>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="admin-card mt-4">
          <div class="admin-card-header">
            <h3 class="admin-card-title"><i class="fas fa-bolt me-2"></i>Aksi Cepat</h3>
          </div>
          <div class="quick-actions">
            <a href="<?= base_url('admin/ebooks') ?>" class="quick-action-btn">
              <i class="fas fa-plus"></i> Tambah E-Book
            </a>
            <a href="<?= base_url('user/dashboard') ?>" target="_blank" class="quick-action-btn secondary">
              <i class="fas fa-eye"></i> Preview User
            </a>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div class="sidebar-overlay" id="sidebarOverlay"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="<?= base_url('assets/js/app.js') ?>"></script>
<script>
const BASE_URL = '<?= base_url() ?>';
initSidebar();
// Animate counters
document.querySelectorAll('.counter').forEach(el => {
  const target = +el.dataset.target;
  let cur = 0;
  const step = Math.ceil(target / 40);
  const timer = setInterval(() => {
    cur = Math.min(cur + step, target);
    el.textContent = cur;
    if (cur >= target) clearInterval(timer);
  }, 30);
});
</script>
</body>
</html>
