{% extends 'base.html' %}
{% load static %}

{% block title %}Receipt {{ payment.receipt_number|default:payment.payment_number }}{% endblock %}

{% block extra_css %}
<style>
/* ── Screen wrapper ─────────────────────────────────────────── */
.receipt-actions {
    max-width: 680px;
    margin: 0 auto 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Receipt card ───────────────────────────────────────────── */
.receipt-wrapper {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #333;
    padding: 24px 28px 20px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #000;
}

/* Header */
.receipt-header {
    text-align: center;
    margin-bottom: 10px;
}
.receipt-school-name {
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #000;
    border-radius: 24px;
    display: inline-block;
    padding: 4px 18px;
    margin-bottom: 2px;
}
.receipt-school-sub {
    font-size: 12px;
    margin-top: 2px;
}

/* Meta row */
.receipt-meta {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 4px;
    border-top: 1px solid #333;
    padding-top: 8px;
    font-weight: bold;
    font-size: 13px;
}
.receipt-name-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 13px;
}
.receipt-name-row .field {
    flex: 1;
    border-bottom: 1px dotted #555;
}
.receipt-name-row .label-class {
    white-space: nowrap;
}

/* Fee table */
.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}
.receipt-table td {
    border: 1px solid #333;
    padding: 3px 7px;
    font-size: 12.5px;
    vertical-align: middle;
}
.receipt-table .col-fr   { width: 34%; }
.receipt-table .col-div  { width: 4%; text-align: center; font-weight: bold; }
.receipt-table .col-en   { width: 34%; }
.receipt-table .col-amt  { width: 28%; text-align: right; font-weight: bold; }

.receipt-table tr.total-row td {
    font-weight: 900;
    background: #f0f0f0;
    font-size: 13px;
}

/* Amount in words */
.receipt-words {
    margin: 8px 0;
    font-size: 12.5px;
}
.receipt-words span {
    font-weight: bold;
    border-bottom: 1px dotted #555;
    display: inline;
}

/* Balance */
.receipt-balance {
    font-size: 12.5px;
    font-weight: bold;
    color: {% if payment.invoice.balance > 0 %}#c0392b{% else %}#27ae60{% endif %};
    margin-bottom: 8px;
}

