@extends('layouts.admin')
@section('title', 'Users')

@section('content')

{{-- Filters --}}
<div class="card mb-20">
    <div class="card-body" style="padding:16px;">
        <form method="GET" class="filter-row">
            <input type="text" name="search" class="form-control" style="max-width:260px;" placeholder="🔍  Search name, email, phone..." value="{{ request('search') }}">
            <select name="status" class="form-control" style="width:140px;">
                <option value="">All Status</option>
                <option value="active"    {{ request('status')=='active'    ?'selected':'' }}>Active</option>
                <option value="banned"    {{ request('status')=='banned'    ?'selected':'' }}>Banned</option>
                <option value="suspended" {{ request('status')=='suspended' ?'selected':'' }}>Suspended</option>
            </select>
            <select name="level" class="form-control" style="width:140px;">
                <option value="">All Levels</option>
                @foreach(['Bronze','Silver','Gold','Platinum','Diamond'] as $l)
                <option value="{{ $l }}" {{ request('level')===$l?'selected':'' }}>{{ $l }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Filter</button>
            <a href="{{ route('admin.users') }}" class="btn btn-outline">Reset</a>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>All Users <span class="badge badge-primary" style="margin-left:8px;">{{ $users->total() }}</span></h3>
        <a href="{{ route('admin.export.transactions') }}" class="btn btn-sm btn-outline"><i class="fa fa-download"></i> Export</a>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>User</th>
                    <th>Points</th>
                    <th>Balance (GH₵)</th>
                    <th>Level</th>
                    <th>Status</th>
                    <th>Joined</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 }}" class="td-avatar">
                        <div>
                            <div style="font-weight:600;font-size:13px;">{{ $user->name }}</div>
                            <div style="font-size:11px;color:var(--text-muted);">{{ $user->email }}</div>
                            @if($user->phone)<div style="font-size:11px;color:var(--text-muted);">{{ $user->phone }}</div>@endif
                        </div>
                    </div>
                </td>
                <td>
                    <strong>{{ number_format($user->points) }}</strong>
                    <div style="font-size:11px;color:var(--text-muted);">{{ number_format($user->total_earned_points) }} total</div>
                </td>
                <td>GH₵{{ number_format($user->cedis_balance,2) }}</td>
                <td>
                    <span class="badge {{ match($user->level){ 'Diamond'=>'badge-primary','Platinum'=>'','Gold'=>'badge-warning','Silver'=>'badge-muted',default=>'badge-muted' } }}"
                        style="{{ $user->level==='Platinum'?'background:#EDE9FE;color:#7C3AED;':'' }}{{ $user->level==='Diamond'?'background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;':'' }}">
                        {{ $user->level }}
                    </span>
                </td>
                <td>
                    <span class="badge {{ match($user->status){ 'active'=>'badge-success','banned'=>'badge-danger',default=>'badge-warning' } }}">
                        {{ ucfirst($user->status) }}
                    </span>
                </td>
                <td style="font-size:12px;color:var(--text-muted);">
                    {{ $user->created_at->format('d M Y') }}<br>
                    {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                </td>
                <td>
                    <div style="display:flex;gap:5px;">
                        <a href="{{ route('admin.users.detail',$user) }}" class="btn btn-xs btn-outline"><i class="fa fa-eye"></i></a>
                        <a href="{{ route('admin.users.edit',$user) }}"   class="btn btn-xs btn-primary"><i class="fa fa-pen"></i></a>
                        @if($user->status === 'banned')
                            <form method="POST" action="{{ route('admin.users.unban',$user) }}" style="display:inline;">@csrf
                                <button class="btn btn-xs btn-success"><i class="fa fa-unlock"></i></button>
                            </form>
                        @else
                            <button onclick="banModal({{ $user->id }},'{{ addslashes($user->name) }}')" class="btn btn-xs btn-danger"><i class="fa fa-ban"></i></button>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" style="text-align:center;padding:40px;color:var(--text-muted);">No users found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="pagination">{{ $users->withQueryString()->links() }}</div>
</div>

{{-- Ban Modal --}}
<div id="ban-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:12px;padding:24px;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.2);">
        <h3 style="margin-bottom:16px;color:var(--danger);">Ban User</h3>
        <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">Banning: <strong id="ban-name"></strong></p>
        <form method="POST" id="ban-form">@csrf
            <div class="form-group">
                <label class="form-label">Reason for ban</label>
                <textarea name="reason" class="form-control" rows="3" placeholder="Describe the reason..." required></textarea>
            </div>
            <div style="display:flex;gap:10px;margin-top:16px;">
                <button type="submit" class="btn btn-danger flex-1">Ban User</button>
                <button type="button" onclick="closeBanModal()" class="btn btn-outline flex-1">Cancel</button>
            </div>
        </form>
    </div>
</div>

@endsection
@push('scripts')
<script>
function banModal(id,name){
    document.getElementById('ban-modal').style.display='flex';
    document.getElementById('ban-name').textContent=name;
    document.getElementById('ban-form').action=`/admin/users/${id}/ban`;
}
function closeBanModal(){ document.getElementById('ban-modal').style.display='none'; }
</script>
@endpush