{% extends "client/base.html" %}
{% load money %}
{% block title %}Payments — client portal{% endblock %}
{% block heading %}Payments{% endblock %}

{% block content %}
<div class="pane">
  <div class="kpis">
    <div class="kpi"><div class="lbl">Total project cost</div><div class="val">{{ total_cost|naira }}</div>
      <div class="sub">{{ projects|length }} project{{ projects|length|pluralize }}</div></div>
    <div class="kpi"><div class="lbl">Amount paid</div><div class="val">{{ total_paid|naira }}</div>
      <div class="sub">{{ payments|length }} payment{{ payments|length|pluralize }}</div></div>
    <div class="kpi"><div class="lbl">Balance</div><div class="val">{{ total_balance|naira }}</div><div class="sub">outstanding</div></div>
    <div class="kpi"><div class="lbl">Last payment</div>
      <div class="val" style="font-size:20px">{% if payments %}{{ payments.0.paid_on|date:"j M Y" }}{% else %}—{% endif %}</div>
      <div class="sub">{% if payments %}{{ payments.0.reference }}{% endif %}</div></div>
  </div>

  <div class="split">
    <div class="panel">
      <div class="panel-h"><h2>Payment history</h2></div>
      <div style="overflow:auto"><table>
        <tr><th>Date</th><th>Project</th><th>Amount</th><th>Method</th><th>Reference</th><th>Status</th></tr>
        {% for p in payments %}
        <tr><td>{{ p.paid_on|date:"j M Y" }}</td><td>{{ p.project.name|default:"—" }}</td>
          <td>{{ p.amount|naira }}</td><td>{{ p.get_method_display }}</td><td class="mono">{{ p.reference }}</td>
          <td><span class="status {{ p.get_status_display|status_class }}">{{ p.get_status_display }}</span></td></tr>
        {% empty %}<tr><td colspan="6" class="muted">No payments recorded yet.</td></tr>{% endfor %}
      </table></div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Make a payment</h2></div>
      <div class="panel-b">
        <form method="post" novalidate>{% csrf_token %}
          <div class="field"><label for="project">Project</label>
            <select id="project" name="project">
              {% for p in projects %}<option value="{{ p.pk }}">{{ p.name }} — {{ p.balance|naira }} outstanding</option>{% endfor %}
            </select>
            {% with msg=errors.project %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="amount">Amount</label>
            <input id="amount" name="amount" inputmode="decimal" placeholder="0">
            {% with msg=errors.amount %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="method">Method</label>
            <select id="method" name="method">
              {% for value, label in methods %}<option value="{{ value }}">{{ label }}</option>{% endfor %}
            </select></div>
          <button class="btn btn-primary btn-block">Pay now</button>
          <p class="hint" style="text-align:center">Payments are processed by the gateway. Card details are never stored here.</p>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}