<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Banners</h1>
  <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700"><i class="fas fa-plus mr-1"></i> Add Banner</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <% if (typeof banners !== 'undefined' && banners && banners.length) { %>
    <% banners.forEach(function(banner) { %>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="aspect-[2/1] bg-gray-100">
          <img src="<%= banner.image %>" class="w-full h-full object-cover">
        </div>
        <div class="p-4">
          <h3 class="font-medium text-gray-800"><%= banner.title || 'Untitled' %></h3>
          <% if (banner.subtitle) { %><p class="text-sm text-gray-500"><%= banner.subtitle %></p><% } %>
          <div class="flex items-center justify-between mt-3">
            <span class="px-2 py-0.5 rounded-full text-xs font-medium <%= banner.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= banner.isActive ? 'Active' : 'Inactive' %></span>
            <div class="flex gap-2">
              <button onclick="toggleBanner(<%= banner.id %>)" class="text-sm <%= banner.isActive ? 'text-yellow-600' : 'text-green-600' %> hover:underline"><%= banner.isActive ? 'Deactivate' : 'Activate' %></button>
              <form action="/admin/banners/<%= banner.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this banner?')">
                <button type="submit" class="text-red-500 hover:text-red-700 text-sm"><i class="fas fa-trash"></i></button>
              </form>
            </div>
          </div>
        </div>
      </div>
    <% }) %>
  <% } else { %>
    <div class="col-span-full text-center py-12 text-gray-400">No banners found.</div>
  <% } %>
</div>

<!-- Create Modal -->
<div id="createModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-lg mx-4">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold">Add Banner</h3>
      <button onclick="document.getElementById('createModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">&times;</button>
    </div>
    <form action="/admin/banners/create" method="POST" enctype="multipart/form-data">
      <div class="space-y-4">
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Title</label><input type="text" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label><input type="text" name="subtitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Link URL</label><input type="text" name="link" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="/products"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Button Text</label><input type="text" name="btnText" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Shop Now"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Image *</label><input type="file" name="image" required accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Sort Order</label><input type="number" name="sortOrder" value="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="flex items-center gap-2"><input type="checkbox" name="isActive" checked class="rounded"><span class="text-sm text-gray-700">Active</span></label></div>
      </div>
      <div class="flex justify-end gap-3 mt-6">
        <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-lg text-sm">Cancel</button>
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm">Create</button>
      </div>
    </form>
  </div>
</div>

<script>
async function toggleBanner(id) {
  const res = await fetch('/admin/banners/' + id + '/toggle', { method: 'POST' });
  const data = await res.json();
  if (data.success) location.reload();
}
</script>
