{% extends "base.html" %}
{% block title %}My Savings{% endblock %}
{% block content %}
<h1>My Savings</h1>
<p class="muted">{{ org.name }} · {{ org.org_type }}</p>

{% if org.bank_name %}
<div class="bankbox" style="margin-top:14px">
  💳 <strong>Pay directly into this designated account</strong> (do not pay cash to anyone):<br>
  <strong>{{ org.bank_name }} — {{ org.account_number }} — {{ org.account_name }}</strong>
</div>
{% endif %}

<div class="cards" style="margin-top:14px">
  <div class="stat"><div class="label">Verified savings (approved)</div><div class="value">₦{{ totals.approved | number_format }}</div></div>
  <div class="stat pending"><div class="label">Awaiting approval</div><div class="value">₦{{ totals.pending | number_format }}</div></div>
</div>

<h2>🧾 Record a payment you made</h2>
<div class="card">
  <p class="muted" style="margin-bottom:10px">Enter the transfer you made into the designated account. It will show as <span class="badge pending">pending</span> until an admin verifies and approves it — only then does it count in your savings.</p>
  <form method="post" action="{{ url_for('member_pay') }}" class="inline">
    <div class="field"><label>Amount (₦)</label><input type="number" step="0.01" name="amount" required></div>
    <div class="field"><label>Payment date</label><input type="date" name="payment_date" required></div>
    <div class="field"><label>Bank / transfer reference</label><input name="reference" placeholder="e.g. TRF-2044"></div>
    <div class="field"><label>Note (optional)</label><input name="note" placeholder="e.g. October savings"></div>
    <button type="submit">Submit for approval</button>
  </form>
</div>

<h2>📋 Your dues</h2>
<div class="card" style="overflow-x:auto">
  <table>
    <tr><th>Title</th><th>Amount</th><th>Due date</th></tr>
    {% for d in dues %}
    <tr><td>{{ d.title }}</td><td>₦{{ d.amount | number_format }}</td><td>{{ d.due_date or '—' }}</td></tr>
    {% else %}
    <tr><td colspan="3" class="muted">No open dues. 🎉</td></tr>
    {% endfor %}
  </table>
</div>

<h2>📒 My transaction history</h2>
<div class="card" style="overflow-x:auto">
  <table>
    <tr><th>Submitted</th><th>Amount</th><th>Pay date</th><th>Reference</th><th>Status</th><th>Admin note</th></tr>
    {% for p in payments %}
    <tr>
      <td>{{ p.created_at[:16].replace('T',' ') }}</td>
      <td>₦{{ p.amount | number_format }}</td>
      <td>{{ p.payment_date }}</td>
      <td>{{ p.reference or '—' }}</td>
      <td><span class="badge {{ p.status }}">{{ p.status }}</span></td>
      <td>{{ p.decided_note or '—' }}</td>
    </tr>
    {% else %}
    <tr><td colspan="6" class="muted">No payments recorded yet.</td></tr>
    {% endfor %}
  </table>
</div>
{% endblock %}