{% 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">Redirecting</p>
        <h1>Opening {{ gateway_name }}</h1>
        <p>Please wait while we send Order #{{ order.id }} to the official payment page.</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>{{ gateway_name }} redirect</span>
    </div>
</div>

<div class="payment-page">
    <div class="payment-panel payment-panel--main reveal">
        <div class="gateway-status-banner info">
            <strong>You are being redirected to {{ gateway_name }}.</strong>
            <p>If the payment page does not open automatically, use the button below.</p>
        </div>

        <form id="gateway-redirect-form" method="POST" action="{{ action_url }}" class="payment-form redirect-gateway-form">
            {% for name, value in fields.items %}
            <input type="hidden" name="{{ name }}" value="{{ value }}">
            {% endfor %}
            <button class="btn btn-primary" type="submit">Open {{ gateway_name }}</button>
            <a href="{% url 'payment' order.id %}" class="btn btn-secondary">Back to payment methods</a>
        </form>
    </div>

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

        <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>Tip</h4>
            <p>Do not close the wallet window until the payment result finishes and returns you to the order confirmation page.</p>
        </div>
    </aside>
</div>

<script>
    window.addEventListener('load', function () {
        var form = document.getElementById('gateway-redirect-form');
        if (form) {
            form.submit();
        }
    });
</script>
{% endblock %}