{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
{% set data = form_data if form_data is defined and form_data else {} %}
<section class="mx-auto max-w-4xl space-y-6">
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Firm Admin User Onboarding</p>
        <h1 class="mt-2 text-2xl font-bold text-slate-900">Add {{ role_config.label if role_config else 'Firm User' }}</h1>
        <p class="mt-1 text-sm text-slate-500">Create the user account, assign branch and role, create the appropriate profile, generate invite link and attempt invite email.</p>
      </div>
      <a href="/firm-admin/dashboard?tab=users" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Users</a>
    </div>
  </div>

  {% if not tenant_id %}
  <div class="rounded-3xl border border-amber-200 bg-amber-50 p-5 text-sm font-semibold text-amber-900 shadow-soft">
    Active firm context was not found. Please select/open a firm context before adding users.
  </div>
  {% elif not branches %}
  <div class="rounded-3xl border border-amber-200 bg-amber-50 p-5 text-sm font-semibold text-amber-900 shadow-soft">
    No active branch is available for this firm. Create a branch first, then add Partner / Manager / Staff / Consultant.
  </div>
  {% elif not role_config %}
  <div class="rounded-3xl border border-red-200 bg-red-50 p-5 text-sm font-semibold text-red-800 shadow-soft">
    Invalid onboarding role.
  </div>
  {% else %}
  {% if flash %}
  <div class="rounded-3xl border border-red-200 bg-red-50 p-5 text-sm font-semibold text-red-800 shadow-soft">{{ flash }}</div>
  {% endif %}

  <form method="post" action="/firm-admin/users/new" class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <input type="hidden" name="role" value="{{ role_key }}" />

    <div class="grid gap-5 md:grid-cols-2">
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Firm</span>
        <input value="{{ tenant.display_name or tenant.name if tenant else '' }}" disabled class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Role</span>
        <input value="{{ role_config.role_name }}" disabled class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Full Name <span class="text-red-600">*</span></span>
        <input name="full_name" value="{{ data.full_name or '' }}" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Email <span class="text-red-600">*</span></span>
        <input type="email" name="email" value="{{ data.email or '' }}" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Branch <span class="text-red-600">*</span></span>
        <select name="branch_id" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
          <option value="">-- Select Branch --</option>
          {% for branch in branches %}
          {% if branch.is_active %}
          <option value="{{ branch.id }}" {% if data.branch_id|string == branch.id|string %}selected{% endif %}>{{ branch.name }}{% if branch.is_head_office %} / Head Office{% endif %}</option>
          {% endif %}
          {% endfor %}
        </select>
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Mobile</span>
        <input name="mobile" value="{{ data.mobile or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      {% if role_key != 'consultant' %}
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Employee Code</span>
        <input name="employee_code" value="{{ data.employee_code or employee_code_suggestion }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
        <span class="mt-1 block text-xs text-slate-500">Leave as-is or edit. Must be unique inside the firm.</span>
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Date of Joining</span>
        <input type="date" name="date_of_joining" value="{{ data.date_of_joining or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Department</span>
        <input name="department" value="{{ data.department or role_config.default_department }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Designation</span>
        <input name="designation" value="{{ data.designation or role_config.default_designation }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block md:col-span-2">
        <span class="text-sm font-semibold text-slate-700">Employment Type</span>
        <select name="employment_type" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
          {% set selected_emp_type = data.employment_type or role_config.default_employment_type %}
          {% for code, label in [('full_time','Full time'),('part_time','Part time'),('article_assistant','Article Assistant'),('intern','Intern'),('contract','Contract')] %}
          <option value="{{ code }}" {% if selected_emp_type == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      {% else %}
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Consultant Type</span>
        {% set selected_type = data.consultant_type or 'external_consultant' %}
        <select name="consultant_type" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
          {% for code, label in [('external_consultant','External Consultant'),('gst_consultant','GST Consultant'),('tax_consultant','Tax Consultant'),('roc_consultant','ROC Consultant'),('payroll_consultant','Payroll Consultant'),('franchise_partner','Franchise Partner'),('saas_customer','SaaS Customer')] %}
          <option value="{{ code }}" {% if selected_type == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">Consulting Firm / Trade Name</span>
        <input name="firm_name" value="{{ data.firm_name or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block md:col-span-2">
        <span class="text-sm font-semibold text-slate-700">Specialisation</span>
        <input name="specialisation" value="{{ data.specialisation or '' }}" placeholder="Example: GST, Income Tax, ROC, Payroll" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">PAN</span>
        <input name="pan" value="{{ data.pan or '' }}" maxlength="10" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm uppercase focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block">
        <span class="text-sm font-semibold text-slate-700">GSTIN</span>
        <input name="gstin" value="{{ data.gstin or '' }}" maxlength="15" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm uppercase focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <label class="block md:col-span-2">
        <span class="text-sm font-semibold text-slate-700">Address</span>
        <textarea name="address" rows="3" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">{{ data.address or '' }}</textarea>
      </label>
      <label class="block md:col-span-2">
        <span class="text-sm font-semibold text-slate-700">Remarks</span>
        <textarea name="remarks" rows="2" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">{{ data.remarks or '' }}</textarea>
      </label>
      {% endif %}
    </div>

    <div class="mt-6 rounded-2xl border border-brand-100 bg-brand-50 p-4 text-sm text-brand-900">
      The system will create the user and role mapping, generate an invite token and show the fallback invite link after saving. Consultants are created in the Consultant Profile master and are not added to the Employee/payroll master.
    </div>

    <div class="mt-6 flex flex-wrap justify-end gap-3">
      <a href="/firm-admin/dashboard?tab=users" class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">Cancel</a>
      <button class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-soft hover:bg-brand-700">Create {{ role_config.label }}</button>
    </div>
  </form>
  {% endif %}
</section>
{% endblock %}