{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="page-header page-header--split reveal">
    <div>
        <p class="page-eyebrow">Cart review</p>
        <h1>Your Cart</h1>
        <p>Review your items, apply coupons, and move to checkout with a more informative layout.</p>
    </div>
    <div class="page-header-actions">
        <a href="{% url 'product_list' %}" class="btn btn-secondary">Continue Shopping</a>
        {% if products and user.is_authenticated %}
        <a href="{% url 'checkout' %}" class="btn btn-primary">Checkout</a>
        {% endif %}
    </div>
</section>

{% if products %}
<section class="cart-insight-strip reveal">
    <article class="cart-insight-card reveal">
        <span class="shop-stat-label">Items in cart</span>
        <strong class="shop-stat-value">{{ item_count }}</strong>
        <small class="shop-stat-note">Across {{ products|length }} product line{{ products|length|pluralize }}.</small>
    </article>
    <article class="cart-insight-card reveal">
        <span class="shop-stat-label">Savings captured</span>
        <strong class="shop-stat-value">Rs. {{ saved_amount|floatformat:2 }}</strong>
        <small class="shop-stat-note">Discounts already reflected from current product pricing.</small>
    </article>
    <article class="cart-insight-card reveal">
        <span class="shop-stat-label">Checkout readiness</span>
        <strong class="shop-stat-value">Secure</strong>
        <small class="shop-stat-note">Proceed to delivery details, then choose eSewa, Khalti, or COD.</small>
    </article>
</section>
{% endif %}

<div class="cart-page">
    <div class="cart-items">
        {% if products %}
            {% for p in products %}
            <div class="cart-card reveal">
                <div class="cart-card-left">
                    <div class="cart-product">
                        <div class="cart-product-avatar">
                            {% if p.image %}
                            <img src="{{ p.image.url }}" alt="{{ p.name }}">
                            {% else %}
                            <span class="avatar-placeholder">{{ p.name|slice:":1"|upper }}</span>
                            {% endif %}
                        </div>
                        <div class="cart-product-copy">
                            <div class="tag-row">
                                {% if p.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
                                <span class="tag category-tag">{{ p.category }}</span>
                                {% if p.discount_percent %}<span class="tag savings-tag">Save {{ p.discount_percent }}%</span>{% endif %}
                            </div>
                            <h3>{{ p.name }}</h3>
                            <p class="cart-meta">Unit Rs. {{ p.display_price|floatformat:2 }} • Stock {{ p.stock }}</p>
                            <p class="product-card-caption">Keep quantities updated here before moving into delivery and payment.</p>
                        </div>
                    </div>
                    <form action="{% url 'update_cart' p.id %}" method="post" class="cart-qty-form">
                        {% csrf_token %}
                        <label>Qty</label>
                        <input type="number" name="quantity" value="{{ p.qty }}" min="0" max="{{ p.stock }}">
                        <button type="submit" class="btn btn-secondary">Update</button>
                    </form>
                </div>
                <div class="cart-card-right">
                    <p>Subtotal</p>
                    <strong>Rs. {{ p.subtotal|floatformat:2 }}</strong>
                    <div class="cart-actions">
                        <a href="{% url 'remove_from_cart' p.id %}" class="btn btn-secondary">Remove</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <h2>Your cart is empty.</h2>
                <p>Browse products and add items to start the improved checkout experience.</p>
                <a href="{% url 'product_list' %}" class="btn btn-primary">Browse Products</a>
            </div>
        {% endif %}
    </div>

    {% if products %}
    <aside class="cart-summary">
        <div class="summary-box reveal">
            <div class="payment-summary-header">
                <div>
                    <h2>Order Summary</h2>
                    <p class="payment-caption">Review totals, coupon impact, and the next checkout step.</p>
                </div>
                <span class="payment-badge">Ready</span>
            </div>

            <form action="{% url 'apply_coupon' %}" method="post" class="coupon-form">
                {% csrf_token %}
                <input type="text" name="coupon_code" placeholder="Coupon code (HAMRO10)" class="field-input" value="{{ coupon_code }}">
                <div class="checkout-form-actions">
                    <button type="submit" class="btn btn-secondary">Apply</button>
                    {% if coupon_code %}
                        <a href="{% url 'remove_coupon' %}" class="btn btn-secondary">Remove</a>
                    {% endif %}
                </div>
            </form>

            {% if coupon %}
            <div class="cart-summary-note cart-summary-note--success">
                <strong>{{ coupon.code }} is active.</strong>
                <p>{{ coupon.discount_percent|floatformat:0 }}% coupon is attached to this cart summary.</p>
            </div>
            {% endif %}

            <div class="summary-row"><span>Subtotal</span><span>Rs. {{ total|floatformat:2 }}</span></div>
            <div class="summary-row"><span>Shipping</span><span>Rs. {{ shipping|floatformat:2 }}</span></div>
            <div class="summary-row"><span>Discount</span><span>- Rs. {{ discount|floatformat:2 }}</span></div>
            <div class="summary-row total-row"><span>Total</span><span>Rs. {{ grand_total|floatformat:2 }}</span></div>

            <div class="cart-summary-note">
                <strong>Special checkout flow</strong>
                <p>Delivery details come first, then you choose a verified payment option without losing the order review.</p>
            </div>

            {% if user.is_authenticated %}
                <a href="{% url 'checkout' %}" class="btn btn-primary">Proceed to Checkout</a>
            {% else %}
                <p>Please <a href="{% url 'login' %}">login</a> to place your order.</p>
            {% endif %}
            <a href="{% url 'product_list' %}" class="btn btn-secondary">Keep Shopping</a>
        </div>
    </aside>
    {% endif %}
</div>
{% endblock %}