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

<!-- 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">
      <i class="fas fa-home"></i><span>Dashboard</span>
    </a>
    <a href="<?= base_url('user/ebooks') ?>" class="sidebar-link active">
      <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>

<div class="main-wrapper">
  <header class="topbar">
    <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
    <div class="topbar-title">
      <h1 class="page-title">Koleksi E-Book</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">
    <!-- Search & Filter Bar -->
    <div class="filter-bar">
      <div class="search-box">
        <i class="fas fa-search search-icon"></i>
        <input type="text" id="searchInput" class="search-input" placeholder="Cari judul, penulis, atau kategori..." autocomplete="off">
        <button class="search-clear d-none" id="searchClear"><i class="fas fa-times"></i></button>
      </div>
      <div class="filter-group">
        <select id="kategoriFilter" class="filter-select">
          <option value="">Semua Kategori</option>
          <?php foreach ($categories as $cat): ?>
            <option value="<?= htmlspecialchars($cat->kategori) ?>"><?= htmlspecialchars($cat->kategori) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>

    <!-- Results Info -->
    <div class="results-info">
      <span id="resultsCount">Memuat ebook...</span>
    </div>

    <!-- Ebook Grid -->
    <div class="ebook-grid" id="ebookGrid">
      <div class="loading-grid">
        <?php for ($i = 0; $i < 8; $i++): ?>
          <div class="skeleton-card"><div class="skeleton-cover"></div><div class="skeleton-body"><div class="skeleton-line w-60"></div><div class="skeleton-line w-80"></div><div class="skeleton-line w-40"></div></div></div>
        <?php endfor; ?>
      </div>
    </div>

    <!-- Pagination -->
    <div class="pagination-wrapper" id="paginationWrapper"></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>

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