@php
    $requestStatuses = [
        ['id' => 1, 'name' => 'STEP1', 'text' => '*修理のご依頼', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 2, 'name' => 'STEP2', 'text' => '貸用品のお届け', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 3, 'name' => 'STEP3', 'text' => '修理品のお預かり', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 4, 'name' => 'STEP4', 'text' => 'お見積もりのご連絡', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 5, 'name' => 'STEP5', 'text' => '貸用品のお預かり', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 6, 'name' => 'STEP6', 'text' => '修理完了品のお届け', 'image' => '/images/smartsupport-logo.jpg'],
        ['id' => 7, 'name' => 'STEP7', 'text' => '*修理のご注文', 'image' => '/images/smartsupport-logo.jpg'],
    ];
    $totalItems = count($requestStatuses);
    $activeStatusIds = [1, 2, 3];
@endphp

<div class="row request-guide">
    @foreach ($requestStatuses as $index => $requestStatus)
        <div class="request-guide__col col-12 col-sm-6 col-md-4 col-lg-3 mb-4 text-center 
        step-{{ $index + 1 }}
        {{ in_array($requestStatus['id'], $activeStatusIds) ? 'active' : '' }}">
            <div class="request-guide__inner p-3">
                <div class="d-flex flex-column align-items-center justify-content-center text-center">
                    <div class="request-guide__sub-heading">{{ $requestStatus['name'] }}</div>
                    <div class="request-guide__heading">{{ $requestStatus['text'] }}</div>
                </div>
                <img class="w-100" src="{{ $requestStatus['image'] }}" alt="{{ $requestStatus['name'] }}">
            </div>
            @if ($index < $totalItems - 1)
                <div class="arrow" data-index="{{ $index }}"></div>
            @endif
        </div>
    @endforeach
</div>

<link rel="stylesheet" href="/css/request_guide.css">