@extends('layouts.admin')

@section('content')
<div class="header">
    <div>
        <h1 style="margin:0; font-weight:800; font-size:28px">User Management</h1>
        <p style="color:#555; margin:5px 0 0">View and manage all registered accounts</p>
    </div>
</div>

<style>
    .table-container { background: var(--card); border-radius: 25px; border: 1px solid #222; padding: 30px; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th { color: #555; font-size: 10px; text-transform: uppercase; padding-bottom: 20px; letter-spacing: 1px; }
    td { padding: 18px 0; font-size: 14px; border-top: 1px solid #222; vertical-align: middle; }
    .user-info { display: flex; align-items: center; gap: 15px; }
    .avatar { width: 40px; height: 40px; background: #222; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary); }
    .badge { padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .badge-rider { background: rgba(1, 60, 123, 0.2); color: #4aa3ff; }
    .badge-driver { background: rgba(0, 255, 0, 0.1); color: #00ff00; }
    .badge-admin { background: rgba(255, 179, 0, 0.2); color: #ffb300; }
    
    .pagination { margin-top: 30px; display: flex; gap: 10px; }
    .page-link { padding: 8px 15px; background: #1a1a1a; border-radius: 8px; color: #888; text-decoration: none; font-size: 12px; border: 1px solid #333; }
    .page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }
</style>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>User Detail</th>
                <th>Type</th>
                <th>Wallet Balance</th>
                <th>Registered</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>
                    <div class="user-info">
                        <div class="avatar">{{ substr($user->name, 0, 1) }}</div>
                        <div>
                            <div style="font-weight: 600">{{ $user->name }}</div>
                            <div style="font-size: 12px; color: #555">{{ $user->email }}</div>
                        </div>
                    </div>
                </td>
                <td>
                    <span class="badge badge-{{ $user->user_type }}">{{ $user->user_type }}</span>
                </td>
                <td>
                    <span style="font-family: monospace; font-weight: bold">₦{{ number_format($user->wallet->balance ?? 0, 2) }}</span>
                </td>
                <td style="color: #666; font-size: 13px">
                    {{ $user->created_at->format('M d, Y') }}
                </td>
                <td>
                    <button class="btn btn-outline" style="padding: 5px 12px; font-size: 11px">Manage</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

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