Initial commit - CMS Gov Bapenda Garut dengan EditorJS

app/Views/admin/pages/form.php

@@ -0,0 +1,228 @@
+<?= $this->extend('admin/layout') ?>
+
+<?= $this->section('content') ?>
+<div class="space-y-5 sm:space-y-6">
+  <!-- Page Header -->
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
+        <?= $page ? 'Edit Halaman' : 'Tambah Halaman' ?>
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        <?= $page ? 'Ubah informasi halaman' : 'Tambahkan halaman baru' ?>
+      </p>
+    </div>
+    <div class="flex items-center gap-2">
+      <span id="autosave-indicator" class="hidden text-sm text-gray-500 dark:text-gray-400">Disimpan otomatis</span>
+      <button
+        type="button"
+        id="preview-btn"
+        class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+      >
+        <i class="fe fe-eye"></i>
+        Preview
+      </button>
+    </div>
+  </div>
+
+  <!-- Form -->
+  <form
+    action="<?= $page ? base_url('admin/pages/update/' . $page['id']) : base_url('admin/pages/store') ?>"
+    method="post"
+    class="space-y-6"
+    id="page-form"
+  >
+    <?= csrf_field() ?>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <!-- Main Content Area (2/3 width) -->
+      <div class="lg:col-span-2 space-y-6">
+        <!-- Title -->
+        <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div class="p-5 sm:p-6">
+            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+              Judul <span class="text-error-500">*</span>
+            </label>
+            <input
+              type="text"
+              name="title"
+              id="title"
+              value="<?= old('title', $page['title'] ?? '') ?>"
+              placeholder="Masukkan judul halaman"
+              class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+              required
+            >
+            <?php if (isset($validation) && $validation->hasError('title')): ?>
+              <p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('title')) ?></p>
+            <?php endif; ?>
+          </div>
+        </div>
+
+        <!-- Editor.js Container -->
+        <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div class="p-5 sm:p-6">
+            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+              Konten <span class="text-error-500">*</span>
+            </label>
+            <div id="editorjs" class="min-h-[500px] rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-700 dark:bg-gray-900"></div>
+            
+            <!-- Hidden inputs for Editor.js data -->
+            <input type="hidden" name="content" id="content" value="<?= esc($page['content'] ?? '') ?>">
+            <input type="hidden" name="content_json" id="content_json" value="<?= esc($page['content_json'] ?? '') ?>">
+            <input type="hidden" name="content_html" id="content_html" value="<?= esc($page['content_html'] ?? '') ?>">
+            <input type="hidden" name="excerpt" id="excerpt" value="<?= esc($page['excerpt'] ?? '') ?>">
+            
+            <?php if (isset($validation) && $validation->hasError('content_json')): ?>
+              <p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('content_json')) ?></p>
+            <?php endif; ?>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sidebar (1/3 width) - Document Settings -->
+      <div class="space-y-6">
+        <!-- Status -->
+        <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div class="p-5 sm:p-6">
+            <h3 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Pengaturan Dokumen</h3>
+            
+            <div class="space-y-4">
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+                  Status <span class="text-error-500">*</span>
+                </label>
+                <select
+                  name="status"
+                  id="status"
+                  class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+                  required
+                >
+                  <option value="draft" <?= old('status', $page['status'] ?? 'draft') === 'draft' ? 'selected' : '' ?>>Draft</option>
+                  <option value="published" <?= old('status', $page['status'] ?? '') === 'published' ? 'selected' : '' ?>>Published</option>
+                </select>
+                <?php if (isset($validation) && $validation->hasError('status')): ?>
+                  <p class="mt-1 text-sm text-error-600"><?= esc($validation->getError('status')) ?></p>
+                <?php endif; ?>
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+                  Excerpt
+                </label>
+                <textarea
+                  name="excerpt"
+                  id="excerpt-textarea"
+                  rows="3"
+                  placeholder="Ringkasan halaman (otomatis dari konten pertama)"
+                  class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+                ><?= old('excerpt', $page['excerpt'] ?? '') ?></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Akan diisi otomatis dari paragraf pertama</p>
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+                  Featured Image URL
+                </label>
+                <input
+                  type="url"
+                  name="featured_image"
+                  id="featured_image"
+                  value="<?= old('featured_image', $page['featured_image'] ?? '') ?>"
+                  placeholder="https://example.com/image.jpg"
+                  class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+                >
+                <?php if (!empty($page['featured_image'] ?? '')): ?>
+                  <div class="mt-2">
+                    <img src="<?= esc($page['featured_image']) ?>" alt="Featured" class="h-24 w-full rounded-lg object-cover">
+                  </div>
+                <?php endif; ?>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Form Actions - Match grid layout -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div class="lg:col-span-2">
+        <div class="flex items-center justify-end gap-3 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
+          <a
+            href="<?= base_url('admin/pages') ?>"
+            class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+          >
+            Batal
+          </a>
+          <button
+            type="submit"
+            class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
+          >
+            <i class="fe fe-save"></i>
+            <?= $page ? 'Simpan Perubahan' : 'Simpan Halaman' ?>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+
+<!-- Editor.js Bundle (Built by Vite) -->
+<?php
+// Get manifest file to load hashed assets
+$manifestPath = FCPATH . 'assets/editor/.vite/manifest.json';
+$editorJsPath = base_url('assets/editor/editor.js'); // Fallback
+
+if (file_exists($manifestPath)) {
+    $manifest = json_decode(file_get_contents($manifestPath), true);
+    if (isset($manifest['resources/js/editor/editor.js'])) {
+        $editorJsPath = base_url('assets/editor/' . $manifest['resources/js/editor/editor.js']['file']);
+    }
+}
+?>
+<script src="<?= $editorJsPath ?>"></script>
+<script>
+  // CSRF & Endpoints for Editor.js
+  window.csrfTokenName = '<?= csrf_token() ?>';
+  window.csrfTokenValue = '<?= csrf_hash() ?>';
+  window.csrfHeaderName = '<?= csrf_header() ?>';
+  window.uploadEndpoint = '<?= base_url('admin/upload') ?>';
+  window.linkPreviewEndpoint = '<?= base_url('admin/link-preview') ?>';
+  window.pageId = <?= $page ? $page['id'] : 'null' ?>;
+  
+  // Sync excerpt textarea with hidden input
+  const excerptTextarea = document.getElementById('excerpt-textarea');
+  const excerptInput = document.getElementById('excerpt');
+  if (excerptTextarea && excerptInput) {
+    excerptTextarea.addEventListener('input', function() {
+      excerptInput.value = this.value;
+    });
+  }
+  
+  // Fix Editor.js toolbar z-index to stay below header
+  document.addEventListener('DOMContentLoaded', function() {
+    const style = document.createElement('style');
+    style.textContent = `
+      .ce-toolbar,
+      .ce-inline-toolbar,
+      .ce-popover,
+      .ce-conversion-toolbar,
+      .ce-settings,
+      .ce-block-settings,
+      .ce-toolbar__plus,
+      .ce-toolbar__settings-btn,
+      .ce-popover__item,
+      .ce-popover__items,
+      .ce-settings__button {
+        z-index: 10 !important;
+      }
+      header,
+      header[class*="sticky"],
+      header[class*="fixed"] {
+        z-index: 99999 !important;
+      }
+    `;
+    document.head.appendChild(style);
+  });
+</script>
+
+<?= $this->endSection() ?>

