{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% set profile_photo_url = get_user_profile_photo_url(current_user) %}
{% set profile_initials = get_user_initials(current_user) %}
<div class="mx-auto max-w-7xl space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}

  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">My Profile</h2>
      <p class="text-sm text-slate-500">Maintain your profile photo and public contact details. Official HR fields remain controlled by admin.</p>
    </div>
  </div>

  {% if saved %}<div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">Profile updated successfully.</div>{% endif %}
  {% 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 %}

  <div class="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
      <div class="flex flex-col items-center text-center">
        {% if profile_photo_url %}
          <img src="{{ profile_photo_url }}" alt="Profile photo" class="h-28 w-28 rounded-3xl border border-slate-200 object-cover shadow-soft">
        {% else %}
          <div class="flex h-28 w-28 items-center justify-center rounded-3xl bg-brand-600 text-3xl font-bold text-white shadow-soft">{{ profile_initials }}</div>
        {% endif %}
        <h3 class="mt-4 text-lg font-semibold text-slate-900">{{ current_user.full_name or employee.full_name }}</h3>
        <p class="text-sm text-slate-500">{{ current_user.qualification or '' }}{% if current_user.qualification and (current_user.designation or employee.designation) %} • {% endif %}{{ current_user.designation or employee.designation or '' }}</p>
        <p class="mt-1 text-xs text-slate-400">{{ current_user.email }}</p>
      </div>
      {% if current_user.bio %}
      <div class="mt-5 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">{{ current_user.bio }}</div>
      {% endif %}
    </div>

    <div class="space-y-6">
      <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
        <h3 class="font-semibold text-slate-900">Official Details</h3>
        <dl class="mt-4 grid gap-4 md:grid-cols-2 text-sm">
          <div><dt class="text-slate-500">Employee Code</dt><dd class="font-medium text-slate-900">{{ employee.employee_code }}</dd></div>
          <div><dt class="text-slate-500">Name</dt><dd class="font-medium text-slate-900">{{ employee.full_name }}</dd></div>
          <div><dt class="text-slate-500">Department</dt><dd class="font-medium text-slate-900">{{ employee.department or '-' }}</dd></div>
          <div><dt class="text-slate-500">Official Designation</dt><dd class="font-medium text-slate-900">{{ employee.designation or '-' }}</dd></div>
        </dl>
      </div>

      <form method="post" enctype="multipart/form-data" class="space-y-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div>
          <h3 class="font-semibold text-slate-900">Public Profile</h3>
          <p class="text-sm text-slate-500">These details will be reused in dashboards and future client-facing auditor cards.</p>
        </div>
        <div class="grid gap-4 md:grid-cols-2">
          <div>
            <label class="mb-1 block text-sm font-medium text-slate-700">Profile Photo</label>
            <input type="file" name="profile_photo" accept="image/png,image/jpeg,image/gif,image/webp" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <p class="mt-1 text-xs text-slate-400">JPG, PNG, GIF or WebP. Maximum 2 MB.</p>
          </div>
          <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, FCA, DISA" 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 employee.designation or '' }}" placeholder="Partner / Manager / Staff" 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="{{ employee.mobile or current_user.mobile or '' }}" 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" placeholder="Short client-facing profile or area of responsibility" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">{{ current_user.bio or '' }}</textarea>
          </div>
        </div>

        <div>
          <h3 class="font-semibold text-slate-900">Personal / HR Self-Service Details</h3>
        </div>
        <div class="grid gap-4 md:grid-cols-2">
          <div><label class="mb-1 block text-sm font-medium text-slate-700">Alternate Mobile</label><input name="alternate_mobile" value="{{ employee.alternate_mobile or '' }}" 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">Emergency Contact Name</label><input name="emergency_contact_name" value="{{ employee.emergency_contact_name or '' }}" 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">Emergency Contact Mobile</label><input name="emergency_contact_mobile" value="{{ employee.emergency_contact_mobile or '' }}" 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">Bank Name</label><input name="bank_name" value="{{ employee.bank_name or '' }}" 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">Bank Account No</label><input name="bank_account_no" value="{{ employee.bank_account_no or '' }}" 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">Bank IFSC</label><input name="bank_ifsc" value="{{ employee.bank_ifsc or '' }}" 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">{{ employee.address or '' }}</textarea></div>
        </div>
        <div class="flex justify-end"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Save My Profile</button></div>
      </form>
    </div>
  </div>
</div>
{% endblock %}