{% extends 'base.html' %}
{% block content %}
    <!-- Cart Section -->
    <section id="cart" class="auth-section">
        <div class="auth-container">
            <div class="auth-card">
                <div class="auth-header">
                    <h2>Your Shopping Cart</h2>
                    <p>Review your selected wellness products</p>
                </div>

                <div id="cart-content">
                {% if cart_items %}
                    <div class="cart-items">
                        {% for item in cart_items %}
                        <div class="cart-item" id="cart-item-{{ item.id }}">
                            <div class="cart-item-image">
                                {% if item.product.image_url %}
                                    <img src="{{ url_for('static', filename=item.product.image_url) }}" alt="product image">
                                {% else %}
                                    <img src="{{ url_for('static', filename='images/701ed985f9328736.jpg') }}" alt="product image">
                                {% endif %}
                            </div>

                            <div class="cart-item-details">
                                <h3>{{ item.product.name }}</h3>
                                {% if item.product.description %}
                                    <p class="cart-item-description">{{ item.product.description }}</p>
                                {% endif %}
                                <p class="cart-item-price">₦{{ "%.2f"|format(item.product.price) }} each</p>
                            </div>

                            <div class="cart-item-quantity">
                                <label for="quantity-{{ item.id }}">Qty:</label>
                                <input type="number" id="quantity-{{ item.id }}" name="quantity"
                                       value="{{ item.quantity }}" min="1" max="{{ item.product.quantity_available or 99 }}"
                                       onchange="updateCartItem({{ item.id }}, this.value)">
                            </div>

                            <div class="cart-item-subtotal" id="subtotal-{{ item.id }}">
                                <p>N {{ "%.2f"|format(item.quantity * item.product.price) }}</p>
                            </div>

                            <div class="cart-item-actions">
                                <button type="button" class="btn-remove" onclick="removeCartItem({{ item.id }})">
                                    <i class="bi bi-trash"></i> Remove
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="cart-summary">
                        <div class="cart-total">
                            <h3>Total: <span id="cart-total">N {{ "%.2f"|format(total_price) }}</span></h3>
                        </div>
                        <div class="cart-actions">
                            <a href="{{ url_for('main.products') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Continue Shopping
                            </a>
                            <a href="{{ url_for('main.checkout') }}" class="btn btn-primary">
                                <i class="bi bi-credit-card"></i> Proceed to Checkout
                            </a>
                        </div>
                    </div>
                {% else %}
                    <div class="empty-cart">
                        <i class="bi bi-cart-x"></i>
                        <h3>Your cart is empty</h3>
                        <p>Add some wellness products to get started!</p>
                        <a href="{{ url_for('main.products') }}" class="btn">
                            <i class="bi bi-shop"></i> Browse Products
                        </a>
                    </div>
                {% endif %}
                </div>
            </div>
        </div>
    </section>

    <script src="{{ url_for('static', filename='js/cart.js') }}"></script>
{% endblock %}