{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <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">Client Compliance Dashboard Billing</h1>
      <p class="mt-1 text-sm text-slate-500">PB3: manage platform subscriptions and generate bills for client compliance dashboard access.</p>
      {% if synced %}<p class="mt-2 rounded-xl bg-emerald-50 px-3 py-2 text-sm text-emerald-700">Sync completed: {{ synced }}</p>{% endif %}
      {% if created %}<p class="mt-2 rounded-xl bg-emerald-50 px-3 py-2 text-sm text-emerald-700">Client dashboard subscription created.</p>{% endif %}
    </div>
    <div class="flex flex-wrap gap-2">
      {% if can_manage %}
      <form method="post" action="/platform-billing/client-dashboard-subscriptions/sync-accounts">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Sync Client Accounts</button>
      </form>
      {% endif %}
      {% if can_generate %}
      <a href="/platform-billing/client-dashboard-subscriptions/generate" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft">Generate Client Dashboard Bills</a>
      {% endif %}
    </div>
  </div>

  {% if can_manage %}
  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <h2 class="font-semibold text-slate-900">Create Client Dashboard Subscription</h2>
    <p class="mt-1 text-sm text-slate-500">Use CLIENT-target platform plans. If no plan appears, create a plan with Target Account Type = CLIENT.</p>
    <form method="post" action="/platform-billing/client-dashboard-subscriptions/new" class="mt-4 grid gap-4 md:grid-cols-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Client Account</label>
        <select name="account_id" required class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
          <option value="">Select client</option>
          {% for account in client_accounts %}<option value="{{ account.id }}">{{ account.display_name }} ({{ account.account_code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Plan</label>
        <select name="plan_id" required class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
          <option value="">Select plan</option>
          {% for plan in client_plans %}<option value="{{ plan.id }}">{{ plan.name }} - {{ '%.2f'|format(plan.base_amount or 0) }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Subscription Code</label>
        <input name="subscription_code" required placeholder="CLD-ABC-2026" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Start Date</label>
        <input type="date" name="start_date" required class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">End Date</label>
        <input type="date" name="end_date" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Billing Cycle</label>
        <select name="billing_cycle" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
          {% for cycle in billing_cycles %}<option value="{{ cycle }}">{{ cycle }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Base Amount</label>
        <input name="amount" value="0" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <div>
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">GST Rate</label>
        <input name="gst_rate" value="18" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <label class="mt-6 inline-flex items-center gap-2 text-sm text-slate-700">
        <input type="checkbox" name="auto_generate_invoice" checked class="rounded border-slate-300" /> Auto generate invoice
      </label>
      <div class="md:col-span-3">
        <label class="mb-1 block text-xs font-semibold uppercase text-slate-500">Notes</label>
        <input name="notes" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
      </div>
      <div class="md:col-span-3">
        <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Create Subscription</button>
      </div>
    </form>
  </div>
  {% endif %}

  <form method="get" class="flex gap-2 rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <input name="q" value="{{ q }}" placeholder="Search client / subscription" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
    <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Search</button>
  </form>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-soft overflow-hidden">
    <div class="border-b border-slate-200 px-5 py-4">
      <h2 class="font-semibold text-slate-900">Active client dashboard subscriptions</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
          <tr>
            <th class="px-4 py-3">Client</th>
            <th class="px-4 py-3">Subscription</th>
            <th class="px-4 py-3">Plan</th>
            <th class="px-4 py-3">Cycle</th>
            <th class="px-4 py-3 text-right">Base Amount</th>
            <th class="px-4 py-3">Dashboard Units</th>
            <th class="px-4 py-3">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for row in rows %}
          {% set sub = row.subscription %}
          <tr>
            <td class="px-4 py-3 font-medium text-slate-900">{{ sub.account.display_name if sub.account else '-' }}</td>
            <td class="px-4 py-3">{{ sub.subscription_code }}</td>
            <td class="px-4 py-3">{{ sub.plan.name if sub.plan else '-' }}</td>
            <td class="px-4 py-3">{{ sub.billing_cycle }}</td>
            <td class="px-4 py-3 text-right">{{ '%.2f'|format(sub.amount or 0) }}</td>
            <td class="px-4 py-3 text-slate-600">
              PAN: {{ row.usage.pan_units }} · GSTIN: {{ row.usage.gstin_units }} · Modules: {{ row.usage.module_count }}
              {% if row.usage.modules %}<div class="text-xs text-slate-400">{{ row.usage.modules|join(', ') }}</div>{% endif %}
            </td>
            <td class="px-4 py-3">{{ sub.status }}</td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No client dashboard subscriptions found. Sync client accounts, create a CLIENT plan, then create subscriptions.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <h2 class="font-semibold text-slate-900">Client billing accounts</h2>
    <p class="mt-1 text-sm text-slate-500">These accounts are for platform billing of compliance dashboard access. They are separate from the Audit Firm's client invoices.</p>
    <div class="mt-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3">
      {% for account in client_accounts[:12] %}
      <div class="rounded-xl border border-slate-200 p-4 text-sm">
        <div class="font-semibold text-slate-900">{{ account.display_name }}</div>
        <div class="mt-1 text-slate-500">Code: {{ account.account_code }} · Status: {{ account.status }}</div>
        <div class="mt-1 text-slate-500">PAN: {{ account.pan or '-' }} · GSTIN: {{ account.gstin or '-' }}</div>
      </div>
      {% else %}
      <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-500">No client billing accounts synced yet.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}