@extends('admin.layout.main')


@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Dashboard Overview</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Welcome back! Here's what's happening with your platform today.</p>
        </div>
        <div class="flex items-center space-x-3">
            <div class="text-sm text-gray-500 dark:text-gray-400">
                <i class="fas fa-calendar-alt mr-1"></i>
                {{ now()->format('l, F j, Y') }}
            </div>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Users -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Users</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $user->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-users text-blue-500 dark:text-blue-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-green-500 flex items-center">
                    <i class="fas fa-arrow-up mr-1"></i>
                    {{ $user->where('created_at', '>=', now()->subDays(7))->count() }} this week
                </span>
            </div>
        </div>

        <!-- Total Projects -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Projects</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $project->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-project-diagram text-green-500 dark:text-green-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-blue-500 flex items-center">
                    <i class="fas fa-chart-line mr-1"></i>
                    {{ $project->where('status', 'in_progress')->count() }} in progress
                </span>
            </div>
        </div>

        <!-- Service Requests -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Service Requests</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $servicesRequest->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-clipboard-list text-orange-500 dark:text-orange-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-red-500 flex items-center">
                    <i class="fas fa-clock mr-1"></i>
                    {{ $servicesRequest->where('status', 'pending')->count() }} pending
                </span>
            </div>
        </div>

        <!-- Total Packages -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Packages</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $packages->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-box-open text-purple-500 dark:text-purple-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-purple-500 flex items-center">
                    <i class="fas fa-star mr-1"></i>
                    Active packages
                </span>
            </div>
        </div>
    </div>

    <!-- Second Row Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Blog Posts -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Blog Posts</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $blog->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-blog text-indigo-500 dark:text-indigo-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-indigo-500 flex items-center">
                    <i class="fas fa-pen mr-1"></i>
                    {{ $blog->where('status', 'published')->count() }} published
                </span>
            </div>
        </div>

        <!-- Contact Messages -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Contact Messages</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $contacts->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-pink-100 dark:bg-pink-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-envelope text-pink-500 dark:text-pink-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-red-500 flex items-center">
                    <i class="fas fa-envelope-open-text mr-1"></i>
                    {{ $contacts->where('status', 'new')->count() }} unread
                </span>
            </div>
        </div>

        <!-- Revenue -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">
                        {{ number_format($servicesRequest->sum('total_price'), 2) }} SR
                    </p>
                </div>
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-green-500 dark:text-green-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-green-500 flex items-center">
                    <i class="fas fa-chart-bar mr-1"></i>
                    This month: {{ number_format($servicesRequest->where('created_at', '>=', now()->startOfMonth())->sum('total_price'), 2) }} SR
                </span>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Left Column -->
        <div class="space-y-8">
            <!-- Recent Service Requests -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                        <i class="fas fa-clipboard-list mr-2 text-blue-500"></i>
                        Recent Service Requests
                    </h2>
                    <a href="{{ route('admin.service-requests.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                        View All
                    </a>
                </div>
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($servicesRequest->sortByDesc('created_at')->take(5) as $request)
                        @php
                            $contactInfo = $request->contact_info ;
                            $statusColors = [
                                'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                'approved' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                            ];
                            $statusLabels = [
                                'pending' => 'Pending',
                                'in_progress' => 'In Progress',
                                'approved' => 'Completed',
                                'cancelled' => 'Cancelled'
                            ];
                        @endphp
                        <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mr-3">
                                            <i class="fas fa-file-alt text-blue-500 dark:text-blue-400 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                {{ $contactInfo['name'] ?? 'Unknown' }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ $request->businessType->name ?? 'N/A' }} • {{ number_format($request->total_price, 2) }} SR
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ml-4 flex-shrink-0">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full {{ $statusColors[$request->status] }}">
                                        {{ $statusLabels[$request->status] }}
                                    </span>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                <span>
                                    <i class="far fa-clock mr-1"></i>
                                    {{ $request->created_at->diffForHumans() }}
                                </span>
                                <a href="{{ route('admin.service-requests.show', $request) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-clipboard-list text-3xl mb-3 opacity-50"></i>
                            <p>No service requests found</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Recent Users -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                        <i class="fas fa-users mr-2 text-green-500"></i>
                        Recent Users
                    </h2>
                    <a href="{{ route('admin.users.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                        View All
                    </a>
                </div>
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($user->sortByDesc('created_at')->take(5) as $userItem)
                        <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/20 dark:to-green-800/20 rounded-lg flex items-center justify-center mr-3">
                                    @if($userItem->image)
                                        <img src="{{ asset($userItem->image) }}" 
                                             alt="{{ $userItem->name }}" 
                                             class="w-10 h-10 rounded-lg object-cover">
                                    @else
                                        <i class="fas fa-user text-green-500 dark:text-green-400"></i>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                        {{ $userItem->name }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                        {{ $userItem->email }}
                                    </p>
                                    @if($userItem->phone)
                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $userItem->phone }}
                                        </p>
                                    @endif
                                </div>
                                <div class="ml-4 flex-shrink-0">
                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                        <i class="far fa-clock mr-1"></i>
                                        {{ $userItem->created_at->format('M j') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-users text-3xl mb-3 opacity-50"></i>
                            <p>No users found</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="space-y-8">
            <!-- Recent Projects -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                        <i class="fas fa-project-diagram mr-2 text-purple-500"></i>
                        Active Projects
                    </h2>
                    <a href="{{ route('admin.Project.allProject.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                        View All
                    </a>
                </div>
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($project->sortByDesc('created_at')->take(5) as $projectItem)
                        @php
                            $progressPercentage = $projectItem->total_amount > 0 ? ($projectItem->paid_amount / $projectItem->total_amount) * 100 : 0;
                            $statusColors = [
                                'not_started' => 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300',
                                'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                'completed' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                'on_hold' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                            ];
                            $statusLabels = [
                                'not_started' => 'Not Started',
                                'in_progress' => 'In Progress',
                                'completed' => 'Completed',
                                'on_hold' => 'On Hold',
                                'cancelled' => 'Cancelled'
                            ];
                        @endphp
                        <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                    {{ $projectItem->project_name }}
                                </h3>
                                <span class="text-xs font-medium text-gray-900 dark:text-white">
                                    {{ number_format($projectItem->total_amount, 2) }} SR
                                </span>
                            </div>
                            
                            <div class="mb-3">
                                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                                    <span>Progress</span>
                                    <span>{{ number_format($progressPercentage, 0) }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                    <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-500" 
                                         style="width: {{ $progressPercentage }}%"></div>
                                </div>
                            </div>
                            
                            {{-- <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                <span class="flex items-center">
                                    <i class="fas fa-calendar-alt mr-1"></i>
                                    {{ $projectItem->deadline ? $projectItem->deadline->format('M j') : 'No deadline' }}
                                </span>
                                <span class="px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$projectItem->status] }}">
                                    {{ $statusLabels[$projectItem->status] }}
                                </span>
                            </div> --}}
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-project-diagram text-3xl mb-3 opacity-50"></i>
                            <p>No projects found</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Recent Contact Messages -->
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                        <i class="fas fa-envelope mr-2 text-pink-500"></i>
                        Recent Contact Messages
                    </h2>
                    <a href="{{ route('admin.contacts.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                        View All
                    </a>
                </div>
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($contacts->sortByDesc('created_at')->take(5) as $contact)
                        @php
                            $statusColors = [
                                'new' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                'read' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
                                'responded' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                'archived' => 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300'
                            ];
                            $statusLabels = [
                                'new' => 'Unread',
                                'read' => 'Read',
                                'responded' => 'Responded',
                                'archived' => 'Archived'
                            ];
                        @endphp
                        <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                        {{ $contact->name }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                        {{ $contact->email }}
                                    </p>
                                </div>
                                <div class="ml-4 flex-shrink-0">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full {{ $statusColors[$contact->status] }}">
                                        {{ $statusLabels[$contact->status] }}
                                    </span>
                                </div>
                            </div>
                            
                            <p class="text-sm text-gray-600 dark:text-gray-300 truncate mb-2">
                                {{ Str::limit($contact->message, 80) }}
                            </p>
                            
                            @if($contact->service)
                                <span class="inline-block px-2 py-1 text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded">
                                    {{ $contact->service }}
                                </span>
                            @endif
                            
                            <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                <span>
                                    <i class="far fa-clock mr-1"></i>
                                    {{ $contact->created_at->diffForHumans() }}
                                </span>
                                <a href="{{ route('admin.contacts.show', $contact) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                            <i class="fas fa-envelope text-3xl mb-3 opacity-50"></i>
                            <p>No contact messages found</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Section -->
    <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Recent Blog Posts -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center">
                    <i class="fas fa-blog mr-2 text-indigo-500"></i>
                    Recent Blog Posts
                </h2>
                <a href="{{ route('admin.blog.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
                    View All
                </a>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                @forelse($blog->sortByDesc('created_at')->take(5) as $post)
                    <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
                        <div class="flex items-center">
                            @if($post->featured_image)
                                <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
                                    <img src="{{ asset( $post->featured_image) }}" 
                                         alt="{{ $post->title }}" 
                                         class="w-full h-full object-cover">
                                </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-1 truncate">
                                    {{ $post->title }}
                                </h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                                    {{ Str::limit(strip_tags($post->content), 100) }}
                                </p>
                                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                    <span>
                                        <i class="far fa-calendar mr-1"></i>
                                        {{ $post->created_at->format('M j, Y') }}
                                    </span>
                                    <span class="px-2 py-1 rounded-full {{ $post->status == 'published' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' }}">
                                        {{ ucfirst($post->status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                        <i class="fas fa-blog text-3xl mb-3 opacity-50"></i>
                        <p>No blog posts found</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-6 flex items-center">
                <i class="fas fa-chart-pie mr-2 text-orange-500"></i>
                Platform Statistics
            </h2>
            
            <div class="space-y-6">
                <!-- Service Requests by Status -->
                <div>
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Service Requests Status</h3>
                    <div class="space-y-2">
                        @php
                            $statusCounts = $servicesRequest->groupBy('status')->map->count();
                            $totalRequests = $servicesRequest->count();
                        @endphp
                        @foreach(['pending', 'in_progress', 'completed', 'cancelled'] as $status)
                            @if($statusCounts->has($status))
                                @php
                                    $percentage = $totalRequests > 0 ? ($statusCounts[$status] / $totalRequests) * 100 : 0;
                                    $colors = [
                                        'pending' => 'bg-yellow-500',
                                        'in_progress' => 'bg-blue-500',
                                        'completed' => 'bg-green-500',
                                        'cancelled' => 'bg-red-500'
                                    ];
                                @endphp
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400 capitalize">{{ $status }}</span>
                                    <div class="w-48 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                        <div class="h-2 rounded-full {{ $colors[$status] }} transition-all duration-500" 
                                             style="width: {{ $percentage }}%"></div>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white w-8 text-right">
                                        {{ $statusCounts[$status] }}
                                    </span>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>

                <!-- Recent Activity -->
                <div>
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Recent Activity</h3>
                    <div class="space-y-3">
                        <div class="flex items-center text-sm">
                            <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center mr-3">
                                <i class="fas fa-user-plus text-blue-500 dark:text-blue-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-gray-900 dark:text-white">
                                    {{ $user->where('created_at', '>=', now()->subDays(7))->count() }} new users this week
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">User registration</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center text-sm">
                            <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center mr-3">
                                <i class="fas fa-clipboard-check text-green-500 dark:text-green-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-gray-900 dark:text-white">
                                    {{ $servicesRequest->where('status', 'completed')->count() }} completed requests
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Service delivery</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center text-sm">
                            <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center mr-3">
                                <i class="fas fa-comments text-purple-500 dark:text-purple-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-gray-900 dark:text-white">
                                    {{ $contacts->where('status', 'new')->count() }} unread messages
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Require attention</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .dark .hover-lift:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    }
    
    /* Custom scrollbar for tables */
    .overflow-auto::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }
    
    .overflow-auto::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .overflow-auto::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .dark .overflow-auto::-webkit-scrollbar-track {
        background: #374151;
    }
    
    .dark .overflow-auto::-webkit-scrollbar-thumb {
        background: #6b7280;
    }
</style>

<script>
    // Auto refresh stats every 30 seconds
    let refreshInterval;
    
    function startAutoRefresh() {
        refreshInterval = setInterval(() => {
            // You can implement AJAX refresh here
            // fetch('/admin/panel/stats')
            //     .then(response => response.json())
            //     .then(data => {
            //         // Update stats
            //     });
        }, 30000); // 30 seconds
    }
    
    function stopAutoRefresh() {
        if (refreshInterval) {
            clearInterval(refreshInterval);
        }
    }
    
    // Start auto-refresh when page loads
    document.addEventListener('DOMContentLoaded', function() {
        startAutoRefresh();
        
        // Stop auto-refresh when user is not on the page
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                stopAutoRefresh();
            } else {
                startAutoRefresh();
            }
        });
        
        // Progress bar animations
        const progressBars = document.querySelectorAll('.rounded-full.h-2 > div');
        progressBars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0';
            setTimeout(() => {
                bar.style.width = width;
            }, 100);
        });
    });
</script>
@endsection