{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Payment Status - {{ brand_name }}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/payment_status.css">
{% endblock %}
{% block content %}
<div class="container">
    <div class="card">
        <h2>{{ brand_name }}</h2>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="status-box status-{{ payment_status }}">
            {% if payment_status == 'pending' %}Waiting for Payment
            {% elif payment_status == 'initiated' %}Payment Initiated - Waiting for Confirmation
            {% elif payment_status == 'completed' %}Payment Confirmed
            {% elif payment_status == 'failed' %}Payment Failed
            {% else %}{{ payment_status|title }}{% endif %}
        </div>

        <div class="sale-details">
            <p><b>Receipt Code:</b> {{ receipt_code }}</p>
            <p><b>Amount:</b> {{ currency_symbol }} {{ "%.2f"|format(total) }}</p>
            <p><b>Method:</b> {{ payment_method|title }}</p>
            <p><b>Sale ID:</b> {{ sale_id }}</p>
        </div>

        {% if sale_items %}
        <table class="items-table">
            {% for item in sale_items %}
            <tr>
                <td>{{ item[0] }}</td>
                <td>{{ item[1] }} x {{ "%.2f"|format(item[2]) }}</td>
                <td class="hil-inline-54c2afb7ba">{{ "%.2f"|format(item[3]) }}</td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}

        {% if payment_status in ('pending', 'initiated') %}
            <p class="polling">Checking payment status...</p>
            <p class="note">Online provider confirmations update this page automatically. Manual confirmation is admin-only.</p>

            {% if can_admin_confirm %}
                <form method="POST" action="/payment-status/{{ sale_id }}/confirm" class="hil-inline-1b0f4999d2">
                    <input type="hidden" name="csrf_token" value="{{ payment_verify_csrf_token }}">
                    <button type="submit" class="btn btn-success" onclick="return confirm('Confirm that payment has been received in the admin account?');">
                        Confirm Payment Received
                    </button>
                </form>
            {% elif not manual_payment_verification_enabled %}
                <p class="note">Manual payment confirmation is deactivated by the server admin. Use provider confirmation or activate it from Server Verification Controls.</p>
            {% else %}
                <p class="note">Only an admin can manually confirm payment received. Cashiers must wait for provider confirmation or ask the admin.</p>
            {% endif %}

            <form method="POST" action="/payment-status/{{ sale_id }}/refresh" class="hil-inline-cccfa4560d">
                <button type="submit" class="btn btn-secondary">Check Now</button>
            </form>
        {% elif payment_status == 'completed' %}
            <p class="hil-inline-51e85ab8d0">Payment has been confirmed.</p>
            <a class="btn btn-primary" href="/receipt/{{ sale_id }}">Open Receipt</a>
        {% elif payment_status == 'failed' %}
            <p class="note">Payment failed. Return to checkout and try another payment method.</p>
            <a class="btn btn-primary" href="/checkout">Back to Checkout</a>
        {% endif %}

        <div class="hil-inline-86de7ac63a">
            <a class="btn btn-secondary" href="/sales">Back to Sales</a>
            <a class="btn btn-secondary" href="/transactions">Transactions</a>
        </div>
    </div>
</div>

{% if payment_status in ('pending', 'initiated') %}
<script>
(function () {
    const saleId = "{{ sale_id }}";
    const initialStatus = "{{ payment_status }}";
    const startedAt = Date.now();
    const maxWaitMs = 90000; // cap so cashier never stays stuck
    const pollEveryMs = 2000; // fast polling for legacy flows like M-Pesa

    function poll() {
        if (Date.now() - startedAt > maxWaitMs) return;
        fetch(`/api/payment-status/${saleId}`)
            .then(r => r.ok ? r.json() : null)
            .then(data => {
                if (data && data.payment_status && data.payment_status !== initialStatus) {
                    window.location.reload();
                    return;
                }
                setTimeout(poll, pollEveryMs);
            })
            .catch(() => {
                setTimeout(poll, pollEveryMs);
            });
    }

    setTimeout(poll, pollEveryMs);
})();
</script>
{% endif %}
{% endblock %}