<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Pengumuman & Promo</h1>
  <p class="text-muted text-sm mt-1">Banner promo, tutorial, dan info penting yang tampil di member area.</p>
</div>

<!-- Form tambah baru -->
<div class="card p-5 sm:p-6 mb-6">
  <h2 class="text-base sm:text-lg font-display font-semibold mb-4">+ Tambah Pengumuman Baru</h2>
  <form action="/admin/announcements" method="post" enctype="multipart/form-data" class="grid sm:grid-cols-2 gap-3">
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Judul <span class="text-red-400">*</span></label>
      <input name="title" required class="input mt-1.5" placeholder="Mis: PROMO! Diskon 50% TRS sampai 31 Desember">
    </div>
    <div>
      <label class="text-xs text-muted">Badge Label</label>
      <input name="badge" class="input mt-1.5 text-sm" placeholder="PROMO / BARU / INFO / PENTING">
    </div>
    <div>
      <label class="text-xs text-muted">Banner (16:9, max 5MB)</label>
      <input type="file" name="banner" accept=".jpg,.jpeg,.png,.webp" class="input mt-1.5 cursor-pointer text-sm">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Deskripsi</label>
      <textarea name="description" rows="4" class="input mt-1.5 text-sm" placeholder="Detail promo / pengumuman..."></textarea>
    </div>
    <div>
      <label class="text-xs text-muted">YouTube URL</label>
      <input type="url" name="youtube_url" class="input mt-1.5 text-sm mono" placeholder="https://youtube.com/watch?v=...">
    </div>
    <div>
      <label class="text-xs text-muted">TikTok URL</label>
      <input type="url" name="tiktok_url" class="input mt-1.5 text-sm mono" placeholder="https://tiktok.com/@user/video/...">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">External URL (link tombol "Selengkapnya")</label>
      <input type="url" name="external_url" class="input mt-1.5 text-sm">
    </div>
    <div>
      <label class="text-xs text-muted">Mulai Tampil (opsional)</label>
      <input type="datetime-local" name="starts_at" class="input mt-1.5 text-sm">
    </div>
    <div>
      <label class="text-xs text-muted">Berakhir (opsional)</label>
      <input type="datetime-local" name="ends_at" class="input mt-1.5 text-sm">
    </div>
    <div>
      <label class="text-xs text-muted">Urutan</label>
      <input name="sort_order" type="number" value="0" class="input mt-1.5 text-sm">
    </div>
    <div class="flex items-center pt-5">
      <label class="flex items-center gap-2 cursor-pointer text-sm">
        <input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 accent-gold-400">
        Aktif
      </label>
    </div>
    <div class="sm:col-span-2">
      <button class="btn btn-gold rounded-full px-6 py-2.5 text-sm">+ Tambah Pengumuman</button>
    </div>
  </form>
</div>

<!-- List -->
<% if (announcements && announcements.length) { %>
  <div class="space-y-4">
    <% announcements.forEach(function(a){ %>
      <div class="card p-5">
        <div class="flex items-start gap-3 mb-3">
          <% if (a.banner_path) { %>
            <img src="<%= a.banner_path %>" alt="" class="h-16 w-24 object-cover rounded-lg border border-white/10 shrink-0">
          <% } else { %>
            <div class="h-16 w-24 rounded-lg border border-white/10 bg-white/[0.04] grid place-items-center text-2xl shrink-0">📢</div>
          <% } %>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap mb-1">
              <% if (a.badge) { %><span class="pill pill-gold"><%= a.badge %></span><% } %>
              <% if (!a.is_active) { %><span class="pill pill-red">inactive</span><% } %>
            </div>
            <h3 class="font-medium text-sm truncate"><%= a.title %></h3>
            <div class="text-xs text-muted-2 mt-1"><%= new Date(a.created_at).toLocaleDateString('id-ID',{day:'2-digit',month:'short',year:'numeric'}) %></div>
          </div>
          <form action="/admin/announcements/<%= a.id %>/delete" method="post" class="needs-confirm shrink-0" data-confirm="Hapus pengumuman ini?">
            <button class="btn btn-outline px-3 py-1.5 rounded-full text-xs text-red-300 hover:text-red-200">Hapus</button>
          </form>
        </div>

        <details class="card-soft p-3">
          <summary class="cursor-pointer text-sm font-medium">✏ Edit</summary>
          <form action="/admin/announcements/<%= a.id %>" method="post" enctype="multipart/form-data" class="grid sm:grid-cols-2 gap-3 mt-3">
            <div class="sm:col-span-2">
              <label class="text-xs text-muted">Judul</label>
              <input name="title" value="<%= a.title %>" class="input mt-1.5 text-sm">
            </div>
            <div>
              <label class="text-xs text-muted">Badge</label>
              <input name="badge" value="<%= a.badge || '' %>" class="input mt-1.5 text-sm">
            </div>
            <div>
              <label class="text-xs text-muted">Ganti Banner</label>
              <input type="file" name="banner" accept=".jpg,.jpeg,.png,.webp" class="input mt-1.5 cursor-pointer text-sm">
            </div>
            <div class="sm:col-span-2">
              <label class="text-xs text-muted">Deskripsi</label>
              <textarea name="description" rows="3" class="input mt-1.5 text-sm"><%= a.description || '' %></textarea>
            </div>
            <div>
              <label class="text-xs text-muted">YouTube URL</label>
              <input type="url" name="youtube_url" value="<%= a.youtube_url || '' %>" class="input mt-1.5 text-sm mono">
            </div>
            <div>
              <label class="text-xs text-muted">TikTok URL</label>
              <input type="url" name="tiktok_url" value="<%= a.tiktok_url || '' %>" class="input mt-1.5 text-sm mono">
            </div>
            <div class="sm:col-span-2">
              <label class="text-xs text-muted">External URL</label>
              <input type="url" name="external_url" value="<%= a.external_url || '' %>" class="input mt-1.5 text-sm">
            </div>
            <div>
              <label class="text-xs text-muted">Mulai</label>
              <input type="datetime-local" name="starts_at" value="<%= a.starts_at ? new Date(a.starts_at).toISOString().slice(0,16) : '' %>" class="input mt-1.5 text-sm">
            </div>
            <div>
              <label class="text-xs text-muted">Berakhir</label>
              <input type="datetime-local" name="ends_at" value="<%= a.ends_at ? new Date(a.ends_at).toISOString().slice(0,16) : '' %>" class="input mt-1.5 text-sm">
            </div>
            <div>
              <label class="text-xs text-muted">Urutan</label>
              <input name="sort_order" type="number" value="<%= a.sort_order || 0 %>" class="input mt-1.5 text-sm">
            </div>
            <div class="flex items-center">
              <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" name="is_active" value="1" <%= a.is_active ? 'checked' : '' %> class="w-4 h-4 accent-gold-400">
                Aktif
              </label>
            </div>
            <div class="sm:col-span-2">
              <button class="btn btn-gold rounded-full px-5 py-2 text-sm">💾 Simpan</button>
            </div>
          </form>
        </details>
      </div>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">📢</div>
    <h2>Belum ada pengumuman</h2>
    <p>Buat pengumuman/promo pertama untuk member Anda.</p>
  </div>
<% } %>
