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

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

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

    <div class="form-group">
      <label for="judul">Judul Widget (opsional)</label>
      <input type="text" id="judul" name="judul" class="form-control"
             value="<?= htmlspecialchars($widget['judul'] ?? '') ?>" placeholder="Contoh: Info Pendaftaran">
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="tipe">Tipe Widget</label>
        <select id="tipe" name="tipe" class="form-control" onchange="toggleWidgetFields(this.value)">
          <option value="teks" <?= $tipe === 'teks' ? 'selected' : '' ?>>Teks</option>
          <option value="gambar" <?= $tipe === 'gambar' ? 'selected' : '' ?>>Gambar</option>
          <option value="tautan" <?= $tipe === 'tautan' ? 'selected' : '' ?>>Teks + Tautan/Tombol</option>
          <option value="html" <?= $tipe === 'html' ? 'selected' : '' ?>>HTML Bebas</option>
        </select>
      </div>
      <div class="form-group">
        <label for="posisi">Posisi Tampil</label>
        <select id="posisi" name="posisi" class="form-control">
          <option value="sidebar" <?= ($widget['posisi'] ?? 'sidebar') === 'sidebar' ? 'selected' : '' ?>>Sidebar</option>
          <option value="footer" <?= ($widget['posisi'] ?? '') === 'footer' ? 'selected' : '' ?>>Footer</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label for="konten">Konten</label>
      <textarea id="konten" name="konten" class="form-control" rows="4"><?= htmlspecialchars($widget['konten'] ?? '') ?></textarea>
      <p class="hint">Untuk tipe "HTML Bebas", boleh isi tag HTML langsung (dirender apa adanya).</p>
    </div>

    <div class="form-group" id="field-gambar" style="<?= $tipe === 'gambar' ? '' : 'display:none;' ?>">
      <label for="gambar">Gambar</label>
      <?php if ($isEdit && !empty($widget['gambar'])): ?>
        <div style="margin-bottom:10px;">
          <img src="<?= APP_URL . '/uploads/widget/' . htmlspecialchars($widget['gambar']) ?>" alt="" style="width:120px; 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.</p>
    </div>

    <div class="form-group" id="field-url">
      <label for="url">URL Tautan (opsional)</label>
      <input type="text" id="url" name="url" class="form-control" value="<?= htmlspecialchars($widget['url'] ?? '') ?>" placeholder="/halaman/pendaftaran atau https://...">
      <p class="hint">Kalau diisi, akan muncul tombol "Selengkapnya" di bawah widget ini — berlaku untuk tipe apa pun (teks, gambar, HTML).</p>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="urutan">Urutan</label>
        <input type="number" id="urutan" name="urutan" class="form-control" value="<?= (int) ($widget['urutan'] ?? 0) ?>">
      </div>
      <div class="form-group">
        <label>&nbsp;</label>
        <div class="form-check" style="margin-top:10px;">
          <input type="checkbox" id="is_active" name="is_active" value="1" <?= ($widget['is_active'] ?? 1) ? 'checked' : '' ?>>
          <label for="is_active" style="margin:0; font-weight:400;">Aktifkan widget ini</label>
        </div>
      </div>
    </div>

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

<script>
  function toggleWidgetFields(tipe) {
    document.getElementById('field-gambar').style.display = tipe === 'gambar' ? '' : 'none';
  }
</script>

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