{% 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">Generate Audit Firm Platform Bills</h1>
      <p class="mt-1 text-sm text-slate-500">Generate draft SaaS invoices for Audit Firm subscriptions. Duplicate invoices for the same subscription and period are skipped.</p>
    </div>
    <a href="/platform-billing/audit-firm-subscriptions" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Back to Audit Firm Subscriptions</a>
  </div>

  {% if generated or skipped %}
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <div class="text-sm"><span class="font-semibold text-emerald-700">Generated: {{ generated }}</span> · <span class="font-semibold text-amber-700">Skipped: {{ skipped }}</span></div>
    {% if errors %}
    <ul class="mt-3 list-disc space-y-1 pl-5 text-sm text-slate-600">
      {% for error in errors %}<li>{{ error }}</li>{% endfor %}
    </ul>
    {% endif %}
    {% if invoices %}
    <div class="mt-3 flex flex-wrap gap-2">
      {% for invoice in invoices %}<a href="/platform-billing/invoices/{{ invoice.id }}" class="rounded-xl bg-slate-100 px-3 py-2 text-sm text-slate-700">{{ invoice.invoice_no }}</a>{% endfor %}
    </div>
    {% endif %}
  </div>
  {% endif %}

  <form method="post" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <div class="grid gap-4 md:grid-cols-3">
      <label class="text-sm font-medium text-slate-700">Period From<input type="date" name="period_from" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
      <label class="text-sm font-medium text-slate-700">Period To<input type="date" name="period_to" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
      <label class="text-sm font-medium text-slate-700">Invoice Date<input type="date" name="invoice_date" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
      <label class="text-sm font-medium text-slate-700">Due Date<input type="date" name="due_date" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
      <label class="text-sm font-medium text-slate-700">Tax Type<select name="tax_type" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2">{% for x in tax_types %}<option value="{{ x }}">{{ x }}</option>{% endfor %}</select></label>
      <label class="inline-flex items-end gap-2 text-sm text-slate-700"><input type="checkbox" name="include_zero_usage_lines" class="rounded border-slate-300" /> Include zero usage lines</label>
    </div>

    <div class="rounded-2xl bg-slate-50 p-4">
      <h2 class="font-semibold text-slate-900">Optional usage rates</h2>
      <p class="mt-1 text-sm text-slate-500">Base subscription amount comes from the subscription. Add usage rates only when you want to charge extra by count.</p>
      <div class="mt-4 grid gap-4 md:grid-cols-4">
        <label class="text-sm">Per Client<input name="client_rate" value="0" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
        <label class="text-sm">Per Employee<input name="employee_rate" value="0" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
        <label class="text-sm">Per Consultant<input name="consultant_rate" value="0" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
        <label class="text-sm">Per Branch<input name="branch_rate" value="0" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" /></label>
      </div>
    </div>

    <div class="rounded-2xl border border-slate-200 overflow-hidden">
      <div class="border-b border-slate-200 bg-slate-50 px-4 py-3 font-semibold text-slate-900">Select Audit Firm subscriptions</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">Select</th>
              <th class="px-4 py-3">Audit Firm</th>
              <th class="px-4 py-3">Subscription</th>
              <th class="px-4 py-3">Plan</th>
              <th class="px-4 py-3 text-right">Base</th>
              <th class="px-4 py-3">Usage Count</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"><input type="checkbox" name="subscription_ids" value="{{ sub.id }}" class="rounded border-slate-300" {% if sub.status != 'ACTIVE' or not sub.auto_generate_invoice %}disabled{% endif %} /></td>
              <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 text-right">{{ '%.2f'|format(sub.amount or 0) }}</td>
              <td class="px-4 py-3 text-slate-600">Clients: {{ row.usage.clients }} · Employees: {{ row.usage.employees }} · Consultants: {{ row.usage.consultants }} · Branches: {{ row.usage.branches }}</td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="px-4 py-6 text-center text-slate-500">No Audit Firm subscriptions available.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft">Generate Draft Platform Invoices</button>
  </form>
</div>
{% endblock %}