{% 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>
        {% if payment_verified %}
        <p class="page-eyebrow">Payment verified</p>
        <h1>Order #{{ order.id }} is fully confirmed</h1>
        {% elif order.payment_method == 'Cash on Delivery' %}
        <p class="page-eyebrow">Order confirmed</p>
        <h1>Cash on delivery selected for Order #{{ order.id }}</h1>
        {% elif order.payment_status == 'Failed' %}
        <p class="page-eyebrow">Payment retry needed</p>
        <h1>Order #{{ order.id }} is waiting for a new payment attempt</h1>
        {% else %}
        <p class="page-eyebrow">Payment pending</p>
        <h1>Order #{{ order.id }} is waiting for payment</h1>
        {% endif %}
        <p>{{ verification_message }}</p>
    </div>
</section>

<div class="checkout-progress reveal">
    <div class="checkout-progress-step is-done">
        <strong>1</strong>
        <span>Order created</span>
    </div>
    <div class="checkout-progress-step {% if payment_verified or order.payment_method == 'Cash on Delivery' %}is-done{% else %}is-active{% endif %}">
        <strong>2</strong>
        <span>{% if payment_verified %}Payment verified{% elif order.payment_method == 'Cash on Delivery' %}COD confirmed{% else %}Payment pending{% endif %}</span>
    </div>
    <div class="checkout-progress-step {% if order.status == 'Shipped' or order.status == 'Delivered' %}is-done{% endif %}">
        <strong>3</strong>
        <span>Track delivery</span>
    </div>
</div>

<section class="success-wrap reveal">
    <div class="success-card">
        <div class="success-summary">
            <div class="success-summary-item">
                <span>Order</span>
                <strong>#{{ order.id }}</strong>
            </div>
            <div class="success-summary-item">
                <span>Payment method</span>
                <strong>{{ order.payment_method }}</strong>
            </div>
            <div class="success-summary-item">
                <span>Payment provider</span>
                <strong>{{ order.payment_provider_label }}</strong>
            </div>
            <div class="success-summary-item">
                <span>Payment status</span>
                <strong><span class="status-tag status-payment-{{ order.payment_status|lower }}">{{ order.payment_status }}</span></strong>
            </div>
            <div class="success-summary-item">
                <span>Total</span>
                <strong>Rs. {{ order.total_price|floatformat:2 }}</strong>
            </div>
            <div class="success-summary-item">
                <span>Reference</span>
                <strong>{{ order.payment_reference|default:'-' }}</strong>
            </div>
        </div>

        <div class="success-next-grid">
            <article class="success-next-card reveal">
                <strong>View order dashboard</strong>
                <p>Open the improved order detail page to track timeline, payment state, and next actions.</p>
            </article>
            <article class="success-next-card reveal">
                <strong>Manage payment if needed</strong>
                <p>If payment is still pending or failed, you can safely retry without recreating the order.</p>
            </article>
            <article class="success-next-card reveal">
                <strong>Continue browsing</strong>
                <p>Return to the upgraded storefront and keep exploring products with smarter filters and cards.</p>
            </article>
        </div>

        <div class="hero-buttons success-actions">
            {% if order.payment_status != 'Paid' %}
            <a href="{% url 'payment' order.id %}" class="btn btn-primary">Manage Payment</a>
            {% else %}
            <a href="{% url 'order_detail' order.id %}" class="btn btn-primary">View Order</a>
            {% endif %}
            <a href="{% url 'my_orders' %}" class="btn btn-secondary">View My Orders</a>
            <a href="{% url 'home' %}" class="btn btn-secondary">Go Home</a>
        </div>
    </div>
</section>
{% endblock %}