{% extends 'base.html' %}
{% block title %}Fees — Avighna{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 style="font-weight:700;margin:0;">Fees — {{ month }}</h4>
  <form method="GET" style="display:flex;gap:6px;">
    <input class="form-control" type="month" name="month" value="{{ month }}">
    <button type="submit" class="btn-primary-main" style="padding:8px 18px;font-size:.85rem;">Go</button>
  </form>
</div>

<div class="row mb-4">
  <div class="col-md-6">
    <div class="card" style="padding:18px;text-align:center;">
      <div style="font-size:1.7rem;font-weight:800;color:#1a7a4a;">₹{{ total_collected }}</div>
      <div style="color:#888;font-size:.85rem;">Collected this month</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card" style="padding:18px;text-align:center;">
      <div style="font-size:1.7rem;font-weight:800;color:#c0392b;">₹{{ total_pending }}</div>
      <div style="color:#888;font-size:.85rem;">Pending this month</div>
    </div>
  </div>
</div>

<div class="card">
  <div style="overflow-x:auto;">
    <table class="table table-hover mb-0">
      <thead>
        <tr><th>Student</th><th>Class</th><th>Amount</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td>{{ row.student.name }}</td>
          <td>{{ row.student.batch_or_class|default:"—" }}</td>
          <td>₹{{ row.amount }}</td>
          <td>
            {% if row.paid %}
              <span style="color:#1a7a4a;font-weight:600;">✅ Paid</span>
            {% else %}
              <span style="color:#d62828;font-weight:600;">⏳ Pending</span>
            {% endif %}
          </td>
          <td>
            {% if not row.paid %}
            <form method="POST" action="/fees/{{ row.student.id }}/mark-paid/" style="display:flex;gap:4px;">
              {% csrf_token %}
              <input type="hidden" name="month" value="{{ month }}">
              <input type="hidden" name="amount" value="{{ row.amount }}">
              <button type="submit" style="font-size:.78rem;padding:4px 12px;border-radius:16px;border:1.5px solid #1a7a4a;color:#1a7a4a;background:#fff;cursor:pointer;">Mark Paid</button>
            </form>
            {% else %}
              <a href="/students/{{ row.student.id }}/" style="font-size:.8rem;">View</a>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted py-5">No active students yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}