{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">{{ invoice_ctx.invoice_title }} {{ invoice.invoice_no }}</h1>
      <p class="mt-1 text-sm text-slate-500">{{ invoice.client_legal_name or (invoice.client.client_name if invoice.client else '') }} • {{ invoice.invoice_date }}</p>
    </div>
    <div class="flex flex-wrap gap-2">
      {% if invoice.status == 'DRAFT' %}
      <form method="post" action="/billing/{{ invoice.id }}/issue">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button class="af-btn af-btn-primary">Issue Invoice</button>
      </form>
      {% endif %}
      {% if can_record_payment and invoice.status not in ['DRAFT','CANCELLED','PAID'] %}
      <a href="/billing/{{ invoice.id }}/payments/new" class="af-btn af-btn-primary">Record Payment</a>
      {% endif %}
      <a href="/billing/{{ invoice.id }}/print" target="_blank" class="af-btn af-btn-secondary">Print / PDF</a>
      <a href="/billing" class="af-btn af-btn-secondary">Back</a>
    </div>
  </div>

  <div class="af-card space-y-6">
    <div class="grid gap-4 md:grid-cols-4 lg:grid-cols-7">
      <div><div class="text-xs uppercase text-slate-500">Status</div><div class="font-semibold">{{ invoice.status }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">Due Date</div><div class="font-semibold">{{ invoice.due_date or '-' }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">Place of Supply</div><div class="font-semibold">{{ invoice.place_of_supply or '-' }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">Total</div><div class="font-semibold">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">Amount Received</div><div class="font-semibold text-emerald-700">₹ {{ '%.2f'|format(invoice.amount_received or 0) }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">TDS Deducted</div><div class="font-semibold text-blue-700">₹ {{ '%.2f'|format(invoice.tds_deducted or 0) }}</div></div>
      <div><div class="text-xs uppercase text-slate-500">Balance</div><div class="font-semibold {% if invoice.balance_amount and invoice.balance_amount > 0 %}text-amber-700{% else %}text-emerald-700{% endif %}">₹ {{ '%.2f'|format(invoice.balance_amount or 0) }}</div></div>
    </div>
    <div class="grid gap-4 md:grid-cols-2">
      <div class="rounded-xl border border-slate-200 p-4">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Supplier</h2>
        <div class="mt-2 font-semibold text-slate-900">{{ invoice_ctx.firm_name }}</div>
        <div class="text-sm text-slate-600 whitespace-pre-line">{{ invoice_ctx.firm_address or '-' }}</div>
        <div class="mt-2 text-sm text-slate-600">GSTIN: {{ invoice_ctx.firm_gstin or '-' }} • PAN: {{ invoice_ctx.firm_pan or '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Bill To</h2>
        <div class="mt-2 font-semibold text-slate-900">{{ invoice.client_legal_name or '-' }}</div>
        <div class="text-sm text-slate-600">{{ invoice.client_billing_address or '-' }}</div>
        <div class="mt-2 text-sm text-slate-600">GSTIN: {{ invoice.client_gstin or '-' }} • PAN: {{ invoice.client_pan or '-' }}</div>
      </div>
    </div>
  </div>

  <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 text-slate-500">
        <tr><th class="px-4 py-3">Description</th><th class="px-4 py-3">SAC</th><th class="px-4 py-3 text-right">Qty</th><th class="px-4 py-3 text-right">Rate</th><th class="px-4 py-3 text-right">Taxable</th><th class="px-4 py-3 text-right">GST</th><th class="px-4 py-3 text-right">Total</th></tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for line in invoice.lines %}
        <tr>
          <td class="px-4 py-3"><div class="font-medium text-slate-900">{{ line.description }}</div><div class="text-xs text-slate-500">{{ line.service.service_name if line.service else '' }}</div></td>
          <td class="px-4 py-3">{{ line.sac_code or '-' }}</td>
          <td class="px-4 py-3 text-right">{{ line.quantity }}</td>
          <td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(line.rate or 0) }}</td>
          <td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(line.taxable_amount or 0) }}</td>
          <td class="px-4 py-3 text-right">{{ line.gst_rate }}%</td>
          <td class="px-4 py-3 text-right font-semibold">₹ {{ '%.2f'|format(line.line_total or 0) }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="bg-slate-50 text-sm font-semibold">
        <tr><td colspan="6" class="px-4 py-3 text-right">Subtotal</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.subtotal or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right">Discount</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.discount_amount or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right">Taxable Value</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.taxable_amount or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right">CGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.cgst_amount or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right">SGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.sgst_amount or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right">IGST</td><td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(invoice.igst_amount or 0) }}</td></tr>
        <tr><td colspan="6" class="px-4 py-3 text-right text-base">Grand Total</td><td class="px-4 py-3 text-right text-base">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</td></tr>
      </tfoot>
    </table>
  </div>


  <div class="af-card space-y-4">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h2 class="font-semibold text-slate-900">Payment History</h2>
        <p class="text-sm text-slate-500">Receipts, TDS deductions and outstanding balance for this invoice.</p>
      </div>
      {% if can_record_payment and invoice.status not in ['DRAFT','CANCELLED','PAID'] %}
      <a href="/billing/{{ invoice.id }}/payments/new" class="af-btn af-btn-primary">Record Payment</a>
      {% endif %}
    </div>
    <div class="overflow-hidden rounded-xl border border-slate-200">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
          <tr><th class="px-4 py-3">Receipt</th><th class="px-4 py-3">Date</th><th class="px-4 py-3">Mode</th><th class="px-4 py-3">Reference</th><th class="px-4 py-3 text-right">Received</th><th class="px-4 py-3 text-right">TDS</th><th class="px-4 py-3"></th></tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for payment in invoice.payments %}
          <tr>
            <td class="px-4 py-3 font-medium text-slate-900">{{ payment.receipt_no }}</td>
            <td class="px-4 py-3 text-slate-600">{{ payment.payment_date }}</td>
            <td class="px-4 py-3 text-slate-600">{{ payment.mode }}</td>
            <td class="px-4 py-3 text-slate-600">{{ payment.reference_no or '-' }}</td>
            <td class="px-4 py-3 text-right font-semibold">₹ {{ '%.2f'|format(payment.amount_received or 0) }}</td>
            <td class="px-4 py-3 text-right">₹ {{ '%.2f'|format(payment.tds_deducted or 0) }}</td>
            <td class="px-4 py-3 text-right"><a href="/billing/payments/{{ payment.id }}/receipt" target="_blank" class="text-brand-600 hover:underline">Receipt</a></td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No payments recorded yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-2">
    <div class="af-card"><h2 class="font-semibold text-slate-900">Amount in Words</h2><p class="mt-2 text-sm text-slate-600">{{ invoice.amount_in_words or '-' }}</p></div>
    <div class="af-card"><h2 class="font-semibold text-slate-900">Bank / UPI Details</h2><p class="mt-2 text-sm text-slate-600 whitespace-pre-line">{% if invoice_ctx.bank_name %}{{ invoice_ctx.bank_name }}{% endif %}{% if invoice_ctx.bank_account_number %}\nA/c: {{ invoice_ctx.bank_account_number }}{% endif %}{% if invoice_ctx.bank_ifsc %}\nIFSC: {{ invoice_ctx.bank_ifsc }}{% endif %}{% if invoice_ctx.upi_id %}\nUPI: {{ invoice_ctx.upi_id }}{% endif %}</p></div>
  </div>
</div>
{% endblock %}
