{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">{{ consultant.contact_person }}</h2>
      <p class="text-sm text-slate-500">{{ consultant.firm_name or 'Individual consultant' }}{% if consultant.specialisation %} • {{ consultant.specialisation }}{% endif %}</p>
    </div>
    <div class="flex gap-2">
      <a href="/consultants" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back</a>
      {% if can_manage %}<a href="/consultants/{{ consultant.id }}/edit" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Edit</a>{% endif %}
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft md:col-span-3">
      <div class="grid gap-4 text-sm md:grid-cols-3">
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Email</div><div class="font-medium text-slate-900">{{ consultant.email or '-' }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Mobile</div><div class="font-medium text-slate-900">{{ consultant.mobile or '-' }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Type</div><div class="font-medium text-slate-900">{{ consultant.consultant_type.replace('_',' ').title() }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">PAN</div><div class="font-medium text-slate-900">{{ consultant.pan or '-' }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">GSTIN</div><div class="font-medium text-slate-900">{{ consultant.gstin or '-' }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Login user</div><div class="font-medium text-slate-900">{{ consultant.user.email if consultant.user else '-' }}</div></div>
      </div>
      {% if consultant.address or consultant.remarks %}
      <div class="mt-4 grid gap-4 text-sm md:grid-cols-2">
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Address</div><div class="text-slate-700 whitespace-pre-line">{{ consultant.address or '-' }}</div></div>
        <div><div class="text-xs uppercase tracking-wide text-slate-500">Remarks</div><div class="text-slate-700 whitespace-pre-line">{{ consultant.remarks or '-' }}</div></div>
      </div>
      {% endif %}
    </div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
      <div class="text-xs uppercase tracking-wide text-slate-500">Status</div>
      <div class="mt-2"><span class="rounded-full px-2 py-1 text-xs font-semibold {% if consultant.is_active %}bg-emerald-50 text-emerald-700{% else %}bg-slate-100 text-slate-500{% endif %}">{{ consultant.status }}</span></div>
      <div class="mt-4 space-y-2 text-sm text-slate-700">
        <div>Platform partner: <b>{{ 'Yes' if consultant.is_platform_partner else 'No' }}</b></div>
        <div>Franchise partner: <b>{{ 'Yes' if consultant.is_franchise_partner else 'No' }}</b></div>
        <div>SaaS customer: <b>{{ 'Yes' if consultant.is_saas_customer else 'No' }}</b></div>
      </div>
    </div>
  </div>

  {% if can_link %}
  <form method="post" action="/consultants/{{ consultant.id }}/links" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <h3 class="mb-4 text-base font-semibold text-slate-900">Link client to consultant</h3>
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <div class="lg:col-span-2">
        <label class="mb-1 block text-sm font-medium text-slate-700">Client</label>
        <select name="client_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" required>
          <option value="">Select client</option>
          {% for client in clients %}<option value="{{ client.id }}">{{ client.client_name }} ({{ client.client_code }})</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Relationship</label>
        <select name="relationship_type" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
          {% for code,label in relationship_types %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Remarks</label>
        <input name="remarks" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-700">
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="is_primary"> Primary consultant</label>
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="can_view_client" checked> Client details</label>
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="can_view_services" checked> Services</label>
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="can_view_due_dates" checked> Due dates</label>
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="can_view_communications" checked> Consultant communications</label>
    </div>
    <div class="mt-4"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Link Client</button></div>
  </form>
  {% endif %}

  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="border-b border-slate-200 px-4 py-3">
      <h3 class="font-semibold text-slate-900">Linked Clients</h3>
    </div>
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr><th class="px-4 py-3">Client</th><th class="px-4 py-3">Relationship</th><th class="px-4 py-3">Access</th><th class="px-4 py-3">Status</th><th class="px-4 py-3 text-right">Action</th></tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for link in links %}
        <tr>
          <td class="px-4 py-3"><div class="font-semibold text-slate-900">{{ link.client.client_name if link.client else '-' }}</div><div class="text-xs text-slate-500">{{ link.client.client_code if link.client else '' }}</div></td>
          <td class="px-4 py-3 text-slate-600">{{ link.relationship_type.replace('_',' ').title() }}{% if link.is_primary %}<span class="ml-2 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">Primary</span>{% endif %}</td>
          <td class="px-4 py-3 text-xs text-slate-600">
            Client {{ '✓' if link.can_view_client else '×' }} • Services {{ '✓' if link.can_view_services else '×' }} • Due {{ '✓' if link.can_view_due_dates else '×' }} • Comm {{ '✓' if link.can_view_communications else '×' }}
          </td>
          <td class="px-4 py-3"><span class="rounded-full px-2 py-1 text-xs font-semibold {% if link.is_active %}bg-emerald-50 text-emerald-700{% else %}bg-slate-100 text-slate-500{% endif %}">{{ 'Active' if link.is_active else 'Inactive' }}</span></td>
          <td class="px-4 py-3 text-right">
            {% if can_link %}
            <form method="post" action="/consultants/links/{{ link.id }}/toggle" class="inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <input type="hidden" name="active" value="{{ '0' if link.is_active else '1' }}">
              <button class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">{{ 'Disable' if link.is_active else 'Enable' }}</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No linked clients.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}