<div class="breadcrumbs"><a href="/fees">Fees &amp; Payments</a> <span class="sep">/</span> Record Payment</div>
<div class="page-header"><div><h1>Record a Payment</h1><p class="desc">Log a new fee due or a payment already collected.</p></div></div>

<div class="card card-pad" style="max-width:640px;">
  <form method="POST" action="/fees">
    <div class="form-grid">
      <div class="form-group full">
        <label>Student *</label>
        <select name="student_id" required>
          <option value="">Select a student…</option>
          <% students.forEach(function(s) { %>
            <option value="<%= s.id %>"><%= s.name %> (<%= s.admission_no %>)</option>
          <% }); %>
        </select>
      </div>
      <div class="form-group"><label>Amount Due ($) *</label><input type="number" step="0.01" name="amount_due" required placeholder="450.00"></div>
      <div class="form-group">
        <label>Method</label>
        <select name="method">
          <option value="cash">Cash</option>
          <option value="card">Card</option>
          <option value="bank transfer">Bank Transfer</option>
          <option value="online">Online</option>
        </select>
      </div>
      <div class="form-group full">
        <label>Status</label>
        <select name="status">
          <option value="pending">Pending</option>
          <option value="paid">Paid (collected now)</option>
          <option value="overdue">Overdue</option>
        </select>
      </div>
    </div>
    <div class="form-actions">
      <a href="/fees" class="btn btn-outline">Cancel</a>
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Save Record</button>
    </div>
  </form>
</div>
