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

{% block content %}
<div class="pane">
  <div class="kpis">
    <div class="kpi"><div class="lbl">Invoices</div><div class="val">{{ invoices|length }}</div><div class="sub">all time</div></div>
    <div class="kpi"><div class="lbl">Paid</div><div class="val">{{ total_paid|naira }}</div><div class="sub">received</div></div>
    <div class="kpi"><div class="lbl">Outstanding</div><div class="val">{{ total_outstanding|naira }}</div><div class="sub">still to pay</div></div>
    <div class="kpi"><div class="lbl">Account</div><div class="val" style="font-size:20px">{{ client.company|default:client.full_name }}</div><div class="sub">billed to</div></div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Invoices</h2></div>
    <div style="overflow:auto"><table>
      <tr><th>Invoice</th><th>Project</th><th>Description</th><th>Total</th><th>Balance</th><th>Status</th><th></th></tr>
      {% for i in invoices %}
      <tr>
        <td>{{ i.number }}</td><td>{{ i.project.name|default:"—" }}</td><td>{{ i.description }}</td>
        <td>{{ i.total|naira }}</td><td>{{ i.balance|naira }}</td>
        <td><span class="status {{ i.get_status_display|status_class }}">{{ i.get_status_display }}</span></td>
        <td style="white-space:nowrap">
          <a href="{% url 'client_invoice' i.number %}" class="btn btn-sm">View</a>
          {% if i.balance > 0 %}<a href="{% url 'client_payments' %}" class="btn btn-sm btn-primary">Pay</a>{% endif %}
        </td>
      </tr>
      {% empty %}<tr><td colspan="7" class="muted">No invoices yet.</td></tr>{% endfor %}
    </table></div>
  </div>
</div>
{% endblock %}