@php
    $statuses = [
        'draft' => ['label' => 'Draft', 'icon' => 'bi-pencil-square'],
        'confirmed' => ['label' => 'Confirmed', 'icon' => 'bi-check-circle'],
        'processing' => ['label' => 'Processing', 'icon' => 'bi-gear'],
        'booked' => ['label' => 'Booked', 'icon' => 'bi-ship'],
        'shipped' => ['label' => 'Shipped', 'icon' => 'bi-truck'],
        'in_transit' => ['label' => 'In Transit', 'icon' => 'bi-arrow-right-circle'],
        'delivered' => ['label' => 'Delivered', 'icon' => 'bi-check-circle-fill'],
    ];
    $currentStatus = $order->status ?? 'draft';
    $statusKeys = array_keys($statuses);
    $currentIndex = array_search($currentStatus, $statusKeys);
    if ($currentIndex === false) $currentIndex = 0;
@endphp

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <div class="d-flex align-items-center justify-content-between position-relative" style="margin: 0 10px;">
            @foreach($statuses as $key => $status)
            @php
                $pos = array_search($key, $statusKeys);
                $isActive = $pos <= $currentIndex;
                $isCurrent = $key === $currentStatus;
            @endphp
            <div class="text-center flex-fill position-relative" style="z-index:1">
                <div class="rounded-circle mx-auto mb-1 d-flex align-items-center justify-content-center {{ $isActive ? 'bg-primary text-white' : 'bg-light text-muted' }}" style="width:36px;height:36px;{{ $isCurrent ? 'box-shadow: 0 0 0 3px rgba(13,110,253,0.25)' : '' }}">
                    <i class="bi {{ $status['icon'] }}" style="font-size:14px"></i>
                </div>
                <div class="small {{ $isActive ? 'fw-semibold text-primary' : 'text-muted' }}">{{ $status['label'] }}</div>
            </div>
            @if(!$loop->last)
            <div class="flex-fill" style="height:2px;background:{{ $pos < $currentIndex ? 'var(--bs-primary)' : '#dee2e6' }};margin:0 -8px;z-index:0"></div>
            @endif
            @endforeach
        </div>
    </div>
</div>