{% 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>Checkout Payment</h1>
        <p>Choose a payment option to confirm your order securely.</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 %}
            <label class="payment-option">
                <input type="radio" name="payment" value="eSewa" required>
                <span>eSewa</span>
                <small>Pay with Nepal's popular mobile wallet.</small>
            </label>
            <label class="payment-option">
                <input type="radio" name="payment" value="Khalti">
                <span>Khalti</span>
                <small>Pay instantly with Khalti wallet.</small>
            </label>
            <label class="payment-option">
                <input type="radio" name="payment" value="Fonpay">
                <span>Fonpay</span>
                <small>Use Fonpay for secure mobile payment.</small>
            </label>
            <label class="payment-option">
                <input type="radio" name="payment" value="Cash on Delivery">
                <span>Cash on Delivery</span>
                <small>Pay when your order arrives.</small>
            </label>
            <button class="btn btn-primary" type="submit">Continue to Payment</button>
        </form>
    </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 %}