<div class="space-y-6">
    <!-- Role-specific header -->
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">{{ $roleSpecificData['title'] }}</h1>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
            {{ now()->format('g:i A') }}
        </span>
    </div>

    <!-- Overall Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-1">Pending Inspection</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['pending_inspection'] }}</div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-1">Diagnosis Assigned</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['assigned_for_diagnosis'] }}</div>
        </div>

        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-1">Diagnosis In Progress</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['diagnosis_in_progress'] }}</div>
        </div>

        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-1">Estimates Pending</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['estimates_pending_approval'] }}</div>
        </div>

        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-green-600 dark:text-green-400 text-sm font-medium mb-1">Work Orders Active</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['work_orders_active'] }}</div>
        </div>

        <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4">
            <div class="text-red-600 dark:text-red-400 text-sm font-medium mb-1">Quality Inspections</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['quality_inspections_pending'] }}</div>
        </div>
    </div>

    <!-- Role-specific Tasks -->
    <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
        <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
            <h2 class="text-lg font-medium text-zinc-900 dark:text-white">Quick Actions</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach($roleSpecificData['tasks'] as $taskName => $count)
                    <div class="p-4 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                        <div class="text-sm font-medium text-zinc-900 dark:text-white mb-1">{{ $taskName }}</div>
                        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">{{ $count }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
        <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
            <h2 class="text-lg font-medium text-zinc-900 dark:text-white">Recent Job Cards</h2>
        </div>
        <div class="divide-y divide-zinc-200 dark:divide-zinc-700">
            @forelse($recentJobCards as $jobCard)
                <div class="p-6 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-zinc-900 dark:text-white">
                                Job #{{ $jobCard->job_number ?? $jobCard->id }}
                            </div>
                            <div class="text-sm text-zinc-600 dark:text-zinc-400">
                                {{ $jobCard->customer->name ?? 'Unknown Customer' }} - 
                                {{ $jobCard->vehicle->year ?? '' }} {{ $jobCard->vehicle->make ?? '' }} {{ $jobCard->vehicle->model ?? '' }}
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                            {{ ucfirst(str_replace('_', ' ', $jobCard->status)) }}
                        </span>
                    </div>
                </div>
            @empty
                <div class="p-6 text-center text-zinc-500 dark:text-zinc-400">
                    No recent job cards found.
                </div>
            @endforelse
        </div>
    </div>
</div>
