@php $lastIndex = count($data['slider-room']) - 1 @endphp

@foreach ($data['slider-room'] as $key => $SliderRoom)
    <section class="slider_room">
        @if (request()->routeIs('bandung*') && $SliderRoom['type'] == 'right')
            <div class="corner corner_top">
                <img class="left" loading="lazy" src="{{ asset('images/bandung/room/corner.svg') }}"
                    alt="{{ asset('images/bandung/room/corner.svg') }}">
                <img class="right" loading="lazy" src="{{ asset('images/bandung/room/corner.svg') }}"
                    alt="{{ asset('images/bandung/room/corner.svg') }}">
            </div>
        @elseif (request()->routeIs('yogyakarta*') && $SliderRoom['type'] == 'right')
            <div class="corner corner_top">
                <img class="left" loading="lazy" src="{{ asset('images/yogyakarta/white-corner.png') }}"
                    alt="{{ asset('images/yogyakarta/white-corner.png') }}">
                <img class="right" loading="lazy" src="{{ asset('images/yogyakarta/white-corner.png') }}"
                    alt="{{ asset('images/yogyakarta/white-corner.png') }}">
            </div>
        @endif
        <div class="slider_room_items @if ($SliderRoom['type'] == 'left') slider_room_items_left @endif">
            <div class="desc @if ($SliderRoom['type'] == 'left') order-lg-2 @endif">
                <h2>{{ $SliderRoom['title'] ?? '' }}</h2>
                <p>
                    {{ $SliderRoom['desc'] ?? '' }}
                </p>
                <div class="row">
                    @foreach ($SliderRoom['items'] as $SliderRoomIcon)
                        <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                            <img loading="lazy" src="{{ $SliderRoomIcon['icon'] ?? '' }}"
                                alt="{{ $SliderRoomIcon['icon'] ?? '' }}">
                            <p>{{ $SliderRoomIcon['title'] ?? '' }}</p>
                            <p><strong>{!! $SliderRoomIcon['desc'] ?? '' !!}</strong></p>
                        </div>
                    @endforeach
                </div>
                <a href="{{ $SliderRoom['link'] }}" class="btn btn_purple">Book Now</a>
            </div>
            <div class="slider @if ($SliderRoom['type'] == 'left') order-lg-1 @endif">
                <div
                    class="swiper @if ($SliderRoom['type'] == 'right') SwiperRoomRight SwiperRoomRight{{ $key }} @else SwiperRoomLeft SwiperRoomLeft{{ $key }} @endif">
                    <div class="swiper-wrapper">
                        @foreach ($SliderRoom['image'] as $imageSliderRoom)
                            <div class="swiper-slide">
                                <img loading="lazy" src="{{ $imageSliderRoom }}" alt="{{ $imageSliderRoom }}">
                            </div>
                        @endforeach
                        @foreach ($SliderRoom['image'] as $imageSliderRoom2)
                            <div class="swiper-slide">
                                <img loading="lazy" src="{{ $imageSliderRoom2 }}" alt="{{ $imageSliderRoom2 }}">
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="swiper-prev swiperprev{{ $key }}">
                    <img loading="lazy" src="{{ asset('images/arrow_left.svg') }}" alt="{{ asset('images/arrow_left.svg') }}">
                </div>
                <div class="swiper-next swipernext{{ $key }}">
                    <img loading="lazy" src="{{ asset('images/arrow_right.svg') }}" alt="{{ asset('images/arrow_right.svg') }}">
                </div>
            </div>
        </div>
        @if (request()->routeIs('bandung*') && $SliderRoom['type'] == 'right')
            <div class="corner corner_bottom">
                <img class="left" loading="lazy" src="{{ asset('images/bandung/room/corner.svg') }}"
                    alt="{{ asset('images/bandung/room/corner.svg') }}">
                <img class="right" loading="lazy" src="{{ asset('images/bandung/room/corner.svg') }}"
                    alt="{{ asset('images/bandung/room/corner.svg') }}">
            </div>
        @elseif (request()->routeIs('yogyakarta*') && $SliderRoom['type'] == 'right')
            <div class="corner corner_bottom">
                @if ($loop->index != $lastIndex)
                    <img class="left" loading="lazy" src="{{ asset('images/yogyakarta/white-corner.png') }}"
                        alt="{{ asset('images/yogyakarta/white-corner.png') }}">
                    <img class="right" loading="lazy" src="{{ asset('images/yogyakarta/white-corner.png') }}"
                        alt="{{ asset('images/yogyakarta/white-corner.png') }}">
                    <div class="corner corner_bottom">
                    @else
                        <img class="left" loading="lazy" src="{{ asset('images/yogyakarta/gray2-corner.png') }}"
                            alt="{{ asset('images/yogyakarta/gray2-corner.png') }}">
                        <img class="right" loading="lazy" src="{{ asset('images/yogyakarta/gray2-corner.png') }}"
                            alt="{{ asset('images/yogyakarta/gray2-corner.png') }}">
                @endif
            </div>
        @endif
    </section>

    @if ($SliderRoom['type'] == 'right')
        @push('scripts')
            <script>
                var swiper = new Swiper(".SwiperRoomRight{{ $key }}", {
                    slidesPerView: "auto",
                    loop: true,
                    spaceBetween: 30,
                    autoplay: {
                        delay: 3000,
                    },
                    navigation: {
                        nextEl: ".swipernext{{ $key }}",
                        prevEl: ".swiperprev{{ $key }}",
                    },

                });
            </script>
        @endpush
    @elseif($SliderRoom['type'] == 'left')
        @push('scripts')
            <script>
                var swiper = new Swiper(".SwiperRoomLeft{{ $key }}", {
                    slidesPerView: "auto",
                    loop: true,
                    spaceBetween: 30,
                    autoplay: {
                        delay: 3000,
                    },
                    navigation: {
                        nextEl: ".swipernext{{ $key }}",
                        prevEl: ".swiperprev{{ $key }}",
                    },

                });
            </script>
        @endpush
    @endif
@endforeach