<div>
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">Workflow Manager - {{ $jobCard->job_card_number }}</h1>
        <p class="text-zinc-600 dark:text-zinc-400 mt-2">
            {{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }} - {{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Workflow Steps -->
        <div class="lg:col-span-3">
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
                <div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Workflow Progress</h3>
                </div>
                <div class="p-6">

                <!-- Progress Bar -->
                <div class="mb-8">
                    <div class="flex items-center justify-between mb-2">
                        @php
                            $steps = [
                                'received' => 'Received',
                                'in_diagnosis' => 'Diagnosis',
                                'estimate_sent' => 'Estimate',
                                'approved' => 'Approved',
                                'in_progress' => 'Work Order',
                                'quality_check' => 'Quality Check',
                                'completed' => 'Completed',
                                'delivered' => 'Delivered'
                            ];
                            $currentStepIndex = array_search($jobCard->status, array_keys($steps));
                            $totalSteps = count($steps);
                        @endphp

                        @foreach($steps as $key => $label)
                            @php
                                $stepIndex = array_search($key, array_keys($steps));
                                $isCompleted = $stepIndex <= $currentStepIndex;
                                $isCurrent = $stepIndex === $currentStepIndex;
                            @endphp
                            
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold
                                    {{ $isCompleted ? 'bg-green-500 text-white' : ($isCurrent ? 'bg-blue-500 text-white' : 'bg-gray-300 text-zinc-600 dark:text-zinc-400') }}">
                                    {{ $stepIndex + 1 }}
                                </div>
                                <span class="text-xs mt-1 text-center">{{ $label }}</span>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: {{ ($currentStepIndex + 1) / $totalSteps * 100 }}%"></div>
                    </div>
                </div>

                <!-- Current Step Actions -->
                <div class="space-y-6">
                    @if($jobCard->status === 'received')
                        <div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 1: Initial Inspection & Diagnosis</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Start the diagnostic process to identify issues and required services.
                            </p>
                            <a href="{{ route('diagnosis.create', $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">
                                Start Diagnosis
                            </a>
                        </div>
                    @endif

                    @if($jobCard->status === 'in_diagnosis' && $jobCard->diagnosis)
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 2: Create Estimate</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Based on the diagnosis, create a detailed estimate for the customer.
                            </p>
                            <div class="flex space-x-3">
                                <a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" 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">
                                    View Diagnosis
                                </a>
                                <a href="{{ route('estimates.create', $jobCard->diagnosis) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                                    Create Estimate
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'estimate_sent' && $jobCard->estimates->count() > 0)
                        <div class="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 3: Await Customer Approval</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Estimate has been sent to customer. Waiting for approval to proceed.
                            </p>
                            <div class="flex space-x-3">
                                @foreach($jobCard->estimates as $estimate)
                                    <a href="{{ route('estimates.show', $estimate) }}" 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">
                                        View Estimate {{ $estimate->estimate_number }}
                                    </a>
                                @endforeach
                                <button wire:click="approveEstimate" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                                    Mark as Approved
                                </button>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'approved')
                        @php $approvedEstimate = $jobCard->estimates->where('status', 'approved')->first(); @endphp
                        <div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 4: Create Work Order</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Customer has approved the estimate. Create work order to begin repairs.
                            </p>
                            <div class="flex space-x-3">
                                @if($approvedEstimate)
                                    <a href="{{ route('estimates.show', $approvedEstimate) }}" 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">
                                        View Approved Estimate
                                    </a>
                                    <a href="{{ route('work-orders.create', $approvedEstimate) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                                        Create Work Order
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'in_progress' && $jobCard->workOrders->count() > 0)
                        <div class="bg-orange-50 dark:bg-orange-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 5: Work in Progress</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Technicians are currently working on the vehicle. Monitor progress and update work orders.
                            </p>
                            <div class="space-y-3">
                                @foreach($jobCard->workOrders as $workOrder)
                                    <div class="flex items-center justify-between p-3 bg-white dark:bg-zinc-700 rounded border border-zinc-200 dark:border-zinc-600">
                                        <div>
                                            <span class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $workOrder->work_order_number }}</span>
                                            <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Progress: {{ $workOrder->progress_percentage }}%</span>
                                        </div>
                                        <a href="{{ route('work-orders.show', $workOrder) }}" class="inline-flex items-center px-3 py-1 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
                                            Manage
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'quality_check')
                        <div class="bg-indigo-50 dark:bg-indigo-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 6: Quality Check</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                All work has been completed. Perform final quality check before customer delivery.
                            </p>
                            <div class="flex space-x-3">
                                <button wire:click="passQualityCheck" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                                    Pass Quality Check
                                </button>
                                <button wire:click="failQualityCheck" 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">
                                    Fail Quality Check
                                </button>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'completed')
                        <div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Step 7: Ready for Delivery</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Vehicle is ready for customer pickup or delivery. Complete the final handover.
                            </p>
                            <div class="flex space-x-3">
                                <button wire:click="markAsDelivered" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                                    Mark as Delivered
                                </button>
                                <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">
                                    Update Details
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($jobCard->status === 'delivered')
                        <div class="bg-zinc-50 dark:bg-zinc-900 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Workflow Complete</h3>
                            <p class="text-zinc-600 dark:text-zinc-400 mb-4">
                                Vehicle has been delivered to the customer. Job card is complete.
                            </p>
                            <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Delivered</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Job Card Summary -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
                <div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Job Card Summary</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Status</label>
                            @php
                                $statusColors = [
                                    'received' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                                    'in_diagnosis' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
                                    'estimate_sent' => 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
                                    'approved' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                                    'in_progress' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                                    'quality_check' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
                                    'completed' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                                    'delivered' => 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200'
                                ];
                            @endphp
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $statusColors[$jobCard->status] ?? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200' }}">
                                {{ ucwords(str_replace('_', ' ', $jobCard->status)) }}
                            </span>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Priority</label>
                            @php
                                $priorityColors = [
                                    'urgent' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                                    'high' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                                    'medium' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
                                    'low' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                                ];
                            @endphp
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $priorityColors[$jobCard->priority] ?? 'bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200' }}">
                                {{ ucfirst($jobCard->priority) }}
                            </span>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Customer</label>
                            <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Vehicle</label>
                            <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Service Advisor</label>
                            <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->serviceAdvisor?->name ?? 'Unassigned' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
                <div class="p-4 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Quick Links</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-2">
                        <a href="{{ route('job-cards.show', $jobCard) }}" class="w-full inline-flex items-center justify-center px-3 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 text-sm font-medium rounded transition-colors">
                            View Job Card Details
                        </a>
                        
                        @if($jobCard->diagnosis)
                            <a href="{{ route('diagnosis.show', $jobCard->diagnosis) }}" class="w-full inline-flex items-center justify-center px-3 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 text-sm font-medium rounded transition-colors">
                                View Diagnosis
                            </a>
                        @endif

                        @foreach($jobCard->estimates as $estimate)
                            <a href="{{ route('estimates.show', $estimate) }}" class="w-full inline-flex items-center justify-center px-3 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 text-sm font-medium rounded transition-colors">
                                View Estimate {{ $estimate->estimate_number }}
                            </a>
                        @endforeach

                    @foreach($jobCard->workOrders as $workOrder)
                        <a href="{{ route('work-orders.show', $workOrder) }}" class="w-full inline-flex items-center justify-center px-3 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 text-sm font-medium rounded transition-colors">
                            View Work Order {{ $workOrder->work_order_number }}
                        </a>
                    @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-4 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Recent Activity</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-zinc-900 dark:text-zinc-100">Job Card Created</span>
                            <span class="text-zinc-500 dark:text-zinc-400">{{ $jobCard->created_at->diffForHumans() }}</span>
                        </div>

                        @if($jobCard->diagnosis)
                            <div class="flex justify-between">
                                <span class="text-zinc-900 dark:text-zinc-100">Diagnosis Completed</span>
                                <span class="text-zinc-500 dark:text-zinc-400">{{ $jobCard->diagnosis->created_at->diffForHumans() }}</span>
                            </div>
                        @endif

                        @foreach($jobCard->estimates->take(3) as $estimate)
                            <div class="flex justify-between">
                                <span class="text-zinc-900 dark:text-zinc-100">Estimate {{ $estimate->estimate_number }}</span>
                                <span class="text-zinc-500 dark:text-zinc-400">{{ $estimate->created_at->diffForHumans() }}</span>
                            </div>
                        @endforeach

                        @foreach($jobCard->workOrders->take(3) as $workOrder)
                            <div class="flex justify-between">
                                <span class="text-zinc-900 dark:text-zinc-100">Work Order {{ $workOrder->work_order_number }}</span>
                                <span class="text-zinc-500 dark:text-zinc-400">{{ $workOrder->created_at->diffForHumans() }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
