Car-Repairs-Shop/resources/views/livewire/job-cards/show.blade.php

<div>
    <!-- Enhanced Header with Status Card -->
    <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm mb-8">
        <div class="p-6">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-2">
                        <h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">{{ $jobCard->job_card_number }}</h1>
                        @php
                            $statusColors = [
                                'received' => 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-800',
                                'in_diagnosis' => 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900 dark:text-yellow-200 dark:border-yellow-800',
                                'estimate_sent' => 'bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900 dark:text-purple-200 dark:border-purple-800',
                                'approved' => 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900 dark:text-green-200 dark:border-green-800',
                                'in_progress' => 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900 dark:text-orange-200 dark:border-orange-800',
                                'quality_check' => 'bg-indigo-100 text-indigo-800 border-indigo-200 dark:bg-indigo-900 dark:text-indigo-200 dark:border-indigo-800',
                                'completed' => 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900 dark:text-green-200 dark:border-green-800',
                                'delivered' => 'bg-zinc-100 text-zinc-800 border-zinc-200 dark:bg-zinc-700 dark:text-zinc-200 dark:border-zinc-600',
                                'cancelled' => 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-800'
                            ];
                        @endphp
                        <span class="inline-flex items-center px-3 py-1 text-sm font-semibold border rounded-full {{ $statusColors[$jobCard->status] ?? 'bg-zinc-100 text-zinc-800 border-zinc-200 dark:bg-zinc-700 dark:text-zinc-200 dark:border-zinc-600' }}">
                            <div class="w-2 h-2 bg-current rounded-full mr-2"></div>
                            {{ ucwords(str_replace('_', ' ', $jobCard->status)) }}
                        </span>
                    </div>
                    
                    <div class="space-y-1">
                        <p class="text-lg font-medium text-zinc-900 dark:text-zinc-100">
                            {{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}
                        </p>
                        <p class="text-zinc-600 dark:text-zinc-400">
                            {{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }} • {{ $jobCard->vehicle->license_plate }}
                        </p>
                        <p class="text-sm text-zinc-500 dark:text-zinc-500">
                            Arrived: {{ $jobCard->arrival_datetime->format('M d, Y \a\t g:i A') }}
                        </p>
                    </div>
                </div>
                
                <div class="flex flex-col space-y-3 ml-6">
                    <div class="flex space-x-3">
                        <a href="{{ route('job-cards.edit', $jobCard) }}" 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-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                            Edit
                        </a>
                        
                        <!-- Diagnosis Workflow Actions -->
                        @if($jobCard->status === 'inspected')
                            <flux:button wire:click="openAssignmentModal" variant="filled" color="blue" size="sm">
                                <flux:icon.wrench-screwdriver class="w-6 h-6" />
                                Assign for Diagnosis
                            </flux:button>
                        @elseif($jobCard->status === 'assigned_for_diagnosis')
                            <flux:button wire:click="startDiagnosis" variant="filled" color="green" size="sm">
                                <flux:icon.play class="w-6 h-6" />
                                Start Diagnosis
                            </flux:button>
                        @elseif($jobCard->status === 'in_diagnosis' && !$jobCard->diagnosis)
                            <a href="{{ route('diagnosis.create', $jobCard) }}" class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors shadow-sm">
                                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                                Create Diagnosis
                            </a>
                        @elseif($jobCard->diagnosis)
                            <a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors shadow-sm">
                                <svg class="w-6 h-6 mr-2" 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"></path>
                                </svg>
                                View Diagnosis
                            </a>
                        @endif
                        
                        @if(in_array($jobCard->status, ['received', 'in_diagnosis']))
                            <a href="{{ route('job-cards.workflow', $jobCard) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors shadow-sm">
                                <svg class="w-6 h-6 mr-2" 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"></path>
                                </svg>
                                {{ $jobCard->status === 'received' ? 'Start Workflow' : 'Continue Workflow' }}
                            </a>
                        @endif
                    </div>
                    
                    <!-- Quick Stats -->
                    <div class="grid grid-cols-2 gap-4 text-center">
                        <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-3">
                            <div class="text-lg font-bold text-zinc-900 dark:text-zinc-100">
                                @php
                                    $priorityColors = [
                                        'urgent' => 'text-red-600 dark:text-red-400',
                                        'high' => 'text-orange-600 dark:text-orange-400',
                                        'medium' => 'text-yellow-600 dark:text-yellow-400',
                                        'low' => 'text-green-600 dark:text-green-400'
                                    ];
                                @endphp
                                <span class="{{ $priorityColors[$jobCard->priority] ?? 'text-zinc-600 dark:text-zinc-400' }}">
                                    {{ ucfirst($jobCard->priority) }}
                                </span>
                            </div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">Priority</div>
                        </div>
                        <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-3">
                            <div class="text-lg font-bold text-zinc-900 dark:text-zinc-100">
                                {{ number_format($jobCard->mileage_in) }}
                            </div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">Mileage</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Enhanced Job Card Details -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        Job Card Details
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Service Advisor</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->serviceAdvisor?->name ?? 'Unassigned' }}</p>
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Arrival Date</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->arrival_datetime->format('M d, Y H:i A') }}</p>
                        </div>

                        @if($jobCard->expected_completion_date)
                            <div class="space-y-1">
                                <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Expected Completion</label>
                                <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->expected_completion_date->format('M d, Y H:i A') }}</p>
                            </div>
                        @endif

                        @if($jobCard->fuel_level_in)
                            <div class="space-y-1">
                                <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Fuel Level In</label>
                                <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->fuel_level_in }}</p>
                            </div>
                        @endif

                        @if($jobCard->keys_location)
                            <div class="space-y-1">
                                <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Keys Location</label>
                                <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->keys_location }}</p>
                            </div>
                        @endif
                    </div>

                    @if($jobCard->customer_reported_issues)
                        <div class="mt-8 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
                            <div class="flex items-start space-x-3">
                                <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" 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"></path>
                                </svg>
                                <div>
                                    <label class="block text-sm font-semibold text-amber-800 dark:text-amber-300 mb-1">Customer Reported Issues</label>
                                    <p class="text-amber-700 dark:text-amber-200">{{ $jobCard->customer_reported_issues }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->vehicle_condition_notes)
                        <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                            <div class="flex items-start space-x-3">
                                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" 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"></path>
                                </svg>
                                <div>
                                    <label class="block text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1">Vehicle Condition Notes</label>
                                    <p class="text-blue-700 dark:text-blue-200">{{ $jobCard->vehicle_condition_notes }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->notes)
                        <div class="mt-6 p-4 bg-zinc-50 dark:bg-zinc-700 border border-zinc-200 dark:border-zinc-600 rounded-lg">
                            <div class="flex items-start space-x-3">
                                <svg class="w-5 h-5 text-zinc-600 dark:text-zinc-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                                </svg>
                                <div>
                                    <label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1">Additional Notes</label>
                                    <p class="text-zinc-600 dark:text-zinc-400">{{ $jobCard->notes }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Enhanced Checklist -->
                    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex items-center p-3 {{ $jobCard->personal_items_removed ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800' }} rounded-lg">
                            @if($jobCard->personal_items_removed)
                                <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                            @else
                                <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            @endif
                            <span class="{{ $jobCard->personal_items_removed ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200' }} font-medium">Personal items removed</span>
                        </div>
                        
                        <div class="flex items-center p-3 {{ $jobCard->photos_taken ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800' }} rounded-lg">
                            @if($jobCard->photos_taken)
                                <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                            @else
                                <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            @endif
                            <span class="{{ $jobCard->photos_taken ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200' }} font-medium">Photos taken</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Customer Information -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        Customer Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Name</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}</p>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Phone</label>
                            <a href="tel:{{ $jobCard->customer->phone }}" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">{{ $jobCard->customer->phone }}</a>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Email</label>
                            <a href="mailto:{{ $jobCard->customer->email }}" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">{{ $jobCard->customer->email }}</a>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Address</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->customer->address }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Vehicle Information -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-1"></path>
                        </svg>
                        Vehicle Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Make & Model</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</p>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">License Plate</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium font-mono bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded inline-block">{{ $jobCard->vehicle->license_plate }}</p>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">VIN</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-mono text-sm">{{ $jobCard->vehicle->vin }}</p>
                        </div>
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Engine</label>
                            <p class="text-zinc-900 dark:text-zinc-100 font-medium">{{ $jobCard->vehicle->engine_type }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Workflow Progress -->
            @if($jobCard->diagnosis || $jobCard->estimates->count() > 0 || $jobCard->workOrders->count() > 0)
                <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                    <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                        <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-blue-600" 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"></path>
                            </svg>
                            Workflow Progress
                        </h3>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            @if($jobCard->diagnosis)
                                <div class="flex items-center justify-between p-5 bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                            <svg class="w-5 h-5 text-white" 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"></path>
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-blue-900 dark:text-blue-100">Diagnosis Completed</h4>
                                            <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">{{ Str::limit($jobCard->diagnosis->diagnosis_summary, 80) }}</p>
                                            <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">{{ $jobCard->diagnosis->created_at->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                    <a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
                                        View Details
                                    </a>
                                </div>
                            @endif

                            @foreach($jobCard->estimates as $estimate)
                                <div class="flex items-center justify-between p-5 bg-gradient-to-r from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200 dark:border-purple-800 rounded-lg">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center">
                                            <svg class="w-5 h-5 text-white" 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"></path>
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-purple-900 dark:text-purple-100">Estimate {{ $estimate->estimate_number }}</h4>
                                            <p class="text-sm text-purple-700 dark:text-purple-300 mt-1">
                                                <span class="font-semibold">${{ number_format($estimate->total_amount, 2) }}</span> • 
                                                <span class="capitalize">{{ str_replace('_', ' ', $estimate->status) }}</span>
                                            </p>
                                            <p class="text-xs text-purple-600 dark:text-purple-400 mt-1">{{ $estimate->created_at->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                    <a href="{{ route('estimates.show', $estimate) }}" class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
                                        View Details
                                    </a>
                                </div>
                            @endforeach

                            @foreach($jobCard->workOrders as $workOrder)
                                <div class="flex items-center justify-between p-5 bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-800 rounded-lg">
                                    <div class="flex items-start space-x-4">
                                        <div class="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
                                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-green-900 dark:text-green-100">Work Order {{ $workOrder->work_order_number }}</h4>
                                            <div class="flex items-center space-x-2 mt-1">
                                                <div class="flex-1 bg-green-200 dark:bg-green-700 rounded-full h-2">
                                                    <div class="bg-green-600 dark:bg-green-400 h-2 rounded-full" style="width: {{ $workOrder->progress_percentage }}%"></div>
                                                </div>
                                                <span class="text-sm font-medium text-green-700 dark:text-green-300">{{ $workOrder->progress_percentage }}%</span>
                                            </div>
                                            <p class="text-sm text-green-700 dark:text-green-300 mt-1">{{ ucwords(str_replace('_', ' ', $workOrder->status)) }}</p>
                                            <p class="text-xs text-green-600 dark:text-green-400 mt-1">{{ $workOrder->created_at->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                    <a href="{{ route('work-orders.show', $workOrder) }}" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors">
                                        View Details
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Enhanced Sidebar -->
        <div class="space-y-8">
            <!-- Enhanced Quick Actions -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Quick Actions
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        @if($jobCard->status === 'received')
                            <a href="{{ route('inspections.create', ['jobCard' => $jobCard, 'type' => 'incoming']) }}" class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg">
                                <svg class="w-5 h-5 mr-2" 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"></path>
                                </svg>
                                Perform Initial Inspection
                            </a>
                            <div class="bg-amber-50 dark:bg-amber-900/50 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                                            Initial Inspection Required
                                        </h3>
                                        <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                                            <p>Complete the initial vehicle inspection before proceeding to diagnosis.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if($jobCard->status === 'inspected')
                            <a href="{{ route('diagnosis.create', $jobCard) }}" class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg">
                                <svg class="w-5 h-5 mr-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"></path>
                                </svg>
                                Start Diagnosis
                            </a>
                        @endif

                        @if($jobCard->diagnosis && !$jobCard->estimates->count())
                            <a href="{{ route('estimates.create', $jobCard->diagnosis) }}" class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg">
                                <svg class="w-5 h-5 mr-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"></path>
                                </svg>
                                Create Estimate
                            </a>
                        @endif

                        @if($jobCard->estimates->where('status', 'approved')->count() > 0 && !$jobCard->workOrders->count())
                            <a href="{{ route('work-orders.create', $jobCard->estimates->where('status', 'approved')->first()) }}" class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
                                </svg>
                                Create Work Order
                            </a>
                        @endif

                        <a href="{{ route('job-cards.edit', $jobCard) }}" class="w-full inline-flex items-center justify-center px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg transition-all duration-200">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                            Edit Job Card
                        </a>
                        
                        <!-- Additional Quick Actions -->
                        <div class="grid grid-cols-2 gap-3 mt-6">
                            <a href="#" class="inline-flex items-center justify-center px-4 py-2 bg-amber-100 dark:bg-amber-900/20 hover:bg-amber-200 dark:hover:bg-amber-900/40 text-amber-800 dark:text-amber-300 text-sm font-medium rounded-lg transition-colors">
                                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H9.5a2 2 0 01-2-2V5a2 2 0 012-2H14"></path>
                                </svg>
                                Print
                            </a>
                            <a href="#" class="inline-flex items-center justify-center px-4 py-2 bg-indigo-100 dark:bg-indigo-900/20 hover:bg-indigo-200 dark:hover:bg-indigo-900/40 text-indigo-800 dark:text-indigo-300 text-sm font-medium rounded-lg transition-colors">
                                <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                                </svg>
                                Share
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Timeline -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-sm">
                <div class="p-6 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Timeline
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-6">
                        <!-- Timeline items with improved styling -->
                        <div class="relative">
                            <div class="flex items-start space-x-4">
                                <div class="flex-shrink-0 w-3 h-3 bg-blue-500 rounded-full mt-2 ring-4 ring-blue-100 dark:ring-blue-900"></div>
                                <div class="min-w-0 flex-1">
                                    <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Job Card Created</div>
                                    <div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $jobCard->created_at->format('M d, Y \a\t g:i A') }}</div>
                                    <div class="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{{ $jobCard->created_at->diffForHumans() }}</div>
                                </div>
                            </div>
                            @if($jobCard->diagnosis || $jobCard->estimates->count() > 0 || $jobCard->workOrders->count() > 0)
                                <div class="absolute left-1.5 top-5 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
                            @endif
                        </div>

                        @if($jobCard->diagnosis)
                            <div class="relative">
                                <div class="flex items-start space-x-4">
                                    <div class="flex-shrink-0 w-3 h-3 bg-yellow-500 rounded-full mt-2 ring-4 ring-yellow-100 dark:ring-yellow-900"></div>
                                    <div class="min-w-0 flex-1">
                                        <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Diagnosis Completed</div>
                                        <div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $jobCard->diagnosis->created_at->format('M d, Y \a\t g:i A') }}</div>
                                        <div class="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{{ $jobCard->diagnosis->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                                @if($jobCard->estimates->count() > 0 || $jobCard->workOrders->count() > 0)
                                    <div class="absolute left-1.5 top-5 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
                                @endif
                            </div>
                        @endif

                        @foreach($jobCard->estimates as $index => $estimate)
                            <div class="relative">
                                <div class="flex items-start space-x-4">
                                    <div class="flex-shrink-0 w-3 h-3 bg-purple-500 rounded-full mt-2 ring-4 ring-purple-100 dark:ring-purple-900"></div>
                                    <div class="min-w-0 flex-1">
                                        <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Estimate {{ $estimate->estimate_number }} Created</div>
                                        <div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $estimate->created_at->format('M d, Y \a\t g:i A') }}</div>
                                        <div class="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{{ $estimate->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                                @if($index < $jobCard->estimates->count() - 1 || $jobCard->workOrders->count() > 0)
                                    <div class="absolute left-1.5 top-5 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
                                @endif
                            </div>
                        @endforeach

                        @foreach($jobCard->workOrders as $index => $workOrder)
                            <div class="relative">
                                <div class="flex items-start space-x-4">
                                    <div class="flex-shrink-0 w-3 h-3 bg-green-500 rounded-full mt-2 ring-4 ring-green-100 dark:ring-green-900"></div>
                                    <div class="min-w-0 flex-1">
                                        <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Work Order {{ $workOrder->work_order_number }} Created</div>
                                        <div class="text-sm text-zinc-500 dark:text-zinc-400">{{ $workOrder->created_at->format('M d, Y \a\t g:i A') }}</div>
                                        <div class="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{{ $workOrder->created_at->diffForHumans() }}</div>
                                    </div>
                                </div>
                                @if($index < $jobCard->workOrders->count() - 1)
                                    <div class="absolute left-1.5 top-5 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Technician Assignment Modal -->
    @if($showAssignmentModal)
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-zinc-800 rounded-lg p-6 w-full max-w-md mx-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Assign Technician for Diagnosis</h3>
                    <button wire:click="closeAssignmentModal" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                
                <form wire:submit="assignForDiagnosis">
                    <div class="mb-6">
                        <flux:field>
                            <flux:label>Select Technician</flux:label>
                            <flux:select wire:model="selectedTechnicianId" placeholder="Choose a technician...">
                                @foreach($availableTechnicians as $technician)
                                    <option value="{{ $technician->id }}">{{ $technician->name }}</option>
                                @endforeach
                            </flux:select>
                            <flux:error name="selectedTechnicianId" />
                        </flux:field>
                    </div>
                    
                    <div class="flex justify-end space-x-3">
                        <flux:button wire:click="closeAssignmentModal" variant="ghost">
                            Cancel
                        </flux:button>
                        <flux:button type="submit" variant="filled" color="blue">
                            Assign Technician
                        </flux:button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>