{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/clients/templates/clients/_client_tabs.html" %}
<div class="mx-auto max-w-4xl space-y-6">
  <section class="rounded-3xl bg-gradient-to-r from-brand-700 to-slate-900 p-6 text-white shadow-soft">
    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-brand-100">Pay Now</p>
    <h2 class="mt-2 text-2xl font-semibold">Invoice {{ invoice.invoice_no }}</h2>
    <p class="mt-2 text-sm text-brand-100">Pay the outstanding amount using online gateway, UPI or bank transfer. Online gateway receipts are created automatically after successful verification.</p>
  </section>

  <div class="grid gap-6 md:grid-cols-[minmax(0,1fr)_320px]">
    <div class="af-card">
      <h3 class="text-lg font-semibold text-slate-900">Payment Options</h3>
      <div class="mt-5 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
        <div class="font-semibold">Amount payable: ₹ {{ '%.2f'|format(amount_due or 0) }}</div>
        <div class="mt-1">Invoice balance only is shown here. TDS or bank charges will be adjusted by the firm while recording receipt.</div>
      </div>


      {% if payumoney_enabled %}
      <div class="mt-5 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <div class="text-sm font-semibold text-emerald-900">Online Payment Gateway</div>
            <p class="mt-1 text-sm text-emerald-800">Pay securely through PayUMoney / PayU. Receipt will be created automatically after successful confirmation.</p>
            {% if payumoney_mode != 'LIVE' %}<p class="mt-1 text-xs font-semibold text-amber-700">Currently running in TEST mode.</p>{% endif %}
          </div>
          <form method="post" action="/client/billing/{{ invoice.id }}/payumoney/start">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <button type="submit" class="af-btn af-btn-primary whitespace-nowrap">Pay Online</button>
          </form>
        </div>
      </div>
      {% endif %}


      {% if cashfree_enabled %}
      <div class="mt-5 rounded-2xl border border-sky-200 bg-sky-50 p-4">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <div class="text-sm font-semibold text-sky-900">Cashfree Payment Gateway</div>
            <p class="mt-1 text-sm text-sky-800">Pay securely through Cashfree checkout. Receipt will be created automatically after successful confirmation.</p>
            {% if cashfree_mode != 'LIVE' %}<p class="mt-1 text-xs font-semibold text-amber-700">Currently running in TEST / Sandbox mode.</p>{% endif %}
          </div>
          <form method="post" action="/client/billing/{{ invoice.id }}/cashfree/start">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <button type="submit" class="af-btn af-btn-primary whitespace-nowrap">Pay with Cashfree</button>
          </form>
        </div>
      </div>
      {% endif %}

      {% if upi_link %}
      <div class="mt-5 rounded-2xl border border-brand-200 bg-brand-50 p-4">
        <div class="text-sm font-semibold text-brand-800">UPI Payment</div>
        <div class="mt-2 text-sm text-slate-700">UPI ID: <span class="font-semibold">{{ upi_id }}</span></div>
        <a href="{{ upi_link }}" class="mt-4 inline-flex af-btn af-btn-primary">Open UPI App</a>
        <p class="mt-3 text-xs text-slate-500">This opens a UPI app on supported devices. After payment, share the UTR/reference number with the firm if requested.</p>
      </div>
      {% endif %}

      <div class="mt-5 rounded-2xl border border-slate-200 p-4">
        <div class="text-sm font-semibold text-slate-900">Bank Transfer</div>
        <dl class="mt-3 grid gap-3 text-sm sm:grid-cols-2">
          <div><dt class="text-xs uppercase text-slate-500">Bank</dt><dd class="font-medium">{{ bank_name or '-' }}</dd></div>
          <div><dt class="text-xs uppercase text-slate-500">Account Name</dt><dd class="font-medium">{{ bank_account_name or '-' }}</dd></div>
          <div><dt class="text-xs uppercase text-slate-500">Account No.</dt><dd class="font-medium">{{ bank_account_number or '-' }}</dd></div>
          <div><dt class="text-xs uppercase text-slate-500">IFSC</dt><dd class="font-medium">{{ bank_ifsc or '-' }}</dd></div>
        </dl>
        {% if payment_instructions %}<div class="mt-4 whitespace-pre-line rounded-xl bg-slate-50 p-3 text-sm text-slate-700">{{ payment_instructions }}</div>{% endif %}
      </div>
    </div>

    <aside class="space-y-6">
      <div class="af-card">
        <h3 class="text-base font-semibold text-slate-900">Invoice Summary</h3>
        <div class="mt-4 space-y-3 text-sm">
          <div class="flex justify-between"><span class="text-slate-500">Invoice Total</span><span class="font-semibold">₹ {{ '%.2f'|format(invoice.total_amount or 0) }}</span></div>
          <div class="flex justify-between"><span class="text-slate-500">Received</span><span class="font-semibold">₹ {{ '%.2f'|format(invoice.amount_received or 0) }}</span></div>
          <div class="flex justify-between"><span class="text-slate-500">TDS</span><span class="font-semibold">₹ {{ '%.2f'|format(invoice.tds_deducted or 0) }}</span></div>
          <div class="border-t border-slate-200 pt-3 flex justify-between"><span class="text-slate-500">Balance</span><span class="font-semibold text-amber-700">₹ {{ '%.2f'|format(invoice.balance_amount or 0) }}</span></div>
        </div>
        <div class="mt-5 grid gap-2">
          <a href="/client/billing/{{ invoice.id }}" class="af-btn af-btn-secondary justify-center">View Invoice</a>
          <a href="/client/billing/{{ invoice.id }}/print" class="af-btn af-btn-secondary justify-center">Print / Save PDF</a>
        </div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-4 text-xs leading-5 text-slate-500 shadow-soft">
        {% if payumoney_enabled or cashfree_enabled %}Online gateway confirmation is enabled. UPI/bank transfer can still be used when the client prefers manual payment.{% else %}Online gateway is not enabled yet. This page helps the client pay through UPI/bank details and the firm records receipt manually.{% endif %}
      </div>
    </aside>
  </div>
</div>
{% endblock %}