<div class="page-header">
  <div>
    <div class="eyebrow">Finance</div>
    <h1>Fees &amp; Payments</h1>
    <p class="desc">Track collections, dues and overdue payments.</p>
  </div>
  <a href="/fees/new" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Record Payment</a>
</div>

<div class="stat-grid" style="grid-template-columns: repeat(3, 1fr);">
  <div class="stat-card accent-green">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-circle-check"></i></div>
    <div class="value">$<%= (totals.collected || 0).toLocaleString() %></div>
    <div class="label">Total Collected</div>
  </div>
  <div class="stat-card accent-amber">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-hourglass-half"></i></div>
    <div class="value">$<%= (totals.pending || 0).toLocaleString() %></div>
    <div class="label">Pending</div>
  </div>
  <div class="stat-card accent-red">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-triangle-exclamation"></i></div>
    <div class="value">$<%= (totals.overdue || 0).toLocaleString() %></div>
    <div class="label">Overdue</div>
  </div>
</div>

<div class="card">
  <div class="card-body" style="padding-bottom:0;">
    <form class="filter-bar" method="GET" action="/fees">
      <select name="status" onchange="this.form.submit()">
        <option value="">All Status</option>
        <option value="paid" <%= status === 'paid' ? 'selected' : '' %>>Paid</option>
        <option value="pending" <%= status === 'pending' ? 'selected' : '' %>>Pending</option>
        <option value="overdue" <%= status === 'overdue' ? 'selected' : '' %>>Overdue</option>
      </select>
    </form>
  </div>
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>Student</th><th>Class</th><th>Amount Due</th><th>Amount Paid</th><th>Method</th><th>Payment Date</th><th>Status</th><th></th></tr></thead>
      <tbody>
        <% if (payments.length === 0) { %><tr><td colspan="8"><div class="empty-state"><i class="fa-solid fa-sack-dollar"></i><h4>No payment records found</h4></div></td></tr><% } %>
        <% payments.forEach(function(p) { %>
          <tr>
            <td>
              <div class="row-title"><%= p.student_name || 'Unknown' %></div>
              <div class="id-code"><%= p.admission_no %></div>
            </td>
            <td><%= p.class_name ? p.class_name + ' ' + p.class_section : '—' %></td>
            <td>$<%= p.amount_due.toLocaleString() %></td>
            <td>$<%= p.amount_paid.toLocaleString() %></td>
            <td style="text-transform:capitalize;"><%= p.method %></td>
            <td><%= p.payment_date ? new Date(p.payment_date).toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) : '—' %></td>
            <td><span class="badge <%= p.status === 'paid' ? 'badge-green' : p.status === 'overdue' ? 'badge-red' : 'badge-amber' %>"><%= p.status %></span></td>
            <td>
              <% if (p.status !== 'paid') { %>
                <form method="POST" action="/fees/<%= p.id %>/collect">
                  <button class="btn btn-success btn-sm" type="submit"><i class="fa-solid fa-check"></i> Collect</button>
                </form>
              <% } else { %>
                <span class="id-code"><%= p.receipt_no %></span>
              <% } %>
            </td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>
