{% extends 'base.html' %}
{% load static %}
{% block title %}Payment {{ payment.payment_number }}{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Payment {{ payment.payment_number }}</h1>
            <p class="text-muted">{{ payment.student.get_full_name }} &bull; {{ payment.payment_date|date:"d M Y" }}</p>
        </div>
        <div class="btn-group">
            <a href="{% url 'finance:payment_list' %}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
            <a href="{% url 'finance:invoice_detail' payment.invoice.pk %}" class="btn btn-outline-primary"><i class="fas fa-file-invoice me-2"></i>View Invoice</a>
            <a href="{% url 'finance:generate_receipt' payment.pk %}" class="btn btn-success"><i class="fas fa-receipt me-2"></i>Print Receipt</a>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-7">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Payment Receipt</h6>
                    <span class="badge bg-{% if payment.status == 'completed' %}success{% elif payment.status == 'pending' %}warning{% else %}danger{% endif %} fs-6">{{ payment.get_status_display }}</span>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-6">
                            <p class="text-muted small mb-0">From</p>
                            <p class="fw-bold">{{ payment.student.get_full_name }}</p>
                            <p class="text-muted small">{{ payment.student.student_id }}</p>
                        </div>
                        <div class="col-6 text-end">
                            <p class="text-muted small mb-0">Payment #</p>
                            <p class="fw-bold">{{ payment.payment_number }}</p>
                            {% if payment.receipt_number %}<p class="text-muted small">Receipt: {{ payment.receipt_number }}</p>{% endif %}
                        </div>
                    </div>
                    <hr>
                    <table class="table table-borderless">
                        <tr><td class="text-muted fw-bold" width="40%">Invoice</td><td>{{ payment.invoice.invoice_number }}</td></tr>
                        <tr><td class="text-muted fw-bold">Amount</td><td class="text-success fw-bold fs-5">{{ payment.amount|floatformat:0 }} XAF</td></tr>
                        <tr><td class="text-muted fw-bold">Payment Method</td><td>{{ payment.get_payment_method_display }}</td></tr>
                        <tr><td class="text-muted fw-bold">Payment Date</td><td>{{ payment.payment_date|date:"l, d F Y" }}</td></tr>
                        {% if payment.transaction_id %}<tr><td class="text-muted fw-bold">Transaction ID</td><td>{{ payment.transaction_id }}</td></tr>{% endif %}
                        {% if payment.mobile_money_number %}<tr><td class="text-muted fw-bold">Mobile Money</td><td>{{ payment.get_mobile_money_provider_display }} — {{ payment.mobile_money_number }}</td></tr>{% endif %}
                        {% if payment.bank_name %}<tr><td class="text-muted fw-bold">Bank</td><td>{{ payment.bank_name }}{% if payment.cheque_number %} (Cheque: {{ payment.cheque_number }}){% endif %}</td></tr>{% endif %}
                        <tr><td class="text-muted fw-bold">Received By</td><td>{{ payment.received_by.get_full_name|default:"—" }}</td></tr>
                        <tr><td class="text-muted fw-bold">Receipt Issued</td><td>{% if payment.receipt_issued %}<span class="badge bg-success">Yes — {{ payment.receipt_issued_date|date:"d M Y" }}</span>{% else %}<span class="badge bg-secondary">No</span>{% endif %}</td></tr>
                        {% if payment.notes %}<tr><td class="text-muted fw-bold">Notes</td><td>{{ payment.notes }}</td></tr>{% endif %}
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}