{{-- Customer Portal Workflow Progress Component --}}
<div class="max-w-4xl mx-auto p-6">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <div class="bg-blue-600 text-white p-6">
            <h2 class="text-2xl font-bold">Service Progress</h2>
            <p class="text-blue-100 mt-2">Track your vehicle's repair journey</p>
        </div>

        <div class="p-6">
            {{-- Progress Overview --}}
            <div class="mb-8">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm text-gray-600">Progress</span>
                    <span class="text-sm font-medium text-gray-900">{{ $progressPercentage }}% Complete</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full transition-all duration-300" 
                         style="width: {{ $progressPercentage }}%"></div>
                </div>
            </div>

            {{-- Current Status --}}
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
                <div class="flex items-center">
                    <div class="bg-blue-600 rounded-full p-2">
                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold text-gray-900">{{ $currentStepTitle }}</h3>
                        <p class="text-gray-600">{{ $currentStepDescription }}</p>
                        @if($estimatedCompletion)
                            <p class="text-sm text-blue-600 mt-1">
                                Estimated completion: {{ $estimatedCompletion->format('M j, Y \a\t g:i A') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Workflow Steps --}}
            <div class="space-y-4">
                @foreach($this->progressSteps as $index => $step)
                    <div class="flex items-start">
                        {{-- Step Icon --}}
                        <div class="flex-shrink-0 relative">
                            @if($step['status'] === 'completed')
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            @elseif($step['status'] === 'current')
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center animate-pulse">
                                    <div class="w-3 h-3 bg-white rounded-full"></div>
                                </div>
                            @else
                                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
                                    <div class="w-3 h-3 bg-white rounded-full"></div>
                                </div>
                            @endif

                            {{-- Connector Line --}}
                            @if(!$loop->last)
                                <div class="absolute top-8 left-4 w-px h-12 {{ $step['status'] === 'completed' ? 'bg-green-500' : 'bg-gray-300' }}"></div>
                            @endif
                        </div>

                        {{-- Step Content --}}
                        <div class="ml-4 flex-1 pb-8">
                            <div class="flex items-center justify-between">
                                <h4 class="text-lg font-medium {{ $step['status'] === 'completed' ? 'text-green-700' : ($step['status'] === 'current' ? 'text-blue-700' : 'text-gray-500') }}">
                                    {{ $step['title'] }}
                                </h4>
                                @if($step['completedAt'])
                                    <span class="text-sm text-gray-500">
                                        {{ $step['completedAt']->format('M j, g:i A') }}
                                    </span>
                                @endif
                            </div>
                            
                            <p class="text-gray-600 mt-1">{{ $step['description'] }}</p>
                            
                            @if(!empty($step['details']))
                                <div class="mt-3 text-sm text-gray-500">
                                    @foreach($step['details'] as $detail)
                                        <div class="flex items-center mt-1">
                                            <svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                            </svg>
                                            {{ $detail }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if($step['status'] === 'current' && !empty($step['nextActions']))
                                <div class="mt-3 p-3 bg-blue-50 rounded-lg">
                                    <h5 class="text-sm font-medium text-blue-800 mb-2">What's happening next:</h5>
                                    <ul class="text-sm text-blue-700 space-y-1">
                                        @foreach($step['nextActions'] as $action)
                                            <li class="flex items-center">
                                                <svg class="w-3 h-3 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                                </svg>
                                                {{ $action }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Contact Information --}}
            <div class="mt-8 pt-6 border-t border-gray-200">
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="font-medium text-gray-900 mb-2">Need Updates?</h3>
                    <div class="text-sm text-gray-600">
                        <p>Contact your service advisor for real-time updates:</p>
                        @if($jobCard->assignedTo)
                            <div class="mt-2 flex items-center">
                                <svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                </svg>
                                <span class="font-medium">{{ $jobCard->assignedTo->name }}</span>
                            </div>
                        @endif
                        <div class="mt-1 flex items-center">
                            <svg class="w-4 h-4 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                            </svg>
                            <span>{{ app(\App\Settings\GeneralSettings::class)->shop_phone }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