/* Footer */
.receipt-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 14px;
    border-top: 1px solid #333;
    padding-top: 10px;
}
.receipt-sig-block { text-align: center; }
.receipt-sig-line {
    border-bottom: 1px solid #333;
    min-width: 160px;
    height: 36px;
    margin-bottom: 2px;
}
.receipt-sig-label { font-size: 11px; color: #444; }

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    body * { visibility: hidden; }
    .receipt-wrapper, .receipt-wrapper * { visibility: visible; }
    .receipt-wrapper {
        position: fixed; top: 0; left: 0;
        width: 100%; border: none; padding: 12px;
        font-size: 12px;
    }
    .receipt-actions { display: none !important; }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">

    <!-- Action Buttons (hidden on print) -->
    <div class="receipt-actions no-print">
        <button onclick="window.print()" class="btn btn-primary">
            <i class="fas fa-print me-2"></i>Print Receipt
        </button>
        <a href="{% url 'finance:payment_detail' payment.pk %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Payment
        </a>
        <a href="{% url 'finance:invoice_detail' payment.invoice.pk %}" class="btn btn-outline-info">
            <i class="fas fa-file-invoice me-2"></i>View Invoice
        </a>
        {% if payment.invoice.balance > 0 %}
        <a href="{% url 'finance:payment_add' %}?invoice={{ payment.invoice.pk }}" class="btn btn-outline-success">
            <i class="fas fa-money-bill me-2"></i>Record Next Payment
        </a>
        {% endif %}
    </div>

    <!-- ══ RECEIPT ══════════════════════════════════════════════ -->
    <div class="receipt-wrapper" id="receipt">

        <!-- School Header -->
        <div class="receipt-header">
            <div class="receipt-school-name">RAPHA-BETHEL BILINGUAL SCHOOL-BESSENGUE</div>
            <div class="receipt-school-sub">
                B.P.........Douala &nbsp;—&nbsp; Tél: 670 17 79 79 / 698 97 88 84
            </div>
        </div>

        <!-- Receipt # and Date -->
        <div class="receipt-meta">
            <div>
                CASH RECEIPT / Reçu N°&nbsp;
                <span style="border-bottom:1px dotted #555; min-width:80px; display:inline-block;">
                    {{ payment.receipt_number|default:payment.payment_number }}
                </span>
            </div>
            <div>
                Date &nbsp;
                <span style="border-bottom:1px dotted #555; min-width:90px; display:inline-block;">
                    {{ payment.payment_date|date:"d/m/Y" }}
                </span>
            </div>
        </div>

        <!-- Name & Class -->
        <div class="receipt-name-row">
            <span>Name / Nom :</span>
            <span class="field">{{ payment.student.get_full_name }}</span>
            <span class="label-class">Class / Classe :</span>
            <span style="border-bottom:1px dotted #555; min-width:60px; display:inline-block;">
                {{ payment.student.current_class|default:"—" }}
            </span>
        </div>

        <!-- Fee Line Items -->
        <table class="receipt-table">
            <tbody>
                {% for item in items %}
                <tr>
                    <td class="col-fr">{{ item.description_fr|default:item.description }}</td>
                    <td class="col-div">/</td>
                    <td class="col-en">{{ item.description }}</td>
                    <td class="col-amt">
                        {% if item.total %}{{ item.total|floatformat:0 }}{% endif %}
                    </td>
                </tr>
                {% empty %}
                {# Fall back to the standard fee rows mirroring the physical receipt #}
                <tr><td class="col-fr">Inscription</td><td class="col-div">/</td><td class="col-en">Registration</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Pension</td><td class="col-div">/</td><td class="col-en">Tuition</td><td class="col-amt">{{ payment.amount|floatformat:0 }}</td></tr>
                <tr><td class="col-fr">Pack scolaire</td><td class="col-div">/</td><td class="col-en">Nursery supplies</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Cantine</td><td class="col-div">/</td><td class="col-en">Canteen</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Transport</td><td class="col-div">/</td><td class="col-en">Transport</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Uniforme</td><td class="col-div">/</td><td class="col-en">Uniforms</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Tenue de sport</td><td class="col-div">/</td><td class="col-en">Sports wear</td><td class="col-amt"></td></tr>
                <tr><td class="col-fr">Fournitures scolaires</td><td class="col-div">/</td><td class="col-en">School supplies</td><td class="col-amt"></td></tr>
                {% endfor %}

                <!-- Total row -->
                <tr class="total-row">
                    <td class="col-fr">Montant total reçu</td>
                    <td class="col-div">/</td>
                    <td class="col-en">Total amount received</td>
                    <td class="col-amt">{{ payment.amount|floatformat:0 }} XAF</td>
                </tr>
            </tbody>
        </table>

        <!-- Amount in words -->
        <div class="receipt-words">
            Amount in words / <em>Montant en lettres</em> :&nbsp;
            <span>{{ amount_in_words }}</span>
        </div>

        <!-- Balance remaining -->
        <div class="receipt-balance">
            {% if payment.invoice.balance > 0 %}
                Reste / Balance due: {{ payment.invoice.balance|floatformat:0 }} XAF
            {% else %}
                ✓ Fully paid / Compte soldé
            {% endif %}
        </div>

        <!-- Footer: Received by + Signature -->
        <div class="receipt-footer">
            <div class="receipt-sig-block">
                <div class="receipt-sig-line">{{ payment.received_by.get_full_name|default:"" }}</div>
                <div class="receipt-sig-label">Received by / <em>Reçu par</em></div>
            </div>
            <div class="receipt-sig-block" style="text-align:right;">
                <div class="receipt-sig-line"></div>
                <div class="receipt-sig-label">Sign / <em>Signature</em></div>
            </div>
        </div>

    </div><!-- /receipt-wrapper -->
</div>
{% endblock %}