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


@if (request()->routeIs('jakarta*'))
    @php
        $message =
            'Hai Kimaya Slipi Jakarta by Harris,
I want to make a reservation / Hai Kimaya Slipi Jakarta
Halo, saya ingin memesan kamar hotel.%0A%0A' .
            urlencode($nama) .
            '%0A' .
            urlencode($noTlp) .
            '%0A' .
            urlencode($tanggal) .
            '%0A' .
            urlencode($tipeKamar) .
            '%0A' .
            urlencode($keterangan);
    @endphp
@endif


@if (request()->routeIs('bandung*'))
    @php
        $message =
            'Hai Kimaya Braga Bandung by Harris,
    I want to make a reservation / Hai Kimaya Braga Bandung
    Halo, saya ingin memesan kamar hotel.%0A%0A' .
            urlencode($nama) .
            '%0A' .
            urlencode($noTlp) .
            '%0A' .
            urlencode($tanggal) .
            '%0A' .
            urlencode($tipeKamar) .
            '%0A' .
            urlencode($keterangan);
    @endphp
@endif


@if (request()->routeIs('yogyakarta*'))
    @php
        $message =
            'Hai Kimaya Sudirman Yogyakarta by Harris,
    I want to make a reservation / Hai Kimaya Sudirman Yogyakarta
    Halo, saya ingin memesan kamar hotel.%0A%0A' .
            urlencode($nama) .
            '%0A' .
            urlencode($noTlp) .
            '%0A' .
            urlencode($tanggal) .
            '%0A' .
            urlencode($tipeKamar) .
            '%0A' .
            urlencode($keterangan);
    @endphp
@endif


@foreach ($data['item_row'] ?? [] as $key => $SliderRoom)
    @if ($key % 2 == 0)
        @php
            $dataType = 'right';
        @endphp
    @else
        @php
            $dataType = 'left';
        @endphp
    @endif
    <section class="slider_room">
        <div class="slider_room_items @if ($dataType == 'left') slider_room_items_left @endif"> 
            <div class="desc @if ($dataType == 'left') order-lg-2 @endif">
                <h2>{{ $SliderRoom['title'] ?? '' }}</h2>
                <p>
                    {{ $SliderRoom['desc'] ?? '' }}
                </p>
                <div class="row"> 
                    @foreach ($SliderRoom['items'] ?? [] as $itemFacility)
                        @if (!empty($itemFacility['location']) && $itemFacility['location'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="location"></i>
                                <p>Location :</p>
                                <p><strong>{!! $itemFacility['location'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['scenery_view']) && $itemFacility['scenery_view'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="scenery"></i>
                                <p>Scenery View</p>
                                <p><strong>{!! $itemFacility['scenery_view'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['rooms']) && $itemFacility['rooms'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="rooms"></i>
                                <p>Number of rooms :</p>
                                <p><strong>{!! $itemFacility['rooms'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['size_room']) && $itemFacility['size_room'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="size_room"></i>
                                <p>Size of Room :</p>
                                <p><strong>{!! $itemFacility['size_room'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['bed_configuration']) && $itemFacility['bed_configuration'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="bed_configuration"></i>
                                <p>Bed Configuration :</p>
                                <p><strong>{!! $itemFacility['bed_configuration'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['connecting_room']) && $itemFacility['connecting_room'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="connecting_room"></i>
                                <p>Connecting room :</p>
                                <p><strong>{!! $itemFacility['connecting_room'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                        @if (!empty($itemFacility['capacity']) && $itemFacility['capacity'] != null)
                            <div class="col-6 col-sm-4 col-lg-4 mt-3 mt-xxl-5 items_">
                                <i class="capacity"></i>
                                <p>Capacity :</p>
                                <p><strong>{!! $itemFacility['capacity'] ?? '' !!}</strong></p>
                            </div>
                        @endif
                    @endforeach
                </div>
                @if (!empty($SliderRoom['button'][0]))
                    <a href="https://api.whatsapp.com/send?phone={{ $SliderRoom['button'][0]['link'] ?? '' }}'&text='{{ $message ?? '' }} "
                        class="btn btn_purple" target="_blank">Book Now</a>
                @endif
            </div>
            <div class="slider @if ($dataType == 'left') order-lg-1 @endif">
                <div
                    class="swiper @if ($dataType == 'right') SwiperRoomRight SwiperRoomRight{{ $key }} @else SwiperRoomLeft SwiperRoomLeft{{ $key }} @endif">
                    <div class="swiper-wrapper">
                        @foreach ($SliderRoom['style'] ?? [] as $keys => $imageSliderRoom)
                            <div class="swiper-slide">
                                <img loading="lazy" class="image-modal"
                                    src="{{ env('APP_API_ASSET_URL') }}{{ $imageSliderRoom['value'] ?? '' }}"
                                    alt="{{ $SliderRoom['title'] ?? '' }}" data-id="{{ $key . $keys }}">
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="swiper-prev swiperprev{{ $key }}">
                    <i class="arrow"></i>
                    <img loading="lazy" src="{{ asset('images/arrow_left.svg') }}"
                        alt="{{ asset('images/arrow_left.svg') }}">
                </div>
                <div class="swiper-next swipernext{{ $key }}">
                    <i class="arrow"></i>

                    <img loading="lazy" src="{{ asset('images/arrow_right.svg') }}"
                        alt="{{ asset('images/arrow_right.svg') }}">
                </div>
            </div>
        </div>
    </section>

    @if ($dataType == '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($dataType == '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


<div class="slider_room_modal modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <img id="modalImage" src="" class="img-fluid" alt="Modal Image">
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const imageModals = document.querySelectorAll(".image-modal");
            const modalImage = document.getElementById("modalImage");
            imageModals.forEach(function(imageModal) {
                imageModal.addEventListener("click", function() {
                    const imageUrl = this.getAttribute("src");
                    console.log(imageUrl);
                    modalImage.setAttribute("src", imageUrl);
                    $('#imageModal').modal('show');
                });
            });
        });
    </script>
@endpush