@php
  $isEdit = $user->exists;
  $action = $isEdit ? route('admin.users.update', $user) : route('admin.users.store');
  $input = 'w-full px-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none';
  $label = 'block text-label-md font-label-md text-on-surface-variant mb-1.5';
  $currentRole = old('role', $user->roles->first()?->name);
  $isOperational = \App\Models\User::isOperationalRole($currentRole);
  $val = fn ($field, $default = null) => old($field, $default ?? $user->{$field});
  $dateVal = fn ($field) => old($field, $user->{$field}?->format('Y-m-d'));
@endphp

<form method="POST" action="{{ $action }}" class="max-w-4xl space-y-stack-lg">
  @csrf
  @if($isEdit) @method('PUT') @endif

  {{-- Personal --}}
  <div class="surface-card rounded-xl p-6">
    <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Personal Details</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div>
        <label class="{{ $label }}">Title</label>
        <select name="title" class="{{ $input }}">
          <option value="">—</option>
          @foreach($titles as $t)
            <option value="{{ $t }}" @selected($val('title') === $t)>{{ $t }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">First Name <span class="text-error">*</span></label>
        <input type="text" name="first_name" value="{{ $val('first_name') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Last Name <span class="text-error">*</span></label>
        <input type="text" name="last_name" value="{{ $val('last_name') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Date of Birth</label>
        <input type="date" name="date_of_birth" value="{{ $dateVal('date_of_birth') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Gender</label>
        <select name="gender" class="{{ $input }}">
          <option value="">—</option>
          @foreach($genders as $gv => $gl)
            <option value="{{ $gv }}" @selected($val('gender') === $gv)>{{ $gl }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Marital Status</label>
        <select name="marital_status" class="{{ $input }}">
          <option value="">—</option>
          @foreach($maritalStatuses as $mv => $ml)
            <option value="{{ $mv }}" @selected($val('marital_status') === $mv)>{{ $ml }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Nationality</label>
        <input type="text" name="nationality" value="{{ $val('nationality') }}" class="{{ $input }}">
      </div>
    </div>
    <p class="text-label-md font-label-md text-outline mt-3">Full name is set automatically from first + last name.</p>
  </div>

  {{-- Account & Role --}}
  <div class="surface-card rounded-xl p-6">
    <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Account &amp; Role</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="{{ $label }}">Work Email <span class="text-error">*</span></label>
        <input type="email" name="email" value="{{ $val('email') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Role <span class="text-error">*</span></label>
        <select name="role" id="roleSelect" class="{{ $input }}">
          <option value="">— Select a role —</option>
          @foreach($roles as $roleName => $roleLabel)
            <option value="{{ $roleName }}" @selected($currentRole === $roleName)>{{ $roleLabel }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Password @if(!$isEdit)<span class="text-error">*</span>@endif</label>
        <input type="password" name="password" autocomplete="new-password" class="{{ $input }}"
          placeholder="{{ $isEdit ? 'Leave blank to keep current' : 'Min. 8 characters' }}">
      </div>
      <div>
        <label class="{{ $label }}">Confirm Password @if(!$isEdit)<span class="text-error">*</span>@endif</label>
        <input type="password" name="password_confirmation" autocomplete="new-password" class="{{ $input }}">
      </div>
    </div>
  </div>

  {{-- Employment --}}
  <div class="surface-card rounded-xl p-6">
    <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Employment</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="lg:col-span-2">
        <label class="{{ $label }}">Position</label>
        <input type="text" name="position" value="{{ $val('position') }}" placeholder="e.g. Senior Care Worker" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Employment Status</label>
        <select name="employment_status" class="{{ $input }}">
          @foreach($employmentStatuses as $sv => $sl)
            <option value="{{ $sv }}" @selected($val('employment_status', $user->employment_status ?? 'active') === $sv)>{{ $sl }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Employment Start Date</label>
        <input type="date" name="employment_start_date" value="{{ $dateVal('employment_start_date') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Termination Date</label>
        <input type="date" name="termination_date" value="{{ $dateVal('termination_date') }}" class="{{ $input }}">
      </div>
      <div id="locationField" class="{{ $isOperational ? '' : 'hidden' }}">
        <label class="{{ $label }}">Location (Service)</label>
        <select name="location_service_id" class="{{ $input }}">
          <option value="">— None —</option>
          @foreach($services as $service)
            <option value="{{ $service->id }}" @selected((int) $val('location_service_id') === $service->id)>{{ $service->name }}</option>
          @endforeach
        </select>
      </div>
      <div id="headOfficeNote" class="{{ $isOperational ? 'hidden' : '' }}">
        <label class="{{ $label }}">Location</label>
        <div class="{{ $input }} flex items-center gap-2 text-on-surface-variant">
          <span class="material-symbols-outlined text-[18px] text-outline">corporate_fare</span> Head Office
        </div>
      </div>
      <div class="lg:col-span-3" id="managerField">
        <label class="{{ $label }}">Direct Manager</label>
        {{-- Select for management + head-office roles (options set by role via JS) --}}
        <select name="direct_manager_id" id="managerSelect" class="{{ $input }} sm:max-w-sm">
          <option value="">— None —</option>
          @foreach($managers as $manager)
            @continue($isEdit && $manager->id === $user->id)
            <option value="{{ $manager->id }}" @selected((int) $val('direct_manager_id') === $manager->id)>{{ $manager->name }}</option>
          @endforeach
        </select>
        {{-- Care worker: derived from their service's Service Manager --}}
        <div id="managerAuto" class="hidden">
          <div class="{{ $input }} sm:max-w-sm flex items-center gap-2 text-on-surface-variant">
            <span class="material-symbols-outlined text-[18px] text-outline">badge</span>
            <span id="managerAutoName">—</span>
          </div>
          <input type="hidden" name="direct_manager_id" id="managerAutoInput" disabled>
          <p class="text-label-md font-label-md text-outline mt-1.5">Set automatically from the service's Service Manager.</p>
        </div>
        {{-- CEO: top of the hierarchy --}}
        <div id="managerNone" class="hidden">
          <div class="{{ $input }} sm:max-w-sm text-outline">Top of hierarchy — no direct manager.</div>
        </div>
      </div>
    </div>
  </div>

  {{-- Contact --}}
  <div class="surface-card rounded-xl p-6">
    <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Contact</h3>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div>
        <label class="{{ $label }}">Home Phone</label>
        <input type="text" name="home_phone" value="{{ $val('home_phone') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Mobile Phone</label>
        <input type="text" name="mobile_phone" value="{{ $val('mobile_phone') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Personal Email</label>
        <input type="email" name="personal_email" value="{{ $val('personal_email') }}" class="{{ $input }}">
      </div>
    </div>
  </div>

  {{-- Address --}}
  <div class="surface-card rounded-xl p-6">
    <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Address</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div class="sm:col-span-2">
        <label class="{{ $label }}">Street 1</label>
        <input type="text" name="street1" value="{{ $val('street1') }}" class="{{ $input }}">
      </div>
      <div class="sm:col-span-2">
        <label class="{{ $label }}">Street 2</label>
        <input type="text" name="street2" value="{{ $val('street2') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">City</label>
        <input type="text" name="city" value="{{ $val('city') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">State / County</label>
        <input type="text" name="state" value="{{ $val('state') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Postcode</label>
        <input type="text" name="postcode" value="{{ $val('postcode') }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Country</label>
        <input type="text" name="country" value="{{ $val('country') }}" class="{{ $input }}">
      </div>
    </div>
  </div>

  <div class="flex items-center gap-3">
    <button type="submit" class="bg-primary text-on-primary px-6 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
      {{ $isEdit ? 'Save Changes' : 'Create User' }}
    </button>
    <a href="{{ route('admin.users.index') }}" class="px-6 py-2.5 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">Cancel</a>
  </div>
</form>

<script>
  (function () {
    var operational = @json(\App\Models\User::OPERATIONAL_ROLES);
    var chainManagers = {
      service_manager: @json($registeredManagers),
      registered_manager: @json($headsOfOperations),
      head_of_operations: @json($coos),
      coo: @json($ceos)
    };
    var defaultManagers = @json($managers);
    var smByService = @json($services->mapWithKeys(fn ($s) => [$s->id => $s->serviceManager ? ['id' => $s->serviceManager->id, 'name' => $s->serviceManager->name] : null]));
    var currentManager = @json(old('direct_manager_id', $user->direct_manager_id));
    var selfId = @json($isEdit ? $user->id : null);

    var role = document.getElementById('roleSelect');
    var locationField = document.getElementById('locationField');
    var headOffice = document.getElementById('headOfficeNote');
    var locSelect = document.querySelector('[name="location_service_id"]');
    var sel = document.getElementById('managerSelect');
    var auto = document.getElementById('managerAuto');
    var autoInput = document.getElementById('managerAutoInput');
    var autoName = document.getElementById('managerAutoName');
    var none = document.getElementById('managerNone');
    if (!role) return;

    function fillSelect(list) {
      sel.innerHTML = '<option value="">— None —</option>';
      list.forEach(function (m) {
        if (selfId && String(m.id) === String(selfId)) return;
        var o = document.createElement('option');
        o.value = m.id; o.textContent = m.name;
        if (String(m.id) === String(currentManager)) o.selected = true;
        sel.appendChild(o);
      });
    }
    function setAuto() {
      var sm = (locSelect && locSelect.value) ? smByService[locSelect.value] : null;
      if (sm) { autoName.textContent = sm.name; autoInput.value = sm.id; }
      else { autoName.textContent = 'No Service Manager set for this home'; autoInput.value = ''; }
    }
    function updateManager() {
      var r = role.value;
      sel.classList.add('hidden'); sel.disabled = true;
      auto.classList.add('hidden'); autoInput.disabled = true;
      none.classList.add('hidden');
      if (r === 'employee') { auto.classList.remove('hidden'); autoInput.disabled = false; setAuto(); }
      else if (r === 'ceo') { none.classList.remove('hidden'); }
      else if (chainManagers[r]) { fillSelect(chainManagers[r]); sel.classList.remove('hidden'); sel.disabled = false; }
      else { fillSelect(defaultManagers); sel.classList.remove('hidden'); sel.disabled = false; }
    }
    function updateLocation() {
      var op = operational.indexOf(role.value) !== -1;
      if (locationField) locationField.classList.toggle('hidden', !op);
      if (headOffice) headOffice.classList.toggle('hidden', op);
    }

    role.addEventListener('change', function () { updateLocation(); updateManager(); });
    if (locSelect) locSelect.addEventListener('change', function () { if (role.value === 'employee') setAuto(); });
    updateLocation();
    updateManager();
  })();
</script>