Car-Repairs-Shop/resources/views/livewire/dashboard/daily-schedule.blade.php

<div class="space-y-4">
    <!-- Appointments -->
    <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
        <div class="flex items-center gap-3 mb-4 p-4">
            <svg class="text-blue-500 w-5 h-5" 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>
            <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Today's Appointments</h3>
            <span class="inline-flex items-center px-2 py-1 text-sm font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400 rounded-full ml-auto">
                {{ $schedule['appointments']->count() }}
            </span>
        </div>
        
        @if($schedule['appointments']->count() > 0)
            <div class="space-y-3">
                @foreach($schedule['appointments'] as $appointment)
                    <div class="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-700/50 rounded-lg border border-zinc-200 dark:border-zinc-600">
                        <div class="flex items-center gap-3">
                            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                            <div>
                                <p class="font-medium text-zinc-900 dark:text-zinc-100">
                                    {{ $appointment->customer->name }}
                                </p>
                                <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                    {{ $appointment->vehicle->year }} {{ $appointment->vehicle->make }} {{ $appointment->vehicle->model }}
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-medium text-zinc-900 dark:text-zinc-100">
                                {{ $appointment->scheduled_time ? $appointment->scheduled_time->format('g:i A') : 'TBD' }}
                            </p>
                            <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                {{ $appointment->service_type ?? 'General Service' }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <svg class="mx-auto w-12 h-12 text-zinc-400 dark:text-zinc-500 mb-3" 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>
                <p class="text-zinc-600 dark:text-zinc-400">No appointments scheduled for today</p>
            </div>
        @endif
    </div>

    <!-- Ready for Pickup -->
    <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
        <div class="flex items-center gap-3 mb-4 p-4">
            <svg class="text-green-500 w-5 h-5" 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>
            <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Ready for Pickup</h3>
            <span class="inline-flex items-center px-2 py-1 text-sm font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400 rounded-full ml-auto">
                {{ $schedule['pickups']->count() }}
            </span>
        </div>
        
        @if($schedule['pickups']->count() > 0)
            <div class="space-y-3">
                @foreach($schedule['pickups'] as $pickup)
                    <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                        <div class="flex items-center gap-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                            <div>
                                <p class="font-medium text-zinc-900 dark:text-zinc-100">
                                    {{ $pickup->customer->name }}
                                </p>
                                <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                    Job #{{ $pickup->job_number }} - {{ $pickup->vehicle->year }} {{ $pickup->vehicle->make }}
                                </p>
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-full">
                            Completed
                        </span>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <svg class="mx-auto w-12 h-12 text-zinc-400 dark:text-zinc-500 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-600 dark:text-zinc-400">No vehicles ready for pickup</p>
            </div>
        @endif
    </div>

    <!-- Overdue Items -->
    @if($schedule['overdue']->count() > 0)
        <div class="bg-white dark:bg-zinc-800 border border-red-200 dark:border-red-700 rounded-lg">
            <div class="flex items-center gap-3 mb-4 p-4">
                <svg class="text-red-500 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
                <h3 class="text-lg font-medium text-red-900 dark:text-red-100">Overdue Items</h3>
                <span class="inline-flex items-center px-2 py-1 text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full ml-auto">
                    {{ $schedule['overdue']->count() }}
                </span>
            </div>
            
            <div class="space-y-3">
                @foreach($schedule['overdue'] as $overdue)
                    <div class="flex items-center justify-between p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                        <div class="flex items-center gap-3">
                            <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                            <div>
                                <p class="font-medium text-zinc-900 dark:text-zinc-100">
                                    {{ $overdue->customer->name }}
                                </p>
                                <p class="text-sm text-zinc-600 dark:text-zinc-400">
                                    Job #{{ $overdue->job_number }} - {{ $overdue->vehicle->year }} {{ $overdue->vehicle->make }}
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-2 py-1 text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full">
                                {{ ucfirst($overdue->status) }}
                            </span>
                            <p class="text-xs text-red-600 dark:text-red-400 mt-1">
                                Due: {{ $overdue->expected_completion_date?->format('M j') }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>