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

{% block extra_css %}
<style>
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 50px; align-items: start; }
.checkout-section {
    background: var(--white); border: 1px solid var(--light-gray);
    border-radius: 4px; padding: 32px; margin-bottom: 24px;
}
.checkout-section-title {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 300;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 1px solid var(--light-gray);
    display: flex; align-items: center; gap: 12px;
}
.section-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--black); color: white;
    font-family: var(--font-body); font-size: 12px;
    display: flex; align-items: center; justify-content: center; font-weight: 600;
    flex-shrink: 0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.delivery-option, .payment-option {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border: 1px solid var(--mid-gray);
    border-radius: 3px; cursor: pointer; margin-bottom: 10px;
    transition: var(--transition);
}
.delivery-option:has(input:checked), .payment-option:has(input:checked) {
    border-color: var(--gold); background: rgba(201,168,76,0.05);
}
.delivery-option input, .payment-option input { accent-color: var(--gold); }
.option-info { flex: 1; }
.option-name { font-weight: 500; font-size: 14px; }
.option-desc { font-size: 12px; color: var(--warm-gray); margin-top: 2px; }
.option-price { font-weight: 600; font-size: 14px; }

.order-sidebar { background: var(--cream); border-radius: 4px; padding: 28px; position: sticky; top: 90px; }
.order-item { display: flex; gap: 14px; margin-bottom: 18px; }
.order-item-img { width: 70px; height: 80px; border-radius: 3px; overflow: hidden; background: var(--light-gray); flex-shrink: 0; position: relative; }
.order-item-img img { width: 100%; height: 100%; object-fit: cover; }
.item-qty-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--black); color: white; border-radius: 50%;
    width: 20px; height: 20px; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
}
.summary-line { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.summary-line.total-line { font-weight: 600; font-size: 1rem; border-top: 1px solid var(--mid-gray); padding-top: 14px; margin-top: 6px; }

@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } .order-sidebar { position: static; } .form-row { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .checkout-section { padding: 20px 16px; }
    .checkout-section-title { font-size: 1.1rem; }
    .delivery-option, .payment-option { padding: 12px 14px; gap: 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>
            <a href="{% url 'store:cart' %}">Cart</a><span class="breadcrumb-sep">/</span><span>Checkout</span>
        </div>
        <h1 style="font-size:2.2rem">Checkout</h1>
    </div>
</div>

<div class="container py-5">
<form method="POST">
{% csrf_token %}
<div class="checkout-layout">
    <!-- Left: Form -->
    <div>
        <!-- Shipping Info -->
        <div class="checkout-section">
            <div class="checkout-section-title">
                <span class="section-num">1</span> Shipping Information
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Full Name *</label>
                    <input type="text" name="full_name" class="form-control" required
                        value="{{ user.get_full_name|default:'' }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number *</label>
                    <input type="tel" name="phone" class="form-control" required
                        value="{% if profile %}{{ profile.phone }}{% endif %}">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Email Address *</label>
                <input type="email" name="email" class="form-control" required value="{{ user.email }}">
            </div>
            <div class="form-group">
                <label class="form-label">Delivery Address *</label>
                <textarea name="address" class="form-control" rows="2" required>{% if profile %}{{ profile.address }}{% endif %}</textarea>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">City *</label>
                    <input type="text" name="city" class="form-control" required
                        value="{% if profile %}{{ profile.city }}{% endif %}">
                </div>
                <div class="form-group">
                    <label class="form-label">State *</label>
                    <input type="text" name="state" class="form-control" required
                        value="{% if profile %}{{ profile.state }}{% endif %}">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Postal Code</label>
                <input type="text" name="postal_code" class="form-control">
            </div>
        </div>

        

        <!-- Notes -->
        <div class="checkout-section">
            <div class="checkout-section-title">
                <span class="section-num">4</span> Order Notes <span style="font-size:0.7rem;color:var(--warm-gray);font-family:var(--font-body)">(Optional)</span>
            </div>
            <textarea name="notes" class="form-control" rows="3" placeholder="Special instructions for your order..."></textarea>
        </div>
    </div>

    <!-- Right: Summary -->
    <div>
        <div class="order-sidebar">
            <h3 style="font-family:var(--font-display);font-weight:300;font-size:1.4rem;margin-bottom:24px">
                Order Summary
            </h3>

            {% for item in cart.items.all %}
            <div class="order-item">
                <div class="order-item-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"></i>
                    </div>
                    {% endif %}
                    <span class="item-qty-badge">{{ item.quantity }}</span>
                </div>
                <div style="flex:1">
                    <div style="font-size:13px;font-weight:500">{{ item.product.name }}</div>
                    {% if item.size %}<div style="font-size:11px;color:var(--warm-gray)">{{ item.size }}{% if item.color %} / {{ item.color }}{% endif %}</div>{% endif %}
                </div>
                <div style="font-size:13px;font-weight:600">₦{{ item.subtotal|floatformat:0|intcomma }}</div>
            </div>
            {% endfor %}

            <hr class="divider">

            <div class="summary-line">
                <span>Subtotal</span><span>₦{{ cart.total|floatformat:0|intcomma }}</span>
            </div>
            {% if cart.coupon %}
            <div class="summary-line" style="color:var(--success)">
                <span>Discount ({{ cart.coupon.code }})</span>
                <span>− ₦{{ cart.discount_amount|floatformat:0|intcomma }}</span>
            </div>
            {% endif %}
            <div class="summary-line">
                <span>Delivery</span><span id="deliveryCost">₦1,500</span>
            </div>
            <div class="summary-line total-line">
                <span>Total</span><span id="totalAmount">₦{{ cart.total_after_coupon|floatformat:0|intcomma }}</span>
            </div>

            <button type="submit" class="btn btn-primary btn-full btn-lg" style="margin-top:20px">
                <i class="fas fa-lock"></i> Place Order
            </button>
            <p style="text-align:center;font-size:11px;color:var(--warm-gray);margin-top:12px">
                <i class="fas fa-shield-alt"></i> Secure & Encrypted Transaction
            </p>
        </div>
    </div>
</div>
</form>
</div>
{% endblock %}

{% block extra_js %}
<script>
const cartTotal = {{ cart.total_after_coupon|floatformat:0|intcomma }};
const deliveryCosts = { standard: 1500, express: 3000, pickup: 0 };

document.querySelectorAll('input[name="delivery_option"]').forEach(input => {
    input.addEventListener('change', () => {
        const cost = deliveryCosts[input.value];
        document.getElementById('deliveryCost').textContent = cost === 0 ? 'Free' : '₦' + cost.toLocaleString();
        document.getElementById('totalAmount').textContent = '₦' + (cartTotal + cost).toLocaleString();
    });
});
</script>
{% endblock %}