<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Fee Invoices — <?= htmlspecialchars($label) ?></title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;font-size:11px;color:#1e293b;background:#f1f5f9;padding:12px}
.page{background:#fff;max-width:960px;margin:0 auto;border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12)}

/* ── Letterhead ── */
.lh{background:linear-gradient(135deg,#1a7f5a,#145f44);color:#fff;padding:16px 24px;display:flex;align-items:center;gap:16px}
.lh-logo{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.5);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);font-size:26px;font-weight:800}
.lh-logo img{width:64px;height:64px;object-fit:contain;border-radius:50%}
.lh-info{flex:1;text-align:center}
.lh-info h1{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.lh-info .sub{font-size:10px;opacity:.85;line-height:1.7}
.lh-badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 16px;text-align:center;flex-shrink:0;min-width:130px}
.lh-badge h2{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.lh-badge p{font-size:10px;opacity:.75;margin-top:3px}

/* ── Filter bar ── */
.filter-bar{background:#f8fafc;border-bottom:2px solid #1a7f5a;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.filter-bar .fl{font-size:12px;font-weight:700;color:#1a7f5a}
.filter-bar .fr{font-size:11px;color:#64748b}

/* ── Summary strip ── */
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e2e8f0}
.ss-item{padding:10px 16px;text-align:center;border-right:1px solid #e2e8f0}
.ss-item:last-child{border-right:none}
.ss-item .val{font-size:18px;font-weight:800}
.ss-item .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin-top:2px}

/* ── Table ── */
table{width:100%;border-collapse:collapse;font-size:11px}
thead tr{background:#1a7f5a;color:#fff}
th{padding:8px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tr:nth-child(even) td{background:#f8fafc}
tr:hover td{background:#f0fdf4}
.asmt{font-family:monospace;font-size:10px;font-weight:600;color:#1a7f5a;background:#f0fdf4;padding:1px 5px;border-radius:3px}
.name-cell .n{font-weight:600}
.name-cell .s{font-size:10px;color:#94a3b8;margin-top:1px}
.stream-tag{font-size:10px;color:#64748b;background:#f1f5f9;padding:1px 5px;border-radius:3px;white-space:nowrap}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}
.b-paid{background:#d1fae5;color:#065f46}
.b-partial{background:#fef3c7;color:#92400e}
.b-unpaid{background:#fee2e2;color:#991b1b}
.amt{font-weight:600;white-space:nowrap}
.bal-due{font-weight:700;color:#dc2626}
.bal-ok{font-weight:700;color:#16a34a}

/* ── Totals row ── */
tfoot tr td{background:#f0fdf4;font-weight:700;border-top:2px solid #1a7f5a;padding:8px 10px}

/* ── Signatures ── */
.sig-section{padding:16px 24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;border-top:1px solid #e2e8f0}
.sig-line{border-top:1px solid #94a3b8;padding-top:4px;font-size:10px;color:#64748b;text-align:center;margin-top:28px}

/* ── Footer ── */
.pg-footer{padding:10px 20px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;font-size:10px;color:#94a3b8}

/* ── Print bar ── */
.print-bar{max-width:960px;margin:0 auto 10px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.print-bar select,.print-bar input{padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:7px;font-size:12px;background:#fff}
.print-bar button,.print-bar a{padding:8px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-print{background:#1a7f5a;color:#fff}
.btn-close{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}

@media print{
  body{background:#fff;padding:0}
  .print-bar{display:none}
  .page{box-shadow:none;border-radius:0;max-width:100%}
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
}
</style>
</head>
<body>

<!-- ── Print / Filter Bar ── -->
<div class="print-bar">
  <form method="GET" action="" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
    <select name="term_id" onchange="this.form.submit()">
      <option value="">All Terms</option>
      <?php foreach($terms as $t): ?>
      <option value="<?= $t['id'] ?>" <?= ($filters['term_id']??'')==$t['id']?'selected':'' ?>><?= htmlspecialchars($t['year_name'].' '.$t['name']) ?></option>
      <?php endforeach; ?>
    </select>
    <select name="class_id" onchange="this.form.submit()">
      <option value="">All Classes</option>
      <?php foreach($classes as $c): ?>
      <option value="<?= $c['id'] ?>" <?= ($filters['class_id']??'')==$c['id']?'selected':'' ?>><?= htmlspecialchars($c['name']) ?></option>
      <?php endforeach; ?>
    </select>
    <select name="status" onchange="this.form.submit()">
      <option value="">All Status</option>
      <option value="unpaid"  <?= ($filters['status']??'')==='unpaid'?'selected':'' ?>>Unpaid</option>
      <option value="partial" <?= ($filters['status']??'')==='partial'?'selected':'' ?>>Partial</option>
      <option value="paid"    <?= ($filters['status']??'')==='paid'?'selected':'' ?>>Paid</option>
    </select>
    <input type="text" name="search" value="<?= htmlspecialchars($filters['search']??'') ?>" placeholder="Search student..." style="width:160px">
    <button type="submit" style="background:#2563eb;color:#fff;padding:7px 14px;border-radius:7px;border:none;cursor:pointer;font-size:12px">🔍 Filter</button>
  </form>
  <button onclick="window.print()" class="btn-print">🖨️ Print / Save PDF</button>
  <a href="javascript:history.back()" class="btn-close">✕ Close</a>
</div>

<div class="page">

  <!-- ── Letterhead ── -->
  <div class="lh">
    <div class="lh-logo">
      <?php if(!empty($school['logo'])): ?>
        <img src="<?= \Core\View::url('storage/uploads/logos/'.$school['logo']) ?>">
      <?php else: ?>
        <?= strtoupper(substr($school['name']??'E',0,1)) ?>
      <?php endif; ?>
    </div>
    <div class="lh-info">
      <h1><?= htmlspecialchars($school['name'] ?? 'EduSmart School') ?></h1>
      <div class="sub">
        <?php if($school['address']??''): ?><?= htmlspecialchars($school['address']) ?><br><?php endif; ?>
        <?php if($school['phone']??''): ?>Tel: <?= htmlspecialchars($school['phone']) ?><?php endif; ?>
        <?php if($school['email']??''): ?> &nbsp;|&nbsp; <?= htmlspecialchars($school['email']) ?><?php endif; ?>
        <?php if($school['motto']??''): ?><br><em>"<?= htmlspecialchars($school['motto']) ?>"</em><?php endif; ?>
      </div>
    </div>
    <div class="lh-badge">
      <h2>Fee Invoices</h2>
      <p><?= htmlspecialchars($label) ?></p>
      <p><?= date('d F Y') ?></p>
    </div>
  </div>

  <!-- ── Filter label ── -->
  <div class="filter-bar">
    <span class="fl">💰 <?= htmlspecialchars($label) ?></span>
    <span class="fr">Generated: <?= date('d M Y, H:i') ?> &nbsp;|&nbsp; Records: <strong><?= count($invoices['data']) ?></strong></span>
  </div>

  <!-- ── Summary strip ── -->
  <?php
  $totalExp  = (float)($summary['expected']  ?? 0);
  $totalColl = (float)($summary['collected'] ?? 0);
  $totalOut  = $totalExp - $totalColl;
  $rate      = $totalExp > 0 ? round($totalColl/$totalExp*100,1) : 0;
  ?>
  <div class="summary-strip">
    <div class="ss-item">
      <div class="val" style="color:#2563eb">KES <?= number_format($totalExp) ?></div>
      <div class="lbl">Total Expected</div>
    </div>
    <div class="ss-item">
      <div class="val" style="color:#16a34a">KES <?= number_format($totalColl) ?></div>
      <div class="lbl">Collected (<?= $rate ?>%)</div>
    </div>
    <div class="ss-item">
      <div class="val" style="color:#dc2626">KES <?= number_format($totalOut) ?></div>
      <div class="lbl">Outstanding</div>
    </div>
    <div class="ss-item">
      <div class="val"><?= $summary['total_invoices'] ?? count($invoices['data']) ?></div>
      <div class="lbl">Total Invoices</div>
    </div>
  </div>

  <!-- ── Invoices Table ── -->
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Assessment No</th>
        <th>Student Name</th>
        <th>Class / Stream</th>
        <th>Term</th>
        <th>Invoice (KES)</th>
        <th>Opening Bal</th>
        <th>Paid (KES)</th>
        <th>Balance (KES)</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <?php if(empty($invoices['data'])): ?>
      <tr><td colspan="10" style="text-align:center;padding:40px;color:#94a3b8">No invoices found for the selected filters.</td></tr>
      <?php else: ?>
      <?php
      $grandInv  = 0; $grandPaid = 0; $grandBal = 0;
      foreach($invoices['data'] as $i => $inv):
        $bal = (float)$inv['outstanding'];
        $grandInv  += (float)$inv['total_amount'];
        $grandPaid += (float)$inv['amount_paid'];
        $grandBal  += $bal;
      ?>
      <tr>
        <td style="color:#94a3b8;font-size:10px"><?= $i+1 ?></td>
        <td><span class="asmt"><?= htmlspecialchars($inv['assessment_no']) ?></span></td>
        <td class="name-cell">
          <div class="n"><?= htmlspecialchars($inv['student_name']) ?></div>
          <div class="s"><?= htmlspecialchars(($inv['class_name']??'').' '.($inv['stream_name']??'')) ?></div>
        </td>
        <td><span class="stream-tag"><?= htmlspecialchars(($inv['class_name']??'').' '.($inv['stream_name']??'')) ?></span></td>
        <td style="font-size:10px;color:#64748b;white-space:nowrap"><?= htmlspecialchars($inv['term_name']) ?></td>
        <td class="amt"><?= number_format($inv['total_amount'],2) ?></td>
        <td style="font-size:10px;color:<?= ($inv['opening_balance']??0)>0?'#dc2626':'#94a3b8' ?>">
          <?= ($inv['opening_balance']??0)>0 ? number_format($inv['opening_balance'],2) : '—' ?>
        </td>
        <td class="amt" style="color:#16a34a"><?= number_format($inv['amount_paid'],2) ?></td>
        <td class="<?= $bal>0?'bal-due':'bal-ok' ?>"><?= number_format($bal,2) ?></td>
        <td>
          <span class="badge <?= $inv['status']==='paid'?'b-paid':($inv['status']==='partial'?'b-partial':'b-unpaid') ?>">
            <?= ucfirst($inv['status']) ?>
          </span>
        </td>
      </tr>
      <?php endforeach; ?>
      <?php endif; ?>
    </tbody>
    <?php if(!empty($invoices['data'])): ?>
    <tfoot>
      <tr>
        <td colspan="5" style="text-align:right">TOTALS</td>
        <td><?= number_format($grandInv,2) ?></td>
        <td>—</td>
        <td style="color:#16a34a"><?= number_format($grandPaid,2) ?></td>
        <td style="color:#dc2626"><?= number_format($grandBal,2) ?></td>
        <td>—</td>
      </tr>
    </tfoot>
    <?php endif; ?>
  </table>

  <!-- ── Signatures ── -->
  <div class="sig-section">
    <div>
      <div style="font-size:10px;color:#64748b;margin-bottom:2px">Prepared by:</div>
      <div class="sig-line">Finance Officer</div>
    </div>
    <div>
      <div style="font-size:10px;color:#64748b;margin-bottom:2px">Verified by:</div>
      <div class="sig-line">Deputy Principal</div>
    </div>
    <div>
      <div style="font-size:10px;color:#64748b;margin-bottom:2px">Approved by:</div>
      <div class="sig-line">Principal &amp; School Stamp</div>
    </div>
  </div>

  <!-- ── Page Footer ── -->
  <div class="pg-footer">
    <span><?= htmlspecialchars($school['name']??'EduSmart') ?> &mdash; Official Fee Invoices Register</span>
    <span>Printed: <?= date('d F Y, H:i:s') ?></span>
  </div>

</div>
</body>
</html>
