{% extends "ui/templates/base/layout.html" %}

{% block content %}
{% include "modules/clients/templates/clients/_client_tabs.html" %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
    <div>
      <h2 class="text-2xl font-semibold text-slate-900">Edit My Profile</h2>
      <p class="text-sm text-slate-500">You can update contact and communication details here. PAN, GSTIN and other compliance identity fields stay read-only.</p>
    </div>
    <div class="flex gap-3">
      <a href="/change-password" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Change Password</a>
    </div>
  </div>

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

  <form method="post" action="/client/profile" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

    <section class="rounded-2xl bg-white p-6 shadow-soft">
      <h3 class="text-base font-semibold text-slate-900">Read-only compliance identity</h3>
      <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4 text-sm">
        <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"><div class="text-xs font-medium uppercase tracking-wide text-slate-500">PAN</div><div class="mt-1 text-slate-900">{{ client_row.pan or '-' }}</div></div>
        <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"><div class="text-xs font-medium uppercase tracking-wide text-slate-500">GSTIN</div><div class="mt-1 text-slate-900">{{ client_row.gstin or '-' }}</div></div>
        <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"><div class="text-xs font-medium uppercase tracking-wide text-slate-500">TAN</div><div class="mt-1 text-slate-900">{{ client_row.tan or '-' }}</div></div>
        <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"><div class="text-xs font-medium uppercase tracking-wide text-slate-500">CIN / LLPIN</div><div class="mt-1 text-slate-900">{{ client_row.cin_llpin or '-' }}</div></div>
      </div>
    </section>

    <section class="rounded-2xl bg-white p-6 shadow-soft">
      <h3 class="text-base font-semibold text-slate-900">Editable profile details</h3>
      <div class="mt-4 grid gap-4 md:grid-cols-2">
        <div>
          <label class="block text-sm font-medium text-slate-700">Client Name</label>
          <input name="client_name" value="{{ form_data.client_name or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" required>
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Trade Name</label>
          <input name="trade_name" value="{{ form_data.trade_name or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Contact Person Name</label>
          <input name="contact_person_name" value="{{ form_data.contact_person_name or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Designation</label>
          <input name="contact_person_designation" value="{{ form_data.contact_person_designation or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Mobile</label>
          <input name="mobile" value="{{ form_data.mobile or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Alternate Mobile</label>
          <input name="alternate_mobile" value="{{ form_data.alternate_mobile or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Login Email</label>
          <input type="email" name="email" value="{{ form_data.email or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          <p class="mt-1 text-xs text-slate-500">If you change this, your next login will use the new email.</p>
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Alternate Email</label>
          <input type="email" name="alternate_email" value="{{ form_data.alternate_email or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-slate-700">Address Line 1</label>
          <input name="address_line_1" value="{{ form_data.address_line_1 or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-slate-700">Address Line 2</label>
          <input name="address_line_2" value="{{ form_data.address_line_2 or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">City</label>
          <input name="city" value="{{ form_data.city or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">State</label>
          <input name="state" value="{{ form_data.state or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Pincode</label>
          <input name="pincode" value="{{ form_data.pincode or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700">Country</label>
          <input name="country" value="{{ form_data.country or 'India' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-slate-700">Notes</label>
          <textarea name="notes" rows="4" class="mt-1 w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">{{ form_data.notes or '' }}</textarea>
        </div>
      </div>
    </section>

    <div class="flex justify-end">
      <button type="submit" class="rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Save Profile</button>
    </div>
  </form>
</div>
{% endblock %}