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

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

{% block content %}
<section class="page-header">
    <div>
        <h1>Your Cart</h1>
        <p>Review your items and complete checkout securely.</p>
    </div>
</section>

<div class="cart-page">
    <div class="cart-items">
        {% if products %}
            {% for p in products %}
            <div class="cart-card">
                <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>
                            <h3>{{ p.name }}</h3>
                            <p class="cart-meta">Unit Rs. {{ p.display_price|floatformat:2 }} | Stock {{ p.stock }}</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 your cart.</p>
            </div>
        {% endif %}
    </div>

    {% if products %}
    <aside class="cart-summary">
        <div class="summary-box">
            <h2>Order Summary</h2>
            <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 }}">
                <button type="submit" class="btn btn-secondary">Apply</button>
                {% if coupon_code %}
                    <a href="{% url 'remove_coupon' %}" class="btn btn-secondary">Remove</a>
                {% endif %}
            </form>
            <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>
            {% 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 %}
        </div>
    </aside>
    {% endif %}
</div>
{% endblock %}