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

<div class="page-head">
  <h2><?= $isEdit ? 'Edit Kolom Footer' : 'Tambah Kolom Footer' ?></h2>
  <a href="<?= APP_URL ?>/admin/footer" 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 Kolom</label>
      <input type="text" id="judul" name="judul" class="form-control" required
             value="<?= htmlspecialchars($kolom['judul'] ?? '') ?>" placeholder="Contoh: Kontak">
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="tipe">Tipe Konten</label>
        <select id="tipe" name="tipe" class="form-control" onchange="toggleFooterFields(this.value)">
          <option value="tautan" <?= $tipe === 'tautan' ? 'selected' : '' ?>>Daftar Tautan</option>
          <option value="teks" <?= $tipe === 'teks' ? 'selected' : '' ?>>Teks</option>
          <option value="gambar" <?= $tipe === 'gambar' ? 'selected' : '' ?>>Gambar</option>
          <option value="html" <?= $tipe === 'html' ? 'selected' : '' ?>>Kode HTML</option>
          <option value="iframe" <?= $tipe === 'iframe' ? 'selected' : '' ?>>Iframe (embed peta, dsb)</option>
        </select>
      </div>
      <div class="form-group">
        <label for="urutan">Urutan</label>
        <input type="number" id="urutan" name="urutan" class="form-control" value="<?= (int) ($kolom['urutan'] ?? 0) ?>">
      </div>
    </div>

    <?php if ($isEdit && $tipe === 'tautan'): ?>
      <div class="form-group">
        <p class="hint">Kolom ini bertipe "Daftar Tautan" — kelola isi tautannya di halaman terpisah setelah menyimpan judul/urutan di sini.</p>
        <a href="<?= APP_URL ?>/admin/footer/<?= $kolom['id'] ?>/tautan" class="btn btn-secondary btn-sm">Kelola Tautan &rarr;</a>
      </div>
    <?php endif; ?>

    <div class="form-group" id="field-teks" style="<?= in_array($tipe, ['teks', 'html'], true) ? '' : 'display:none;' ?>">
      <label for="konten"><?= $tipe === 'html' ? 'Kode HTML' : 'Isi Teks' ?></label>
      <textarea id="konten" name="konten" class="form-control" rows="5"><?= htmlspecialchars($kolom['konten'] ?? '') ?></textarea>
      <p class="hint">Untuk "Kode HTML", isinya akan dirender apa adanya (hati-hati, hanya isi dari sumber yang Anda percaya).</p>
    </div>

    <div class="form-group" id="field-iframe" style="<?= $tipe === 'iframe' ? '' : 'display:none;' ?>">
      <label for="konten_iframe">URL Embed (src iframe)</label>
      <input type="text" id="konten_iframe" name="konten_iframe" class="form-control" value="<?= $tipe === 'iframe' ? htmlspecialchars($kolom['konten'] ?? '') : '' ?>" placeholder="https://www.google.com/maps/embed?...">
      <p class="hint">Contoh: link embed Google Maps (Bagikan &rarr; Sematkan peta &rarr; salin URL dari atribut src).</p>
    </div>

    <div class="form-group" id="field-gambar" style="<?= $tipe === 'gambar' ? '' : 'display:none;' ?>">
      <label for="gambar">Gambar</label>
      <?php if ($isEdit && !empty($kolom['gambar'])): ?>
        <div style="margin-bottom:10px;">
          <img src="<?= APP_URL . '/uploads/footer/' . htmlspecialchars($kolom['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">
      <label for="warna">Warna Aksen Kolom (opsional)</label>
      <div style="display:flex; gap:8px;">
        <input type="color" id="warna_picker" value="<?= htmlspecialchars($kolom['warna'] ?? '#ffffff') ?>"
               style="width:44px; height:40px; border:1px solid var(--admin-border); border-radius:8px; padding:2px;"
               oninput="document.getElementById('warna').value = this.value">
        <input type="text" id="warna" name="warna" class="form-control" value="<?= htmlspecialchars($kolom['warna'] ?? '') ?>" placeholder="Kosongkan untuk warna default">
      </div>
      <p class="hint">Mewarnai judul &amp; teks di kolom ini secara khusus (misalnya beda warna per kolom).</p>
    </div>

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

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

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