<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Browser</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }
        .tag {
            background-color: #e6f2ff;
            color: #1a73e8;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-right: 4px;
            margin-bottom: 4px;
            cursor: pointer;
        }
        .tag.active {
            background-color: #1a73e8;
            color: white;
        }
        .sidebar {
            width: 250px;
            background-color: #f8fafc;
            padding: 20px;
            border-right: 1px solid #e5e7eb;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        .sidebar.open {
            transform: translateX(0);
        }
        .main-content {
            margin-left: 250px;
            transition: margin-left 0.3s ease;
        }
        .main-content.sidebar-closed {
            margin-left: 0;
        }
        .image-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }
        .image-slider img {
            scroll-snap-align: start;
            flex: 0 0 auto;
            width: 100%;
            height: auto;
        }
        /* Styles for the order modal */
        .order-modal {
            display: none;
            position: fixed;
            width: 90%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        .order-modal.open {
            display: block;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 5;
        }
        .overlay.open {
            display: block;
        }
        /* Styles for the cart modal */
        .cart-modal {
            display: none;
            position: fixed;
            width: 80%;
            max-width: 500px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 11;
            max-height: 80vh; /* Add this line */
            overflow-y: auto; /* Add this line */
        }
        .cart-modal.open {
            display: block;
        }
        .cart-item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        .cart-item-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            margin-right: 10px;
        }
        .cart-item-details {
            flex-grow: 1;
        }
        .cart-item-name {
            font-weight: bold;
        }
        .cart-item-options {
            font-size: 0.8rem;
            color: #555;
        }
        .cart-item-quantity {
            margin-left: 10px;
        }
        .cart-modal-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .cart-total {
            font-size: 1.2rem;
            font-weight: bold;
        }
        .cart-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

       
                /* ... other styles ... */
        
                /* Smaller Search Icon and Badge */
                #search-toggle {
                    padding: 0; /* Remove padding to make it smaller */
                }
                #cart-button {
                    padding: 0; /* Remove padding to make it smaller */
                }
                #search-toggle svg {
                    width: 1rem; /* Adjust icon size */
                    height: 1rem; /* Adjust icon size */
                }
        
                /* Cart badge */
                #cart-item-count {
                    top: -5px;    /* Adjust badge position */
                    right: -5px;  /* Adjust badge position */
                    font-size: 0.6rem; /* Smaller font size for badge */
                    padding: 0.1rem 0.3rem; /* Adjust badge padding */
                }
                #cart-button svg {
                    width: 1.4rem; /* Adjust icon size */
                    height: 1.4rem; /* Adjust icon size */
                }
        
                /* Sticky Header */
                header {
                    position: sticky;
                    top: 0;
                    z-index: 20; /* Ensure header is above other elements */
                    background-color: white; /* Add background color for better visibility */
                }
        
                /* Cart Item Styles */
                .cart-item {
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #eee;
                    padding: 10px 0;
                    position: relative; /* Add position relative for absolute positioning of remove button */
                }
        
                .cart-item-image {
                    width: 50px;
                    height: 50px;
                    object-fit: cover;
                    margin-right: 10px;
                }
        
                .cart-item-details {
                    flex-grow: 1;
                }
        
                .cart-item-name {
                    font-weight: bold;
                }
        
                .cart-item-options {
                    font-size: 0.8rem;
                    color: #555;
                }
        
                .cart-item-quantity {
                    margin-left: 10px;
                    margin-right: 35px;
                    
                }
        
                .cart-item-remove {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: none;
                    border: none;
                    cursor: pointer;
                    color: #999;
                    font-size: 0.9rem;
                }
                .cart-item-remove:hover {
                    color: #dc3545;
                }
                /* Ensure content below header is not hidden */
         #search-bar {
            position: fixed;
            top: 0;
            z-index: 20; /* Ensure header is above other elements */
            margin-top: 65px;
            width: 100%;
            
   
         }
        
            </style>
