@extends('admin.layout')

@section('title', 'Users')

@section('admin-content')
<div class="flex items-center justify-between mb-8">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Users</h1>
        <p class="text-gray-500 mt-1">Manage registered users</p>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-card overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">User</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Email</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Phone</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Orders</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Joined</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @foreach($users as $user)
            <tr class="hover:bg-gray-50 transition-all">
                <td class="px-6 py-4">
                    <a href="{{ route('admin.users.show', $user) }}" class="flex items-center hover:text-primary-600">
                        <div class="w-10 h-10 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl flex items-center justify-center text-white font-bold">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                        <span class="ml-3 font-medium text-gray-900">{{ $user->name }}</span>
                    </a>
                </td>
                <td class="px-6 py-4 text-gray-600">{{ $user->email }}</td>
                <td class="px-6 py-4 text-gray-600">{{ $user->phone ?? '-' }}</td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 bg-primary-100 text-primary-600 rounded-full text-sm font-medium">{{ $user->orders_count }}</span>
                </td>
                <td class="px-6 py-4 text-gray-500">{{ $user->created_at->format('M d, Y') }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

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