@extends('layouts.admin')
@section('title','Users')
@section('page-title','User Management')
@section('content')
<div class="flex flex-wrap gap-3 mb-5">
    <form class="flex items-center gap-2 flex-1">
        <input type="search" name="search" value="{{ request('search') }}" placeholder="Search name or email…" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none placeholder:text-slate-600"/>
        <select name="status" class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:border-primary/50 focus:ring-0 focus:outline-none">
            <option value="">All Status</option>
            @foreach(['active','suspended','banned'] as $s)
            <option value="{{ $s }}" {{ request('status')===$s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button class="px-4 py-2 bg-primary/10 text-primary rounded-lg text-sm font-bold border border-primary/20">Filter</button>
    </form>
</div>
<div class="glass-card rounded-2xl overflow-hidden">
    <table class="w-full text-left">
        <thead><tr class="border-b border-white/5 bg-white/5">
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">User</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Phone</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Bank</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Status</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Joined</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-white/5">
            @forelse($users as $user)
            <tr class="hover:bg-white/3 transition-colors">
                <td class="px-4 py-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full overflow-hidden shrink-0"><img src="{{ $user->avatar_url }}" alt="" class="w-full h-full object-cover"/></div>
                        <div>
                            <div class="flex items-center gap-1.5">
                                <p class="text-sm font-bold">{{ $user->name }}</p>
                                @if($user->is_fraud_flagged)<span class="material-symbols-outlined text-red-500 text-xs">flag</span>@endif
                            </div>
                            <p class="text-[10px] text-slate-500">{{ $user->email }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-3 text-sm text-slate-400">{{ $user->phone ?? '—' }}</td>
                <td class="px-4 py-3">
                    @if($user->bank_name)<div><p class="text-xs font-medium">{{ $user->bank_name }}</p><p class="text-[10px] text-slate-500">{{ $user->account_number }}</p></div>
                    @else<span class="text-slate-600 text-xs">—</span>@endif
                </td>
                <td class="px-4 py-3">
                    @php $clr = ['active'=>'green','suspended'=>'orange','banned'=>'red'][$user->account_status] ?? 'slate'; @endphp
                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $clr }}-500/10 text-{{ $clr }}-500">
                        <span class="w-1.5 h-1.5 rounded-full bg-current"></span> {{ $user->account_status }}
                    </span>
                </td>
                <td class="px-4 py-3 text-xs text-slate-500">{{ $user->created_at->format('M d, Y') }}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-1.5">
                        @if($user->account_status !== 'active')
                        <form method="POST" action="{{ route('admin.users.activate', $user) }}">@csrf<button class="p-1.5 bg-green-500/10 text-green-500 rounded-lg hover:bg-green-500/20 transition-all text-xs font-bold" title="Activate"><span class="material-symbols-outlined text-sm">check_circle</span></button></form>
                        @endif
                        @if($user->account_status !== 'suspended')
                        <form method="POST" action="{{ route('admin.users.suspend', $user) }}">@csrf<button class="p-1.5 bg-orange-500/10 text-orange-500 rounded-lg hover:bg-orange-500/20 transition-all text-xs" title="Suspend"><span class="material-symbols-outlined text-sm">pause_circle</span></button></form>
                        @endif
                        @if($user->account_status !== 'banned')
                        <form method="POST" action="{{ route('admin.users.ban', $user) }}" onsubmit="return confirm('Ban {{ $user->name }}?')">@csrf<button class="p-1.5 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500/20 transition-all text-xs" title="Ban"><span class="material-symbols-outlined text-sm">block</span></button></form>
                        @endif
                        <form method="POST" action="{{ route('admin.users.fraud-flag', $user) }}">@csrf<button class="p-1.5 rounded-lg text-xs transition-all {{ $user->is_fraud_flagged ? 'bg-red-500 text-white' : 'bg-white/5 text-slate-400' }}" title="{{ $user->is_fraud_flagged ? 'Remove flag' : 'Flag fraud' }}"><span class="material-symbols-outlined text-sm">flag</span></button></form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="py-16 text-center text-slate-500 text-sm">No users found.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-5">{{ $users->links() }}</div>
@endsection