<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Documentation — Admin</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&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">
<style>
/* ===== API DOCS SPECIFIC STYLES ===== */
.apidocs-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.apidocs-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(99,102,241,.2) 0%, transparent 60%);
}
.apidocs-hero-content { position: relative; z-index: 1; }
.apidocs-hero h2 { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.apidocs-hero p  { font-size: 14px; color: rgba(255,255,255,.7); margin: 0; }
.apidocs-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #a5b4fc; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.base-url-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px 16px; margin-top: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #a5f3fc;
  max-width: fit-content;
}
.base-url-bar i { color: rgba(255,255,255,.4); }

/* Method badges */
.method-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; padding: 4px 10px;
  border-radius: 6px; font-size: 11px; font-weight: 800;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .5px;
}
.method-get    { background: #dbeafe; color: #1d4ed8; }
.method-post   { background: #d1fae5; color: #065f46; }
.method-put    { background: #fef3c7; color: #92400e; }
.method-delete { background: #fee2e2; color: #991b1b; }

/* Endpoint card */
.endpoint-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.endpoint-card:hover { box-shadow: 0 4px 20px rgba(79,70,229,.1); }

.endpoint-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}
.endpoint-header:hover { background: #fafbff; }

.endpoint-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500;
  color: #1e293b; flex: 1;
}
.endpoint-url .param { color: #7c3aed; }
.endpoint-desc { font-size: 12px; color: #64748b; white-space: nowrap; }

.endpoint-toggle {
  width: 28px; height: 28px;
  border-radius: 8px; border: none;
  background: #f1f5f9; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
.endpoint-card.open .endpoint-toggle {
  background: #4f46e5; color: #fff; transform: rotate(180deg);
}

/* Collapsible body */
.endpoint-body { display: none; border-top: 1px solid #f1f5f9; }
.endpoint-card.open .endpoint-body { display: block; }

.endpoint-body-inner { padding: 20px 24px; }

/* Params form */
.param-group { margin-bottom: 14px; }
.param-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px;
}
.param-required { color: #ef4444; font-size: 10px; }
.param-input {
  width: 100%; padding: 9px 13px;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #1e293b; background: #f8faff;
  outline: none; transition: border-color .2s;
}
.param-input:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,.08); }
.param-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* Send button */
.btn-send {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border: none; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.btn-send-get    { background: #dbeafe; color: #1d4ed8; }
.btn-send-post   { background: #d1fae5; color: #065f46; }
.btn-send-put    { background: #fef3c7; color: #92400e; }
.btn-send-delete { background: #fee2e2; color: #991b1b; }
.btn-send:hover  { filter: brightness(.93); transform: translateY(-1px); }
.btn-send:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-copy-url {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  background: #fff; font-size: 12px; font-weight: 600;
  color: #64748b; cursor: pointer; transition: all .2s;
}
.btn-copy-url:hover { border-color: #4f46e5; color: #4f46e5; }
.btn-copy-url.copied { border-color: #10b981; color: #10b981; }

/* Response viewer */
.response-wrap { margin-top: 16px; display: none; }
.response-wrap.show { display: block; }
.response-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}
.status-ok  { background: #d1fae5; color: #065f46; }
.status-err { background: #fee2e2; color: #991b1b; }
.response-time { font-size: 12px; color: #94a3b8; }

.response-viewer {
  background: #0f172a;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #e2e8f0;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
}
.response-viewer::-webkit-scrollbar { width: 5px; }
.response-viewer::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.json-key    { color: #7dd3fc; }
.json-str    { color: #86efac; }
.json-num    { color: #fca5a5; }
.json-bool   { color: #fbbf24; }
.json-null   { color: #94a3b8; }

.loading-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #f8faff; border-radius: 8px;
  font-size: 13px; color: #4f46e5; font-weight: 500;
  margin-top: 12px;
}

/* Sidebar nav item for api-docs */
.apidocs-nav-new { position: relative; }
.apidocs-nav-new::after {
  content: 'NEW';
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: #10b981; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 5px; border-radius: 4px;
}

/* Category header */
.api-category {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 12px;
}
.api-category-line { flex: 1; height: 1px; background: #e2e8f0; }
.api-category-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: #94a3b8; white-space: nowrap;
}

.action-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 16px;
}

/* Tooltip copy */
.copy-feedback {
  font-size: 11px; color: #10b981; font-weight: 600;
  opacity: 0; transition: opacity .3s;
}
.copy-feedback.show { opacity: 1; }
</style>
</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">
      <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 active apidocs-nav-new">
      <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">API Documentation & Tester</h1>
    </div>
    <div class="topbar-right">
      <div class="topbar-badge-admin"><i class="fas fa-crown me-1"></i>Admin</div>
    </div>
  </header>

  <main class="main-content">

    <!-- Hero -->
    <div class="apidocs-hero">
      <div class="apidocs-hero-content">
        <div class="apidocs-hero-badge"><i class="fas fa-circle-dot"></i> Live Interactive</div>
        <h2><i class="fas fa-code me-2"></i>E-Book SMA REST API</h2>
        <p>Dokumentasi dan tester interaktif untuk semua endpoint API. Coba langsung dari browser tanpa Postman.</p>
        <div class="base-url-bar">
          <i class="fas fa-server"></i>
          <span id="baseUrlDisplay"><?= base_url() ?></span>
          <span style="color:rgba(255,255,255,.3)">|</span>
          <span style="color:rgba(255,255,255,.5);font-size:11px">Base URL</span>
        </div>
      </div>
    </div>

    <!-- ========== AUTH ENDPOINTS ========== -->
    <div class="api-category">
      <div class="api-category-line"></div>
      <div class="api-category-label"><i class="fas fa-lock me-1"></i>Authentication</div>
      <div class="api-category-line"></div>
    </div>

    <!-- POST /api/login -->
    <div class="endpoint-card" id="ep-login">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-login')">
        <span class="method-badge method-post">POST</span>
        <span class="endpoint-url">api/login</span>
        <span class="endpoint-desc d-none d-md-block">Login dan dapatkan session</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <p style="font-size:13px;color:#64748b;margin-bottom:16px">
            Autentikasi user dengan email dan password. Jika berhasil, session akan dibuat dan role dikembalikan.
          </p>
          <div class="row g-3">
            <div class="col-md-6">
              <div class="param-group">
                <div class="param-label">email <span class="param-required">*required</span></div>
                <input type="email" class="param-input" id="login-email" placeholder="admin@ebook.com" value="admin@ebook.com">
              </div>
            </div>
            <div class="col-md-6">
              <div class="param-group">
                <div class="param-label">password <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="login-password" placeholder="password" value="password">
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-post" onclick="sendRequest('login')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/login')" id="copy-login">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-login">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-login">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-login">
            <div class="response-meta">
              <span class="status-pill" id="status-login"></span>
              <span class="response-time" id="time-login"></span>
            </div>
            <div class="response-viewer" id="viewer-login"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- POST /api/register -->
    <div class="endpoint-card" id="ep-register">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-register')">
        <span class="method-badge method-post">POST</span>
        <span class="endpoint-url">api/register</span>
        <span class="endpoint-desc d-none d-md-block">Daftar akun user baru</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <p style="font-size:13px;color:#64748b;margin-bottom:16px">
            Mendaftarkan user baru dengan role default <code>user</code>. Email harus unik dan password minimal 6 karakter.
          </p>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="param-group">
                <div class="param-label">nama <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="reg-nama" placeholder="Nama Lengkap" value="Test User">
              </div>
            </div>
            <div class="col-md-4">
              <div class="param-group">
                <div class="param-label">email <span class="param-required">*required</span></div>
                <input type="email" class="param-input" id="reg-email" placeholder="user@email.com" value="test<?= time() ?>@email.com">
              </div>
            </div>
            <div class="col-md-4">
              <div class="param-group">
                <div class="param-label">password <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="reg-password" placeholder="min. 6 karakter" value="password123">
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-post" onclick="sendRequest('register')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/register')" id="copy-register">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-register">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-register">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-register">
            <div class="response-meta">
              <span class="status-pill" id="status-register"></span>
              <span class="response-time" id="time-register"></span>
            </div>
            <div class="response-viewer" id="viewer-register"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== EBOOK ENDPOINTS ========== -->
    <div class="api-category">
      <div class="api-category-line"></div>
      <div class="api-category-label"><i class="fas fa-book me-1"></i>E-Book Management</div>
      <div class="api-category-line"></div>
    </div>

    <!-- GET /api/ebooks -->
    <div class="endpoint-card" id="ep-get-ebooks">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-get-ebooks')">
        <span class="method-badge method-get">GET</span>
        <span class="endpoint-url">api/ebooks</span>
        <span class="endpoint-desc d-none d-md-block">List semua ebook (support search & pagination)</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <p style="font-size:13px;color:#64748b;margin-bottom:16px">
            Mengambil daftar ebook. Mendukung parameter <code>search</code>, <code>page</code>, <code>limit</code>, dan <code>kategori</code>.
          </p>
          <div class="row g-3">
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">search <span style="color:#94a3b8;font-weight:400">(optional)</span></div>
                <input type="text" class="param-input" id="ge-search" placeholder="Kata kunci...">
                <div class="param-hint">?search=matematika</div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">page <span style="color:#94a3b8;font-weight:400">(optional)</span></div>
                <input type="number" class="param-input" id="ge-page" placeholder="1" value="1" min="1">
                <div class="param-hint">?page=1</div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">limit <span style="color:#94a3b8;font-weight:400">(optional)</span></div>
                <input type="number" class="param-input" id="ge-limit" placeholder="12" value="5" min="1" max="100">
                <div class="param-hint">?limit=12</div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">kategori <span style="color:#94a3b8;font-weight:400">(optional)</span></div>
                <input type="text" class="param-input" id="ge-kategori" placeholder="Matematika">
                <div class="param-hint">?kategori=Fisika</div>
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-get" onclick="sendRequest('get-ebooks')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/ebooks')" id="copy-get-ebooks">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-get-ebooks">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-get-ebooks">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-get-ebooks">
            <div class="response-meta">
              <span class="status-pill" id="status-get-ebooks"></span>
              <span class="response-time" id="time-get-ebooks"></span>
            </div>
            <div class="response-viewer" id="viewer-get-ebooks"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- GET /api/ebooks/{id} -->
    <div class="endpoint-card" id="ep-get-ebook-id">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-get-ebook-id')">
        <span class="method-badge method-get">GET</span>
        <span class="endpoint-url">api/ebooks/<span class="param">{id}</span></span>
        <span class="endpoint-desc d-none d-md-block">Detail satu ebook by ID</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <p style="font-size:13px;color:#64748b;margin-bottom:16px">
            Mengambil detail satu ebook berdasarkan ID. Mengembalikan URL file PDF dan cover.
          </p>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="param-group">
                <div class="param-label">id <span class="param-required">*required (path param)</span></div>
                <input type="number" class="param-input" id="geid-id" placeholder="1" value="1" min="1">
                <div class="param-hint">Contoh: api/ebooks/1</div>
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-get" onclick="sendRequest('get-ebook-id')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/ebooks/1')" id="copy-get-ebook-id">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-get-ebook-id">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-get-ebook-id">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-get-ebook-id">
            <div class="response-meta">
              <span class="status-pill" id="status-get-ebook-id"></span>
              <span class="response-time" id="time-get-ebook-id"></span>
            </div>
            <div class="response-viewer" id="viewer-get-ebook-id"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- POST /api/ebooks -->
    <div class="endpoint-card" id="ep-post-ebook">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-post-ebook')">
        <span class="method-badge method-post">POST</span>
        <span class="endpoint-url">api/ebooks</span>
        <span class="endpoint-desc d-none d-md-block">Tambah ebook baru (Admin only)</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;font-size:12px;color:#92400e;margin-bottom:16px">
            <i class="fas fa-shield-halved me-1"></i> <strong>Admin only.</strong> Session admin harus aktif. Gunakan multipart/form-data untuk upload file PDF dan cover.
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <div class="param-group">
                <div class="param-label">judul <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="ce-judul" placeholder="Judul E-Book" value="Matematika Kelas 12">
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">penulis <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="ce-penulis" placeholder="Nama Penulis" value="Tim Peneliti">
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">kategori <span class="param-required">*required</span></div>
                <input type="text" class="param-input" id="ce-kategori" placeholder="Matematika" value="Matematika">
              </div>
            </div>
            <div class="col-12">
              <div class="param-group">
                <div class="param-label">deskripsi</div>
                <input type="text" class="param-input" id="ce-deskripsi" placeholder="Deskripsi ebook..." value="Buku pelajaran matematika untuk siswa kelas 12">
              </div>
            </div>
            <div class="col-md-6">
              <div class="param-group">
                <div class="param-label">file (PDF) <span class="param-required">*required</span></div>
                <input type="file" class="param-input" id="ce-file" accept=".pdf">
                <div class="param-hint">Format: .pdf | Maks 30MB</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="param-group">
                <div class="param-label">cover (image)</div>
                <input type="file" class="param-input" id="ce-cover" accept=".jpg,.jpeg,.png,.webp">
                <div class="param-hint">Format: jpg/png/webp | Maks 5MB</div>
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-post" onclick="sendRequest('post-ebook')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/ebooks')" id="copy-post-ebook">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-post-ebook">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-post-ebook">
            <i class="fas fa-spinner fa-spin"></i> Mengupload file...
          </div>
          <div class="response-wrap" id="response-post-ebook">
            <div class="response-meta">
              <span class="status-pill" id="status-post-ebook"></span>
              <span class="response-time" id="time-post-ebook"></span>
            </div>
            <div class="response-viewer" id="viewer-post-ebook"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- PUT /api/ebooks/{id} -->
    <div class="endpoint-card" id="ep-put-ebook">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-put-ebook')">
        <span class="method-badge method-put">PUT</span>
        <span class="endpoint-url">api/ebooks/<span class="param">{id}</span></span>
        <span class="endpoint-desc d-none d-md-block">Update ebook (Admin only)</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;font-size:12px;color:#92400e;margin-bottom:16px">
            <i class="fas fa-info-circle me-1"></i> Backend menerima POST dengan <code>_id</code> sebagai penanda update. File opsional (hanya diupdate jika dikirim).
          </div>
          <div class="row g-3">
            <div class="col-md-2">
              <div class="param-group">
                <div class="param-label">id <span class="param-required">*path</span></div>
                <input type="number" class="param-input" id="ue-id" placeholder="1" value="1" min="1">
              </div>
            </div>
            <div class="col-md-5">
              <div class="param-group">
                <div class="param-label">judul</div>
                <input type="text" class="param-input" id="ue-judul" placeholder="Judul baru..." value="Fisika Modern">
              </div>
            </div>
            <div class="col-md-2">
              <div class="param-group">
                <div class="param-label">penulis</div>
                <input type="text" class="param-input" id="ue-penulis" placeholder="Penulis" value="Prof. Ali">
              </div>
            </div>
            <div class="col-md-3">
              <div class="param-group">
                <div class="param-label">kategori</div>
                <input type="text" class="param-input" id="ue-kategori" placeholder="Kategori" value="Fisika">
              </div>
            </div>
            <div class="col-12">
              <div class="param-group">
                <div class="param-label">deskripsi</div>
                <input type="text" class="param-input" id="ue-deskripsi" placeholder="Deskripsi baru...">
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-put" onclick="sendRequest('put-ebook')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/ebooks/{id}')" id="copy-put-ebook">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-put-ebook">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-put-ebook">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-put-ebook">
            <div class="response-meta">
              <span class="status-pill" id="status-put-ebook"></span>
              <span class="response-time" id="time-put-ebook"></span>
            </div>
            <div class="response-viewer" id="viewer-put-ebook"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- DELETE /api/ebooks/{id} -->
    <div class="endpoint-card" id="ep-del-ebook">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-del-ebook')">
        <span class="method-badge method-delete">DELETE</span>
        <span class="endpoint-url">api/ebooks/<span class="param">{id}</span></span>
        <span class="endpoint-desc d-none d-md-block">Hapus ebook (Admin only)</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <div style="background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;font-size:12px;color:#991b1b;margin-bottom:16px">
            <i class="fas fa-triangle-exclamation me-1"></i> <strong>Peringatan:</strong> Aksi ini permanen! File PDF dan cover juga akan dihapus dari server.
          </div>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="param-group">
                <div class="param-label">id <span class="param-required">*required (path param)</span></div>
                <input type="number" class="param-input" id="de-id" placeholder="ID ebook" value="1" min="1">
                <div class="param-hint">Contoh: api/ebooks/5</div>
              </div>
            </div>
          </div>
          <div class="action-row">
            <button class="btn-send btn-send-delete" onclick="confirmDelete()">
              <i class="fas fa-trash"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/ebooks/{id}')" id="copy-del-ebook">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-del-ebook">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-del-ebook">
            <i class="fas fa-spinner fa-spin"></i> Menghapus...
          </div>
          <div class="response-wrap" id="response-del-ebook">
            <div class="response-meta">
              <span class="status-pill" id="status-del-ebook"></span>
              <span class="response-time" id="time-del-ebook"></span>
            </div>
            <div class="response-viewer" id="viewer-del-ebook"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== STATS ========== -->
    <div class="api-category">
      <div class="api-category-line"></div>
      <div class="api-category-label"><i class="fas fa-chart-bar me-1"></i>Statistics</div>
      <div class="api-category-line"></div>
    </div>

    <!-- GET /api/stats -->
    <div class="endpoint-card" id="ep-stats">
      <div class="endpoint-header" onclick="toggleEndpoint('ep-stats')">
        <span class="method-badge method-get">GET</span>
        <span class="endpoint-url">api/stats</span>
        <span class="endpoint-desc d-none d-md-block">Statistik total ebook, user, dan kategori</span>
        <button class="endpoint-toggle"><i class="fas fa-chevron-down"></i></button>
      </div>
      <div class="endpoint-body">
        <div class="endpoint-body-inner">
          <p style="font-size:13px;color:#64748b;margin-bottom:16px">
            Mengambil statistik ringkasan: total ebook, total user, dan breakdown per kategori.
          </p>
          <div class="action-row">
            <button class="btn-send btn-send-get" onclick="sendRequest('stats')">
              <i class="fas fa-paper-plane"></i> Send Request
            </button>
            <button class="btn-copy-url" onclick="copyUrl('api/stats')" id="copy-stats">
              <i class="fas fa-copy"></i> Copy URL
            </button>
            <span class="copy-feedback" id="copy-feedback-stats">✓ Copied!</span>
          </div>
          <div class="loading-bar d-none" id="loading-stats">
            <i class="fas fa-spinner fa-spin"></i> Mengirim request...
          </div>
          <div class="response-wrap" id="response-stats">
            <div class="response-meta">
              <span class="status-pill" id="status-stats"></span>
              <span class="response-time" id="time-stats"></span>
            </div>
            <div class="response-viewer" id="viewer-stats"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom spacing -->
    <div style="height:40px"></div>
  </main>
</div>

<!-- Delete Confirm Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content" style="border-radius:14px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.2)">
      <div class="modal-body text-center py-4 px-4">
        <div style="width:56px;height:56px;background:#fee2e2;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#ef4444;margin:0 auto 14px">
          <i class="fas fa-trash"></i>
        </div>
        <h6 style="font-weight:700;margin-bottom:6px">Konfirmasi DELETE</h6>
        <p style="font-size:13px;color:#64748b">Ebook ID <strong id="confirmDeleteId"></strong> akan dihapus permanen. Yakin?</p>
      </div>
      <div style="display:flex;gap:10px;padding:0 20px 20px">
        <button type="button" style="flex:1;padding:9px;border:1.5px solid #e2e8f0;border-radius:8px;background:#fff;font-size:14px;font-weight:500;cursor:pointer" data-bs-dismiss="modal">Batal</button>
        <button type="button" id="doDeleteBtn" style="flex:1;padding:9px;border:none;border-radius:8px;background:#ef4444;color:#fff;font-size:14px;font-weight:700;cursor:pointer">Hapus!</button>
      </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();

/* ===== Toggle endpoint cards ===== */
function toggleEndpoint(id) {
  const card = document.getElementById(id);
  card.classList.toggle('open');
}

/* ===== Copy URL helper ===== */
function copyUrl(path) {
  const full = BASE_URL + path;
  navigator.clipboard.writeText(full).then(() => {
    const key  = path.replace(/\//g,'-').replace(/[{}]/g,'');
    const fb   = document.getElementById('copy-feedback-' + key);
    const btn  = document.getElementById('copy-' + key);
    if (fb)  { fb.classList.add('show'); setTimeout(() => fb.classList.remove('show'), 2000); }
    if (btn) { btn.classList.add('copied'); setTimeout(() => btn.classList.remove('copied'), 2000); }
  });
}

/* ===== JSON syntax highlighter ===== */
function highlight(json) {
  return json
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, m =>
      /:$/.test(m) ? `<span class="json-key">${m}</span>` : `<span class="json-str">${m}</span>`)
    .replace(/\b(true|false)\b/g, `<span class="json-bool">$1</span>`)
    .replace(/\bnull\b/g, `<span class="json-null">null</span>`)
    .replace(/\b(-?\d+\.?\d*(?:[eE][+-]?\d+)?)\b/g, `<span class="json-num">$1</span>`);
}

/* ===== Show response ===== */
function showResponse(key, ok, data, ms) {
  const wrap   = document.getElementById(`response-${key}`);
  const status = document.getElementById(`status-${key}`);
  const time   = document.getElementById(`time-${key}`);
  const viewer = document.getElementById(`viewer-${key}`);
  const loading= document.getElementById(`loading-${key}`);

  loading.classList.add('d-none');
  wrap.classList.add('show');

  status.className = `status-pill ${ok ? 'status-ok' : 'status-err'}`;
  status.innerHTML = ok
    ? '<i class="fas fa-check-circle me-1"></i> 200 OK'
    : '<i class="fas fa-times-circle me-1"></i> Error';
  time.textContent = `${ms}ms`;

  const pretty = JSON.stringify(data, null, 2);
  viewer.innerHTML = highlight(pretty);
}

/* ===== Main request dispatcher ===== */
async function sendRequest(key) {
  const loader = document.getElementById(`loading-${key}`);
  const wrap   = document.getElementById(`response-${key}`);
  loader.classList.remove('d-none');
  wrap.classList.remove('show');

  const t0 = Date.now();

  try {
    let res, data;

    if (key === 'login') {
      const fd = new FormData();
      fd.append('email',    document.getElementById('login-email').value);
      fd.append('password', document.getElementById('login-password').value);
      res  = await fetch(BASE_URL + 'api/login', { method:'POST', body:fd });
      data = await res.json();

    } else if (key === 'register') {
      const fd = new FormData();
      fd.append('nama',     document.getElementById('reg-nama').value);
      fd.append('email',    document.getElementById('reg-email').value);
      fd.append('password', document.getElementById('reg-password').value);
      res  = await fetch(BASE_URL + 'api/register', { method:'POST', body:fd });
      data = await res.json();

    } else if (key === 'get-ebooks') {
      const search   = document.getElementById('ge-search').value;
      const page     = document.getElementById('ge-page').value || 1;
      const limit    = document.getElementById('ge-limit').value || 5;
      const kategori = document.getElementById('ge-kategori').value;
      let url = `${BASE_URL}api/ebooks?page=${page}&limit=${limit}`;
      if (search)   url += `&search=${encodeURIComponent(search)}`;
      if (kategori) url += `&kategori=${encodeURIComponent(kategori)}`;
      res  = await fetch(url);
      data = await res.json();

    } else if (key === 'get-ebook-id') {
      const id = document.getElementById('geid-id').value || 1;
      res  = await fetch(`${BASE_URL}api/ebooks/${id}`);
      data = await res.json();

    } else if (key === 'post-ebook') {
      const fd = new FormData();
      fd.append('judul',     document.getElementById('ce-judul').value);
      fd.append('penulis',   document.getElementById('ce-penulis').value);
      fd.append('kategori',  document.getElementById('ce-kategori').value);
      fd.append('deskripsi', document.getElementById('ce-deskripsi').value);
      const pdfFile   = document.getElementById('ce-file').files[0];
      const coverFile = document.getElementById('ce-cover').files[0];
      if (pdfFile)   fd.append('file',  pdfFile);
      if (coverFile) fd.append('cover', coverFile);
      res  = await fetch(`${BASE_URL}api/ebooks`, { method:'POST', body:fd });
      data = await res.json();

    } else if (key === 'put-ebook') {
      const id = document.getElementById('ue-id').value || 1;
      const fd = new FormData();
      fd.append('judul',     document.getElementById('ue-judul').value);
      fd.append('penulis',   document.getElementById('ue-penulis').value);
      fd.append('kategori',  document.getElementById('ue-kategori').value);
      fd.append('deskripsi', document.getElementById('ue-deskripsi').value);
      res  = await fetch(`${BASE_URL}api/ebooks/${id}`, { method:'POST', body:fd });
      data = await res.json();

    } else if (key === 'del-ebook') {
      const id = document.getElementById('de-id').value || 1;
      res  = await fetch(`${BASE_URL}api/ebooks/${id}`, { method:'DELETE' });
      data = await res.json();

    } else if (key === 'stats') {
      res  = await fetch(`${BASE_URL}api/stats`);
      data = await res.json();
    }

    const ms = Date.now() - t0;
    showResponse(key, data?.status === true, data, ms);
    if (data?.status) showToast('success', 'Request berhasil!', `${ms}ms`);
    else showToast('danger', 'Response error', data?.message || '');

  } catch (err) {
    const ms = Date.now() - t0;
    showResponse(key, false, { status:false, message: 'Koneksi gagal: '+err.message }, ms);
    showToast('danger', 'Request gagal', err.message);
  }
}

/* ===== Delete confirm ===== */
function confirmDelete() {
  const id = document.getElementById('de-id').value;
  document.getElementById('confirmDeleteId').textContent = id;
  const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
  modal.show();
  document.getElementById('doDeleteBtn').onclick = () => {
    modal.hide();
    sendRequest('del-ebook');
  };
}
</script>
</body>
</html>
