@php
    $title = 'Admin Dashboard';
    $header = 'Overview';
@endphp

@extends('admin.layouts.app')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- Total Client Profiles -->
        <div class="bg-gradient-to-br from-primary to-primary-dark rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-3xl font-bold text-white mb-1">{{ number_format($totalProfiles ?? 0) }}</h3>
                        <p class="text-white/90 text-sm font-medium">Total Client Profiles</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-address-card text-white text-2xl"></i>
                    </div>
                </div>
                <a href="{{ route('admin.client-profiles.index') }}" class="block mt-4 text-white/90 hover:text-white text-sm font-medium flex items-center group">
                    View All
                    <i class="fas fa-arrow-circle-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>

        <!-- New Profiles This Week -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-3xl font-bold text-white mb-1">{{ number_format($newProfilesThisWeek ?? 0) }}</h3>
                        <p class="text-white/90 text-sm font-medium">New Profiles This Week</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-calendar-week text-white text-2xl"></i>
                    </div>
                </div>
                <a href="{{ route('admin.client-profiles.index') }}" class="block mt-4 text-white/90 hover:text-white text-sm font-medium flex items-center group">
                    View Details
                    <i class="fas fa-arrow-circle-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>

        <!-- New Profiles This Month -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-3xl font-bold text-white mb-1">{{ number_format($newProfilesThisMonth ?? 0) }}</h3>
                        <p class="text-white/90 text-sm font-medium">New Profiles This Month</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-white text-2xl"></i>
                    </div>
                </div>
                <a href="{{ route('admin.client-profiles.index') }}" class="block mt-4 text-white/90 hover:text-white text-sm font-medium flex items-center group">
                    View Details
                    <i class="fas fa-arrow-circle-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>

        <!-- Profiles Updated Today -->
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-3xl font-bold text-white mb-1">{{ number_format($profilesUpdatedToday ?? 0) }}</h3>
                        <p class="text-white/90 text-sm font-medium">Profiles Updated Today</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-sync-alt text-white text-2xl"></i>
                    </div>
                </div>
                <a href="{{ route('admin.client-profiles.index') }}" class="block mt-4 text-white/90 hover:text-white text-sm font-medium flex items-center group">
                    View Details
                    <i class="fas fa-arrow-circle-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Incomplete Profiles -->
        <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-3xl font-bold text-white mb-1">{{ number_format($incompleteProfiles ?? 0) }}</h3>
                        <p class="text-white/90 text-sm font-medium">Incomplete Profiles</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-white text-2xl"></i>
                    </div>
                </div>
                <a href="{{ route('admin.client-profiles.index') }}" class="block mt-4 text-white/90 hover:text-white text-sm font-medium flex items-center group">
                    Review Profiles
                    <i class="fas fa-arrow-circle-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </div>
@endsection