<x-layouts.app :title="__('Car Repairs Shop Dashboard')">
    <div class="space-y-6">
        <!-- Enhanced Header with Better Actions -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">Car Repairs Shop Dashboard</h1>
                <p class="text-zinc-600 dark:text-zinc-400">{{ now()->format('l, F j, Y') }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                @can('job-cards.create')
                <a href="{{ route('job-cards.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4 mr-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>
                    New Job Card
                </a>
                @endcan
                
                @can('appointments.create')
                <a href="{{ route('appointments.create') }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    Schedule Appointment
                </a>
                @endcan
                
                @can('customers.create')
                <a href="{{ route('customers.create') }}" class="inline-flex items-center px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                    Add Customer
                </a>
                @endcan
            </div>
        </div>

        <!-- Main Dashboard Content -->
        <livewire:dashboard.workflow-overview />
        
        <!-- Additional Dashboard Widgets -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Performance Metrics -->
            <livewire:dashboard.performance-metrics />
            
            <!-- Today's Schedule -->
            <livewire:dashboard.daily-schedule />
        </div>
    </div>
</x-layouts.app>
