{% extends 'base.html' %}
{% block title %}Invoices{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <h1 class="text-2xl font-bold">Invoices</h1>
  <a href="{% url 'sales:export_invoices' %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
     class="btn btn-outline btn-sm">
    ⬇ Export CSV
  </a>
  <a href="{% url 'sales:invoice_create' %}" class="btn btn-primary btn-sm">➕ New Invoice</a>
</div>

<!-- Status Filter Tabs -->
<div class="tabs tabs-boxed mb-4 w-fit">
  <a href="?" class="tab {% if not current_status %}tab-active{% endif %}">All</a>
  <a href="?status=unpaid" class="tab {% if current_status == 'unpaid' %}tab-active{% endif %}">Unpaid</a>
  <a href="?status=partial" class="tab {% if current_status == 'partial' %}tab-active{% endif %}">Partial</a>
  <a href="?status=paid" class="tab {% if current_status == 'paid' %}tab-active{% endif %}">Paid</a>
  <a href="?status=cancelled" class="tab {% if current_status == 'cancelled' %}tab-active{% endif %}">Cancelled</a>
</div>
<form method="get" class="flex gap-2 items-end mb-4">
  <div class="form-control">
    <input type="text" name="q" value="{{ query }}"
           placeholder="Search reference or customer..."
           class="input input-bordered input-sm w-64"/>
  </div>
  <button class="btn btn-primary btn-sm">🔍 Search</button>
  <a href="{% url 'sales:invoice_list' %}" class="btn btn-ghost btn-sm">Reset</a>
</form>

<div class="card bg-base-100 shadow">
  <div class="card-body p-0">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Reference</th>
          <th>Customer</th>
          <th>Total</th>
          <th>Paid</th>
          <th>Balance</th>
          <th>Status</th>
          <th>Due Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for invoice in invoices %}
        <tr class="{% if invoice.is_overdue %}bg-error/10{% endif %}">
          <td class="font-mono font-bold">{{ invoice.reference }}</td>
          <td>{{ invoice.customer_display }}</td>
          <td>{{ business.currency }} {{ invoice.total|floatformat:0 }}</td>
          <td class="text-success">{{ business.currency }} {{ invoice.total_paid|floatformat:0 }}</td>
          <td class="{% if invoice.balance_due > 0 %}text-error font-medium{% endif %}">
            {{ business.currency }} {{ invoice.balance_due|floatformat:0 }}
          </td>
          <td>
            <span class="badge badge-sm
              {% if invoice.status == 'paid' %}badge-success
              {% elif invoice.status == 'partial' %}badge-warning
              {% elif invoice.status == 'unpaid' %}badge-error
              {% else %}badge-ghost{% endif %}">
              {{ invoice.get_status_display }}
            </span>
            {% if invoice.is_overdue %}
              <span class="badge badge-error badge-xs ml-1">Overdue</span>
            {% endif %}
          </td>
          <td>{{ invoice.due_date|date:"d M Y"|default:"—" }}</td>
          <td>
            <a href="{% url 'sales:invoice_detail' invoice.pk %}" class="btn btn-ghost btn-xs">View</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="8" class="text-center text-base-content/40 py-10">
            No invoices yet. <a href="{% url 'sales:invoice_create' %}" class="link link-primary">Create first invoice</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% include 'partials/pagination.html' with page_obj=invoices %}
{% endblock %}