{% extends "admin_frontend/base.html" %}
{% load breadcrumbs humanize %}
{% block title %}Invoice #{{ invoice.id }}{% endblock %}
{% block content %}
{% render_breadcrumbs breadcrumbs %}

<div class="flex items-center justify-between mb-4">
  <div class="flex items-center gap-3">
    {% if invoice.pickup_id %}
      <a class="btn-outline" href="{% url 'recycle_core:pickup_detail' invoice.pickup_id %}">Back to Pickup</a>
    {% endif %}
    <h1 class="text-2xl font-semibold">Invoice #{{ invoice.id }}</h1>
  </div>
  <div class="text-sm text-gray-600">Status: <span class="px-2 py-1 rounded bg-gray-100">{{ invoice.status }}</span></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-10 gap-6">
  <div class="bg-white rounded shadow p-4 md:col-span-4">
    <h2 class="font-medium mb-2">Details</h2>
    <dl class="grid grid-cols-3 gap-2 text-sm">
      <dt class="text-gray-500">Organization</dt><dd class="col-span-2">{{ invoice.organization.name }}</dd>
      <dt class="text-gray-500">Customer</dt><dd class="col-span-2">{{ invoice.customer.name }}</dd>
      <dt class="text-gray-500">Issued</dt><dd class="col-span-2">{{ invoice.issued_at|default:"-" }}</dd>
      <dt class="text-gray-500">Due</dt><dd class="col-span-2">{{ invoice.due_at|default:"-" }}</dd>
      <dt class="text-gray-500">Currency</dt><dd class="col-span-2">{{ invoice.currency_code }}</dd>
      <dt class="text-gray-500">Total</dt><dd class="col-span-2 text-right">{{ invoice.total_amount|floatformat:2|intcomma }} {{ invoice.currency_code }}</dd>
      <dt class="text-gray-500">Paid</dt><dd class="col-span-2 text-right">{{ payments_total|floatformat:2|intcomma }} {{ invoice.currency_code }}</dd>
      <dt class="text-gray-500">Balance</dt><dd class="col-span-2 text-right">{{ balance|floatformat:2|intcomma }} {{ invoice.currency_code }}</dd>
    </dl>
  </div>
  <div class="bg-white rounded shadow p-4 md:col-span-6">
    <h2 class="font-medium mb-2">Lines</h2>
    <table class="min-w-full">
      <thead>
        <tr class="text-left text-sm text-gray-600">
          <th class="px-2 py-1">Description</th>
          <th class="px-2 py-1 text-right">Qty</th>
          <th class="px-2 py-1 text-right">Unit</th>
          <th class="px-2 py-1 text-right">Unit Price</th>
          <th class="px-2 py-1 text-right">Line Total</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        {% for line in invoice.lines.all %}
        <tr>
          <td class="px-2 py-1">{{ line.description|default:"-" }}</td>
          <td class="px-2 py-1 text-right">{{ line.quantity|floatformat:3|intcomma }}</td>
          <td class="px-2 py-1 text-right">{{ line.unit }}</td>
          <td class="px-2 py-1 text-right">{{ line.unit_price|floatformat:2|intcomma }}</td>
          <td class="px-2 py-1 text-right">{{ line.line_total|floatformat:2|intcomma }}</td>
        </tr>
        {% empty %}
        <tr>
          <td class="px-2 py-2 text-gray-500" colspan="5">No lines.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="mt-6 grid grid-cols-1 md:grid-cols-10 gap-6">
  <div class="bg-white rounded shadow p-4 md:col-span-6">
    <h2 class="font-medium mb-2">Payments</h2>
    <table class="min-w-full">
      <thead>
        <tr class="text-left text-sm text-gray-600">
          <th class="px-2 py-1">Amount</th>
          <th class="px-2 py-1">Received At</th>
          <th class="px-2 py-1">Reference</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        {% for p in invoice.payments.all %}
        <tr>
          <td class="px-2 py-1">{{ p.amount|floatformat:2|intcomma }} {{ invoice.currency_code }}</td>
          <td class="px-2 py-1">{{ p.received_at|default:"-" }}</td>
          <td class="px-2 py-1">{{ p.reference|default:"-" }}</td>
        </tr>
        {% empty %}
        <tr>
          <td class="px-2 py-2 text-gray-500" colspan="3">No payments recorded.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="bg-white rounded shadow p-4 md:col-span-4">
    <h2 class="font-medium mb-2">Add Payment</h2>
    <form method="post" action="{% url 'billing:invoice_add_payment' invoice.id %}">
      {% csrf_token %}
      {% include 'admin_frontend/_form.html' with form=pay_form submit_label='Record Payment' %}
    </form>
  </div>
  <div class="bg-white rounded shadow p-4 md:col-span-4">
    <h2 class="font-medium mb-2">Update Status</h2>
    <form method="post" action="{% url 'billing:invoice_set_status' invoice.id %}">
      {% csrf_token %}
      <div class="flex items-end gap-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">Status</label>
          <select name="status" class="border rounded px-3 py-2">
            {% for code,label in status_choices %}
              <option value="{{ code }}" {% if invoice.status == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <button class="px-3 py-2 rounded bg-gray-800 text-white">Update</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}
