@php
    $currentStep = $currentStep ?? 1;
    $totalSteps = 5;
    
    $steps = [
        1 => ['title' => 'انتخاب محصولات', 'icon' => '📦', 'description' => 'انتخاب محصول(ها) + مقادیر'],
        2 => ['title' => 'ثبت پیشنهادات', 'icon' => '🏢', 'description' => 'ثبت گزارش تأمین‌کننده‌ها'],
        3 => ['title' => 'انتخاب تأمین‌کننده', 'icon' => '✅', 'description' => 'مقایسه و انتخاب تأمین‌کننده'],
        4 => ['title' => 'هزینه‌های جانبی', 'icon' => '💰', 'description' => 'فاکتور/هزینه‌های جانبی'],
        5 => ['title' => 'پیش‌نمایش و ثبت', 'icon' => '📋', 'description' => 'پیش‌نمایش و ثبت نهایی']
    ];
@endphp

<div class="mb-8">
    <div class="flex items-center justify-between">
        @for($i = 1; $i <= $totalSteps; $i++)
            <div class="flex items-center">
                <div class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full flex items-center justify-center text-lg font-semibold transition-all duration-200
                        @if($i < $currentStep)
                            bg-green-500 text-white
                        @elseif($i == $currentStep)
                            bg-blue-500 text-white ring-4 ring-blue-500/20
                        @else
                            bg-slate-700 text-slate-400
                        @endif">
                        @if($i < $currentStep)
                            <span class="text-xl">✅</span>
                        @else
                            {{ $steps[$i]['icon'] }}
                        @endif
                    </div>
                    <div class="mt-2 text-center">
                        <div class="text-sm font-medium text-slate-200">{{ $steps[$i]['title'] }}</div>
                        <div class="text-xs text-slate-400 mt-1">{{ $steps[$i]['description'] }}</div>
                    </div>
                </div>
                
                @if($i < $totalSteps)
                    <div class="w-16 h-0.5 mx-4 transition-all duration-200
                        @if($i < $currentStep)
                            bg-green-500
                        @else
                            bg-slate-700
                        @endif"></div>
                @endif
            </div>
        @endfor
    </div>
    
    <!-- Progress Bar -->
    <div class="mt-6">
        <div class="w-full bg-slate-700 rounded-full h-2">
            <div class="bg-gradient-to-r from-blue-500 to-green-500 h-2 rounded-full transition-all duration-500"
                 style="width: {{ ($currentStep - 1) / ($totalSteps - 1) * 100 }}%"></div>
        </div>
        <div class="text-center mt-2 text-sm text-slate-400">
            مرحله {{ $currentStep }} از {{ $totalSteps }}
        </div>
    </div>
</div>