{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/consultants/templates/consultants/_consultant_tabs.html" %}
{% set is_dict = consultant is mapping %}
<div class="mx-auto max-w-3xl space-y-6">
  <div class="flex items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">My Consultant Profile</h2>
      <p class="text-sm text-slate-500">Update your visible consultant contact and business details.</p>
    </div>
    <a href="/consultant/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back</a>
  </div>

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

  <form method="post" enctype="multipart/form-data" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="rounded-2xl bg-slate-50 p-4">
      <div class="flex flex-wrap items-center gap-4">
        {% set profile_photo_url = get_user_profile_photo_url(current_user) %}
        {% if profile_photo_url %}
          <img src="{{ profile_photo_url }}" alt="Profile photo" class="h-20 w-20 rounded-2xl object-cover shadow-soft">
        {% else %}
          <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-brand-600 text-xl font-bold text-white shadow-soft">{{ get_user_initials(current_user) }}</div>
        {% endif %}
        <div class="min-w-0 flex-1">
          <div class="text-sm font-semibold text-slate-900">Public profile</div>
          <p class="text-sm text-slate-500">Photo, qualification and bio will be used in consultant workspace and future lead pages.</p>
          <input type="file" name="profile_photo" accept="image/png,image/jpeg,image/gif,image/webp" class="mt-3 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
        </div>
      </div>
      <div class="mt-4 grid gap-4 md:grid-cols-2">
        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Qualification</label>
          <input name="qualification" value="{{ current_user.qualification or '' }}" placeholder="CA, MBA, GST Practitioner" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div>
          <label class="mb-1 block text-sm font-medium text-slate-700">Display Designation</label>
          <input name="public_designation" value="{{ current_user.designation or 'Consultant' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
          <label class="mb-1 block text-sm font-medium text-slate-700">Short Bio</label>
          <textarea name="bio" rows="3" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">{{ current_user.bio or '' }}</textarea>
        </div>
      </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2">
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Contact person / Consultant name *</label>
        <input name="contact_person" value="{{ consultant.contact_person if consultant and not is_dict else consultant.get('contact_person','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" required>
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Firm name</label>
        <input name="firm_name" value="{{ consultant.firm_name if consultant and not is_dict else consultant.get('firm_name','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Email</label>
        <input type="email" name="email" value="{{ consultant.email if consultant and not is_dict else consultant.get('email','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">Mobile</label>
        <input name="mobile" value="{{ consultant.mobile if consultant and not is_dict else consultant.get('mobile','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">PAN</label>
        <input name="pan" value="{{ consultant.pan if consultant and not is_dict else consultant.get('pan','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium text-slate-700">GSTIN</label>
        <input name="gstin" value="{{ consultant.gstin if consultant and not is_dict else consultant.get('gstin','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div class="md:col-span-2">
        <label class="mb-1 block text-sm font-medium text-slate-700">Specialisation</label>
        <input name="specialisation" value="{{ consultant.specialisation if consultant and not is_dict else consultant.get('specialisation','') if consultant else '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
      </div>
      <div class="md:col-span-2">
        <label class="mb-1 block text-sm font-medium text-slate-700">Address</label>
        <textarea name="address" rows="3" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">{{ consultant.address if consultant and not is_dict else consultant.get('address','') if consultant else '' }}</textarea>
      </div>
    </div>
    <div class="flex justify-end gap-3">
      <a href="/consultant/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Cancel</a>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Save Profile</button>
    </div>
  </form>
</div>
{% endblock %}