{% 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 reveal">
    <div>
        <p class="page-eyebrow">Step 2 of 2</p>
        <h1>Choose your payment method</h1>
        <p>Pick a verified payment option to confirm Order #{{ order.id }} with the upgraded checkout experience.</p>
    </div>
</section>

<div class="checkout-progress reveal">
    <div class="checkout-progress-step is-done">
        <strong>1</strong>
        <span>Delivery details</span>
    </div>
    <div class="checkout-progress-step is-active">
        <strong>2</strong>
        <span>Payment method</span>
    </div>
</div>

<div class="payment-page">
    <div class="payment-panel payment-panel--main reveal">
        <div class="payment-panel-heading">
            <div>
                <p class="payment-step">Order #{{ order.id }}</p>
                <h2>Complete your payment</h2>
                <p class="payment-caption">Amount due: <strong>Rs. {{ order.total_price|floatformat:2 }}</strong></p>
            </div>
            <div class="inline-status-row">
                <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span>
                <span class="status-tag status-payment-{{ order.payment_status|lower }}">{{ order.payment_status }}</span>
                {% if order.payment_method and order.payment_method != 'Pending selection' %}
                <span>{{ order.payment_method }}</span>
                {% endif %}
            </div>
        </div>

        <div class="payment-overview-grid">
            <article class="payment-overview-card reveal">
                <strong>Verified before paid</strong>
                <p>Orders are not marked paid until the gateway confirms the result.</p>
            </article>
            <article class="payment-overview-card reveal">
                <strong>Retry-safe flow</strong>
                <p>If a wallet is cancelled or fails, the order stays saved for another attempt.</p>
            </article>
            <article class="payment-overview-card reveal">
                <strong>Flexible selection</strong>
                <p>Keep COD or switch to an online method before shipment when available.</p>
            </article>
        </div>

        {% if esewa_sandbox and esewa_ready %}
        <div class="gateway-status-banner info">
            <strong>eSewa is running in sandbox / UAT mode.</strong>
            <p>You can test the full redirect-and-verify flow now, then switch to your live merchant credentials later.</p>
        </div>
        {% endif %}

        {% if order.payment_method == 'Cash on Delivery' and order.payment_status == 'Pending' %}
        <div class="gateway-status-banner info">
            <strong>Cash on delivery is currently selected.</strong>
            <p>You can keep COD, or switch to eSewa / Khalti below before the order is shipped.</p>
        </div>
        {% endif %}

        {% if not online_ready %}
        <div class="gateway-status-banner warning">
            <strong>No online gateway is configured yet.</strong>
            <p>Cash on delivery is still available, and you can enable Khalti or live eSewa credentials at any time.</p>
        </div>
        {% endif %}

        {% if order.payment_status == 'Failed' %}
        <div class="gateway-status-banner danger">
            <strong>The last payment attempt did not complete.</strong>
            <p>Your order is still saved, and you can safely start a fresh payment attempt below.</p>
        </div>
        {% endif %}

        <form method="POST" class="payment-form payment-choice-form">
            {% csrf_token %}

            {% for option in payment_options %}
            <label class="payment-method-card reveal {% if not option.ready %}is-disabled{% endif %}">
                <input type="radio" name="payment" value="{{ option.value }}" {% if option.checked %}checked{% endif %} {% if not option.ready %}disabled{% endif %}>
                <div class="payment-method-body">
                    <div class="payment-method-top">
                        <div class="payment-method-heading">
                            <strong>{{ option.title }}</strong>
                            {% if option.value == 'esewa' %}
                            <span class="payment-method-subtitle">Wallet / bank app checkout</span>
                            {% elif option.value == 'khalti' %}
                            <span class="payment-method-subtitle">Khalti hosted payment page</span>
                            {% elif option.value == 'fonepay' %}
                            <span class="payment-method-subtitle">Business / Dynamic QR</span>
                            {% elif option.value == 'stripe' %}
                            <span class="payment-method-subtitle">Card fallback</span>
                            {% elif option.value == 'cod' %}
                            <span class="payment-method-subtitle">Pay when the product arrives</span>
                            {% endif %}
                        </div>
                        <span class="payment-badge {% if option.badge_muted %}payment-badge--muted{% endif %}">{{ option.badge }}</span>
                    </div>
                    <p>{{ option.description }}</p>
                    <small>{{ option.note }}</small>
                </div>
            </label>
            {% endfor %}

            <div class="payment-trust-grid">
                <div class="payment-trust-item">Server-side verification before an order is marked paid</div>
                <div class="payment-trust-item">Order details are preserved even if the wallet window is cancelled</div>
                <div class="payment-trust-item">Responsive checkout flow for desktop, tablet, and mobile</div>
            </div>

            <div class="checkout-form-actions">
                <button class="btn btn-primary" type="submit">Continue to Payment</button>
                <a href="{% url 'order_detail' order.id %}" class="btn btn-secondary">View Order Details</a>
            </div>
        </form>
    </div>

    <aside class="order-summary summary-box payment-summary reveal">
        <div class="payment-summary-header">
            <div>
                <h3>Order details</h3>
                <p class="payment-caption">{{ order.items.count }} item{{ order.items.count|pluralize }}</p>
            </div>
            <span class="payment-badge">Summary</span>
        </div>

        <ul class="order-summary-list">
            {% for item in order.items.all %}
                <li>
                    <span>{{ item.product.name }} × {{ item.quantity }}</span>
                    <strong>Rs. {{ item.price|floatformat:2 }}</strong>
                </li>
            {% endfor %}
        </ul>

        <div class="summary-row total-row">
            <span>Total amount</span>
            <span>Rs. {{ order.total_price|floatformat:2 }}</span>
        </div>

        <div class="summary-box payment-mini-card">
            <h4>Delivery info</h4>
            <p>{{ order.full_name }}</p>
            <p>{{ order.phone }}</p>
            {% if order.location_label %}<p>📍 {{ order.location_label }}</p>{% endif %}
            <p>{{ order.address }}</p>
            {% if order.delivery_notes %}<p><strong>Note:</strong> {{ order.delivery_notes }}</p>{% endif %}
            {% if order.has_precise_location %}<p>GPS attached for delivery support.</p>{% endif %}
        </div>

        <div class="cart-summary-note">
            <strong>Need to retry later?</strong>
            <p>Your order remains available from My Orders, so you can return without rebuilding the cart.</p>
        </div>
    </aside>
</div>
{% endblock %}