</head>
<body class="bg-gray-100">
    <div class="sidebar" id="sidebar">
        <header class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold">Filters</h2>
            <button id="close-sidebar" class="text-gray-600 hover:text-gray-800 focus:outline-none">
                <svg class="w-6 h-6" 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>
            </button>
        </header>
        <div class="mb-6">
            <label class="block text-gray-700 mb-2">Price Range:</label>
            <div class="flex items-center space-x-2">
                <select id="price-from" class="w-full px-2 py-1 border rounded-md">
                    <option value="">From</option>
                    <option value="0">0</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                </select>
                <select id="price-to" class="w-full px-2 py-1 border rounded-md">
                    <option value="">To</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                    <option value="500">500</option>
                </select>
            </div>
        </div>
        <div class="mb-6">
            <label class="block text-gray-700 mb-2">Category:</label>
            <select id="category-filter" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">All Categories</option>
            </select>
        </div>
        <div class="mb-6">
            <button id="favorite-toggle" class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">
                Show Favorites
            </button>
        </div>
        <div class="mb-6">
            <button id="random-button" class="w-full px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition">
                Shuffle
            </button>
        </div>
        <div id="tags-container" class="mb-4 flex flex-wrap gap-2"></div>
    </div>

    <div class="main-content sidebar-closed transition-all duration-300" id="main-content">
        <header class="flex justify-between items-center mb-6 px-4 py-2 bg-white shadow-md">
            <button id="open-sidebar" class="text-gray-600 hover:text-gray-800 focus:outline-none">
                <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
            <h1 class="text-3xl font-bold text-center flex-grow">Product</h1>
            <div class="flex items-center space-x-4">
                <button id="cart-button" class="relative text-gray-600 hover:text-gray-800 focus:outline-none">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <span id="cart-item-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-2 py-1 hidden">0</span>
                </button>                
                <button id="search-toggle" class="text-gray-600 hover:text-gray-800 focus:outline-none">
                    <svg class="w-6 h-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </header>

        <div id="search-bar" class="mb-6 bg-white p-4 rounded-lg shadow-md hidden px-4">
            <input
                type="text"
                id="search-input"
                placeholder="Search products..."
                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
        </div>

        <!-- Product Container -->
        <div id="product-container" class="product-grid px-4"></div>

        <!-- Loading Spinner -->
        <div id="loading-spinner" class="text-center mt-4 hidden">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-blue-500"></div>
        </div>
    </div>

    <!-- Order Modal -->
    <div class="overlay" id="order-overlay"></div>
    <div class="order-modal" id="order-modal">
        <h3 class="text-lg font-bold mb-4" id="order-modal-title"></h3>
       
        <div class="mb-4">
            <label for="order-quantity" class="block text-gray-700 mb-2">Quantity:</label>
            <input type="number" id="order-quantity" value="1" min="1" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <button id="add-to-cart" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">Add to Cart</button>
        <button id="order-now" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition">Order Now</button>
        <button id="cancel-order" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition">Cancel</button>
    </div>
    <!-- Cart Modal -->
    <div class="overlay" id="cart-overlay"></div>
    <div class="cart-modal" id="cart-modal">
        <button id="close-cart" class="cart-close">×</button>
        <h3 class="text-lg font-bold mb-4">Your Cart</h3>
        <div id="cart-items">
            <!-- Cart items will be added here -->
        </div>
        <div class="cart-modal-footer">
            <div class="cart-total">Total: <span id="cart-total-price">$0.00</span></div>
            <button id="checkout-button" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition">Checkout</button>
        </div>
    </div>

    <script>
        class ProductBrowser {
             constructor(products) {
                 this.products = products; // Receive products as a parameter
                 this.favorites = this.getFavorites();
                 this.cart = this.getCart();
                 this.currentOrder = null;
                 this.initElements();
                 this.initEventListeners();
                 this.renderCategories();
                 this.renderTags();
                 this.applyUrlFilters();
                 this.renderProducts();
                 this.updateCartItemCount();
                 this.renderCartItems();
             }
     
             initElements() {
                 this.productContainer = document.getElementById('product-container');
                 this.searchInput = document.getElementById('search-input');
                 this.priceFromInput = document.getElementById('price-from');
                 this.priceToInput = document.getElementById('price-to');
                 this.categoryFilter = document.getElementById('category-filter');
                 this.favoriteToggle = document.getElementById('favorite-toggle');
                 this.tagsContainer = document.getElementById('tags-container');
                 this.loadingSpinner = document.getElementById('loading-spinner');
                 this.searchBar = document.getElementById('search-bar');
                 this.searchToggle = document.getElementById('search-toggle');
                 this.randomButton = document.getElementById('random-button');
                 this.sidebar = document.getElementById('sidebar');
                 this.mainContent = document.getElementById('main-content');
                 this.openSidebarButton = document.getElementById('open-sidebar');
                 this.closeSidebarButton = document.getElementById('close-sidebar');
                 this.orderModal = document.getElementById('order-modal');
                 this.orderOverlay = document.getElementById('order-overlay');
                 this.orderQuantityInput = document.getElementById('order-quantity');
                 this.addToCartButton = document.getElementById('add-to-cart');
                 this.orderNowButton = document.getElementById('order-now');
                 this.cancelOrderButton = document.getElementById('cancel-order');
                 this.orderModalTitle = document.getElementById('order-modal-title');
                 this.cartButton = document.getElementById('cart-button');
                 this.cartItemCount = document.getElementById('cart-item-count');
                 this.cartModal = document.getElementById('cart-modal');
                 this.cartOverlay = document.getElementById('cart-overlay');
                 this.cartItemsContainer = document.getElementById('cart-items');
                 this.cartTotalPrice = document.getElementById('cart-total-price');
                 this.closeCartButton = document.getElementById('close-cart');
                 this.checkoutButton = document.getElementById('checkout-button');
             }
     
             initEventListeners() {
                 this.searchInput.addEventListener('input', () => this.renderProducts());
                 this.priceFromInput.addEventListener('change', () => this.renderProducts());
                 this.priceToInput.addEventListener('change', () => this.renderProducts());
                 this.categoryFilter.addEventListener('change', () => this.renderProducts());
                 this.favoriteToggle.addEventListener('click', () => this.toggleFavoriteView());
                 this.searchToggle.addEventListener('click', () => this.toggleSearchBar());
                 this.randomButton.addEventListener('click', () => this.shuffleProducts());
                 this.openSidebarButton.addEventListener('click', () => this.openSidebar());
                 this.closeSidebarButton.addEventListener('click', () => this.closeSidebar());
                 this.addToCartButton.addEventListener('click', () => this.addToCart());
                 this.orderNowButton.addEventListener('click', () => this.orderNow());
                 this.cancelOrderButton.addEventListener('click', () => this.closeOrderModal());
                 this.cartButton.addEventListener('click', () => this.openCartModal());
                 this.closeCartButton.addEventListener('click', () => this.closeCartModal());
                 this.checkoutButton.addEventListener('click', () => this.checkout());
                 this.cartOverlay.addEventListener('click', () => this.closeCartModal());
             }
     
             renderCategories() {
                 const categories = [...new Set(this.products.map(p => p.category))];
                 categories.forEach(category => {
                     const option = document.createElement('option');
                     option.value = category;
                     option.textContent = category;
                     this.categoryFilter.appendChild(option);
                 });
             }
     
             renderTags() {
                 const allTags = [...new Set(this.products.flatMap(p => p.tags))];
                 this.tagsContainer.innerHTML = allTags.map(tag =>
                     `<span class="tag" data-tag="${tag}">${tag}</span>`
                 ).join('');
     
                 this.tagsContainer.querySelectorAll('.tag').forEach(tagEl => {
                     tagEl.addEventListener('click', (e) => {
                         e.target.classList.toggle('active');
                         this.renderProducts();
                     });
                 });
             }
     
             applyUrlFilters() {
                 const urlParams = new URLSearchParams(window.location.search);
                 const priceFrom = urlParams.get('priceFrom');
                 const priceTo = urlParams.get('priceTo');
                 const category = urlParams.get('category');
                 const search = urlParams.get('search');
                 const favorite = urlParams.get('favorite');
                 const productId = urlParams.get('id');
     
                 if (priceFrom) this.priceFromInput.value = priceFrom;
                 if (priceTo) this.priceToInput.value = priceTo;
                 if (category) this.categoryFilter.value = category;
                 if (search) this.searchInput.value = search;
                 if (favorite) this.favoriteToggle.dataset.mode = 'favorites';
                 if (productId) {
                     const product = this.products.find(p => p.id == productId);
                     if (product) {
                         this.products = [product];
                     }
                 }
     
                 this.renderProducts();
             }
     
             filterProducts() {
                 const searchTerm = this.searchInput.value.toLowerCase();
                 const priceFrom = parseFloat(this.priceFromInput.value) || 0;
                 const priceTo = parseFloat(this.priceToInput.value) || Infinity;
                 const category = this.categoryFilter.value;
                 const activeTags = Array.from(this.tagsContainer.querySelectorAll('.tag.active'))
                     .map(tag => tag.dataset.tag);
                 const onlyFavorites = this.favoriteToggle.dataset.mode === 'favorites';
     
                 return this.products.filter(product => {
                     const matchesSearch = product.name.toLowerCase().includes(searchTerm) ||
                         product.description.toLowerCase().includes(searchTerm);
                     const matchesPrice = (!product.hasOwnProperty('price') || (product.price >= priceFrom && product.price <= priceTo));
                     const matchesCategory = !category || product.category === category;
                     const matchesTags = activeTags.length === 0 ||
                         activeTags.some(tag => product.tags.includes(tag));
                     const matchesFavorites = !onlyFavorites || this.favorites.includes(product.id);
     
                     return matchesSearch && matchesPrice && matchesCategory && matchesTags && matchesFavorites;
                 });
             }
     
             renderProducts() {
                 const filteredProducts = this.filterProducts();
                 this.productContainer.innerHTML = '';
     
                 filteredProducts.forEach(product => {
                     const isFavorite = this.favorites.includes(product.id);
                     const productCard = document.createElement('div');
                     productCard.innerHTML = this.createProductCard(product, isFavorite);
                     this.productContainer.appendChild(productCard);
                 });
     
                 // Add event listeners for favorite and order buttons
                 this.productContainer.querySelectorAll('.favorite-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const productId = e.currentTarget.dataset.id;
                         this.toggleFavorite(productId);
                     });
                 });
     
                 this.productContainer.querySelectorAll('.order-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const productId = e.currentTarget.dataset.id;
                         this.openOrderModal(productId);
                     });
                 });
                 // Add event listeners for "Add to Cart" buttons on product cards
                 this.productContainer.querySelectorAll('.add-to-cart-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const productId = e.currentTarget.dataset.id;
                         const product = this.products.find(p => p.id === productId);
                         if (!product) return;
     
                         this.currentOrder = {
                             product: product,
                             quantity: 1 // Default quantity
                         };
     
                         this.addToCart();
                     });
                 });
             }
     
             createProductCard(product, isFavorite) {
                 return `
                     <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                         <div class="relative">
                             <div class="image-slider">
                                 ${product.images.map(image => `<img src="${image}" alt="${product.name}" loading="lazy" class="w-full h-64 object-cover">`).join('')}
                             </div>
                             <button class="favorite-btn absolute top-2 right-2 bg-white/70 rounded-full p-2 hover:bg-red-100 transition" data-id="${product.id}">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="${isFavorite ? 'red' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600 hover:text-red-500">
                                     <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                 </svg>
                             </button>
                         </div>
                         <div class="p-4">
                             <h3 class="font-bold text-lg mb-2">${product.name}</h3>
                             <p class="text-gray-600 text-sm mb-2">${product.description}</p>
                             <div class="flex flex-wrap mb-2">
                                 ${product.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                             </div>
                             <div class="flex justify-between items-center">
                             ${product.hasOwnProperty('price') ? `<span class="text-xl font-bold text-blue-600">₹${product.price.toFixed(2)}</span>` : ''}
                                 <div class="flex items-center">
                                     <svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                         <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" />
                                     </svg>
                                     <span class="text-gray-600">${product.rating}</span>
                                 </div>
                             </div>
                            
                             <button class="order-btn w-full mt-2 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition" data-id="${product.id}">
                                 Order Now
                             </button>
                         </div>
                     </div>
                 `;
             }
     
             toggleFavorite(productId) {
                 const index = this.favorites.indexOf(productId);
     
                 if (index > -1) {
                     this.favorites.splice(index, 1);
                 } else {
                     this.favorites.push(productId);
                 }
     
                 localStorage.setItem('favorites', JSON.stringify(this.favorites));
                 this.renderProducts();
             }
     
             toggleFavoriteView() {
                 const currentMode = this.favoriteToggle.dataset.mode || '';
     
                 if (currentMode === 'favorites') {
                     this.favoriteToggle.dataset.mode = '';
                     this.favoriteToggle.textContent = 'Show Favorites';
                 } else {
                     this.favoriteToggle.dataset.mode = 'favorites';
                     this.favoriteToggle.textContent = 'Show All Products';
                 }
     
                 this.renderProducts();
             }
     
             toggleSearchBar() {
                 this.searchBar.classList.toggle('hidden');
             }
     
             shuffleProducts() {
                 this.products.sort(() => Math.random() - 0.5);
                 this.renderProducts();
             }
     
             openSidebar() {
                 this.sidebar.classList.add('open');
                 this.mainContent.classList.remove('sidebar-closed');
             }
     
             closeSidebar() {
                 this.sidebar.classList.remove('open');
                 this.mainContent.classList.add('sidebar-closed');
             }
     
             getFavorites() {
                 return JSON.parse(localStorage.getItem('favorites') || '[]');
             }
     
             openOrderModal(productId) {
                 const product = this.products.find(p => p.id === productId);
                 if (!product) return;
     
                 this.currentOrder = {
                     product: product,
                     quantity: 1
                 };
     
                 this.orderModalTitle.textContent = `Order ${product.name}`;
                 this.orderQuantityInput.value = 1;
     
                 this.orderModal.classList.add('open');
                 this.orderOverlay.classList.add('open');
             }
     
             closeOrderModal() {
                 this.orderModal.classList.remove('open');
                 this.orderOverlay.classList.remove('open');
                 this.currentOrder = null;
             }
     
             addToCart() {
                 if (!this.currentOrder) return;
     
                 this.currentOrder.quantity = parseInt(this.orderQuantityInput.value);
     
                 // Add the order to the cart
                 this.cart.push(this.currentOrder);
                 localStorage.setItem('cart', JSON.stringify(this.cart));
     
                 // Update the cart item count and render the cart items
                 this.updateCartItemCount();
                 this.renderCartItems();
     
                 // Close the order modal if it's open
                 this.closeOrderModal();
             }
     
             orderNow() {
                 if (!this.currentOrder) return;
     
                 this.currentOrder.quantity = parseInt(this.orderQuantityInput.value);
     
                 const orderDetails = `
                     Order Details:
                     Product: ${this.currentOrder.product.name}
                     Quantity: ${this.currentOrder.quantity}
                     ${this.currentOrder.product.hasOwnProperty('price') ? `Price: ₹${(this.currentOrder.product.price * this.currentOrder.quantity).toFixed(2)}` : ''}
                 `;
     
                 // Replace with your WhatsApp number
                 const whatsappNumber = "917038494464";
                 const whatsappMessage = encodeURIComponent(orderDetails);
                 const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${whatsappMessage}`;
     
                 window.open(whatsappUrl, '_blank');
                 this.closeOrderModal();
             }
     
             getCart() {
                 return JSON.parse(localStorage.getItem('cart') || '[]');
             }
     
             updateCartItemCount() {
                 const count = this.cart.length;
                 this.cartItemCount.textContent = count;
                 this.cartItemCount.classList.toggle('hidden', count === 0);
             }
     
             openCartModal() {
                 this.renderCartItems();
                 this.cartModal.classList.add('open');
                 this.cartOverlay.classList.add('open');
             }
     
             closeCartModal() {
                 this.cartModal.classList.remove('open');
                 this.cartOverlay.classList.remove('open');
             }
     
             renderCartItems() {
                 this.cartItemsContainer.innerHTML = '';
     
                 if (this.cart.length === 0) {
                     this.cartItemsContainer.innerHTML = '<p class="text-center text-gray-500">Your cart is empty.</p>';
                 } else {
                     this.cart.forEach((item, index) => {
                         const cartItem = document.createElement('div');
                         cartItem.classList.add('cart-item');
                         cartItem.innerHTML = `
                             <img src="${item.product.images[0]}" alt="${item.product.name}" class="cart-item-image">
                             <div class="cart-item-details">
                                 <div class="cart-item-name">${item.product.name}</div>
                             </div>
                             <div class="cart-item-quantity">x${item.quantity}</div>
                                     <button class="cart-item-remove" data-index="${index}">
                                         <i class="fas fa-times"></i> X
                                     </button>
                                 `;
                                 this.cartItemsContainer.appendChild(cartItem);
                             });
     
                             // Add event listeners to remove buttons
                             this.cartItemsContainer.querySelectorAll('.cart-item-remove').forEach(button => {
                                 button.addEventListener('click', (e) => {
                                     const index = parseInt(e.currentTarget.dataset.index);
                                     this.removeFromCart(index);
                                 });
                             });
                         }
     
                         this.updateCartTotalPrice();
                     }
     
                     removeFromCart(index) {
                         this.cart.splice(index, 1);
                         localStorage.setItem('cart', JSON.stringify(this.cart));
                         this.updateCartItemCount();
                         this.renderCartItems();
                     }
     
                     updateCartTotalPrice() {
                         const totalPrice = this.cart.reduce((total, item) => {
                             // Check if the product has a price before adding to the total
                             return total + (item.product.hasOwnProperty('price') ? (item.product.price * item.quantity) : 0);
                         }, 0);
     
                         this.cartTotalPrice.textContent = `₹${totalPrice.toFixed(2)}`;
                     }
     
                     checkout() {
                         if (this.cart.length === 0) {
                             alert('Your cart is empty.');
                             return;
                         }
     
                         const orderDetails = this.cart.map(item => {
                             // Include price in the order details only if it exists
                             const priceLine = item.product.hasOwnProperty('price') ? `Price: ₹${(item.product.price * item.quantity).toFixed(2)}` : '';
                             return `
                                 Product: ${item.product.name}
                                 Quantity: ${item.quantity}
                                 ${priceLine}
                             `;
                         }).join('\n');
     
                         const totalPrice = this.cart.reduce((total, item) => {
                             // Check if the product has a price before adding to the total
                             return total + (item.product.hasOwnProperty('price') ? (item.product.price * item.quantity) : 0);
                         }, 0).toFixed(2);
     
                         const whatsappMessage = `
                             Order Details:\n${orderDetails}\nTotal Price: ₹${totalPrice}
                         `;
     
                         const whatsappNumber = "917038494464"; // Replace with your WhatsApp number
                         const encodedWhatsappMessage = encodeURIComponent(whatsappMessage);
                         const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodedWhatsappMessage}`;
     
                         window.open(whatsappUrl, '_blank');
                         this.clearCart();
                         this.closeCartModal();
                     }
     
                     clearCart() {
                         this.cart = [];
                         localStorage.removeItem('cart');
                         this.updateCartItemCount();
                         this.renderCartItems();
                     }
                 }
     
         document.addEventListener('DOMContentLoaded', () => {
                 const loadingSpinner = document.getElementById('loading-spinner');
                 loadingSpinner.classList.remove('hidden');
             
             fetch('./data/1.json')
                 .then(response => {
                     if (!response.ok) {
                         throw new Error(`HTTP error! Status: ${response.status}`);
                     }
                     return response.json();
                 })
                 .then(data => {
                      new ProductBrowser(data);
                     loadingSpinner.classList.add('hidden');
                 })
                 .catch(error => {
                    console.error('Failed to fetch product data:', error);
                     loadingSpinner.classList.add('hidden');
                    // Display some user friendly message here
                    document.getElementById('product-container').innerHTML = '<p class="text-red-500 text-center">Failed to load products. Please try again later.</p>'
                 });
            });
        
     </script>
        </body>
        </html>