<x-app-layout>
    <h1 class="text-xl font-bold mb-4">Manage Users</h1>

    <table class="table-auto w-full border">
        <thead>
            <tr class="bg-gray-100">
                <th class="px-4 py-2 text-left">Name</th>
                <th class="px-4 py-2 text-left">Email</th>
                <th class="px-4 py-2 text-left">Current Role</th>
                <th class="px-4 py-2 text-left">Change Role</th>
            </tr>
        </thead>
        <tbody>
        @foreach($users as $user)
            <tr class="border-t">
                <td class="px-4 py-2">{{ $user->name }}</td>
                <td class="px-4 py-2">{{ $user->email }}</td>
                <td class="px-4 py-2">{{ $user->roles->pluck('name')->implode(', ') }}</td>
                <td class="px-4 py-2">
                    <form method="POST" action="{{ route('admin.users.updateRole', $user) }}">
                        @csrf
                        <select name="role" class="border rounded px-2 py-1">
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}" 
                                    @selected($user->roles->contains('name', $role->name))>
                                    {{ ucfirst($role->name) }}
                                </option>
                            @endforeach
                        </select>
                        <button type="submit" class="ml-2 bg-blue-500 text-white px-2 py-1 rounded">Update</button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</x-app-layout>
