<%- include('partials/header') %>
<div class="container">
    <div class="cart">
        <h2>Shopping Cart</h2>
        <% if (cartItems.length === 0) { %>
            <div class="info-section">
                <p>Your cart is empty</p>
                <a href="/" class="continue-shopping">Continue Shopping</a>
            </div>
        <% } else { %>
            <div class="cart-items">
                <% cartItems.forEach(item => { %>
                    <div class="cart-item" data-id="<%= item.id %>">
                        <div class="item-info">
                            <h3><%= item.name %></h3>
                            <p>Price: ฿<%= item.price.toLocaleString() %></p>
                            <p class="price">
                                Total: ฿<%= (item.price * item.quantity).toLocaleString() %>
                            </p>
                            <% if (item.stock < 5) { %>
                                <p style="color: var(--primary);">Only <%= item.stock %> items left!</p>
                            <% } %>
                        </div>

                        <form method="POST" action="/cart/update" style="display: flex; gap: 0.8rem; align-items: center;">
                            <input type="hidden" name="cartItemId" value="<%= item.id %>">
                            <input type="number" 
                                   name="quantity" 
                                   value="<%= item.quantity %>" 
                                   min="1" 
                                   max="<%= item.stock %>"
                                   style="width: 70px;">
                            <button type="button" class="update-btn" style="margin: 0; padding: 0.5rem 1rem;">
                                Update
                            </button>
                        </form>

                        <!-- ปุ่ม Remove (ซ่อนเริ่มต้น) -->
                        <form action="/cart/remove" method="POST" style="text-align: right; display: none;" class="remove-form">
                            <input type="hidden" name="cartItemId" value="<%= item.id %>">
                            <button type="submit" class="back-btn" style="margin: 0; padding: 0.5rem 1rem; background-color: red;">
                                Remove
                            </button>
                        </form>

                        <!-- ปุ่ม Edit -->
                        <button type="button" class="edit-btn">
                            Edit
                        </button>

                    </div>
                <% }); %>
            </div>

            <div class="cart-summary">
                <div class="total">
                    <h3 id="total-price">Total Amount: ฿<%= total.toLocaleString() %></h3>
                </div>
                <div class="order-actions">
                    <a href="/" class="back-btn">Continue Shopping</a>
                    <a href="/order/checkout" class="checkout-button">Proceed to Checkout</a>
                </div>
            </div>

            <script>
                document.querySelectorAll(".update-btn").forEach(button => {
                    button.addEventListener("click", async (event) => {
                        const cartItem = event.target.closest(".cart-item");
                        const cartItemId = cartItem.dataset.id;
                        const quantity = cartItem.querySelector("input[name='quantity']").value;
            
                        const response = await fetch('/cart/update', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ cartItemId, quantity })
                        });
            
                        if (response.ok) {
                            window.location.reload(); // รีเฟรชหน้าหลังอัปเดต
                        } else {
                            alert("Failed to update cart.");
                        }
                    });
                });
            </script>
        <% } %>
    </div>
</div>
<%- include('partials/footer') %>