@php
    $selectedPermissions = old('permissions', $user->permissions ?? []);
    if (!is_array($selectedPermissions)) {
        $selectedPermissions = [];
    }
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div>
        <x-input-label for="name" value="Name" />
        <input id="name" name="name" type="text" value="{{ old('name', $user->name ?? '') }}" class="mt-1 block w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" required />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="email" value="Email" />
        <input id="email" name="email" type="email" value="{{ old('email', $user->email ?? '') }}" class="mt-1 block w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" required />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="role" value="Role" />
        <select id="role" name="role" class="mt-1 block w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" required>
            @php($roleVal = old('role', $user->role ?? 'staff'))
            @foreach(['admin' => 'admin', 'agent' => 'agent', 'staff' => 'staff'] as $key => $label)
                <option value="{{ $key }}" {{ $roleVal === $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('role')" class="mt-2" />
        <p class="text-xs text-slate-500 mt-2">
            <span class="font-semibold">admin</span> ignores permissions (full access). <span class="font-semibold">agent</span> uses the Agent dashboard and can Track by default.
        </p>
    </div>

    <div>
        <x-input-label for="password" value="Password" />
        <input id="password" name="password" type="password" class="mt-1 block w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" {{ ($user->exists ?? false) ? '' : 'required' }} />
        <x-input-error :messages="$errors->get('password')" class="mt-2" />
        @if(($user->exists ?? false))
            <p class="text-xs text-slate-500 mt-2">Leave blank to keep current password.</p>
        @endif
    </div>

    <div>
        <x-input-label for="password_confirmation" value="Confirm Password" />
        <input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full rounded-xl border-slate-300 focus:border-slate-900 focus:ring-slate-900" {{ ($user->exists ?? false) ? '' : 'required' }} />
    </div>
</div>

<div class="mt-8">
    <h3 class="text-sm font-semibold text-slate-800">Permissions</h3>
    <p class="text-xs text-slate-500 mt-1">Select which modules this user can access.</p>

    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        @foreach($availablePermissions as $key => $label)
            <label class="flex items-start gap-3 p-3 rounded-2xl border border-slate-200/70 bg-slate-50/50">
                <input type="checkbox" name="permissions[]" value="{{ $key }}" class="mt-1 rounded border-slate-300 text-slate-900 focus:ring-slate-900" {{ in_array($key, $selectedPermissions, true) ? 'checked' : '' }} />
                <div>
                    <div class="text-sm font-semibold text-slate-800">{{ $label }}</div>
                    <div class="text-xs text-slate-500">Key: <code>{{ $key }}</code></div>
                </div>
            </label>
        @endforeach
    </div>
    <x-input-error :messages="$errors->get('permissions')" class="mt-2" />
</div>