cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Cart - Suyambu Lingam Pazhamudhir Cholai</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to right, #FFDEE9, #B5FFFC);
            color: #333;
        }

        .nav-bar {
            background: #8B5E3B;
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .nav-bar h1 {
            margin: 0;
            font-size: 2rem;
        }

        .nav-links button {
            background: #D7263D;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            transition: background 0.3s;
            border-radius: 8px;
        }

        .nav-links button:hover {
            background: #E76F51;
            transform: scale(1.1);
        }

        .container {
            margin-top: 20px;
        }

        .cart-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .cart-item img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            margin-right: 10px;
        }

        .quantity-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 8px;
            cursor: pointer;
            margin: 0 5px;
        }

        .quantity-btn:hover {
            background-color: #45a049;
            transform: scale(1.1);
        }

        .remove-btn {
            background-color: #D7263D;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .remove-btn:hover {
            background-color: #E76F51;
            transform: scale(1.1);
        }

        #cart-items p {
            margin: 5px 0;
        }

        .empty-cart {
            text-align: center;
            margin-top: 50px;
            font-size: 1.5rem;
            color: #555;
        }

        .order-button {
            display: block;
            margin: 30px auto;
            background: #ff6600;
            color: white;
            padding: 12px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s ease;
        }

        .order-button:hover {
            background: #e65c00;
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg nav-bar">
        <div class="container-fluid">
            <h1 class="navbar-brand text-white">Suyambu Lingam Pazhamudhir Cholai</h1>
            <div class="nav-links">
                <a href="index.html"><button>Home</button></a>
                <a href="login.html"><button>Login</button></a>
                <a href="cart.html"><button>Cart</button></a>
                <a href="orders.html"><button>My Orders</button></a>
            </div>
        </div>
    </nav>

    <div class="container">
        <h2 class="text-center mt-4">🛒 My Cart</h2>
        <div id="cart-items" class="mt-4"></div>
        <div id="total-price" class="text-center mt-4"></div>
        <button class="order-button" onclick="placeOrder()">🧾 Order Now</button>
    </div>

    <footer class="text-center py-3 bg-dark text-white">
        <p>&copy; Suyambu Lingam Pazhamudhir Cholai. All rights reserved.</p>
    </footer>

    <script>
        let cart = JSON.parse(localStorage.getItem('cart')) || [];

        function displayCart() {
            const cartContainer = document.getElementById('cart-items');
            const totalPriceContainer = document.getElementById('total-price');
            cartContainer.innerHTML = '';

            if (cart.length === 0) {
                cartContainer.innerHTML = '<p class="empty-cart">Your cart is empty! 🥲</p>';
                totalPriceContainer.innerHTML = '';
                return;
            }

            let totalPrice = 0;

            cart.forEach((item, index) => {
                const itemTotal = item.quantity * item.price;
                totalPrice += itemTotal;

                cartContainer.innerHTML += `
                    <div class="cart-item">
                        <div><img src="${item.img}" alt="${item.name}"></div>
                        <div>
                            <p><strong>${item.name}</strong></p>
                            <p>Quantity: ${item.quantity} ${item.unit}</p>
                            <div>
                                <button class="quantity-btn" onclick="changeQuantity(${index}, -${item.name === 'Dragonfruit' ? 1 : 0.5})">➖</button>
                                <span>${item.quantity}</span>
                                <button class="quantity-btn" onclick="changeQuantity(${index}, ${item.name === 'Dragonfruit' ? 1 : 0.5})">➕</button>
                            </div>
                            <p>Price: Rs. ${itemTotal.toFixed(2)}</p>
                        </div>
                        <button onclick="removeFromCart(${index})" class="remove-btn">❌ Remove</button>
                    </div>
                `;
            });

            totalPriceContainer.innerHTML = `<h4>Total: Rs. ${totalPrice.toFixed(2)}</h4>`;
        }

        function changeQuantity(index, change) {
            if (cart[index].quantity + change > 0) {
                cart[index].quantity = parseFloat((cart[index].quantity + change).toFixed(2));
            } else {
                cart.splice(index, 1);
            }
            localStorage.setItem('cart', JSON.stringify(cart));
            displayCart();
        }

        function removeFromCart(index) {
            cart.splice(index, 1);
            localStorage.setItem('cart', JSON.stringify(cart));
            displayCart();
        }

        function placeOrder() {
            if (cart.length === 0) {
                alert("Your cart is empty!");
                return;
            }
            
            // Generate a unique order ID
            const orderId = 'ORD-' + Date.now();
            const orderDate = new Date().toISOString();
            
            // Create order object
            const order = {
                id: orderId,
                date: orderDate,
                items: JSON.parse(JSON.stringify(cart)), // Deep copy the cart items
                status: "Pending",
                totalAmount: cart.reduce((total, item) => total + (item.quantity * item.price), 0)
            };
            
            // Get existing orders from localStorage or initialize empty array
            let orders = JSON.parse(localStorage.getItem('orders')) || [];
            
            // Add new order
            orders.push(order);
            
            // Save to localStorage
            localStorage.setItem('orders', JSON.stringify(orders));
            
            // Clear cart
            localStorage.removeItem('cart');
            cart = [];
            
            // Show success message
            alert(`Order placed successfully! ✅\nOrder ID: ${orderId}`);
            
            // Refresh cart display
            displayCart();
        }

        document.addEventListener('DOMContentLoaded', displayCart);
    </script>
</body>
</html>