<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $title ?? '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">

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

<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
  <div class="sidebar-brand">
    <div class="sidebar-logo"><i class="fas fa-book-open"></i></div>
    <span class="sidebar-brand-name">E-Book SMA</span>
  </div>
  <nav class="sidebar-nav">
    <div class="sidebar-section-label">Menu Utama</div>
    <a href="<?= base_url('user/dashboard') ?>" class="sidebar-link active" id="nav-dashboard">
      <i class="fas fa-home"></i><span>Dashboard</span>
    </a>
    <a href="<?= base_url('user/ebooks') ?>" class="sidebar-link" id="nav-ebooks">
      <i class="fas fa-books"></i><span>Koleksi E-Book</span>
    </a>
  </nav>
  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="sidebar-user-avatar"><?= strtoupper(substr($user['nama'] ?? 'U', 0, 1)) ?></div>
      <div class="sidebar-user-info">
        <div class="sidebar-user-name"><?= htmlspecialchars($user['nama'] ?? '') ?></div>
        <div class="sidebar-user-role">Siswa</div>
      </div>
    </div>
    <a href="<?= base_url('logout') ?>" class="sidebar-logout"><i class="fas fa-sign-out-alt"></i> Keluar</a>
  </div>
</aside>

<!-- Main Content -->
<div class="main-wrapper">
  <!-- Topbar -->
  <header class="topbar">
    <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
    <div class="topbar-title">
      <h1 class="page-title">Dashboard</h1>
    </div>
    <div class="topbar-right">
      <div class="topbar-user">
        <div class="topbar-avatar"><?= strtoupper(substr($user['nama'] ?? 'U', 0, 1)) ?></div>
        <span class="d-none d-md-inline"><?= htmlspecialchars($user['nama'] ?? '') ?></span>
      </div>
    </div>
  </header>

  <main class="main-content">
    <!-- Welcome Banner -->
    <div class="welcome-banner">
      <div class="welcome-content">
        <h2 class="welcome-title">Halo, <?= htmlspecialchars(explode(' ', $user['nama'] ?? 'Siswa')[0]) ?>! 👋</h2>
        <p class="welcome-text">Selamat datang di perpustakaan digital SMA. Temukan ebook favoritmu sekarang!</p>
        <a href="<?= base_url('user/ebooks') ?>" class="btn-welcome">
          <i class="fas fa-search me-2"></i>Jelajahi E-Book
        </a>
      </div>
      <div class="welcome-illustration">
        <i class="fas fa-book-reader"></i>
      </div>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
      <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" id="statTotalEbook"><?= $total_ebook ?></div>
          <div class="stat-label">Total E-Book</div>
        </div>
      </div>
      <div class="stat-card stat-purple">
        <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>
      <div class="stat-card stat-green">
        <div class="stat-icon"><i class="fas fa-download"></i></div>
        <div class="stat-info">
          <div class="stat-number">∞</div>
          <div class="stat-label">Download Gratis</div>
        </div>
      </div>
    </div>

    <!-- Recent Ebooks -->
    <div class="section-header">
      <h3 class="section-title"><i class="fas fa-clock me-2"></i>E-Book Terbaru</h3>
      <a href="<?= base_url('user/ebooks') ?>" class="section-link">Lihat Semua <i class="fas fa-arrow-right ms-1"></i></a>
    </div>

    <div class="ebook-grid" id="recentGrid">
      <?php if (!empty($recent)): ?>
        <?php foreach ($recent as $ebook): ?>
        <div class="ebook-card" onclick="viewEbook(<?= $ebook->id ?>)">
          <div class="ebook-cover">
            <?php if ($ebook->cover): ?>
              <img src="<?= base_url('uploads/covers/' . $ebook->cover) ?>" alt="<?= htmlspecialchars($ebook->judul) ?>" loading="lazy">
            <?php else: ?>
              <div class="ebook-cover-placeholder">
                <i class="fas fa-book-open"></i>
              </div>
            <?php endif; ?>
            <div class="ebook-overlay">
              <button class="btn-read"><i class="fas fa-eye me-1"></i>Baca</button>
            </div>
          </div>
          <div class="ebook-info">
            <span class="ebook-kategori"><?= htmlspecialchars($ebook->kategori) ?></span>
            <h4 class="ebook-title"><?= htmlspecialchars($ebook->judul) ?></h4>
            <p class="ebook-author"><i class="fas fa-user-pen me-1"></i><?= htmlspecialchars($ebook->penulis) ?></p>
          </div>
        </div>
        <?php endforeach; ?>
      <?php else: ?>
        <div class="empty-state-inline">
          <i class="fas fa-book-open"></i>
          <p>Belum ada ebook. Admin belum mengunggah konten.</p>
        </div>
      <?php endif; ?>
    </div>
  </main>
</div>

<!-- Modal PDF Viewer -->
<div class="modal fade" id="pdfModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content modal-modern">
      <div class="modal-header-modern">
        <div>
          <h5 class="modal-title-modern" id="pdfModalTitle">Judul E-Book</h5>
          <small class="modal-subtitle" id="pdfModalAuthor"></small>
        </div>
        <div class="modal-actions">
          <a href="#" id="btnDownload" class="btn-modal-action btn-download" download>
            <i class="fas fa-download"></i> Download
          </a>
          <button type="button" class="btn-modal-close" data-bs-dismiss="modal">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      <div class="modal-body p-0">
        <div id="pdfLoading" class="pdf-loading">
          <div class="pdf-spinner"><i class="fas fa-spinner fa-spin"></i></div>
          <p>Memuat dokumen...</p>
        </div>
        <iframe id="pdfFrame" src="" class="pdf-iframe d-none"></iframe>
      </div>
      <div class="modal-footer-modern" id="ebookDetails"></div>
    </div>
  </div>
</div>

<!-- Overlay -->
<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();
</script>
</body>
</html>
