<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Edit User</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">{{ $user->name }}</h2>
        </div>
    </x-slot>

    <form method="POST" action="{{ route('admin.users.update', $user) }}" class="max-w-3xl rounded-lg border border-blue-100 bg-white p-6 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
        @csrf
        @method('PUT')

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

            <div>
                <x-input-label for="email" value="Email" />
                <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" value="{{ old('email', $user->email) }}" 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-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100" @disabled($user->is(auth()->user()))>
                    <option value="user" @selected(old('role', $user->role) === 'user')>User</option>
                    <option value="support_team" @selected(old('role', $user->role) === 'support_team')>Support Team</option>
                    <option value="admin" @selected(old('role', $user->role) === 'admin')>Admin</option>
                </select>
                @if ($user->is(auth()->user()))
                    <input type="hidden" name="role" value="admin">
                @endif
                <x-input-error :messages="$errors->get('role')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="status" value="Status" />
                <select id="status" name="status" class="mt-1 block w-full rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100" @disabled($user->is(auth()->user()))>
                    <option value="active" @selected(old('status', $user->status) === 'active')>Active</option>
                    <option value="blocked" @selected(old('status', $user->status) === 'blocked')>Blocked</option>
                </select>
                @if ($user->is(auth()->user()))
                    <input type="hidden" name="status" value="active">
                @endif
                <x-input-error :messages="$errors->get('status')" class="mt-2" />
            </div>
        </div>

        <div class="mt-6 flex justify-end gap-3 border-t border-blue-100 pt-6 dark:border-blue-900/50">
            <a href="{{ route('admin.users.show', $user) }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-semibold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900/50 dark:text-blue-300 dark:hover:bg-blue-950/60">Cancel</a>
            <button type="submit" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700">Save Changes</button>
        </div>
    </form>
</x-app-layout>
