{% extends 'base.html' %}
{% load humanize %}
{% block title %}Shopping Cart — Chiez Stores{% endblock %}

{% block extra_css %}
<style>
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--warm-gray); font-weight: 500; padding: 12px 0;
    border-bottom: 1px solid var(--light-gray); text-align: left;
}
.cart-table td { padding: 24px 0; border-bottom: 1px solid var(--light-gray); vertical-align: middle; }
.cart-product { display: flex; gap: 20px; align-items: center; }
.cart-img {
    width: 90px; height: 110px; border-radius: 3px; overflow: hidden;
    background: var(--light-gray); flex-shrink: 0;
}
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; margin-bottom: 4px; }
.cart-meta { font-size: 12px; color: var(--warm-gray); }
.cart-qty { display: flex; align-items: center; gap: 0; width: fit-content; }
.cqty-btn {
    width: 34px; height: 36px; border: 1px solid var(--mid-gray);
    background: none; cursor: pointer; font-size: 16px; transition: var(--transition);
}
.cqty-btn:hover { background: var(--black); color: white; border-color: var(--black); }
.cqty-val {
    width: 44px; height: 36px; border: 1px solid var(--mid-gray);
    border-left: none; border-right: none;
    text-align: center; font-size: 14px; outline: none;
    background: var(--white); font-family: var(--font-body);
}
.cart-remove { color: var(--mid-gray); font-size: 18px; cursor: pointer; transition: var(--transition); background: none; border: none; }
.cart-remove:hover { color: var(--danger); }

.order-summary {
    background: var(--cream); border-radius: 4px; padding: 32px;
    position: sticky; top: 90px;
}
.summary-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; margin-bottom: 24px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; }
.summary-row.total { font-weight: 600; font-size: 1.1rem; border-top: 1px solid var(--mid-gray); padding-top: 14px; margin-top: 14px; }
.summary-row.discount { color: var(--success); }

.coupon-form { display: flex; gap: 8px; margin: 20px 0; }
.coupon-input { flex: 1; padding: 10px 14px; border: 1px solid var(--mid-gray); border-radius: 3px; font-family: var(--font-body); font-size: 13px; outline: none; background: white; }
.coupon-input:focus { border-color: var(--gold); }

.empty-cart { text-align: center; padding: 100px 20px; }
.empty-cart i { font-size: 64px; color: var(--mid-gray); display: block; margin-bottom: 24px; }

