<!-- Main container -->
<div class="flex">
    <!-- Sidebar -->
    <div class="w-64 bg-white p-4">
        <div class="flex items-center justify-between px-6 py-4">
            <span class="text-xl font-semibold">ToyHub</span>
        </div>
        <nav>
            <ul class="space-y-2">
                <li>
                    <a href="/admin"
                        class="flex items-center p-2 text-gray-700 hover:shadow-xl rounded-lg hover:bg-gray-100 transition-all">Dashboard</a>
                </li>
                <li>
                    <a href="/admin/products"
                        class="flex items-center rounded hover:shadow-xl hover:bg-gray-100 transition-all p-2 text-gray-700">All
                        Products</a>
                </li>
                <li>
                    <a href="/admin/orders"
                        class="flex items-center p-2 text-gray-700 hover:shadow-xl rounded-lg hover:bg-gray-100 transition-all">Order
                        List</a>
                </li>
                <li>
                    <a href="/admin/users"
                        class="flex items-center p-2 text-gray-700 hover:shadow-xl rounded-lg hover:bg-gray-100 transition-all">User
                        List</a>
                </li>
                <li>
                    <a href="/admin/category"
                        class="flex items-center p-2 text-gray-700 hover:shadow-xl rounded-lg hover:bg-gray-100 transition-all bg-primary"><span
                            class="ml-3"> Category Management </span></a>
                </li>
                <li>
                    <a href="/admin/addProduct"
                        class="flex items-center p-2 text-gray-700 hover:shadow-xl rounded-lg hover:bg-gray-100 transition-all">
                        <span class="">Add Product</span></a>
                </li>
                <li>
                    <a href="/admin/banner"
                        class="flex items-center rounded hover:bg-gray-100 hover:shadow-xl transition-all p-2 text-gray-700">Banner</a>
                </li>
            </ul>
        </nav>
        <div class="mt-6">
            <h3 class="text-sm font-semibold">Categories</h3>
            <hr>
            <ul>
                <li>
                    <form action="/admin/logout" method="POST">
                        <a href="/admin/logout">
                            <button type="submit"
                                class="flex items-center p-2 hover:bg-gray-200 mt-3 transition-all rounded">Logout</button>
                        </a>
                    </form>
                </li>
            </ul>
        </div>
    </div>
    <!-- Content Area -->
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Add Category</h1>
        <div class="text-sm text-gray-600 mb-4">
            <a href="/admin" class="text-gray-600 hover:text-gray-800">Home</a> > <a href="#"
              class="text-gray-600 hover:text-gray-800">Category</a>
          </div>
        <h2 class="text-xl font-semibold mb-2">Existing Categories</h2>
        <ul class="list-disc pl-5 mb-4">
            <% if (locals.categories) { %>
                <ul class="list-none mb-4">
                    <% categories.forEach(category=> { %> <li
                            class="flex items-center justify-between mb-4 p-2 bg-gray-100 rounded-md shadow-sm">
                            <!-- Left section: Image, name, description -->
                            <div class="flex items-center">
                                <!-- Image thumbnail -->
                                <img src="<%= category.image %>" alt="<%= category.name %>"
                                    class="w-16 h-16 object-cover rounded-md mr-4">
                                <!-- Category Name and Description -->
                                <div>
                                    <h3 class="text-lg font-semibold">
                                        <%= category.name %>
                                    </h3>
                                    <p class="text-gray-600">
                                        <%= category.description %>
                                    </p>
                                </div>
                            </div>
                            <!-- Right section: Edit & Delete buttons -->
                            <div class="flex items-center space-x-2">
                                <!-- Edit Button -->
                                <a href="/admin/category/edit/<%= category._id %>"
                                    class="px-3 py-1 bg-primary text-white rounded">Edit</a>
                                <!-- Delete Button -->
                                <form action="/admin/category/delete/<%= category._id %>" method="POST"
                                    onsubmit="return confirm('Are you sure you want to delete this category?');">
                                    <button type="submit"
                                        class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600">Delete</button>
                                </form>
                            </div>
                        </li>
                        <% }) %>
                </ul>
                <% } else { %>
                    <p class="text-gray-500">No categories available.</p>
                    <% } %>
                        <h2 class="text-xl font-semibold mb-2">Add New Category</h2>
                        <p class="error">
                            <%= locals.nameError%>
                        </p>
                        <form id="categoryForm" action="/admin/category" method="POST" enctype="multipart/form-data"
                            class="space-y-4">
                            <div id="categoryRows" class="space-y-4">
                                <div
                                    class="category-row bg-white p-4 border border-gray-300 rounded-lg shadow-md flex items-center space-x-4 relative">
                                    <input type="text" name="name" placeholder="Category Name" required
                                        class="border border-gray-300 p-2 rounded-md flex-1">
                                    <input type="file" name="image" accept="image/*"
                                        class="border border-gray-300 p-2 rounded-md">
                                    <img src="" alt="" class="w-24 h-24 object-cover hidden">
                                    <button type="button"
                                        class="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full hover:bg-red-600 delete-button">X</button>
                                </div>
                            </div>
                            <button type="button" id="addRowButton"
                                class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Add Another
                                Category</button>
                            <button type="submit"
                                class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">Submit
                                Categories</button>
                            <% if (locals.message) { %>
                                <p class="text-red-500 mt-4">
                                    <%= locals.message , locals.nameError %>
                                </p>
                                <% } %>
                        </form>
                        <div class="mb-4 flex justify-between items-center">
                            <!-- Previous Button -->
                            <% if (currentPage > 1) { %>
                                <a href="/admin/category?page=<%= currentPage - 1 %>&limit=6" class="px-3 py-1 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg">Previous</a>
                            <% } else { %>
                                <span class="px-3 py-1 text-sm text-gray-400 bg-gray-200 border border-gray-300 rounded-lg">Previous</span>
                            <% } %>
                
                            <!-- Page Numbers -->
                            <div class="flex space-x-1">
                                <% for (let i = 1; i <= totalPages; i++) { %>
                                    <a href="/admin/category?page=<%= i %>&limit=6"
                                       class="px-3 py-1 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg <%= currentPage === i ? 'bg-gray-300' : '' %>">
                                        <%= i %>
                                    </a>
                                <% } %>
                            </div>
                
                            <!-- Next Button -->
                            <% if (currentPage < totalPages) { %>
                                <a href="/admin/category?page=<%= currentPage + 1 %>&limit=6" class="px-3 py-1 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg">Next</a>
                            <% } else { %>
                                <span class="px-3 py-1 text-sm text-gray-400 bg-gray-200 border border-gray-300 rounded-lg">Next</span>
                            <% } %>
                        </div>
    </div>
    
    <script>
        // Function to add a new category row
        document.getElementById('addRowButton').addEventListener('click', function () {
          const categoryRows = document.getElementById('categoryRows');
          const newRow = document.createElement('div');
          newRow.className = 'category-row bg-white p-4 border border-gray-300 rounded-lg shadow-md flex items-center space-x-4 relative';
          newRow.innerHTML = `
            <input type="text" name="name" placeholder="Category Name" required class="border border-gray-300 p-2 rounded-md flex-1">
            <input type="file" name="image" accept="image/*" class="border border-gray-300 p-2 rounded-md">
            <img src="" alt="" class="w-24 h-24 object-cover hidden">
            <button type="button" class="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full hover:bg-red-600 delete-button">X</button>
          `;
          categoryRows.appendChild(newRow);
      
          // Show success toast notification
          toastr.success('New category row added.');
        });
      
        // Function to handle file input change
        document.getElementById('categoryForm').addEventListener('change', function (event) {
          if (event.target.type === 'file') {
            const file = event.target.files[0];
            if (file) {
              const reader = new FileReader();
              reader.onload = function (e) {
                event.target.nextElementSibling.src = e.target.result;
                event.target.nextElementSibling.style.display = 'block';
      
                // Show success toast notification
                toastr.success('Image preview updated.');
              }
              reader.readAsDataURL(file);
            }
          }
        });
      
        // Function to handle delete button click
        document.getElementById('categoryRows').addEventListener('click', function (event) {
          if (event.target.classList.contains('delete-button')) {
            event.target.parentElement.remove();
      
            // Show info toast notification
            toastr.info('Category row removed.');
          }
        });
      </script>
      