@extends('layouts.app')
@section('title', __('Create account'))
@section('content')
<div class="mb-6">
  <p class="text-sm text-slate-500">{{ __('Create a team leader or a limited-access employee account.') }}</p>
</div>
<section class="panel-card max-w-2xl p-5 sm:p-8">
  <form method="POST" action="{{ route('admin.members.store') }}" class="space-y-5">@csrf
    <div class="grid gap-5 sm:grid-cols-2">
      <label class="block text-sm font-semibold text-slate-700">{{ __('Full name') }}
        <input name="name" value="{{ old('name') }}" autocomplete="name" class="field-control mt-2" required>
      </label>
      <label class="block text-sm font-semibold text-slate-700">{{ __('Email address') }}
        <input name="email" type="email" value="{{ old('email') }}" autocomplete="email" class="field-control mt-2" required>
      </label>
    </div>
    <label class="block text-sm font-semibold text-slate-700">{{ __('Account type') }}
      <select name="role" class="field-control mt-2">
        <option value="team_leader" @selected(old('role', 'team_leader') === 'team_leader')>{{ __('Team Leader') }}</option>
        <option value="employee" @selected(old('role') === 'employee')>{{ __('Employee') }} — {{ __('operations access') }}</option>
      </select>
    </label>
    <label class="block text-sm font-semibold text-slate-700">{{ __('Sponsor') }}
      <select name="sponsor_id" class="field-control mt-2">
        <option value="">{{ __('No sponsor — create top-level member') }}</option>
        @foreach($sponsors as $sponsor)
          <option value="{{ $sponsor->id }}" @selected(old('sponsor_id') == $sponsor->id)>{{ $sponsor->name }} · {{ $sponsor->member_id }}</option>
        @endforeach
      </select>
      <span class="mt-1 block text-xs font-normal text-slate-400">{{ __('New team leaders are placed in the first available position below their sponsor.') }}</span>
    </label>
    <div class="space-y-5 rounded-2xl border border-slate-100 bg-slate-50 p-4">
      <div>
        <h2 class="text-sm font-bold text-slate-800">{{ __('Employee details') }}</h2>
        <p class="mt-1 text-xs font-normal text-slate-500">{{ __('These details are saved for employee accounts. Assign team leaders as department managers from department settings.') }}</p>
      </div>
      <div class="grid gap-5 sm:grid-cols-2">
        <label class="block text-sm font-semibold text-slate-700">{{ __('Department') }}
          <select name="department_id" class="field-control mt-2">
            <option value="">{{ __('Select department') }}</option>
            @foreach($departments as $department)
              <option value="{{ $department->id }}" @selected(old('department_id') == $department->id)>{{ $department->name }} · {{ $department->code }}</option>
            @endforeach
          </select>
        </label>
        <label class="block text-sm font-semibold text-slate-700">{{ __('Job title') }}
          <input name="job_title" value="{{ old('job_title') }}" class="field-control mt-2" maxlength="255">
        </label>
        <label class="block text-sm font-semibold text-slate-700">{{ __('Phone') }}
          <input name="phone" type="tel" value="{{ old('phone') }}" class="field-control mt-2" maxlength="40">
        </label>
        <label class="block text-sm font-semibold text-slate-700">{{ __('Hire date') }}
          <input name="hire_date" type="date" value="{{ old('hire_date') }}" class="field-control mt-2">
        </label>
      </div>
    </div>
    <label class="block text-sm font-semibold text-slate-700">{{ __('Temporary password') }}
      <input name="password" type="password" autocomplete="new-password" class="field-control mt-2" required>
      <span class="mt-1 block text-xs font-normal text-slate-400">{{ __('Use at least 8 characters.') }}</span>
    </label>
    <div class="flex flex-wrap gap-3 pt-2">
      <button class="rounded-xl bg-blue-900 px-5 py-3 text-sm font-bold text-white transition hover:bg-blue-800">{{ __('Create account') }}</button>
      <a href="{{ route('admin.members.index') }}" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">{{ __('Cancel') }}</a>
    </div>
  </form>
</section>
@endsection