{% 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>{{ gateway.name }} Payment</h1>
        <p>{{ gateway.description }}</p>
    </div>
</section>

<div class="payment-page">
    <div class="payment-panel">
        <h2>Order #{{ order.id }}</h2>
        <p class="payment-total">Amount due: <strong>Rs. {{ order.total_price|floatformat:2 }}</strong></p>
        <p>Status: <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span></p>

        <form method="POST" class="payment-form">
            {% csrf_token %}
            <p>Please click the button below to complete your payment through {{ gateway.name }}.</p>
            <button class="btn btn-primary" type="submit">{{ gateway.button_text }}</button>
        </form>

        <div class="payment-guidelines" style="margin-top: 24px;">
            <h3>Payment steps</h3>
            <ol>
                <li>Select {{ gateway.name }} on the previous page.</li>
                <li>Press <strong>{{ gateway.button_text }}</strong>.</li>
                <li>Follow the instructions on the payment screen.</li>
                <li>After payment completes, your order will be confirmed.</li>
            </ol>
        </div>
    </div>

    <aside class="order-summary summary-box">
        <h3>Order details</h3>
        <p>Total items: {{ order.items.count }}</p>
        <ul class="order-summary-list">
            {% for item in order.items.all %}
                <li>
                    <span>{{ item.product.name }} x {{ item.quantity }}</span>
                    <strong>Rs. {{ item.price|floatformat:2 }}</strong>
                </li>
            {% endfor %}
        </ul>
    </aside>
</div>
{% endblock %}