<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kelola E-Book — Admin</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">
      <i class="fas fa-chart-pie"></i><span>Dashboard</span>
    </a>
    <a href="<?= base_url('admin/ebooks') ?>" class="sidebar-link active">
      <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">Kelola E-Book</h1>
    </div>
    <div class="topbar-right">
      <button class="btn-add-ebook" id="btnAddEbook" onclick="openAddModal()">
        <i class="fas fa-plus me-2"></i>Tambah E-Book
      </button>
    </div>
  </header>

  <main class="main-content">
    <!-- Filter & Search -->
    <div class="filter-bar">
      <div class="search-box">
        <i class="fas fa-search search-icon"></i>
        <input type="text" id="adminSearchInput" class="search-input" placeholder="Cari judul, penulis, kategori...">
        <button class="search-clear d-none" id="adminSearchClear"><i class="fas fa-times"></i></button>
      </div>
      <div class="filter-group">
        <select id="adminKategoriFilter" 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>
      <span id="adminResultsCount" class="results-badge"></span>
    </div>

    <!-- Ebook Table -->
    <div class="admin-card">
      <div class="admin-table-wrap">
        <table class="admin-table" id="adminEbookTable">
          <thead>
            <tr>
              <th width="50">#</th>
              <th width="70">Cover</th>
              <th>Judul</th>
              <th>Penulis</th>
              <th>Kategori</th>
              <th>Tanggal</th>
              <th width="160" class="text-center">Aksi</th>
            </tr>
          </thead>
          <tbody id="adminEbookBody">
            <tr><td colspan="7" class="text-center py-5"><div class="table-loading"><i class="fas fa-spinner fa-spin"></i> Memuat data...</div></td></tr>
          </tbody>
        </table>
      </div>
      <div class="table-footer">
        <span id="adminTableInfo" class="table-info-text"></span>
        <div class="pagination-wrapper" id="adminPaginationWrapper"></div>
      </div>
    </div>
  </main>
</div>

<!-- Modal: Add / Edit Ebook -->
<div class="modal fade" id="ebookModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content modal-modern">
      <div class="modal-header-modern">
        <h5 class="modal-title-modern" id="ebookModalLabel">Tambah E-Book</h5>
        <button type="button" class="btn-modal-close" data-bs-dismiss="modal"><i class="fas fa-times"></i></button>
      </div>
      <form id="ebookForm" enctype="multipart/form-data" novalidate>
        <input type="hidden" id="ebookId" name="ebook_id" value="">
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-8">
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-heading me-1"></i>Judul E-Book <span class="required">*</span></label>
                <input type="text" id="fJudul" name="judul" class="form-input-modern" placeholder="Judul lengkap ebook" required>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-tags me-1"></i>Kategori <span class="required">*</span></label>
                <input type="text" id="fKategori" name="kategori" class="form-input-modern" placeholder="Mis: Matematika" list="kategoriSuggestions" required>
                <datalist id="kategoriSuggestions">
                  <option value="Matematika">
                  <option value="Fisika">
                  <option value="Kimia">
                  <option value="Biologi">
                  <option value="Bahasa Indonesia">
                  <option value="Bahasa Inggris">
                  <option value="Sejarah">
                  <option value="Geografi">
                  <option value="Ekonomi">
                  <option value="Sosiologi">
                  <option value="PKn">
                  <option value="Seni Budaya">
                  <option value="PJOK">
                  <option value="TIK">
                </datalist>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-user-pen me-1"></i>Penulis / Pengarang <span class="required">*</span></label>
                <input type="text" id="fPenulis" name="penulis" class="form-input-modern" placeholder="Nama penulis" required>
              </div>
            </div>
            <div class="col-md-6">
              <!-- File PDF -->
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-file-pdf me-1"></i>File PDF <span class="required" id="pdfRequired">*</span></label>
                <div class="upload-zone" id="pdfUploadZone">
                  <i class="fas fa-cloud-upload-alt upload-zone-icon"></i>
                  <p class="upload-zone-text">Klik atau drag PDF di sini</p>
                  <small class="upload-zone-sub">Maks. 30MB</small>
                  <input type="file" id="fFile" name="file" accept=".pdf" class="upload-input">
                </div>
                <div class="upload-preview d-none" id="pdfPreview">
                  <i class="fas fa-file-pdf text-danger"></i>
                  <span id="pdfFileName"></span>
                  <button type="button" class="upload-clear" onclick="clearUpload('pdf')"><i class="fas fa-times"></i></button>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-align-left me-1"></i>Deskripsi</label>
                <textarea id="fDeskripsi" name="deskripsi" class="form-input-modern textarea-modern" rows="3" placeholder="Deskripsi singkat isi ebook..."></textarea>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group-modern">
                <label class="form-label-modern"><i class="fas fa-image me-1"></i>Cover Image (Opsional)</label>
                <div class="cover-upload-row">
                  <div class="upload-zone cover-zone" id="coverUploadZone">
                    <i class="fas fa-image upload-zone-icon"></i>
                    <p class="upload-zone-text">Upload Cover</p>
                    <small class="upload-zone-sub">JPG/PNG, maks. 5MB</small>
                    <input type="file" id="fCover" name="cover" accept=".jpg,.jpeg,.png,.webp" class="upload-input">
                  </div>
                  <div class="cover-preview-wrap">
                    <img src="" id="coverPreviewImg" alt="Preview Cover" class="cover-preview-img d-none">
                    <div class="cover-preview-placeholder" id="coverPlaceholder">
                      <i class="fas fa-image"></i>
                      <p>Preview Cover</p>
                    </div>
                    <button type="button" class="upload-clear cover-clear d-none" id="coverClearBtn" onclick="clearUpload('cover')"><i class="fas fa-times"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer-modern">
          <button type="button" class="btn-modal-cancel" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn-modal-save" id="ebookSaveBtn">
            <span class="btn-text"><i class="fas fa-save me-2"></i>Simpan E-Book</span>
            <span class="btn-loader d-none"><span class="spinner-border spinner-border-sm"></span> Menyimpan...</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal: Confirm Delete -->
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content modal-modern">
      <div class="modal-body text-center py-4">
        <div class="delete-icon-wrap"><i class="fas fa-trash-alt"></i></div>
        <h5 class="mt-3 fw-700">Hapus E-Book?</h5>
        <p class="text-muted mb-0" id="deleteEbookTitle">Ebook ini akan dihapus permanen.</p>
      </div>
      <div class="modal-footer-modern justify-content-center">
        <button type="button" class="btn-modal-cancel" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn-modal-delete" id="confirmDeleteBtn">
          <span class="btn-text"><i class="fas fa-trash-alt me-1"></i>Hapus</span>
          <span class="btn-loader d-none"><span class="spinner-border spinner-border-sm"></span></span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal: View PDF -->
<div class="modal fade" id="viewPdfModal" 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="viewPdfTitle"></h5>
          <small class="modal-subtitle" id="viewPdfAuthor"></small>
        </div>
        <div class="modal-actions">
          <a href="#" id="adminBtnDownload" 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="viewPdfLoading" class="pdf-loading">
          <div class="pdf-spinner"><i class="fas fa-spinner fa-spin"></i></div>
          <p>Memuat dokumen...</p>
        </div>
        <iframe id="viewPdfFrame" src="" class="pdf-iframe d-none"></iframe>
      </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') ?>?v=<?= time() ?>"></script>
<script src="<?= base_url('assets/js/admin.js') ?>?v=<?= time() ?>"></script>
<script>
const BASE_URL = '<?= base_url() ?>';
initSidebar();
initAdminEbooks();


</script>
</body>
</html>
