<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Receipt — {{invoiceNumber}}</title>
    <style>
        @page { margin: 22mm 18mm 18mm 18mm; }
        * { box-sizing: border-box; }
        body { font-family: DejaVu Sans, Arial, sans-serif; color: #111; font-size: 11px; }

        .school-header { text-align: center; padding-bottom: 12px; border-bottom: 2px solid {{brandPrimary}}; }
        .school-header h1 { margin: 0; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
        .school-header .motto { font-style: italic; font-size: 10px; color: #555; margin-top: 2px; }
        .school-header .meta { font-size: 9px; color: #444; margin-top: 4px; }
        .school-header .logo { max-height: 55px; margin-bottom: 4px; }

        h2.doc-title { text-align: center; font-size: 14px; margin: 16px 0 6px 0; text-transform: uppercase; letter-spacing: 2px; }
        .invoice-no { text-align: center; font-family: monospace; color: #555; font-size: 11px; margin-bottom: 14px; }

        .meta-grid { width: 100%; margin: 0 0 14px 0; border-collapse: collapse; }
        .meta-grid td { padding: 5px 8px; border: 1px solid #ddd; font-size: 10px; }
        .meta-grid .label { background: #f5f5f5; font-weight: bold; color: #333; width: 28%; }

        table.items { width: 100%; border-collapse: collapse; margin-top: 6px; }
        table.items th, table.items td { border: 1px solid #ccc; padding: 7px 8px; font-size: 10px; }
        table.items th { background: {{brandPrimary}}; color: #fff; border-bottom: 2px solid {{brandSecondary}}; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; }
        table.items td.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; }
        table.items tfoot td { font-weight: bold; background: #fafafa; }

        .payments { margin-top: 16px; }
        .payments h3 { margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #aaa; padding-bottom: 2px; }
        .payments table { width: 100%; border-collapse: collapse; font-size: 10px; }
        .payments td { padding: 4px 8px; border-bottom: 1px dashed #ddd; }
        .payments td.num { text-align: right; font-variant-numeric: tabular-nums; }

        .paid-stamp { border: 3px solid #16a34a; color: #16a34a; padding: 4px 14px; font-weight: bold; letter-spacing: 3px; display: inline-block; transform: rotate(-8deg); margin-top: 20px; text-transform: uppercase; font-size: 16px; }

        .footer { margin-top: 22px; font-size: 9px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; text-align: center; }
    </style>
</head>
<body>

<div class="school-header">
    {{#logoPath}}<img src="{{logoPath}}" class="logo" alt="logo">{{/logoPath}}
    <h1>{{schoolName}}</h1>
    {{#schoolMotto}}<div class="motto">{{schoolMotto}}</div>{{/schoolMotto}}
    <div class="meta">{{schoolMetaLine}}</div>
</div>

<h2 class="doc-title">{{docTitle}}</h2>
<div class="invoice-no">{{invoiceNumber}}</div>

<table class="meta-grid">
    <tr>
        <td class="label">Received from</td><td>{{recipientName}}</td>
        <td class="label">For</td><td>{{purposeLabel}}</td>
    </tr>
    <tr>
        <td class="label">Issued</td><td>{{issuedAt}}</td>
        <td class="label">Status</td><td style="text-transform: capitalize;"><strong>{{status}}</strong></td>
    </tr>
</table>

<table class="items">
    <thead>
    <tr>
        <th>Description</th>
        <th class="num">Amount</th>
    </tr>
    </thead>
    <tbody>
    {{#items}}
        <tr>
            <td>{{name}}</td>
            <td class="num">{{amountFmt}}</td>
        </tr>
    {{/items}}
    </tbody>
    <tfoot>
    <tr>
        <td>Total</td>
        <td class="num">{{totalAmountFmt}}</td>
    </tr>
    <tr>
        <td>Amount paid</td>
        <td class="num">{{amountPaidFmt}}</td>
    </tr>
    {{#hasBalance}}
        <tr>
            <td>Balance due</td>
            <td class="num">{{amountDueFmt}}</td>
        </tr>
    {{/hasBalance}}
    </tfoot>
</table>

{{#hasPayments}}
    <div class="payments">
        <h3>Payment history</h3>
        <table>
            {{#payments}}
            <tr>
                <td>{{paidAtOr}}</td>
                <td>{{methodUpper}}</td>
                <td>{{referenceOr}}</td>
                <td class="num">{{amountFmt}}</td>
            </tr>
            {{/payments}}
        </table>
    </div>
{{/hasPayments}}

{{#isPaid}}
    <div style="text-align: right;">
        <span class="paid-stamp">Paid</span>
    </div>
{{/isPaid}}

<div class="footer">
    This is a computer-generated receipt. For queries, contact {{footerEmail}}.
</div>

</body>
</html>
