@php
    $id_popup_result = 'reward_info';
@endphp

@component(getPopupLayout(), ['id' => 'reward_info'])

    <div id="tutorialCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
            @for($i = 0; $i < 4; $i++)
                <li data-target="#tutorialCarousel"
                    data-slide-to="{{ $i }}"
                    class="{{ $i === 0 ? 'active' : '' }}">
                </li>
            @endfor
        </ol>
        <div class="carousel-inner">
            @for($i = 1; $i <= 5; $i++)
                <div class="carousel-item {{ $i === 1 ? 'active' : '' }}">
                    <img src="{{ asset('assets/images/grid2025/slide'.$i.'.webp') }}" class="d-block w-100" alt="Tutorial slide {{ $i }}">
                </div>
            @endfor
        </div>

        <a class="carousel-control-prev" href="#tutorialCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">{{ __('Previous') }}</span>
        </a>
        <a class="carousel-control-next" href="#tutorialCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">{{ __('Next') }}</span>
        </a>
    </div>
        <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-primary" data-dismiss="modal">{{ __('heading.button_close') }}</button>
        </div>

@endcomponent