{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="max-w-5xl">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-2xl font-semibold">System Admin · Firm Creation Wizard</h1>
      <p class="mt-1 text-sm text-slate-500">Create a new firm, primary branch, primary Firm Admin and optional default financial year in one controlled flow.</p>
    </div>
    <a href="/system-settings/tenants" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Tenants</a>
  </div>

  {% if errors %}
  <div class="mt-4 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">
    <div class="font-semibold">Please correct the following:</div>
    <ul class="mt-2 list-disc pl-5">
      {% for error in errors %}<li>{{ error }}</li>{% endfor %}
    </ul>
  </div>
  {% endif %}

  <form class="mt-5 space-y-5" method="post" action="/wizards/system/firm/preview">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

    <section class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="mb-4">
        <h2 class="text-lg font-semibold">1. Firm details</h2>
        <p class="text-sm text-slate-500">These are platform-level firm/tenant details controlled by System Admin.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Firm code</span>
          <input class="rounded-xl border px-3 py-2 uppercase" name="tenant_code" value="{{ form.tenant_code }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Firm name</span>
          <input class="rounded-xl border px-3 py-2" name="tenant_name" value="{{ form.tenant_name }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Firm type</span>
          <select class="rounded-xl border px-3 py-2" name="firm_type">
            <option value="partnership" {% if form.firm_type == 'partnership' %}selected{% endif %}>Partnership Firm</option>
            <option value="proprietorship" {% if form.firm_type == 'proprietorship' %}selected{% endif %}>Proprietorship Firm</option>
            <option value="individual" {% if form.firm_type == 'individual' %}selected{% endif %}>Individual Audit Practice</option>
          </select>
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Default timezone</span>
          <input class="rounded-xl border px-3 py-2" name="default_timezone" value="{{ form.default_timezone or 'Asia/Kolkata' }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Session duration minutes</span>
          <input class="rounded-xl border px-3 py-2" type="number" min="15" name="default_session_duration_minutes" value="{{ form.default_session_duration_minutes or 480 }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Storage mode</span>
          <select class="rounded-xl border px-3 py-2" name="default_storage_mode">
            <option value="local_only" {% if form.default_storage_mode == 'local_only' %}selected{% endif %}>local_only</option>
            <option value="cloud_only" {% if form.default_storage_mode == 'cloud_only' %}selected{% endif %}>cloud_only</option>
            <option value="hybrid" {% if form.default_storage_mode == 'hybrid' %}selected{% endif %}>hybrid</option>
          </select>
        </label>
        <label class="grid gap-1 md:col-span-2">
          <span class="text-sm text-slate-600">OTP required roles CSV</span>
          <input class="rounded-xl border px-3 py-2" name="default_otp_required_roles_csv" value="{{ form.default_otp_required_roles_csv or 'System Admin' }}" />
        </label>
      </div>
    </section>

    <section class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="mb-4">
        <h2 class="text-lg font-semibold">2. Primary branch</h2>
        <p class="text-sm text-slate-500">The wizard creates the head office branch and basic branch settings.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch code</span>
          <input class="rounded-xl border px-3 py-2 uppercase" name="branch_code" value="{{ form.branch_code or 'HO' }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch name</span>
          <input class="rounded-xl border px-3 py-2" name="branch_name" value="{{ form.branch_name or 'Head Office' }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch timezone</span>
          <input class="rounded-xl border px-3 py-2" name="branch_timezone" value="{{ form.branch_timezone or form.default_timezone or 'Asia/Kolkata' }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">State</span>
          <input class="rounded-xl border px-3 py-2" name="branch_state" value="{{ form.branch_state }}" />
        </label>
        <label class="grid gap-1 md:col-span-2">
          <span class="text-sm text-slate-600">Address line 1</span>
          <input class="rounded-xl border px-3 py-2" name="branch_address_line1" value="{{ form.branch_address_line1 }}" />
        </label>
        <label class="grid gap-1 md:col-span-2">
          <span class="text-sm text-slate-600">Address line 2</span>
          <input class="rounded-xl border px-3 py-2" name="branch_address_line2" value="{{ form.branch_address_line2 }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">City</span>
          <input class="rounded-xl border px-3 py-2" name="branch_city" value="{{ form.branch_city }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">PIN code</span>
          <input class="rounded-xl border px-3 py-2" name="branch_pin_code" value="{{ form.branch_pin_code }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch PAN</span>
          <input class="rounded-xl border px-3 py-2 uppercase" name="branch_pan" value="{{ form.branch_pan }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Branch GSTIN</span>
          <input class="rounded-xl border px-3 py-2 uppercase" name="branch_gstin" value="{{ form.branch_gstin }}" />
        </label>
      </div>
    </section>

    <section class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="mb-4">
        <h2 class="text-lg font-semibold">3. Primary Firm Admin</h2>
        <p class="text-sm text-slate-500">This user gets the Firm Admin role and an invite link to set password.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Full name</span>
          <input class="rounded-xl border px-3 py-2" name="admin_full_name" value="{{ form.admin_full_name }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Email</span>
          <input class="rounded-xl border px-3 py-2" type="email" name="admin_email" value="{{ form.admin_email }}" required />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Mobile</span>
          <input class="rounded-xl border px-3 py-2" name="admin_mobile" value="{{ form.admin_mobile }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Designation</span>
          <input class="rounded-xl border px-3 py-2" name="admin_designation" value="{{ form.admin_designation or 'Firm Admin' }}" />
        </label>
      </div>
    </section>

    <section class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="mb-4 flex items-start justify-between gap-4">
        <div>
          <h2 class="text-lg font-semibold">4. Default financial year</h2>
          <p class="text-sm text-slate-500">Optional. Firm Admin can also manage financial years later from System Settings.</p>
        </div>
        <label class="flex items-center gap-2 text-sm font-medium text-slate-700">
          <input type="checkbox" name="create_financial_year" {% if form.create_financial_year %}checked{% endif %} />
          Create FY
        </label>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Financial year code</span>
          <input class="rounded-xl border px-3 py-2" name="fy_year_code" value="{{ form.fy_year_code }}" placeholder="2026-27" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Assessment year</span>
          <input class="rounded-xl border px-3 py-2" name="fy_assessment_year" value="{{ form.fy_assessment_year }}" placeholder="2027-28" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">Start date</span>
          <input class="rounded-xl border px-3 py-2" type="date" name="fy_start_date" value="{{ form.fy_start_date }}" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-600">End date</span>
          <input class="rounded-xl border px-3 py-2" type="date" name="fy_end_date" value="{{ form.fy_end_date }}" />
        </label>
        <label class="flex items-center gap-2 text-sm font-medium text-slate-700">
          <input type="checkbox" name="fy_is_current" {% if form.fy_is_current %}checked{% endif %} />
          Mark as current financial year
        </label>
      </div>
    </section>

    <div class="flex gap-3">
      <button class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800" type="submit">Preview Firm Creation</button>
      <a class="rounded-xl border border-slate-300 px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50" href="/system-settings">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}