<?php
$isEdit = !empty($halaman);
$pageTitle = $isEdit ? 'Edit Halaman' : 'Tambah Halaman';
$action = $isEdit ? APP_URL . '/admin/halaman/' . $halaman['id'] : APP_URL . '/admin/halaman';
?>
<?php require BASE_PATH . '/app/Views/admin/layouts/header.php'; ?>

<div class="page-head">
  <h2><?= $isEdit ? 'Edit Halaman' : 'Tambah Halaman Baru' ?></h2>
  <a href="<?= APP_URL ?>/admin/halaman" class="btn btn-secondary">Kembali</a>
</div>

<div class="card" style="max-width:860px;">
  <form method="POST" action="<?= $action ?>" enctype="multipart/form-data">
    <?= \App\Core\Csrf::field() ?>

    <div class="form-group">
      <label for="judul">Judul Halaman</label>
      <input type="text" id="judul" name="judul" class="form-control" required
             value="<?= htmlspecialchars($halaman['judul'] ?? '') ?>" placeholder="Contoh: Sambutan Dekan">
    </div>

    <div class="form-group">
      <label for="slug">Slug (URL)</label>
      <input type="text" id="slug" name="slug" class="form-control"
             value="<?= htmlspecialchars($halaman['slug'] ?? '') ?>" placeholder="otomatis dari judul kalau dikosongkan">
      <p class="hint">Akan tampil sebagai: <?= APP_URL ?>/halaman/<span id="slug-preview"><?= htmlspecialchars($halaman['slug'] ?? '') ?></span></p>
    </div>

    <div class="form-group">
      <label for="gambar">Gambar Sampul (opsional)</label>
      <?php if ($isEdit && !empty($halaman['gambar'])): ?>
        <div style="margin-bottom:10px;">
          <img src="<?= APP_URL . '/uploads/halaman/' . htmlspecialchars($halaman['gambar']) ?>" alt="" style="width:160px; border-radius:8px; display:block;">
        </div>
      <?php endif; ?>
      <input type="file" id="gambar" name="gambar" class="form-control" accept="image/jpeg,image/png,image/webp">
      <p class="hint">Format JPG/PNG/WEBP, maksimal 2MB. <?= $isEdit ? 'Kosongkan kalau tidak ingin mengganti.' : '' ?></p>
    </div>

    <div class="form-group">
      <label for="konten">Isi Halaman</label>
      <textarea id="konten" name="konten"><?= $halaman['konten'] ?? '' ?></textarea>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" id="is_active" name="is_active" value="1" <?= ($halaman['is_active'] ?? 1) ? 'checked' : '' ?>>
        <label for="is_active" style="margin:0; font-weight:400;">Tampilkan halaman ini di situs (aktif)</label>
      </div>
    </div>

    <button type="submit" class="btn"><?= $isEdit ? 'Simpan Perubahan' : 'Simpan Halaman' ?></button>
  </form>
</div>

<script src="https://cdn.tiny.cloud/1/asv1ccmdos5ku7aiipbb5do6l68ekdc4k2vk85p0bc8sthud/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: '#konten',
    height: 420,
    menubar: false,
    plugins: 'lists link image table code fullscreen media',
    toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | link image media table | code fullscreen',
    branding: false,
    content_style: 'body { font-family: Inter, sans-serif; font-size: 14px; }'
  });

  (function () {
    var judul = document.getElementById('judul');
    var slug = document.getElementById('slug');
    var preview = document.getElementById('slug-preview');
    var slugTouched = slug.value.length > 0;

    slug.addEventListener('input', function () { slugTouched = true; });

    function slugify(text) {
      return text.toLowerCase().trim()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
    }

    judul.addEventListener('input', function () {
      if (!slugTouched) {
        var s = slugify(judul.value);
        slug.value = s;
        preview.textContent = s;
      }
    });

    slug.addEventListener('input', function () {
      preview.textContent = slugify(slug.value);
    });
  })();
</script>

<?php require BASE_PATH . '/app/Views/admin/layouts/footer.php'; ?>
