@extends('backend.master')
@section('title','User Manager')

@section('content')

    {{-- Font Awesome শুধু ensure করার জন্য (যদি master এ globally না থাকে) --}}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        :root { --primary:#e53935; --bg:#f5f5f5; --ink:#111827; --muted:#6b7280; }
        body { background:var(--bg); }
        .page-wrap{
            max-width:1100px;
            margin:20px auto 40px;
            padding:0 12px;
        }
        .card-main{
            background:#fff;
            border-radius:18px;
            padding:16px 16px 20px;
            box-shadow:0 10px 25px rgba(15,23,42,.08);
            border:1px solid #e5e7eb;
        }
        .header-row{
            display:flex;justify-content:space-between;align-items:center;gap:10px;
        }
        .title{
            font-size:18px;font-weight:700;color:var(--ink);
        }
        .subtitle{font-size:13px;color:var(--muted);}
        .filters{
            display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
            margin-top:10px;margin-bottom:10px;
        }
        .avatar-xs{
            width:30px;height:30px;border-radius:999px;overflow:hidden;
            background:#fee2e2;display:inline-flex;align-items:center;justify-content:center;
            font-size:12px;font-weight:700;color:#b91c1c;margin-right:6px;
        }
        .avatar-xs img{width:100%;height:100%;object-fit:cover;}

        table{
            width:100%;border-collapse:collapse;font-size:13px;
        }
        th,td{
            padding:7px 6px;border-bottom:1px solid #eef2f7;white-space:nowrap;text-align:left;
        }
        th{background:#f9fafb;font-weight:600;color:#4b5563;}
        tr:hover{background:#fafafa;}

        .badge-status{
            display:inline-flex;align-items:center;gap:4px;border-radius:999px;
            padding:2px 8px;font-size:11px;font-weight:600;
        }
        .badge-active{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;}
        .badge-blocked{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}

        .btn-xs{
            border-radius:999px;border:none;padding:5px 9px;font-size:11px;font-weight:600;
            display:inline-flex;align-items:center;gap:4px;cursor:pointer;
        }
        .btn-toggle{
            background:#f3f4f6;color:#111827;
        }
        .btn-toggle.block{background:#fee2e2;color:#b91c1c;}
        .btn-edit{background:#e0f2fe;color:#0369a1;}
        .btn-delete{background:#fee2e2;color:#b91c1c;}
        .tag-role{
            font-size:11px;border-radius:999px;padding:2px 8px;background:#eff6ff;color:#1d4ed8;
        }
        @media (max-width:768px){
            .page-wrap{margin-top:10px;}
            th,td{font-size:12px;}
        }
    </style>

    <div class="page-wrap">
        <div class="card-main">

            <div class="header-row">
                <div>
                    <div class="title">
                        <i class="fa-solid fa-users-gear"></i> User Manager
                    </div>
                    <div class="subtitle">
                        সব user list, status change, edit, delete এবং password change করতে পারবেন।
                    </div>
                </div>
            </div>

            {{-- Flash messages --}}
            @if(session('success'))
                <div class="alert alert-success py-2 mt-2">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger py-2 mt-2">{{ session('error') }}</div>
            @endif

            {{-- Filters --}}
            <form method="GET" class="filters">
                <div>
                    <label class="form-label mb-1" style="font-size:12px;">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All</option>
                        <option value="active"  {{ $status==='active' ? 'selected' : '' }}>Active</option>
                        <option value="blocked" {{ $status==='blocked' ? 'selected' : '' }}>Blocked</option>
                    </select>
                </div>
                <div style="flex:1 1 200px;">
                    <label class="form-label mb-1" style="font-size:12px;">Search</label>
                    <input type="text" name="q" value="{{ $q }}"
                           class="form-control form-control-sm"
                           placeholder="Name / Phone / Email / ID">
                </div>
                <div>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fa-solid fa-magnifying-glass"></i> Filter
                    </button>
                </div>
            </form>

            <div style="overflow-x:auto;">
                <table>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Balance</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($users as $user)
                        <tr>
                            <td>{{ $user->id }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="avatar-xs">
                                        @if($user->avatar)
                                            <img src="{{ asset('storage/'.$user->avatar) }}" alt="">
                                        @else
                                            {{ strtoupper(substr($user->name,0,1)) }}
                                        @endif
                                    </span>
                                    <div>
                                        <div style="font-weight:600;">{{ $user->name }}</div>
                                        <div style="font-size:11px;color:#6b7280;">
                                            {{ $user->country_code }} {{ $user->phone }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $user->phone }}</td>
                            <td>{{ $user->email ?? '-' }}</td>
                            <td>
                                <span class="tag-role">{{ ucfirst($user->role) }}</span>
                            </td>
                            <td>{{ number_format($user->balance) }} BDT</td>
                            <td>
                                @if($user->status === 'active')
                                    <span class="badge-status badge-active">
                                        <i class="fa-solid fa-circle-check"></i> Active
                                    </span>
                                @else
                                    <span class="badge-status badge-blocked">
                                        <i class="fa-solid fa-ban"></i> Blocked
                                    </span>
                                @endif
                            </td>
                            <td>{{ $user->created_at->format('d M Y') }}</td>
                            <td style="text-align:right;">
                                {{-- Toggle status --}}
                                <form action="{{ route('admin.users.toggle-status', $user) }}"
                                      method="POST" style="display:inline;">
                                    @csrf
                                    <button type="submit"
                                            class="btn-xs btn-toggle {{ $user->status === 'blocked' ? 'block' : '' }}">
                                        @if($user->status === 'active')
                                            <i class="fa-solid fa-ban"></i> Block
                                        @else
                                            <i class="fa-solid fa-unlock"></i> Activate
                                        @endif
                                    </button>
                                </form>

                                {{-- Edit --}}
                                <a href="{{ route('admin.users.edit', $user) }}"
                                   class="btn-xs btn-edit">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>

                                {{-- Delete --}}
                                <form action="{{ route('admin.users.destroy', $user) }}"
                                      method="POST" style="display:inline;"
                                      onsubmit="return confirm('Are you sure you want to delete this user?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-xs btn-delete">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted">
                                কোনো user পাওয়া যায়নি।
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-2">
                {{ $users->links() }}
            </div>
        </div>
    </div>
@endsection