<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ invoice_ctx.invoice_title }} {{ invoice.invoice_no }}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @page { size: A4; margin: 14mm; }
    @media print { .no-print { display: none !important; } body { background: white !important; } }
  </style>
</head>
<body class="bg-slate-100 text-slate-900">
  <div class="no-print mx-auto my-4 flex max-w-5xl justify-end gap-2">
    <button onclick="window.print()" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Print / Save PDF</button>
    <a href="/billing/{{ invoice.id }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700">Back</a>
  </div>
  <main class="mx-auto max-w-5xl bg-white p-8 shadow print:shadow-none">
    <header class="border-b-2 border-slate-900 pb-4">
      <div class="flex items-start justify-between gap-6">
        <div>
          <div class="text-2xl font-bold">{{ invoice_ctx.firm_name }}</div>
          <div class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ invoice_ctx.firm_address or '' }}</div>
          <div class="mt-2 text-sm text-slate-700">GSTIN: <b>{{ invoice_ctx.firm_gstin or '-' }}</b> | PAN: <b>{{ invoice_ctx.firm_pan or '-' }}</b></div>
          <div class="text-sm text-slate-700">Email: {{ invoice_ctx.firm_contact_email or '-' }} | Mobile: {{ invoice_ctx.firm_contact_mobile or '-' }}</div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold uppercase">{{ invoice_ctx.invoice_title }}</div>
          <div class="mt-2 text-sm">Invoice No: <b>{{ invoice.invoice_no }}</b></div>
          <div class="text-sm">Invoice Date: <b>{{ invoice.invoice_date }}</b></div>
          <div class="text-sm">Due Date: <b>{{ invoice.due_date or '-' }}</b></div>
          <div class="text-sm">Status: <b>{{ invoice.status }}</b></div>
        </div>
      </div>
    </header>

    <section class="mt-5 grid grid-cols-2 gap-4 text-sm">
      <div class="rounded-lg border border-slate-300 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Bill To</div>
        <div class="mt-2 text-base font-bold">{{ invoice.client_legal_name or '-' }}</div>
        <div class="mt-1 text-slate-700">{{ invoice.client_billing_address or '-' }}</div>
        <div class="mt-2">GSTIN: <b>{{ invoice.client_gstin or '-' }}</b></div>
        <div>PAN: <b>{{ invoice.client_pan or '-' }}</b></div>
      </div>
      <div class="rounded-lg border border-slate-300 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tax Particulars</div>
        <div class="mt-2">Place of Supply: <b>{{ invoice.place_of_supply or '-' }}</b></div>
        <div>Tax Type: <b>{{ invoice.tax_type }}</b></div>
        <div>Reverse Charge: <b>{{ 'Yes' if invoice.reverse_charge else 'No' }}</b></div>
        <div>Client State Code: <b>{{ invoice.client_state_code or '-' }}</b></div>
      </div>
    </section>

    <table class="mt-5 w-full border-collapse text-sm">
      <thead>
        <tr class="bg-slate-100">
          <th class="border border-slate-300 px-2 py-2 text-left">#</th>
          <th class="border border-slate-300 px-2 py-2 text-left">Description</th>
          <th class="border border-slate-300 px-2 py-2 text-left">SAC</th>
          <th class="border border-slate-300 px-2 py-2 text-right">Qty</th>
          <th class="border border-slate-300 px-2 py-2 text-right">Rate</th>
          <th class="border border-slate-300 px-2 py-2 text-right">Taxable</th>
          <th class="border border-slate-300 px-2 py-2 text-right">GST %</th>
          <th class="border border-slate-300 px-2 py-2 text-right">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for line in invoice.lines %}
        <tr>
          <td class="border border-slate-300 px-2 py-2">{{ loop.index }}</td>
          <td class="border border-slate-300 px-2 py-2">{{ line.description }}</td>
          <td class="border border-slate-300 px-2 py-2">{{ line.sac_code or '-' }}</td>
          <td class="border border-slate-300 px-2 py-2 text-right">{{ line.quantity }}</td>
          <td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.rate or 0) }}</td>
          <td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.taxable_amount or 0) }}</td>
          <td class="border border-slate-300 px-2 py-2 text-right">{{ line.gst_rate }}</td>
          <td class="border border-slate-300 px-2 py-2 text-right">{{ '%.2f'|format(line.line_total or 0) }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Subtotal</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.subtotal or 0) }}</td></tr>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Discount</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.discount_amount or 0) }}</td></tr>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">Taxable Value</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.taxable_amount or 0) }}</td></tr>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">CGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.cgst_amount or 0) }}</td></tr>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">SGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.sgst_amount or 0) }}</td></tr>
        <tr><td colspan="7" class="border border-slate-300 px-2 py-2 text-right font-semibold">IGST</td><td class="border border-slate-300 px-2 py-2 text-right font-semibold">{{ '%.2f'|format(invoice.igst_amount or 0) }}</td></tr>
        <tr class="bg-slate-100"><td colspan="7" class="border border-slate-300 px-2 py-2 text-right text-base font-bold">Grand Total</td><td class="border border-slate-300 px-2 py-2 text-right text-base font-bold">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</td></tr>
      </tfoot>
    </table>

    <section class="mt-5 grid grid-cols-2 gap-4 text-sm">
      <div class="rounded-lg border border-slate-300 p-4">
        <div class="font-semibold">Amount in Words</div>
        <div class="mt-1">{{ invoice.amount_in_words or '-' }}</div>
      </div>
      <div class="rounded-lg border border-slate-300 p-4">
        <div class="font-semibold">Payment Details</div>
        <div class="mt-1">Bank: {{ invoice_ctx.bank_name or '-' }}</div>
        <div>A/c: {{ invoice_ctx.bank_account_number or '-' }}</div>
        <div>IFSC: {{ invoice_ctx.bank_ifsc or '-' }}</div>
        <div>UPI: {{ invoice_ctx.upi_id or '-' }}</div>
      </div>
    </section>

    <section class="mt-5 text-sm">
      {% if invoice_ctx.terms %}<div><b>Terms:</b> {{ invoice_ctx.terms }}</div>{% endif %}
      {% if invoice_ctx.declaration %}<div class="mt-2"><b>Declaration:</b> {{ invoice_ctx.declaration }}</div>{% endif %}
    </section>

    <footer class="mt-12 flex items-end justify-between text-sm">
      <div>{{ invoice_ctx.footer_note or '' }}</div>
      <div class="text-center">
        <div class="mb-10">For {{ invoice_ctx.firm_name }}</div>
        <div class="border-t border-slate-500 px-8 pt-2">{{ invoice_ctx.authorised_signatory_name or 'Authorised Signatory' }}</div>
      </div>
    </footer>
  </main>
</body>
</html>