@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .order-summary { position: static; } }
@media (max-width: 600px) {
    .cart-product { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cart-img { width: 70px; height: 85px; }
    .cart-table th:nth-child(3), .cart-table td:nth-child(3) { display: none; }
    .cart-table th, .cart-table td { padding: 14px 8px; font-size: 12px; }
}
</style>
{% endblock %}

{% block content %}
<div style="background:var(--cream);border-bottom:1px solid var(--light-gray)">
    <div class="container" style="padding-top:20px;padding-bottom:20px">
        <div class="breadcrumb">
            <a href="{% url 'store:home' %}">Home</a><span class="breadcrumb-sep">/</span><span>Shopping Cart</span>
        </div>
        <h1 style="font-size:2.2rem">Shopping Cart <span style="font-size:1rem;color:var(--warm-gray);font-family:var(--font-body)">({{ cart.item_count }} item{{ cart.item_count|pluralize }})</span></h1>
    </div>
</div>

<div class="container py-5">
{% if cart.items.exists %}
<div class="cart-layout">
    <!-- Cart Items -->
    <div>
        <table class="cart-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th style="text-align:center">Quantity</th>
                    <th style="text-align:right">Price</th>
                    <th style="text-align:right">Subtotal</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for item in cart.items.all %}
                <tr>
                    <td>
                        <div class="cart-product">
                            <div class="cart-img">
                                {% if item.product.image %}
                                <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
                                {% else %}
                                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--mid-gray)">
                                    <i class="fas fa-tshirt" style="font-size:24px"></i>
                                </div>
                                {% endif %}
                            </div>
                            <div>
                                <a href="{{ item.product.get_absolute_url }}">
                                    <div class="cart-name">{{ item.product.name }}</div>
                                </a>
                                <div class="cart-meta">
                                    {% if item.size %}Size: {{ item.size }}{% endif %}
                                    {% if item.color %} &nbsp;|&nbsp; Color: {{ item.color }}{% endif %}
                                </div>
                                <div class="cart-meta" style="margin-top:4px">₦{{ item.product.effective_price|floatformat:0|intcomma }} each</div>
                            </div>
                        </div>
                    </td>
                    <td style="text-align:center">
                        <form action="{% url 'store:update_cart' item.id %}" method="POST" class="cart-qty" style="margin:0 auto">
                            {% csrf_token %}
                            <button type="submit" name="quantity" value="{{ item.quantity|add:'-1' }}" class="cqty-btn">−</button>
                            <input type="number" class="cqty-val" value="{{ item.quantity }}" name="quantity" min="1" max="{{ item.product.stock }}" onchange="this.form.submit()">
                            <button type="submit" name="quantity" value="{{ item.quantity|add:'1' }}" class="cqty-btn">+</button>
                        </form>
                    </td>
                    <td style="text-align:right">₦{{ item.product.effective_price|floatformat:0|intcomma }}</td>
                    <td style="text-align:right;font-weight:600">₦{{ item.subtotal|floatformat:0|intcomma }}</td>
                    <td style="text-align:right">
                        <form action="{% url 'store:remove_from_cart' item.id %}" method="POST">
                            {% csrf_token %}
                            <button type="submit" class="cart-remove" title="Remove"><i class="fas fa-trash-alt" style="font-size:14px"></i></button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div style="display:flex;justify-content:space-between;margin-top:30px;flex-wrap:wrap;gap:12px">
            <a href="{% url 'store:shop' %}" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Continue Shopping</a>
        </div>
    </div>

    <!-- Order Summary -->
    <div class="order-summary">
        <div class="summary-title">Order Summary</div>

        <div class="summary-row">
            <span>Subtotal ({{ cart.item_count }} items)</span>
            <span>₦{{ cart.total|floatformat:0|intcomma }}</span>
        </div>

        {% if cart.coupon %}
        <div class="summary-row discount">
            <span><i class="fas fa-tag"></i> Coupon: {{ cart.coupon.code }}</span>
            <span>− ₦{{ cart.discount_amount|floatformat:0|intcomma }}</span>
        </div>
        <div style="text-align:right;margin-top:-8px;margin-bottom:10px">
            <a href="{% url 'store:remove_coupon' %}" style="font-size:12px;color:var(--danger)">Remove coupon</a>
        </div>
        {% endif %}

        <div class="summary-row">
            <span style="color:var(--warm-gray);font-size:13px">Delivery</span>
            <span style="color:var(--warm-gray);font-size:13px">Calculated at checkout</span>
        </div>

        <div class="summary-row total">
            <span>Total</span>
            <span>₦{{ cart.total_after_coupon|floatformat:0|intcomma }}</span>
        </div>

        <!-- Coupon -->
        {% if not cart.coupon %}
        <form action="{% url 'store:apply_coupon' %}" method="POST" class="coupon-form">
            {% csrf_token %}
            <input type="text" name="coupon_code" class="coupon-input" placeholder="Coupon code">
            <button type="submit" class="btn btn-outline btn-sm">Apply</button>
        </form>
        {% endif %}

        <hr class="divider">

        {% if user.is_authenticated %}
        <a href="{% url 'orders:checkout' %}" class="btn btn-primary btn-full btn-lg">
            Proceed to Checkout <i class="fas fa-arrow-right"></i>
        </a>
        {% else %}
        <a href="{% url 'users:login' %}?next={% url 'orders:checkout' %}" class="btn btn-primary btn-full btn-lg">
            Login to Checkout <i class="fas fa-arrow-right"></i>
        </a>
        <a href="{% url 'users:register' %}" class="btn btn-outline btn-full" style="margin-top:10px">Create Account</a>
        {% endif %}

        <div style="text-align:center;margin-top:20px">
            <div style="display:flex;justify-content:center;gap:14px;color:var(--mid-gray);font-size:20px">
                <i class="fas fa-lock" title="Secure Checkout"></i>
                <i class="fas fa-shield-alt" title="SSL Encrypted"></i>
                <i class="fas fa-credit-card" title="Secure Payment"></i>
            </div>
            <p style="font-size:11px;color:var(--mid-gray);margin-top:8px;letter-spacing:0.05em">Secure & Encrypted Checkout</p>
        </div>
    </div>
</div>
{% else %}
<div class="empty-cart">
    <i class="fas fa-shopping-bag"></i>
    <h2 style="font-weight:300;margin-bottom:12px">Your cart is empty</h2>
    <p style="color:var(--warm-gray);margin-bottom:30px">Looks like you haven't added anything yet. Let's change that!</p>
    <a href="{% url 'store:shop' %}" class="btn btn-primary btn-lg">Start Shopping</a>
</div>
{% endif %}
</div>
{% endblock %}