@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Total Users Card -->
        <div
            class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-300 text-sm font-medium mb-1">Total Users</p>
                    <h3 class="text-4xl font-bold text-white">{{ $totalUsers }}</h3>
                </div>
                <div class="bg-purple-500/20 p-4 rounded-xl">
                    <svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
                        </path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Verified Users Card -->
        <div
            class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-300 text-sm font-medium mb-1">Verified Users</p>
                    <h3 class="text-4xl font-bold text-white">{{ $verifiedUsers }}</h3>
                </div>
                <div class="bg-green-500/20 p-4 rounded-xl">
                    <svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Unverified Users Card -->
        <div
            class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-300 text-sm font-medium mb-1">Unverified Users</p>
                    <h3 class="text-4xl font-bold text-white">{{ $unverifiedUsers }}</h3>
                </div>
                <div class="bg-orange-500/20 p-4 rounded-xl">
                    <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
                        </path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Users Table -->
    <div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 overflow-hidden">
        <div class="p-6 border-b border-white/10">
            <h2 class="text-2xl font-bold text-white">Recent Users</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-white/5">
                        <th class="px-6 py-4 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">
                            ID</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">
                            Name</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">
                            Email</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">
                            Status</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">
                            Joined</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    @forelse($recentUsers as $user)
                        <tr class="hover:bg-white/5 transition-colors duration-200">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ Str::limit($user->id, 8) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-white">{{ $user->name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-300">{{ $user->email }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if ($user->email_verified_at)
                                    <span
                                        class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-500/30">
                                        Verified
                                    </span>
                                @else
                                    <span
                                        class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-500/20 text-orange-400 border border-orange-500/30">
                                        Pending
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                                {{ $user->created_at->diffForHumans() }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-gray-400">
                                No users found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection