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

{% block content %}
<div class="pane">
  <form class="toolbar" method="get">
    <select name="status" style="max-width:200px" onchange="this.form.submit()">
      <option value="">All statuses</option>
      {% for value, label in statuses %}
        <option value="{{ value }}" {% if active_status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <div class="right"><a href="{% url 'admin_invoice_new' %}" class="btn btn-sm btn-primary">New invoice</a></div>
  </form>

  <div class="kpis">
    <div class="kpi"><div class="lbl">Invoices</div><div class="val">{{ invoices|length }}</div><div class="sub">shown</div></div>
    <div class="kpi"><div class="lbl">Collected</div><div class="val">{{ collected|naira }}</div><div class="sub">received</div></div>
    <div class="kpi"><div class="lbl">Outstanding</div><div class="val">{{ outstanding|naira }}</div><div class="sub">issued and unpaid</div></div>
    <div class="kpi"><div class="lbl">Overdue</div><div class="val">{{ overdue|naira }}</div><div class="sub">needs chasing</div></div>
  </div>

  <div class="panel">
    <div class="panel-h"><h2>Invoices</h2></div>
    <div style="overflow:auto"><table>
      <tr><th>Invoice</th><th>Client</th><th>Project</th><th>Issued</th><th>Due</th><th>Total</th><th>Balance</th><th>Status</th><th></th></tr>
      {% for i in invoices %}
      <tr class="click">
        <td><a href="{% url 'admin_invoice' i.number %}">{{ i.number }}</a></td>
        <td>{{ i.client }}</td><td>{{ i.project.name|default:"—" }}</td>
        <td>{{ i.issued_on|date:"j M Y"|default:"—" }}</td><td>{{ i.due_on|date:"j M Y"|default:"—" }}</td>
        <td>{{ i.total|naira }}</td><td>{{ i.balance|naira }}</td>
        <td><span class="status {% if i.is_overdue %}s-overdue{% else %}{{ i.get_status_display|status_class }}{% endif %}">{% if i.is_overdue %}Overdue{% else %}{{ i.get_status_display }}{% endif %}</span></td>
        <td style="white-space:nowrap">
          <a href="{% url 'admin_invoice' i.number %}" class="btn btn-sm">Open</a>
          <a href="{% url 'admin_invoice_edit' i.number %}" class="btn btn-sm">Edit</a></td>
      </tr>
      {% empty %}<tr><td colspan="9" class="muted">Nothing here.</td></tr>{% endfor %}
    </table></div>
  </div>
</div>
{% endblock %}