
    <div class="min-h-screen flex flex-col justify-stretch">
      <div class="flex bg-gray-200">
        <!-- 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 bg-primary  p-2 text-gray-700 rounded-lg"
                  >
                  <span class="ml-3">Dashboard</span>
                </a>
              </li>
              <li>
                <a href="/admin/products" class="flex items-center  hover:bg-gray-200 transition-all rounded p-2 text-gray-700"
                  >All Products</a
                >
              </li>
              <li>
                <a href="/admin/orders" class="flex items-center  hover:bg-gray-200 transition-all rounded p-2 text-gray-700"
                  >Order List</a
                >
              </li>
              <li>
                <a href="/admin/users" class="flex items-center  hover:bg-gray-200 transition-all rounded p-2 text-gray-700"
                  >User List</a
                >
              </li>
              <li>
                <a href="/admin/category" class="flex items-center  hover:bg-gray-200 transition-all rounded p-2 text-gray-700"
                  >Category Management</a
                >
              </li>
              <li>
                <a href="/admin/addProduct" class="flex items-center  hover:bg-gray-200 transition-all rounded p-2 text-gray-700"
                  >Add Products</a
                >
              </li>
              <li>
                <a href="/admin/banner" class="flex items-center rounded  hover:bg-gray-200 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 class="mt-2 space-y-2">
              <li>
                <a href="#" class="flex items-center p-2 hover:bg-gray-200 transition-all rounded text-gray-700"
                  >Category 1</a
                >
              </li>
              <li>
                <a href="#" class="flex items-center p-2 hover:bg-gray-200 transition-all rounded text-gray-700"
                  >Category 2</a
                >
              </li>
              <li>
                <a href="#" class="flex items-center p-2 hover:bg-gray-200 transition-all rounded  text-gray-700"
                  >Category 3</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <form action="/admin/logout" method ="POST">
                  <a href="/admin/logout">

                    <button type="submit" class="fl x items-center p-2 hover:bg-gray-200 mt-3 transition-all rounded  ">Logout</Button>
                  </a>
                </form>
                
              </li>
            </ul>
          </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 p-6 space-y-6">
          <!-- Top Navbar -->
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <select class="p-2 border rounded-md">
                <option>All Categories</option>
              </select>
              <input
                type="text"
                class="p-2 border rounded-md"
                placeholder="Search for items..."
              />
            </div>
            <button class="px-4 py-2 bg-green-500 text-white rounded-md">
              Excel
            </button>
          </div>

          <!-- Dashboard Stats -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white rounded-lg shadow">
              <h3 class="text-sm text-gray-500">Total Orders</h3>
              <p class="text-2xl font-semibold">₹126,500</p>
              <p class="text-sm text-green-500">
                34.7% <span class="text-gray-500">Compared to Oct 2023</span>
              </p>
            </div>
            <div class="p-4 bg-white rounded-lg shadow">
              <h3 class="text-sm text-gray-500">Active Orders</h3>
              <p class="text-2xl font-semibold">₹126,500</p>
              <p class="text-sm text-green-500">
                34.7% <span class="text-gray-500">Compared to Oct 2023</span>
              </p>
            </div>
            <div class="p-4 bg-white rounded-lg shadow">
              <h3 class="text-sm text-gray-500">Completed Orders</h3>
              <p class="text-2xl font-semibold">₹126,500</p>
              <p class="text-sm text-green-500">
                34.7% <span class="text-gray-500">Compared to Oct 2023</span>
              </p>
            </div>
          </div>

          <!-- Sales Graph -->
          <div class="p-4 bg-white rounded-lg shadow">
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-semibold">Sale Graph</h3>
              <div class="flex items-center space-x-4">
                <button class="px-4 py-2 bg-green-500 text-white rounded-md">
                  Weekly
                </button>
                <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md">
                  Monthly
                </button>
                <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md">
                  Yearly
                </button>
              </div>
            </div>
            <div class="mt-4">
              <!-- Chart.js or any other graph integration here -->
              <!-- sales graph image -->
              <div
                class="w-full h-80 bg-gray-200 rounded-md flex items-center justify-center"
              >
                <span class="text-gray-500">Sales Graph Placeholder</span>
              </div>
              <!-- inside here  -->
            </div>
          </div>

          <!-- Best Sellers -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="col-span-2">
              <!-- Recent Orders -->
              <div class="p-4 bg-white rounded-lg shadow">
                <h3 class="text-lg font-semibold">Recent Orders</h3>

                <!--! simulating the order please change this whikle the data come from backend -->

                <%
                  // Temporary array to simulate data from backend
                  const orders = [
                    { product: "Lorem Ipsum", orderId: "#25426", date: "Nov 8th, 2023", customerName: "Kavin", status: "Delivered", amount: "₹200.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    { product: "Dolor Sit", orderId: "#25427", date: "Nov 9th, 2023", customerName: "John", status: "Pending", amount: "₹150.00" },
                    // Add more orders as needed
                  ];
                  const bestSellers =[
                    {product:"Action toy", totalSales:213,price:"$32"},
                    {product:"Action toy", totalSales:213,price:"$32"},
                    {product:"Action toy", totalSales:213,price:"$32"},
                    {product:"Action toy", totalSales:213,price:"$32"}
                  ]
                %>
                <table class="min-w-full mt-4">
                  <thead>
                    <tr class="text-left">
                      <th>Product</th>
                      <th>Order ID</th>
                      <th>Date</th>
                      <th>Customer Name</th>
                      <th>Status</th>
                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y">
                    <% orders.forEach(order => { %>
                    <tr>
                      <td><%= order.product %></td>
                      <td><%= order.orderId %></td>
                      <td><%= order.date %></td>
                      <td><%= order.customerName %></td>
                      <td><span class="text-green-500"><%= order.status %></span></td>
                      <td><%= order.amount %></td>
                    </tr>
                    <% }) %>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="p-4 bg-white rounded-lg shadow">
              <h3 class="text-lg font-semibold">Best Sellers</h3>
              <ul class="mt-4 space-y-2">
                <% bestSellers.forEach(seller => { %>
                <li>
                  <div class="flex items-center justify-between">
                    <span><%= seller.product %></span>
                    <span class="font-semibold"><%= seller.price %></span>
                  </div>
                  <div class="text-sm text-gray-500"><%= seller.totalSales %> sales</div>
                </li>
                <% }) %>
                <!-- More items here -->
              </ul>
              <button
                class="w-full mt-4 px-4 py-2 bg-green-500 text-white rounded-md"
              >
                Report
              </button>
            </div>
          </div>
        </div>
        <!-- footer -->
      </div>
      <footer
        class="flex items-center justify-between px-6 py-4 bg-white border-t mt-6"
      >
        <div class="text-gray-700">© 2024 ToyHub. All rights reserved.</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700">Privacy Policy</a>
          <a href="#" class="text-gray-700">Terms of Service</a>
        </div>
      </footer>
    </div>

    <!-- modal for logout confirmation -->
    <div
      id="logoutModal"
      class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden"
    >
      <div
        class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full"
      >
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div
              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
            >
              <svg
                class="h-6 w-6 text-red-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3
                class="text-lg leading-6 font-medium text-gray-900"
                id="modal-title"
              >
                Logout Confirmation
              </h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500">
                  Are you sure you want to logout? All of your unsaved changes
                  will be lost.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
            id="confirmLogout"
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
          >
            Logout
          </button>
          <button
            id="cancelLogout"
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
    <script>
      document
        .getElementById("logoutLink")
        .addEventListener("click", function (event) {
          event.preventDefault()
          document.getElementById("logoutModal").classList.remove("hidden")
        })

      document
        .getElementById("cancelLogout")
        .addEventListener("click", function () {
          document.getElementById("logoutModal").classList.add("hidden")
        })

      document
        .getElementById("confirmLogout")
        .addEventListener("click", function () {
          // Perform logout action here, for example, redirect to logout route
          window.location.href = "/admin/logout"
          const form = document.createElement("form")
          form.method = "POST"
          form.action = "/admin/logout"
          document.body.appendChild(form)
          form.submit()
        })
    </script>
