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

        .school-header { text-align: center; padding-bottom: 10px; 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: 13px; margin: 12px 0 4px 0; text-transform: uppercase; letter-spacing: 2px; }
        .window { text-align: center; color: #555; font-size: 10px; margin-bottom: 14px; }

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

        section.term-section { margin-top: 14px; page-break-inside: avoid; }
        section.term-section h3 { margin: 0 0 4px 0; font-size: 11px; border-bottom: 1px solid #aaa; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }

        table.items { width: 100%; border-collapse: collapse; margin-top: 4px; }
        table.items th, table.items td { border: 1px solid #ccc; padding: 5px 6px; font-size: 9px; }
        table.items th { background: {{brandPrimary}}; color: #fff; border-bottom: 2px solid {{brandSecondary}}; text-transform: uppercase; font-size: 8px; letter-spacing: 0.5px; }
        table.items td.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; }
        table.items tr.paid td { color: #16a34a; }
        table.items tr.partial td { color: #a46a1f; }
        table.items tr.pending td { color: #b45309; }
        table.items tr.cancelled td { color: #999; text-decoration: line-through; }

        .term-totals { margin-top: 4px; background: #fafafa; padding: 6px 8px; font-size: 10px; border: 1px solid #eee; }
        .term-totals span { margin-right: 18px; }

        .grand-totals { margin-top: 18px; background: {{brandPrimary}}; color: #fff; padding: 10px 14px; font-size: 11px; display: table; width: 100%; }
        .grand-totals .label { font-size: 9px; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; display: block; margin-bottom: 2px; }
        .grand-totals .v { font-size: 14px; font-weight: bold; font-variant-numeric: tabular-nums; }
        .grand-totals .cell { display: table-cell; width: 33%; text-align: center; }

        .footer { margin-top: 18px; 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="window">{{windowLabel}} · issued {{issuedAt}}</div>

<table class="student">
    <tr>
        <td class="label">Student</td><td>{{student.name}}</td>
        <td class="label">Reg No.</td><td>{{student.admission_number}}</td>
    </tr>
    <tr>
        <td class="label">Class</td><td>{{student.klassOr}}</td>
        <td class="label">Email</td><td>{{student.emailOr}}</td>
    </tr>
</table>

{{#sections}}
    <section class="term-section">
        <h3>{{term}}{{#session}} · {{session}}{{/session}}</h3>
        <table class="items">
            <thead>
            <tr>
                <th>Fee</th>
                <th>Type</th>
                <th class="num">Original</th>
                <th class="num">Discount</th>
                <th class="num">Scholarship</th>
                <th class="num">Due</th>
                <th class="num">Paid</th>
                <th class="num">Balance</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody>
            {{#items}}
                <tr class="{{status}}">
                    <td>{{fee_name}}</td>
                    <td>{{feeTypeOr}}</td>
                    <td class="num">{{originalFmt}}</td>
                    <td class="num">{{discountCell}}</td>
                    <td class="num">{{scholarshipCell}}</td>
                    <td class="num">{{dueFmt}}</td>
                    <td class="num">{{paidFmt}}</td>
                    <td class="num"><strong>{{balanceFmt}}</strong></td>
                    <td style="text-transform: capitalize;">{{status}}</td>
                </tr>
            {{/items}}
            </tbody>
        </table>
        <div class="term-totals">
            <span>Term due: <strong>{{totalDueFmt}}</strong></span>
            <span>Paid: <strong>{{totalPaidFmt}}</strong></span>
            <span>Balance: <strong>{{totalBalanceFmt}}</strong></span>
        </div>
    </section>
{{/sections}}
{{^sections}}
    <p style="text-align: center; color: #999; padding: 20px;">No billed items in this window.</p>
{{/sections}}

<div class="grand-totals">
    <div class="cell"><span class="label">Grand total due</span><span class="v">{{grandTotalDueFmt}}</span></div>
    <div class="cell"><span class="label">Paid</span><span class="v">{{grandTotalPaidFmt}}</span></div>
    <div class="cell"><span class="label">Outstanding</span><span class="v">{{grandTotalBalanceFmt}}</span></div>
</div>

<div class="footer">
    Generated by EduSol. For queries, contact {{footerEmail}}.
</div>

</body>
</html>
