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

@section('content')
<form method="GET" action="{{ route('admin.users.index') }}" class="flex gap-3 mb-6 flex-wrap">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or phone..."
        class="flex-1 min-w-64 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">
    <select name="status" onchange="this.form.submit()" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">
        <option value="">All Users</option>
        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
        <option value="banned" {{ request('status') === 'banned' ? 'selected' : '' }}>Banned</option>
        <option value="deleted" {{ request('status') === 'deleted' ? 'selected' : '' }}>Deleted</option>
    </select>
    <button type="submit" class="btn-primary text-sm px-4">Search</button>
</form>

<div class="card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">User</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Phone</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Balance</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Winning</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Matches</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Status</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Joined</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
                @forelse($users as $user)
                <tr class="hover:bg-white/[0.02] transition {{ $user->trashed() ? 'opacity-50' : '' }}">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-3">
                            <img src="{{ $user->avatar_url }}" class="w-8 h-8 rounded-full object-cover">
                            <p class="text-white font-medium">{{ $user->name }}</p>
                        </div>
                    </td>
                    <td class="px-4 py-3 font-mono text-sm text-slate-300">{{ $user->phone }}</td>
                    <td class="px-4 py-3 text-green-400 font-bold">৳{{ number_format($user->balance, 2) }}</td>
                    <td class="px-4 py-3 text-yellow-400 font-bold">৳{{ number_format($user->winning, 2) }}</td>
                    <td class="px-4 py-3 text-slate-300">{{ $user->total_matches }}</td>
                    <td class="px-4 py-3">
                        @if($user->trashed())
                        <span class="badge badge-secondary">Deleted</span>
                        @elseif($user->is_banned)
                        <span class="badge badge-danger">Banned</span>
                        @else
                        <span class="badge badge-success">Active</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-slate-500 text-xs">{{ $user->created_at->format('d M Y') }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1.5 flex-wrap">
                            <a href="{{ route('admin.users.show', $user) }}" class="text-xs bg-blue-600/20 text-blue-400 hover:bg-blue-600/40 px-2 py-1 rounded-lg transition">View</a>
                            @if(!$user->trashed())
                            <a href="{{ route('admin.users.edit', $user) }}" class="text-xs bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600/40 px-2 py-1 rounded-lg transition">Edit</a>
                            @if(!$user->is_banned)
                            <button onclick="showBanModal({{ $user->id }})" class="text-xs bg-orange-600/20 text-orange-400 hover:bg-orange-600/40 px-2 py-1 rounded-lg transition">Ban</button>
                            @else
                            <form method="POST" action="{{ route('admin.users.unban', $user) }}" class="inline">@csrf<button class="text-xs bg-green-600/20 text-green-400 hover:bg-green-600/40 px-2 py-1 rounded-lg transition">Unban</button></form>
                            @endif
                            <form method="POST" action="{{ route('admin.users.destroy', $user) }}" class="inline">
                                @csrf @method('DELETE')
                                <button type="button" data-confirm="Delete this user?" class="text-xs bg-red-600/20 text-red-400 hover:bg-red-600/40 px-2 py-1 rounded-lg transition">Del</button>
                            </form>
                            @else
                            <form method="POST" action="{{ route('admin.users.restore', $user->id) }}" class="inline">@csrf<button class="text-xs bg-green-600/20 text-green-400 px-2 py-1 rounded-lg">Restore</button></form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="px-4 py-10 text-center text-slate-500">No users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div class="mt-4">{{ $users->withQueryString()->links() }}</div>

{{-- Ban Modal --}}
<div id="banModal" class="hidden fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
    <div class="bg-slate-800 border border-slate-700 rounded-2xl p-6 w-full max-w-md">
        <h3 class="text-white font-bold text-lg mb-4">Ban User</h3>
        <form id="banForm" method="POST">
            @csrf
            <div class="mb-4">
                <label class="text-slate-400 text-sm mb-2 block">Reason for Ban</label>
                <textarea name="ban_reason" rows="3" required placeholder="Explain the reason for banning..."
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-red-500 resize-none"></textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-red-600 hover:bg-red-500 text-white font-bold py-2.5 rounded-xl transition">Ban User</button>
                <button type="button" onclick="document.getElementById('banModal').classList.add('hidden')" class="flex-1 bg-slate-700 text-white font-bold py-2.5 rounded-xl transition">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function showBanModal(userId) {
        document.getElementById('banForm').action = '/admin/users/' + userId + '/ban';
        document.getElementById('banModal').classList.remove('hidden');
    }
</script>
@endpush