@extends('layouts.app')
@section('title', 'Users')
@section('page-title', 'User Management')
@section('content')

<div class="card">
    <div class="card-header">
        <form method="GET" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" style="max-width:240px;" placeholder="Search name or email…">
            <select name="role" class="form-control" style="width:auto;" onchange="this.form.submit()">
                <option value="">All Roles</option>
                <option value="admin"     {{ request('role')==='admin'     ?'selected':'' }}>Admin</option>
                <option value="tester"    {{ request('role')==='tester'    ?'selected':'' }}>Tester</option>
                <option value="candidate" {{ request('role')==='candidate' ?'selected':'' }}>Candidate</option>
            </select>
            <button class="btn btn-outline btn-sm" type="submit"><i class="bi bi-search"></i></button>
        </form>
        <span class="text-muted text-sm">{{ $users->total() }} user(s)</span>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr><th>User</th><th>Role</th><th>Country</th><th>Joined</th><th>Status</th><th>Actions</th></tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px;">
                            <img src="{{ $user->avatar_url }}" style="width:32px;height:32px;border-radius:50%;object-fit:cover;">
                            <div>
                                <div style="font-weight:600;">{{ $user->name }}</div>
                                <div class="text-xs text-muted">{{ $user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge {{ match($user->role) { 'admin'=>'badge-danger','tester'=>'badge-info','candidate'=>'badge-muted',default=>'badge-muted' } }}">{{ ucfirst($user->role) }}</span></td>
                    <td class="text-sm text-muted">{{ $user->country ?? '—' }}</td>
                    <td class="text-xs text-muted">{{ $user->created_at->format('M j, Y') }}</td>
                    <td>
                        <span class="badge {{ $user->is_active ? 'badge-success' : 'badge-danger' }}">
                            {{ $user->is_active ? 'Active' : 'Suspended' }}
                        </span>
                    </td>
                    <td>
                        @if($user->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.users.toggle', $user) }}" style="display:inline;">
                            @csrf
                            <button class="btn {{ $user->is_active ? 'btn-danger' : 'btn-success' }} btn-sm">
                                {{ $user->is_active ? 'Suspend' : 'Activate' }}
                            </button>
                        </form>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" style="text-align:center;padding:40px;color:var(--muted);">No users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
    <div class="pagination-wrapper">{{ $users->appends(request()->query())->links() }}</div>
    @endif
</div>
@endsection