{% extends "core/base.html" %}
{% load static %}
{% load currency_filters %}

{% block title %}{{ page_title }}{% endblock %}
{% block topbar_title %}Confirm Manual Payment{% endblock %}

{% block extra_css %}
<style>
.confirm-wrap { max-width: 600px; margin: 0 auto; padding: 2rem 1rem; }
.confirm-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #e2e8f0; padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.info-row {
    display: flex; justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px dashed #e2e8f0;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: #64748b; font-size: 0.9rem; }
.info-val { color: #0f172a; font-weight: 600; font-size: 0.95rem; text-align: right; }
.btn-confirm {
    width: 100%; padding: 1rem; margin-top: 1.5rem;
    background: #059669; color: #fff; font-weight: bold;
    border: none; border-radius: 12px; cursor: pointer;
    transition: background 0.2s;
}
.btn-confirm:hover { background: #047857; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="confirm-wrap">
        
        <div class="d-flex align-items-center gap-2 mb-3">
            <a href="{% url 'admin:subscriptions_paymenttransaction_changelist' %}" class="btn btn-sm btn-outline-secondary rounded-pill">
                <i class="fas fa-arrow-left"></i> Back to Transactions
            </a>
        </div>

        <div class="confirm-card">
            <div class="text-center mb-4">
                <i class="fas fa-university text-primary" style="font-size: 2.5rem; color: #0ea5e9;"></i>
                <h3 class="mt-3 fw-bold">Confirm Manual Payment</h3>
                <p class="text-muted">You are about to manually activate a subscription.</p>
            </div>

            <div class="info-row">
                <div class="info-label">Company</div>
                <div class="info-val">{{ txn.company.name }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Plan</div>
                <div class="info-val">{{ txn.plan.name }} ({{ txn.billing_cycle|title }})</div>
            </div>
            <div class="info-row">
                <div class="info-label">Amount</div>
                <div class="info-val" style="color: #7c3aed;">₦{{ txn.final_amount|currency:2 }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Transaction Ref</div>
                <div class="info-val">{{ txn.payment_reference }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Date Initiated</div>
                <div class="info-val">{{ txn.created_at|date:"d M Y, h:i A" }}</div>
            </div>

            <div class="alert alert-warning mt-4 mb-0" style="font-size: 0.85rem;">
                <i class="fas fa-exclamation-triangle me-1"></i> <strong>Note:</strong> By confirming this, you acknowledge that you have received the exact amount of ₦{{ txn.final_amount|currency:2 }} in your bank account.
            </div>

            <form method="post" onsubmit="return confirm('Are you sure you want to mark this as paid and activate the subscription?');">
                {% csrf_token %}
                <button type="submit" class="btn-confirm">
                    <i class="fas fa-check-circle me-1"></i> Confirm Payment & Activate Subscription
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}