<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Categories</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 Category</button>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Name</th>
        <th class="px-6 py-4 font-medium">Slug</th>
        <th class="px-6 py-4 font-medium">Parent</th>
        <th class="px-6 py-4 font-medium text-center">Products</th>
        <th class="px-6 py-4 font-medium text-center">Status</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% categories.forEach(function(cat) { %>
        <tr class="border-t hover:bg-gray-50">
          <td class="px-6 py-4 font-medium text-gray-800"><%= cat.name %></td>
          <td class="px-6 py-4 text-gray-500"><%= cat.slug %></td>
          <td class="px-6 py-4 text-gray-500"><%= cat.parent ? cat.parent.name : '-' %></td>
          <td class="px-6 py-4 text-center"><%= cat.Products ? cat.Products.length : 0 %></td>
          <td class="px-6 py-4 text-center">
            <span class="px-2 py-0.5 rounded-full text-xs font-medium <%= cat.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= cat.isActive ? 'Active' : 'Inactive' %></span>
          </td>
          <td class="px-6 py-4 text-right">
            <button onclick="editCategory(<%= cat.id %>, '<%= cat.name %>', '<%= cat.description || '' %>', '<%= cat.parentId || '' %>', <%= cat.sortOrder || 0 %>, <%= cat.isActive %>)" class="text-indigo-600 hover:text-indigo-800 mr-3"><i class="fas fa-edit"></i></button>
            <form action="/admin/categories/<%= cat.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this category?')">
              <button type="submit" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
            </form>
          </td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</div>

<!-- Create Modal -->
<div id="createModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center" x-data>
  <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 Category</h3>
      <button onclick="document.getElementById('createModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">&times;</button>
    </div>
    <form action="/admin/categories/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">Name *</label><input type="text" name="name" required 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">Description</label><textarea name="description" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Parent Category</label>
          <select name="parentId" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            <option value="">None (Top Level)</option>
            <% categories.forEach(function(c) { %><option value="<%= c.id %>"><%= c.name %></option><% }) %>
          </select>
        </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="block text-sm font-medium text-gray-700 mb-1">Image</label><input type="file" name="image" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></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>

<!-- Edit Modal -->
<div id="editModal" 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">Edit Category</h3>
      <button onclick="document.getElementById('editModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">&times;</button>
    </div>
    <form id="editForm" method="POST" enctype="multipart/form-data">
      <div class="space-y-4">
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Name *</label><input type="text" name="name" id="editName" required 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">Description</label><textarea name="description" id="editDescription" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Parent Category</label>
          <select name="parentId" id="editParentId" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            <option value="">None (Top Level)</option>
            <% categories.forEach(function(c) { %><option value="<%= c.id %>"><%= c.name %></option><% }) %>
          </select>
        </div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Sort Order</label><input type="number" name="sortOrder" id="editSortOrder" 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" id="editIsActive" class="rounded"><span class="text-sm text-gray-700">Active</span></label></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Image</label><input type="file" name="image" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
      </div>
      <div class="flex justify-end gap-3 mt-6">
        <button type="button" onclick="document.getElementById('editModal').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">Update</button>
      </div>
    </form>
  </div>
</div>

<script>
function editCategory(id, name, description, parentId, sortOrder, isActive) {
  document.getElementById('editForm').action = '/admin/categories/' + id + '/edit';
  document.getElementById('editName').value = name;
  document.getElementById('editDescription').value = description;
  document.getElementById('editParentId').value = parentId;
  document.getElementById('editSortOrder').value = sortOrder;
  document.getElementById('editIsActive').checked = isActive;
  document.getElementById('editModal').classList.remove('hidden');
}
</script>
