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

{% block content %}
<div class="pane" style="max-width:760px">
  <a class="back" href="{% url 'client_invoices' %}">&larr; All invoices</a>
  <div class="panel">
    <div class="panel-h"><h2>Invoice {{ invoice.number }}</h2>
      <span class="status {{ invoice.get_status_display|status_class }} act">{{ invoice.get_status_display }}</span></div>
    <div class="panel-b">
      <dl class="dl" style="margin-bottom:20px">
        <dt>Billed to</dt><dd>{{ client.company|default:client.full_name }}<br>{{ client.user.email }}</dd>
        <dt>Project</dt><dd>{{ invoice.project.name|default:"—" }}</dd>
        <dt>Issued</dt><dd>{{ invoice.issued_on|date:"j M Y"|default:"—" }}</dd>
        <dt>Due</dt><dd>{{ invoice.due_on|date:"j M Y"|default:"—" }}</dd>
      </dl>
      <table>
        <tr><th>Description</th><th>Amount</th></tr>
        {% for item in invoice.items.all %}<tr><td>{{ item.description }}</td><td>{{ item.amount|naira }}</td></tr>
        {% empty %}<tr><td>{{ invoice.description }}</td><td>{{ invoice.total|naira }}</td></tr>{% endfor %}
        <tr><td style="font-weight:600">Total</td><td style="font-weight:600">{{ invoice.total|naira }}</td></tr>
        <tr><td>Paid</td><td>{{ invoice.amount_paid|naira }}</td></tr>
        <tr><td style="font-weight:600">Balance</td><td style="color:var(--gold);font-weight:600">{{ invoice.balance|naira }}</td></tr>
      </table>
      <div style="display:flex;gap:10px;margin-top:20px">
        <button class="btn" onclick="window.print()">Print or save as PDF</button>
        {% if invoice.balance > 0 %}<a href="{% url 'client_payments' %}" class="btn btn-primary">Pay balance</a>{% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}