@php
    $active_step = $shop_rma->current_step;
    $step_labels = __('shop_rma.step_labels');
@endphp

@if($shop_rma->status === 'cancelled')
    <div class="alert alert-danger tw-mb-4">
        <i class="fa fa-ban"></i>
        <strong>{{ \App\ShopRma::statuses()['cancelled'] }}</strong>
        @if(!empty($shop_rma->cancelled_at))
            <span class="tw-ml-2">{{ @format_datetime($shop_rma->cancelled_at) }}</span>
        @endif
    </div>
@else
    <div class="shop-rma-progress tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-2 tw-mb-5">
        @foreach($step_labels as $number => $label)
            @php
                $is_done = $active_step > $number || ($shop_rma->status === 'completed' && $number == 4);
                $is_active = $active_step == $number;
            @endphp
            <div class="tw-rounded-lg tw-border tw-p-3 {{ $is_done ? 'tw-bg-green-50 tw-border-green-300' : ($is_active ? 'tw-bg-blue-50 tw-border-blue-400' : 'tw-bg-gray-50 tw-border-gray-200') }}">
                <div class="tw-flex tw-items-center tw-gap-2">
                    <span class="tw-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-rounded-full {{ $is_done ? 'tw-bg-green-600 tw-text-white' : ($is_active ? 'tw-bg-blue-600 tw-text-white' : 'tw-bg-gray-300 tw-text-gray-700') }}">
                        @if($is_done)
                            <i class="fa fa-check"></i>
                        @else
                            {{ $number }}
                        @endif
                    </span>
                    <span class="tw-font-semibold tw-text-sm">{{ $label }}</span>
                </div>
            </div>
        @endforeach
    </div>
@endif