@extends('layouts.panel')
@section('content')
<div><h2 class="text-4xl text-[#041627]">{{ ucfirst($user->role) }} Profile</h2><p class="text-[#44474c]">Complete this profile before using the dashboard.</p></div>
<form method="POST" action="{{ route('profile.setup.update') }}" class="bg-white border border-[#aeb6bf] p-6 space-y-4 w-full">@csrf @method('PUT')
  <div>
    <label class="text-sm font-semibold">Registered Email</label>
    <input value="{{ $user->email }}" readonly class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#eceff1] text-[#44474c]">
  </div>
  <div class="grid md:grid-cols-3 gap-4">
    <div><label class="text-sm font-semibold">First Name</label><input name="first_name" value="{{ old('first_name', optional($profile)->first_name ?: ($prefillFirstName ?? '')) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Middle Name</label><input name="middle_name" value="{{ old('middle_name', optional($profile)->middle_name ?: ($prefillMiddleName ?? '')) }}" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Surname</label><input name="surname" value="{{ old('surname', optional($profile)->surname ?: ($prefillSurname ?? '')) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Suffix</label><select name="suffix" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"><option value="">Select</option>@foreach(['Dr','Prof','Mr','Mrs'] as $sx)<option value="{{ $sx }}" @selected(old('suffix', optional($profile)->suffix)===$sx)>{{ $sx }}</option>@endforeach</select></div>
    <div><label class="text-sm font-semibold">Department</label><input name="department" value="{{ old('department', optional($profile)->department) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Designation</label><input name="designation" value="{{ old('designation', optional($profile)->designation) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Affiliation</label><input name="affiliation" value="{{ old('affiliation', optional($profile)->affiliation) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div>
      <label class="text-sm font-semibold">Country</label>
      <select name="country" id="countrySelect" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        <option value="">Select country</option>
        @foreach($countries as $country => $dialCode)
          <option value="{{ $country }}" data-dial-code="{{ $dialCode }}" @selected(old('country', optional($profile)->country) === $country)>{{ $country }}</option>
        @endforeach
      </select>
    </div>
    <div><label class="text-sm font-semibold">State</label><input name="state" value="{{ old('state', optional($profile)->state) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">District / Locality</label><input name="district" value="{{ old('district', optional($profile)->district) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Pin Code</label><input name="pin_code" value="{{ old('pin_code', optional($profile)->pin_code) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Mobile (with country code)</label><input name="mobile" id="mobileInput" value="{{ old('mobile', optional($profile)->mobile) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
  </div>
  <button class="bg-[#041627] text-white px-5 py-2 text-sm font-semibold">Save Profile</button>
</form>
<script>
(() => {
  const countrySelect = document.getElementById('countrySelect');
  const mobileInput = document.getElementById('mobileInput');
  if (!countrySelect || !mobileInput) return;

  const dialCodes = @json(array_values($countries));
  const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const dialCodePattern = new RegExp(`^\\s*(?:${dialCodes.map(escapeRegExp).join('|')})(?=\\s|\\d|$)\\s*`);

  const selectedDialCode = () => countrySelect.selectedOptions[0]?.dataset.dialCode || '';
  const hasSelectedDialCode = () => {
    const dialCode = selectedDialCode();
    return dialCode && new RegExp(`^\\s*${escapeRegExp(dialCode)}(?=\\s|\\d|$)`).test(mobileInput.value);
  };
  const ensureDialCode = () => {
    const dialCode = selectedDialCode();
    if (!dialCode) return;

    const currentValue = mobileInput.value;
    const localNumber = currentValue.replace(dialCodePattern, '').trimStart();
    mobileInput.value = localNumber ? `${dialCode} ${localNumber}` : `${dialCode} `;
  };

  countrySelect.addEventListener('change', ensureDialCode);
  if (countrySelect.value && !hasSelectedDialCode()) {
    ensureDialCode();
  }
})();
</script>
@endsection