@extends('layout.app')
@section('title', 'User Management')
@section('page-title', 'Manage System Users')

@section('content')
<style>
    /* Professional Layout */
    .admin-container { padding: 25px; }
    
    /* Stats Row */
    .stat-card { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; display: flex; align-items: center; }
    .stat-icon { background: #f1f5f9; padding: 12px; border-radius: 10px; margin-right: 15px; color: #475569; }

    /* Table Enhancements */
    .table-container { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; overflow: hidden; }
    .table thead { background: #f8fafc; }
    .table th { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; padding: 18px !important; }
    .table td { padding: 18px !important; font-size: 14px; vertical-align: middle; }

    /* Modern Badges */
    .status-pill { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .status-active { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .status-pending { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    
    .user-name { font-weight: 700; color: #1e293b; }
    .user-email { color: #64748b; font-size: 13px; }
</style>

<div class="admin-container">
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div><small>Total Users</small><h4 class="mb-0">{{ $users->count() }}</h4></div>
            </div>
        </div>
    </div>

    <div class="table-container">
        <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
            <h5 class="m-0 fw-bold">User Directory</h5>
            <div class="input-group w-25">
                <input type="text" class="form-control form-control-sm" placeholder="Search users...">
            </div>
        </div>
        
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>User Identity</th>
                    <th>Contact Information</th>
                    <th>Account Status</th>
                    <th>Financial Position</th>
                    <th class="text-end">Manage</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div class="d-flex align-items-center">
                            <img src="{{ asset('storage/'.$user->avatar) }}" class="rounded-circle me-3" width="40" height="40" style="object-fit:cover;">
                            <div>
                                <div class="user-name">{{ $user->name }}</div>
                                <small class="text-muted">Member since {{ $user->created_at->format('M Y') }}</small>
                            </div>
                        </div>
                    </td>
                    <td><div class="user-email">{{ $user->email }}</div></td>
                    <td>
                        <span class="status-pill {{ $user->is_active ? 'status-active' : 'status-pending' }}">
                            {{ $user->is_active ? 'VERIFIED' : 'PENDING' }}
                        </span>
                    </td>
                    <td><span class="fw-bold">$ {{ number_format($user->wallet->balance ?? 0, 2) }}</span></td>
                    <td class="text-end">
                        <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-sm btn-outline-primary px-3 rounded-pill">
                            Review Profile
                        </a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center py-5">No user records found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection