<?php $pageTitle = 'Footer'; ?>
<?php require BASE_PATH . '/app/Views/admin/layouts/header.php'; ?>

<div class="card" style="max-width:500px; margin-bottom:24px;">
  <h3 style="margin-top:0; font-size:14px;">Warna Latar Footer</h3>
  <form method="POST" action="<?= APP_URL ?>/admin/footer/warna-latar" style="display:flex; gap:12px; align-items:flex-end;">
    <?= \App\Core\Csrf::field() ?>
    <div class="form-group" style="margin-bottom:0; flex:1;">
      <label for="footer_bg_color">Kode Warna (hex)</label>
      <div style="display:flex; gap:8px;">
        <input type="color" id="footer_bg_color_picker" value="<?= htmlspecialchars($identitas['footer_bg_color'] ?? '#0b0d10') ?>"
               style="width:44px; height:40px; border:1px solid var(--admin-border); border-radius:8px; padding:2px;"
               oninput="document.getElementById('footer_bg_color').value = this.value">
        <input type="text" id="footer_bg_color" name="footer_bg_color" class="form-control"
               value="<?= htmlspecialchars($identitas['footer_bg_color'] ?? '#0b0d10') ?>" placeholder="#0b0d10">
      </div>
    </div>
    <button type="submit" class="btn">Simpan</button>
  </form>
</div>

<div class="page-head">
  <h2>Kolom Footer</h2>
  <a href="<?= APP_URL ?>/admin/footer/create" class="btn">+ Tambah Kolom</a>
</div>

<?php if (empty($daftarKolom)): ?>
  <div class="card"><p style="color:var(--admin-muted); margin:0;">Belum ada kolom footer.</p></div>
<?php else: ?>
  <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;">
    <?php foreach ($daftarKolom as $kolom): ?>
      <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;">
          <div>
            <h4 style="margin:0 0 4px; font-size:14px;"><?= htmlspecialchars($kolom['judul']) ?></h4>
            <span class="badge badge-sub"><?= ucfirst($kolom['tipe']) ?></span>
            <?php if (!empty($kolom['warna'])): ?>
              <span style="display:inline-block; width:14px; height:14px; border-radius:4px; background:<?= htmlspecialchars($kolom['warna']) ?>; vertical-align:middle; margin-left:4px; border:1px solid var(--admin-border);"></span>
            <?php endif; ?>
          </div>
          <span style="font-size:12px; color:var(--admin-muted);">Urutan: <?= (int) $kolom['urutan'] ?></span>
        </div>

        <?php if ($kolom['tipe'] === 'tautan'): ?>
          <p style="font-size:12px; color:var(--admin-muted);"><?= count($kolom['links']) ?> tautan</p>
        <?php elseif ($kolom['tipe'] === 'gambar' && !empty($kolom['gambar'])): ?>
          <img src="<?= APP_URL . '/uploads/footer/' . htmlspecialchars($kolom['gambar']) ?>" alt="" style="width:100%; border-radius:6px; margin-bottom:10px;">
        <?php elseif (!empty($kolom['konten'])): ?>
          <p style="font-size:12px; color:var(--admin-muted); max-height:60px; overflow:hidden;"><?= htmlspecialchars(mb_strimwidth(strip_tags($kolom['konten']), 0, 120, '...')) ?></p>
        <?php endif; ?>

        <div style="display:flex; gap:6px; margin-top:12px; flex-wrap:wrap;">
          <?php if ($kolom['tipe'] === 'tautan'): ?>
            <a href="<?= APP_URL ?>/admin/footer/<?= $kolom['id'] ?>/tautan" class="btn btn-secondary btn-sm">Kelola Tautan</a>
          <?php endif; ?>
          <a href="<?= APP_URL ?>/admin/footer/<?= $kolom['id'] ?>/edit" class="btn btn-secondary btn-sm">Edit</a>
          <form action="<?= APP_URL ?>/admin/footer/<?= $kolom['id'] ?>/delete" method="POST"
                onsubmit="return confirm('Hapus kolom &quot;<?= htmlspecialchars(addslashes($kolom['judul'])) ?>&quot;?');">
            <?= \App\Core\Csrf::field() ?>
            <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
          </form>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
<?php endif; ?>

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