 <!-- JS -->
  <script>
    const cart = {};
    const cartDrawer = document.getElementById("cartDrawer");
    const cartItemsDiv = document.getElementById("cartItems");
    const cartTotal = document.getElementById("cartTotal");
    const profileBtn = document.getElementById("profileBtn");
    const profileMenu = document.getElementById("profileMenu");

    // Toggle Profile Menu
    profileBtn.addEventListener("click", () => {
      profileMenu.classList.toggle("hidden");
    });

    document.getElementById("openCart").addEventListener("click", () => {
      cartDrawer.classList.remove("translate-x-full");
    });

    function closeCart() {
      cartDrawer.classList.add("translate-x-full");
    }

    function addToCart(name, price, img) {
      if (cart[name]) {
        cart[name].qty += 1;
      } else {
        cart[name] = { price: price, qty: 1, img: img };
      }
      renderCart();
    }

    function changeQty(name, delta) {
      cart[name].qty += delta;
      if (cart[name].qty <= 0) {
        delete cart[name];
      }
      renderCart();
    }

    function renderCart() {
      cartItemsDiv.innerHTML = "";
      let total = 0;

      for (const [name, item] of Object.entries(cart)) {
        total += item.price * item.qty;

        const div = document.createElement("div");
        div.className = "flex justify-between items-center bg-gray-50 p-2 rounded shadow";

        div.innerHTML = `
          <div class="flex items-center space-x-2">
            <img src="${item.img}" class="w-10 h-10 object-cover rounded" alt="${name}">
            <div>
              <p class="font-medium text-gray-700">${name}</p>
              <p class="text-sm text-gray-500">₹${item.price} x ${item.qty}</p>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <button onclick="changeQty('${name}', -1)" class="bg-red-500 text-white px-2 rounded">-</button>
            <span>${item.qty}</span>
            <button onclick="changeQty('${name}', 1)" class="bg-green-500 text-white px-2 rounded">+</button>
          </div>
        `;

        cartItemsDiv.appendChild(div);
      }

      cartTotal.textContent = total;
    }
  </script>

</body>
</html>
