{% extends "base.html" %}
{% block title %}Your Cart — AgriLink{% endblock %}

{% block content %}

<!-- Wrapper with proper spacing and centered layout -->
<div class="cart-container">

    <h2 class="mb-4">Your Cart</h2>

    {% if not items or items|length == 0 %}
        
        <p>Your cart is empty.</p>
        <a href="{{ url_for('marketplace') }}" class="btn-primary">Browse Products</a>

    {% else %}

        <table class="cart-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Farmer</th>
                    <th>Price</th>
                    <th>Qty</th>
                    <th>Total</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {% for item in items %}
                <tr>

                    <td>{{ item.product.name }}</td>

                    <td>{{ item.product.farmer.name }}</td>

                    <td>£{{ '%.2f'|format(item.product.price) }}</td>

                    <td>
                        <!-- AUTO-UPDATE quantity input (no button needed!) -->
                        <input 
                            type="number"
                            class="qty-input"
                            data-product-id="{{ item.product.id }}"
                            value="{{ item.quantity }}"
                            min="1"
                        >
                    </td>

                    <td>£{{ '%.2f'|format(item.subtotal) }}</td>

                    <td>
                        <!-- Remove item -->
                        <form method="POST"
                              action="{{ url_for('remove_cart_item', product_id=item.product.id) }}">
                            <button class="btn-delete">Remove</button>
                        </form>
                    </td>

                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="cart-summary">
            <h3>Total: £{{ '%.2f'|format(total) }}</h3>

            <a href="{{ url_for('checkout') }}" class="btn-primary">
                Proceed to Checkout
            </a>
        </div>

    {% endif %}

</div>

<!-- Auto-update QTY Script -->
<script>
document.querySelectorAll(".qty-input").forEach(input => {
    input.addEventListener("change", function () {
        const productId = this.dataset.productId;
        const newQty = this.value;

        fetch(`/cart/update/${productId}`, {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `quantity=${newQty}`
        })
        .then(() => window.location.reload());
    });
});
</script>

{% endblock %}