<div class="space-y-6">
    <!-- Role-specific header -->
    <div class="flex items-center justify-between">
        <h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{{ $roleSpecificData['title'] }}</h2>
        <span class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300 rounded-full">
            {{ 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 rounded-lg border border-zinc-200 dark:border-zinc-700 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>
            <svg class="w-5 h-5 text-blue-500 mt-2" 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"/>
            </svg>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-1">Diagnosis</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['assigned_for_diagnosis'] + $stats['diagnosis_in_progress'] }}</div>
            <svg class="w-5 h-5 text-yellow-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-orange-600 dark:text-orange-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>
            <svg class="w-5 h-5 text-orange-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
            </svg>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-1">Active Work Orders</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['work_orders_active'] }}</div>
            <svg class="w-5 h-5 text-purple-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-1">Quality Inspection</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ $stats['quality_inspections_pending'] }}</div>
            <svg class="w-5 h-5 text-indigo-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4">
            <div class="text-green-600 dark:text-green-400 text-sm font-medium mb-1">Total Active</div>
            <div class="text-2xl font-bold text-zinc-900 dark:text-white">{{ array_sum($stats) }}</div>
            <svg class="w-5 h-5 text-green-500 mt-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
        </div>
    </div>

    <!-- Role-specific section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Role Tasks -->
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
            <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                <h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">My Tasks</h3>
            </div>
            
            <div class="p-6">
                @if(!empty($roleSpecificData['tasks']))
                    <div class="space-y-4">
                        @foreach($roleSpecificData['tasks'] as $task => $count)
                            <div class="flex justify-between items-center p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
                                <span class="text-zinc-700 dark:text-zinc-300 font-medium">{{ $task }}</span>
                                <span class="px-2 py-1 text-sm rounded-full {{ $count > 0 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }}">
                                    {{ $count }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-green-500 mx-auto mb-3" 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"/>
                        </svg>
                        <p class="text-zinc-500 dark:text-zinc-400">All caught up! No pending tasks.</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
            <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                <h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Recent Job Cards</h3>
            </div>
            
            <div class="p-6">
                @if($recentJobCards->count() > 0)
                    <div class="space-y-4">
                        @foreach($recentJobCards as $jobCard)
                            <div class="flex justify-between items-start p-3 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
                                <div class="flex-1">
                                    <div class="font-medium text-zinc-900 dark:text-white">{{ $jobCard->job_card_number ?? $jobCard->job_number }}</div>
                                    <div class="text-sm text-zinc-600 dark:text-zinc-400 mt-1">
                                        {{ $jobCard->customer->name ?? $jobCard->customer->first_name . ' ' . $jobCard->customer->last_name }} - 
                                        {{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}
                                    </div>
                                    <div class="text-xs text-zinc-500 dark:text-zinc-500 mt-1">
                                        {{ $jobCard->created_at->diffForHumans() }}
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs rounded-full bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200">
                                    {{ ucfirst(str_replace('_', ' ', $jobCard->status)) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="mt-6 pt-4 border-t border-zinc-200 dark:border-zinc-700">
                        <a href="{{ route('job-cards.index') }}" class="inline-flex items-center text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200">
                            View all job cards
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-zinc-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <p class="text-zinc-500 dark:text-zinc-400">No recent job cards.</p>
                        <a href="{{ route('job-cards.create') }}" class="inline-flex items-center px-3 py-2 mt-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">
                            Create First Job Card
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
            <h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Quick Actions</h3>
        </div>
        
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @can('job-cards.create')
                <a href="{{ route('job-cards.create') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                    <svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <span class="text-sm">New Job Card</span>
                </a>
                @endcan
                
                @can('inspections.view')
                <a href="{{ route('inspections.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                    <svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    <span class="text-sm">Inspections</span>
                </a>
                @endcan
                
                @can('estimates.view')
                <a href="{{ route('estimates.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                    <svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                    <span class="text-sm">Estimates</span>
                </a>
                @endcan
                
                @can('work-orders.view')
                <a href="{{ route('work-orders.index') }}" class="h-20 flex flex-col items-center justify-center border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                    <svg class="w-6 h-6 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a1 1 0 01-1-1V9a1 1 0 011-1h1a2 2 0 100-4H4a1 1 0 01-1-1V5a1 1 0 011-1h3a1 1 0 001-1V2a2 2 0 012-2z"/>
                    </svg>
                    <span class="text-sm">Work Orders</span>
                </a>
                @endcan
            </div>
        </div>
    </div>
</div>
