<!-- Path: app/Views/admin/users_list.view.php -->
<div class="bg-slate-50 min-h-[calc(100vh-64px)] py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-navy-900">System Users</h1>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 text-slate-500 text-sm uppercase tracking-wider border-b border-slate-200">
                        <th class="p-4 font-semibold">Name</th>
                        <th class="p-4 font-semibold">Email</th>
                        <th class="p-4 font-semibold">Phone</th>
                        <th class="p-4 font-semibold">Role</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-sm">
                    @foreach($users as $user)
                        <tr class="hover:bg-slate-50">
                            <td class="p-4 font-medium text-navy-900">{{ $user['full_name'] }}</td>
                            <td class="p-4 text-slate-600">{{ $user['email'] }}</td>
                            <td class="p-4 text-slate-600">{{ $user['phone_number'] }}</td>
                            <td class="p-4">
                                <select class="role-select border rounded px-2 py-1 text-sm outline-none" data-id="{{ $user['id'] }}">
                                    <option value="victim" {{ $user['role'] == 'victim' ? 'selected' : '' }}>Victim</option>
                                    <option value="responder" {{ $user['role'] == 'responder' ? 'selected' : '' }}>Responder</option>
                                    <option value="admin" {{ $user['role'] == 'admin' ? 'selected' : '' }}>Admin</option>
                                </select>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@addScript
<script>
$(document).ready(function() {
    $('.role-select').on('change', function() {
        let id = $(this).data('id');
        let role = $(this).val();
        
        $.post(`{{APP_URL}}/admin/users/${id}/status`, { role: role }, function(res) {
            if(res.status === 'success') showNotification('success', 'Updated', 'Role changed successfully.');
        });
    });
});
</script>
@endAddScript