@php
    $editing = isset($userModel);
    $selectedRole = old('role', $editing ? $userModel->role : \App\Models\User::ROLE_AGENT);
    $selectedSupervisor = (int) old('supervisor_id', $editing ? ($userModel->supervisor_id ?? 0) : 0);
@endphp

<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;">
    <div>
        <label for="name" style="display: block; margin-bottom: 6px; font-weight: 700;">Nombre</label>
        <input id="name" name="name" type="text" value="{{ old('name', $editing ? $userModel->name : '') }}">
        @error('name')
            <div style="margin-top: 6px; color: #b42318; font-size: 13px;">{{ $message }}</div>
        @enderror
    </div>

    <div>
        <label for="email" style="display: block; margin-bottom: 6px; font-weight: 700;">Email</label>
        <input id="email" name="email" type="email" value="{{ old('email', $editing ? $userModel->email : '') }}">
        @error('email')
            <div style="margin-top: 6px; color: #b42318; font-size: 13px;">{{ $message }}</div>
        @enderror
    </div>

    <div>
        <label for="role" style="display: block; margin-bottom: 6px; font-weight: 700;">Rol</label>
        <select id="role" name="role" style="width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px;">
            @foreach ($roles as $roleValue => $roleLabel)
                <option value="{{ $roleValue }}" @selected($selectedRole === $roleValue)>{{ $roleLabel }}</option>
            @endforeach
        </select>
        @error('role')
            <div style="margin-top: 6px; color: #b42318; font-size: 13px;">{{ $message }}</div>
        @enderror
    </div>

    <div>
        <label for="supervisor_id" style="display: block; margin-bottom: 6px; font-weight: 700;">Supervisor</label>
        <select id="supervisor_id" name="supervisor_id" style="width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px;">
            <option value="">Sin supervisor</option>
            @foreach ($supervisors as $supervisor)
                <option value="{{ $supervisor->id }}" @selected($selectedSupervisor === $supervisor->id)>{{ $supervisor->name }}</option>
            @endforeach
        </select>
        <div style="margin-top: 6px; color: var(--muted); font-size: 13px;">Obligatorio para agentes.</div>
        @error('supervisor_id')
            <div style="margin-top: 6px; color: #b42318; font-size: 13px;">{{ $message }}</div>
        @enderror
    </div>

    @if (! $editing)
        <div>
            <label for="password" style="display: block; margin-bottom: 6px; font-weight: 700;">Contrasena</label>
            <input id="password" name="password" type="password">
            @error('password')
                <div style="margin-top: 6px; color: #b42318; font-size: 13px;">{{ $message }}</div>
            @enderror
        </div>

        <div>
            <label for="password_confirmation" style="display: block; margin-bottom: 6px; font-weight: 700;">Confirmar contrasena</label>
            <input id="password_confirmation" name="password_confirmation" type="password">
        </div>
    @endif

    <div style="grid-column: 1 / -1;">
        <label style="display: inline-flex; align-items: center; gap: 8px;">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $editing ? $userModel->is_active : true))>
            <span>Usuario activo</span>
        </label>
    </div>
</div>

<div style="display: flex; justify-content: space-between; gap: 12px; margin-top: 16px;">
    <a href="{{ route('users.index') }}" style="display: inline-flex; align-items: center; color: var(--muted); text-decoration: none;">Volver a usuarios</a>
    <button class="button" type="submit">{{ $buttonLabel }}</button>
</div>