script.js

// script.js

// Function to add a product to the cart
function addToCart(productName, productPrice) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let existingProduct = cart.find(item => item.name === productName);

    if (existingProduct) {
        existingProduct.quantity += 1;
    } else {
        cart.push({
            name: productName,
            price: productPrice,
            quantity: 1
        });
    }

    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartTotal();
}

// Function to display cart items on cart.html
function displayCartItems() {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let cartItemsContainer = document.getElementById('cart-items');
    let cartTotalElement = document.getElementById('cart-total');

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

        if (cart.length === 0) {
            cartItemsContainer.innerHTML = '<p>Your cart is empty.</p>';
            cartTotalElement.textContent = '0.00';
            return;
        }

        let total = 0;

        cart.forEach(item => {
            let itemElement = document.createElement('div');
            itemElement.classList.add('cart-item', 'mb-4', 'p-4', 'border', 'border-gray-300', 'rounded-lg');

            itemElement.innerHTML = `
                <h4 class="text-lg font-semibold">${item.name}</h4>
                <p>Price: $${item.price.toFixed(2)}</p>
                <div class="flex items-center">
                    <label for="quantity-${item.name}" class="mr-2">Quantity:</label>
                    <input type="number" id="quantity-${item.name}" name="quantity-${item.name}" value="${item.quantity}" min="1" class="w-20 px-2 py-1 border border-gray-300 rounded">
                    <button class="remove-item-btn bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2" data-product="${item.name}">Remove</button>
                </div>
            `;

            cartItemsContainer.appendChild(itemElement);
            total += item.price * item.quantity;
        });

        cartTotalElement.textContent = total.toFixed(2);

        // Add event listeners to quantity inputs and remove buttons
        let quantityInputs = cartItemsContainer.querySelectorAll('input[type="number"]');
        quantityInputs.forEach(input => {
            input.addEventListener('change', updateQuantity);
        });

        let removeButtons = cartItemsContainer.querySelectorAll('.remove-item-btn');
        removeButtons.forEach(button => {
            button.addEventListener('click', removeItem);
        });
    }
}

// Function to update cart item quantity
function updateQuantity(event) {
    let productName = event.target.id.replace('quantity-', '');
    let newQuantity = parseInt(event.target.value);

    if (newQuantity > 0) {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let itemToUpdate = cart.find(item => item.name === productName);

        if (itemToUpdate) {
            itemToUpdate.quantity = newQuantity;
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartTotal();
            displayCartItems(); // Re-render the cart items to reflect the updated quantity
        }
    }
}


// Function to remove item from cart
function removeItem(event) {
    let productName = event.target.dataset.product;
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let updatedCart = cart.filter(item => item.name !== productName);

    localStorage.setItem('cart', JSON.stringify(updatedCart));
    updateCartTotal();
    displayCartItems(); // Re-render the cart items after removing the item
}

// Function to calculate and update the cart total
function updateCartTotal() {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let total = 0;

    cart.forEach(item => {
        total += item.price * item.quantity;
    });

    let cartTotalElement = document.getElementById('cart-total');
    if (cartTotalElement) {
        cartTotalElement.textContent = total.toFixed(2);
    }
}

// Add to cart functionality to product.html (example)
//document.addEventListener('DOMContentLoaded', () => {
//    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
//    if (addToCartButton) {
//        addToCartButton.addEventListener('click', () => {
//            const productName = 'Product Name'; // Replace with the actual product name
//            const productPrice = 20.00; // Replace with the actual product price
//            addToCart(productName, productPrice);
//        });
//    }
//});

// Call displayCartItems() when cart.html loads
if (document.body.id === 'cart-page') {
    displayCartItems();
}

// Update cart total on page load
document.addEventListener('DOMContentLoaded', updateCartTotal);


// Add to cart functionality to product.html
document.addEventListener('DOMContentLoaded', () => {
    // Set the ID of the body
    document.body.id = 'product-page';
    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
    if (addToCartButton) {
        addToCartButton.addEventListener('click', () => {
            const productName = 'Product Name'; // Replace with the actual product name
            const productPrice = 20.00; // Replace with the actual product price
            addToCart(productName, productPrice);
        });
    }
});