{% 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">Consultant SaaS/Tool Billing</h1>
      <p class="mt-1 text-sm text-slate-500">PB4: manage platform subscriptions and generate bills for consultant SaaS/tool 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">Consultant subscription created.</p>{% endif %}
    </div>
    <div class="flex flex-wrap gap-2">
      {% if can_manage %}
      <form method="post" action="/platform-billing/consultant-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 Consultant Accounts</button>
      </form>
      {% endif %}
      {% if can_generate %}
      <a href="/platform-billing/consultant-subscriptions/generate" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft">Generate Consultant 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 Consultant Subscription</h2>
    <p class="mt-1 text-sm text-slate-500">Use CONSULTANT-target platform plans. If no plan appears, create a plan with Target Account Type = CONSULTANT.</p>
    <form method="post" action="/platform-billing/consultant-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">Consultant 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 consultant</option>
          {% for account in consultant_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 consultant_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="CON-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 consultant / 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 consultant 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">Consultant</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">Tool Usage</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">
              Managed Clients: {{ row.usage.managed_client_count }} · Portal Users: {{ row.usage.user_account_count }}
              <div class="text-xs text-slate-400">Workspace: {{ row.usage.workspace_type }} · Plan: {{ row.usage.workspace_plan }}</div>
            </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 consultant subscriptions found. Sync consultant accounts, create a CONSULTANT 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">Consultant billing accounts</h2>
    <p class="mt-1 text-sm text-slate-500">These accounts are for platform billing of consultant SaaS/tool access. They are separate from firm-level billing and consultant master records.</p>
    <div class="mt-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3">
      {% for account in consultant_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">Email: {{ account.email or '-' }} · Mobile: {{ account.mobile or '-' }}</div>
      </div>
      {% else %}
      <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-500">No consultant billing accounts synced yet.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}