{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {# UI/UX V2 Phase 1D.2 — preserve shared module behaviour; add Partner navigation only for Partner-role access. #}
  {% set _uiux_partner_role_text = (current_user_roles or [])|join('|')|lower %}
  {% if 'partner' in _uiux_partner_role_text %}
    {% include "ui/templates/components/partner_navigation_v2.html" %}
  {% endif %}
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">Billing Invoices</h1>
      <p class="mt-1 text-sm text-slate-500">Create, issue and print GST-ready client invoices with SAC and tax breakup.</p>
      <p class="mt-1 text-xs text-slate-400">Showing billing records for active FY: <span class="font-semibold text-slate-600">{{ active_financial_year or 'All Years' }}</span></p>
    </div>
    <div class="flex flex-wrap gap-2">
      {% if can_generate %}
      <a href="/billing/generate" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Generate Bills</a>
      {% endif %}
      {% if can_view_fee_structure %}
      <a href="/billing/fee-structures/list" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Fee Structure</a>
      {% endif %}
      {% if can_import_fee_structure %}
      <a href="/billing/fee-structures/template" class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800 shadow-sm hover:bg-emerald-100">Download Fee Template</a>
      <a href="/billing/fee-structures/import" class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-soft hover:bg-emerald-700">Import Fee Excel</a>
      {% endif %}
      <a href="/billing/payments" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Payments</a>
      <a href="/billing/settings" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Billing Settings</a>
      {% if can_create %}
      <a href="/billing/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft hover:bg-brand-700">New Invoice</a>
      {% endif %}
    </div>
  </div>

  <form method="get" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <div class="flex gap-3">
      <input name="q" value="{{ q or '' }}" placeholder="Search invoice no, client code or client name" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none" />
      <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Search</button>
    </div>
  </form>


  {% if report_summary %}
  <section class="grid gap-4 md:grid-cols-4">
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Billed</div><div class="mt-2 text-2xl font-semibold text-slate-900">₹ {{ '%.2f'|format(report_summary.total_billed or 0) }}</div><div class="mt-1 text-xs text-slate-500">{{ report_summary.invoice_count }} invoice(s)</div></div>
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Collected + TDS</div><div class="mt-2 text-2xl font-semibold text-emerald-700">₹ {{ '%.2f'|format(report_summary.total_collected_with_tds or 0) }}</div><div class="mt-1 text-xs text-slate-500">{{ report_summary.payment_count }} receipt(s)</div></div>
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Outstanding</div><div class="mt-2 text-2xl font-semibold text-amber-700">₹ {{ '%.2f'|format(report_summary.outstanding or 0) }}</div><div class="mt-1 text-xs text-slate-500">Active issued bills</div></div>
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Status</div><div class="mt-2 text-sm font-semibold text-slate-800">Draft {{ report_summary.draft_count }} · Open {{ report_summary.issued_count }} · Paid {{ report_summary.paid_count }}</div><div class="mt-1 text-xs text-slate-500">FY-filtered billing report</div></div>
  </section>
  {% endif %}

  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr>
          <th class="px-4 py-3">Invoice No</th>
          <th class="px-4 py-3">Date</th>
          <th class="px-4 py-3">FY</th>
          <th class="px-4 py-3">Client</th>
          <th class="px-4 py-3 text-right">Amount</th>
          <th class="px-4 py-3 text-right">Received/TDS</th>
          <th class="px-4 py-3 text-right">Balance</th>
          <th class="px-4 py-3">Status</th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for row in rows %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 font-medium text-slate-900">{{ row.invoice_no }}</td>
          <td class="px-4 py-3 text-slate-600">{{ row.invoice_date }}</td>
          <td class="px-4 py-3 text-xs text-slate-500">{{ row.financial_year or '-' }}</td>
          <td class="px-4 py-3 text-slate-700">{{ row.client.client_name if row.client else row.client_id }}</td>
          <td class="px-4 py-3 text-right font-semibold">₹ {{ '%.2f'|format(row.total_amount or 0) }}</td>
          <td class="px-4 py-3 text-right text-slate-700">₹ {{ '%.2f'|format((row.amount_received or 0) + (row.tds_deducted or 0)) }}</td>
          <td class="px-4 py-3 text-right font-semibold {% if row.balance_amount and row.balance_amount > 0 %}text-amber-700{% else %}text-emerald-700{% endif %}">₹ {{ '%.2f'|format(row.balance_amount or row.total_amount or 0) }}</td>
          <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">{{ row.status }}</span></td>
          <td class="px-4 py-3 text-right"><div class="flex justify-end gap-3"><a href="/billing/{{ row.id }}" class="text-brand-600 hover:underline">View</a>{% if can_record_payment and row.status not in ['DRAFT','CANCELLED','PAID'] %}<a href="/billing/{{ row.id }}/payments/new" class="text-emerald-700 hover:underline">Payment</a>{% endif %}<a href="/billing/{{ row.id }}/print" target="_blank" class="text-slate-600 hover:underline">Print</a></div></td>
        </tr>
        {% else %}
        <tr><td colspan="9" class="px-4 py-8 text-center text-slate-500">No invoices found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
