script.js

    // Track product views
    function trackProductView(productId) {
        let viewCounts = JSON.parse(localStorage.getItem('viewCounts') || '{}');
        viewCounts[productId] = (viewCounts[productId] || 0) + 1;
        localStorage.setItem('viewCounts', JSON.stringify(viewCounts));
    }

    // Track add to cart events
    function trackAddToCart(productId) {
        let addToCartCounts = JSON.parse(localStorage.getItem('addToCartCounts') || '{}');
        addToCartCounts[productId] = (addToCartCounts[productId] || 0) + 1;
        localStorage.setItem('addToCartCounts', JSON.stringify(addToCartCounts));
    }

document.addEventListener('DOMContentLoaded', function() {
    // Function to get cart items from local storage
    function getCartItems() {
        const cartItems = localStorage.getItem('cart');
        return cartItems ? JSON.parse(cartItems) : [];
    }

    // Function to set cart items in local storage
    function setCartItems(cartItems) {
        localStorage.setItem('cart', JSON.stringify(cartItems));
    }

    
    
    // Function to add an item to the cart
    function addToCart(product) {
        trackAddToCart(product.id); // Track add to cart event
        let cartItems = getCartItems();
        const existingItem = cartItems.find(item => item.id === product.id);

        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            product.quantity = 1;
            cartItems.push(product);
        }

        setCartItems(cartItems);
        updateCartUI();
    }

    function addToCart(product) {
        trackAddToCart('product123'); // Track add to cart event
        let cartItems = getCartItems();
        const existingItem = cartItems.find(item => item.id === product.id);

        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            product.quantity = 1;
            cartItems.push(product);
        }

        setCartItems(cartItems);
        updateCartUI();
    }

    function addToCart(product) {
        let cartItems = getCartItems();
        const existingItem = cartItems.find(item => item.id === product.id);

        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            product.quantity = 1;
            cartItems.push(product);
        }

        setCartItems(cartItems);
        updateCartUI();
    }

    // Function to update item quantity in the cart
    function updateQuantity(productId, quantity) {
        let cartItems = getCartItems();
        const itemIndex = cartItems.findIndex(item => item.id === productId);

        if (itemIndex !== -1) {
            cartItems[itemIndex].quantity = quantity;
            if (cartItems[itemIndex].quantity <= 0) {
                cartItems.splice(itemIndex, 1); // Remove item if quantity is 0 or less
            }
            setCartItems(cartItems);
            updateCartUI();
        }
        updateCartUI(); // Call updateCartUI to update the order summary
    }

    // Function to remove an item from the cart
    function removeItem(productId) {
        let cartItems = getCartItems();
        const itemIndex = cartItems.findIndex(item => item.id === productId);

        if (itemIndex !== -1) {
            cartItems.splice(itemIndex, 1);
            setCartItems(cartItems);
            updateCartUI();
        }
    }

    // Function to calculate cart totals
    function calculateTotals() {
        let cartItems = getCartItems();
        let subtotal = 0;

        cartItems.forEach(item => {
            subtotal += item.price * item.quantity;
        });

        const shipping = 5.00;
        const total = subtotal + shipping;

        return { subtotal, shipping, total };
    }

    // Function to display cart items in cart.html
    function displayCartItems() {
        let cartItems = getCartItems();
        const cartItemsContainer = document.getElementById('cart-items');

        if (cartItemsContainer) {
            cartItemsContainer.innerHTML = ''; // Clear existing items

            cartItems.forEach(item => {
                const cartItemDiv = document.createElement('div');
                cartItemDiv.classList.add('flex', 'items-center', 'border', 'border-gray-300', 'rounded-md', 'p-4');

                cartItemDiv.innerHTML = `

                    <img src="${item.image}" alt="Product Image" class="w-24 h-24 mr-4">

                    <div>

                        <h2 class="text-lg font-bold">${item.name}</h2>

                        <p class="text-gray-600">$${item.price.toFixed(2)}</p>

                        <div class="flex items-center mt-2">

                            <button class="bg-gray-200 px-2 py-1 rounded-md decrease-quantity" data-product-id="${item.id}">-</button>

                            <input type="number" value="${item.quantity}" class="w-16 text-center border border-gray-300 rounded-md mx-2 quantity-input" data-product-id="${item.id}">

                            <button class="bg-gray-200 px-2 py-1 rounded-md increase-quantity" data-product-id="${item.id}">+</button>

                            <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-product-id="${item.id}">Remove</button>

                        </div>

                    </div>

                `;

                cartItemsContainer.appendChild(cartItemDiv);

                // Add event listener to remove button
                const removeButton = cartItemDiv.querySelector('.remove-item');
                removeButton.addEventListener('click', function() {
                    const productId = this.dataset.productId;
                    removeItem(productId);
                });
            });

            // Add event listeners to quantity buttons and remove buttons
            const decreaseButtons = document.querySelectorAll('.decrease-quantity');
            decreaseButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.dataset.productId;
                    const quantityInput = this.parentNode.querySelector('.quantity-input');
                    let quantity = parseInt(quantityInput.value);
                    quantity = Math.max(1, quantity - 1); // Ensure quantity is not less than 1
                    quantityInput.value = quantity;
                    updateQuantity(productId, quantity);
                });
            });

            const increaseButtons = document.querySelectorAll('.increase-quantity');
            increaseButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.dataset.productId;
                    const quantityInput = this.parentNode.querySelector('.quantity-input');
                    let quantity = parseInt(quantityInput.value);
                    quantity++;
                    quantityInput.value = quantity;
                    updateQuantity(productId, quantity);
                });
            });
        }
    }

    // Function to update the order summary in cart.html and checkout.html
    function updateOrderSummary() {
        const { subtotal, shipping, total } = calculateTotals();

        const subtotalElements = document.querySelectorAll('#subtotal');
        subtotalElements.forEach(element => element.textContent = `$${subtotal.toFixed(2)}`);

        const shippingElements = document.querySelectorAll('#shipping');
        shippingElements.forEach(element => element.textContent = `$${shipping.toFixed(2)}`);

        const totalElements = document.querySelectorAll('#total');
        totalElements.forEach(element => element.textContent = `$${total.toFixed(2)}`);
    }

    // Function to handle checkout
    function handleCheckout() {
        const checkoutForm = document.getElementById('checkout-form');
        if (checkoutForm) {
            checkoutForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent form submission

                // Get form data
                const name = document.getElementById('name').value;
                const address = document.getElementById('address').value;
                const city = document.getElementById('city').value;
                const state = document.getElementById('state').value;
                const zip = document.getElementById('zip').value;
                const credit_card = document.getElementById('credit_card').value;
                const expiration_date = document.getElementById('expiration_date').value;
                const cvv = document.getElementById('cvv').value;

                // Store form data in local storage
                const shippingInfo = { name, address, city, state, zip };
                const paymentInfo = { credit_card, expiration_date, cvv };
                localStorage.setItem('shippingInfo', JSON.stringify(shippingInfo));
                localStorage.setItem('paymentInfo', JSON.stringify(paymentInfo));

                // Redirect to confirmation page
                window.location.href = '/confirmation.html';
            });
        }
    }

    // Function to display order confirmation details
    function displayConfirmationDetails() {
        const shippingInfo = localStorage.getItem('shippingInfo');
        const paymentInfo = localStorage.getItem('paymentInfo');
        const cartItems = getCartItems();

        if (shippingInfo && paymentInfo && cartItems) {
            const shipping = JSON.parse(shippingInfo);
            const payment = JSON.parse(paymentInfo);

            document.getElementById('shipping-name').textContent = shipping.name;
            document.getElementById('shipping-address').textContent = shipping.address;
            document.getElementById('shipping-city').textContent = shipping.city;
            document.getElementById('shipping-state').textContent = shipping.state;
            document.getElementById('shipping-zip').textContent = shipping.zip;

            // Payment information is dummy data in confirmation.html

            const orderItemsList = document.getElementById('order-items');
            let orderTotal = 0;

            cartItems.forEach(item => {
                const listItem = document.createElement('li');
                listItem.textContent = `${item.name} (${item.quantity}) - $${(item.price * item.quantity).toFixed(2)}`;
                orderItemsList.appendChild(listItem);
                orderTotal += item.price * item.quantity;
            });

            document.getElementById('order-total').textContent = `$${orderTotal.toFixed(2)}`;

            // Clear cart and shipping info from local storage
            localStorage.removeItem('cart');
            localStorage.removeItem('shippingInfo');
            localStorage.removeItem('paymentInfo');
        }
    }

    // Initialize the cart page
    if (window.location.pathname === '/cart.html') {
        displayCartItems();
        updateOrderSummary();
    }

    // Initialize the checkout page
    if (window.location.pathname === '/checkout.html') {
        updateOrderSummary();
        handleCheckout();
    }

    // Initialize the confirmation page
    if (window.location.pathname === '/confirmation.html') {
        displayConfirmationDetails();
    }
});

function updateCartUI() {
    if (window.location.pathname === '/cart.html') {
        displayCartItems();
        updateOrderSummary();
    }
}