app/Views/admin/pages/index.php

@@ -0,0 +1,307 @@
+<?= $this->extend('admin/layout') ?>
+
+<?= $this->section('content') ?>
+<div class="space-y-5 sm:space-y-6">
+  <!-- Page Header -->
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
+        Halaman
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Kelola halaman statis
+      </p>
+    </div>
+    <a
+      href="<?= base_url('admin/pages/create') ?>"
+      class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
+    >
+      <i class="fe fe-plus"></i>
+      Tambah Halaman
+    </a>
+  </div>
+
+  <!-- Flash Messages sudah ditangani di layout.php -->
+
+  <!-- Stats Cards -->
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Total Halaman</p>
+          <p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['total'] ?></p>
+        </div>
+        <div class="w-12 h-12 rounded-full bg-brand-100 dark:bg-brand-900/20 flex items-center justify-center">
+          <i class="fe fe-file text-brand-600 dark:text-brand-400 text-xl"></i>
+        </div>
+      </div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Published</p>
+          <p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['published'] ?></p>
+        </div>
+        <div class="w-12 h-12 rounded-full bg-success-100 dark:bg-success-900/20 flex items-center justify-center">
+          <i class="fe fe-check-circle text-success-600 dark:text-success-400 text-xl"></i>
+        </div>
+      </div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Draft</p>
+          <p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['draft'] ?></p>
+        </div>
+        <div class="w-12 h-12 rounded-full bg-warning-100 dark:bg-warning-900/20 flex items-center justify-center">
+          <i class="fe fe-edit text-warning-600 dark:text-warning-400 text-xl"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Filters and Search -->
+  <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
+    <form method="get" action="<?= base_url('admin/pages') ?>" class="flex flex-col gap-4 sm:flex-row sm:items-center">
+      <div class="flex-1">
+        <input
+          type="text"
+          name="search"
+          value="<?= esc($currentSearch ?? '') ?>"
+          placeholder="Cari halaman..."
+          class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
+        />
+      </div>
+      <div>
+        <select
+          name="status"
+          class="h-11 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
+        >
+          <option value="">Semua Status</option>
+          <option value="published" <?= ($currentStatus === 'published') ? 'selected' : '' ?>>Published</option>
+          <option value="draft" <?= ($currentStatus === 'draft') ? 'selected' : '' ?>>Draft</option>
+        </select>
+      </div>
+      <button
+        type="submit"
+        class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
+      >
+        <i class="fe fe-search"></i>
+        Cari
+      </button>
+      <?php if ($currentSearch || $currentStatus): ?>
+        <a
+          href="<?= base_url('admin/pages') ?>"
+          class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+        >
+          <i class="fe fe-x"></i>
+          Reset
+        </a>
+      <?php endif; ?>
+    </form>
+  </div>
+
+  <!-- Pages Table -->
+  <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+    <div class="max-w-full overflow-x-auto">
+      <table class="min-w-full">
+        <thead>
+          <tr class="border-b border-gray-100 dark:border-gray-800">
+            <th class="px-5 py-3 sm:px-6">
+              <div class="flex items-center">
+                <p class="font-medium text-gray-500 text-xs dark:text-gray-400">
+                  Judul
+                </p>
+              </div>
+            </th>
+            <th class="px-5 py-3 sm:px-6">
+              <div class="flex items-center">
+                <p class="font-medium text-gray-500 text-xs dark:text-gray-400">
+                  Status
+                </p>
+              </div>
+            </th>
+            <th class="px-5 py-3 sm:px-6">
+              <div class="flex items-center">
+                <p class="font-medium text-gray-500 text-xs dark:text-gray-400">
+                  Tanggal Dibuat
+                </p>
+              </div>
+            </th>
+            <th class="px-5 py-3 sm:px-6">
+              <div class="flex items-center">
+                <p class="font-medium text-gray-500 text-xs dark:text-gray-400">
+                  Aksi
+                </p>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+          <?php if (empty($pages)): ?>
+            <tr>
+              <td colspan="4" class="px-5 py-8 text-center sm:px-6">
+                <p class="text-gray-500 dark:text-gray-400">Tidak ada halaman ditemukan.</p>
+              </td>
+            </tr>
+          <?php else: ?>
+            <?php foreach ($pages as $item): ?>
+              <tr>
+                <td class="px-5 py-4 sm:px-6">
+                  <div class="flex items-center">
+                    <div>
+                      <p class="font-medium text-gray-800 text-sm dark:text-white/90">
+                        <?= esc($item['title']) ?>
+                      </p>
+                      <span class="text-gray-500 text-xs dark:text-gray-400">
+                        <?= esc($item['slug']) ?>
+                      </span>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-4 sm:px-6">
+                  <div class="flex items-center">
+                    <?php if ($item['status'] === 'published'): ?>
+                      <p class="rounded-full bg-success-50 px-2 py-0.5 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
+                        Published
+                      </p>
+                    <?php else: ?>
+                      <p class="rounded-full bg-warning-50 px-2 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
+                        Draft
+                      </p>
+                    <?php endif; ?>
+                  </div>
+                </td>
+                <td class="px-5 py-4 sm:px-6">
+                  <div class="flex items-center">
+                    <p class="text-gray-500 text-sm dark:text-gray-400">
+                      <?= date('d M Y', strtotime($item['created_at'])) ?>
+                    </p>
+                  </div>
+                </td>
+                <td class="px-5 py-4 sm:px-6">
+                  <div class="flex items-center gap-2">
+                    <a
+                      href="<?= base_url('admin/pages/edit/' . $item['id']) ?>"
+                      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+                      title="Edit"
+                    >
+                      <i class="fe fe-edit text-sm"></i>
+                      <span class="hidden sm:inline">Edit</span>
+                    </a>
+                    <button
+                      type="button"
+                      onclick="confirmDelete(<?= $item['id'] ?>)"
+                      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-error-300 bg-white px-3 py-1.5 text-sm font-medium text-error-700 shadow-theme-xs hover:bg-error-50 dark:border-error-700 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20"
+                      title="Hapus"
+                    >
+                      <i class="fe fe-trash-2 text-sm"></i>
+                      <span class="hidden sm:inline">Hapus</span>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            <?php endforeach; ?>
+          <?php endif; ?>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination -->
+    <?php if ($pager->hasMore() || $pager->getCurrentPage() > 1): ?>
+      <div class="flex items-center justify-between border-t border-gray-100 px-5 py-4 dark:border-gray-800 sm:px-6">
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Menampilkan <?= count($pages) ?> dari <?= $pager->getTotal() ?> halaman
+        </div>
+        <div class="flex items-center gap-2">
+          <?= $pager->links() ?>
+        </div>
+      </div>
+    <?php endif; ?>
+  </div>
+</div>
+
+<!-- Confirmation Modal -->
+<div id="confirmModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
+  <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900 w-full max-w-md">
+    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" id="confirmModalTitle">
+      Hapus Halaman
+    </h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" id="confirmModalMessage">
+      Apakah Anda yakin ingin menghapus halaman ini? Tindakan ini tidak dapat dibatalkan.
+    </p>
+    <div class="flex items-center gap-3 pt-4">
+      <button
+        type="button"
+        id="confirmModalButton"
+        class="inline-flex items-center justify-center gap-2 rounded-lg bg-error-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-error-600"
+      >
+        Ya, Hapus
+      </button>
+      <button
+        type="button"
+        onclick="closeConfirmModal()"
+        class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+      >
+        Batal
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Form -->
+<form id="deleteForm" method="post" action="" style="display: none;">
+  <input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />
+</form>
+
+<script>
+let confirmCallback = null;
+
+function showConfirmModal(title, message, buttonText, buttonClass, callback) {
+  document.getElementById('confirmModalTitle').textContent = title;
+  document.getElementById('confirmModalMessage').textContent = message;
+  const confirmBtn = document.getElementById('confirmModalButton');
+  confirmBtn.textContent = buttonText;
+  confirmBtn.className = `inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs ${buttonClass}`;
+  confirmCallback = callback;
+  document.getElementById('confirmModal').classList.remove('hidden');
+  document.getElementById('confirmModal').classList.add('flex');
+}
+
+function closeConfirmModal() {
+  document.getElementById('confirmModal').classList.add('hidden');
+  document.getElementById('confirmModal').classList.remove('flex');
+  confirmCallback = null;
+}
+
+function confirmDelete(id) {
+  showConfirmModal(
+    'Hapus Halaman',
+    'Apakah Anda yakin ingin menghapus halaman ini? Tindakan ini tidak dapat dibatalkan.',
+    'Ya, Hapus',
+    'bg-error-500 hover:bg-error-600',
+    function() {
+      const form = document.getElementById('deleteForm');
+      form.action = '<?= base_url('admin/pages/delete/') ?>' + id;
+      form.submit();
+    }
+  );
+}
+
+// Handle confirm button click
+document.getElementById('confirmModalButton').addEventListener('click', function() {
+  if (confirmCallback) {
+    confirmCallback();
+    closeConfirmModal();
+  }
+});
+
+// Close modal on outside click
+document.getElementById('confirmModal')?.addEventListener('click', function(e) {
+  if (e.target === this) {
+    closeConfirmModal();
+  }
+});
+</script>
+<?= $this->endSection() ?>
+