@extends('front.layouts.app')
@push('user.css')
    <link rel="stylesheet" href="{{ asset('front/assets/css/custom.css') }}">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <style>

        @media(max-width: 768px) {
            .single-section {
                margin-top: -470px !important;
            }
        }
    </style>
@endpush

@section('content')

    @if (isset($hotel) && $hotel != null)
        @if (count($hotel->hotelImages) > 0)
            <section class="pt-0 ratio2_3 zoom-gallery overlay-hover">
                <div class="container-fluid p-0">

                    <div class="owl-carousel owl-theme hotel_images" dir="ltr">
                        @foreach ($hotel->hotelImages as $k => $single_image)
                            <div class="item" style="height: 100vh; width: 100%; overflow: hidden;">
                                <img src="{{ asset('uploads/hotels/' . $single_image->image) }}" alt="image"
                                    style="width: 100%; height: 600px;">
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

    @endif



    @if (isset($hotel) && $hotel != null)

        <section class="single-section small-section bg-inner">
            <div class="container">
                <div class="row" dir="rtl">
                    <!-- بيانات الفندق -->
                    <div class="col-xl-9 col-lg-8">
                        <div class="hotel_title_section">
                            <div class="hotel-name">
                                <div class="left-part">
                                    <div class="top">
                                        <h2>{{ $hotel->title }}</h2>
                                        <div class="share-buttons mt-2">
                                            <a href="#" class="btn btn-solid"><i class="far fa-share-square"></i>
                                                مشاركة</a>
                                        </div>
                                    </div>

                                    <p class="mt-1 mb-2">
                                        <i class="fas fa-map-marker-alt me-2"></i>
                                        {{ $hotel->country->title . ', ' . $hotel->city->title }}
                                    </p>
                                    <p>{{ $hotel->address }}</p>

                                    @if ($hotel->description)
                                        <div class="static-box mt-3 mb-2">
                                            {{-- <h5 class="mb-2" style="color: #222;">نبذة عن الفندق:</h5> --}}
                                            <p style="margin: 0; font-size: 16px; color: #000000; line-height: 2.8;">
                                                {!! $hotel->description !!}
                                        </div>
                                    @endif
                                </div>

                                @php($min_price = $hotel->rooms->min('price'))
                                @if ($min_price != null && $min_price > 0)
                                    <div class="right-part" dir="rtl">
                                        <h2 class="price">
                                            {{ $min_price }} {{ __('messages.currency') }}
                                            <span>/ لكل ليلة</span>
                                        </h2>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- فورم الحجز جنب البيانات -->
                    <div class="col-xl-3 col-lg-4">
                        <div class="sticky-cls-top">
                            <div class="single-sidebar">
                                <div class="selection-section">
                                    <div class="overlay-map">
                                        <img src="{{ asset('front/assets/images/map-image.svg') }}"
                                            class="img-fluid blur-up lazyload" alt="">
                                        {!! $hotel->location !!}
                                    </div>
                                    <div class="book-btn-section">
                                        <input type="text" class="form-control mb-2" placeholder="ادخل الإسم بالكامل">
                                        <input type="text" class="form-control mb-2" placeholder="ادخل رقم الهاتف">
                                        <input type="email" class="form-control mb-2" placeholder="البريد الإلكتروني">
                                        <input type="text" id="travel_date" name="travel_date"
                                            placeholder="اختر موعد السفر" class="form-control datepicker" />
                                        <a href="{{ route('user.hotels.form', 1) }}"
                                            class="btn btn-rounded btn-sm color1">إرسال الطلب</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- سلايدر الفنادق -->
                <div class="row mt-5" dir="rtl">
                    <div class="col-12">
                        <div class="special-section related-box ratio3_2 grid-box">
                            @if (isset($related_hotels) && $related_hotels->count() > 0)
                                <div class="swiper mySwiper">
                                    <div class="swiper-wrapper">
                                        @foreach ($related_hotels as $single_hotel)
                                            <div class="swiper-slide">
                                                <div class="special-box p-0">
                                                    <div class="special-img">
                                                        <a href="{{ route('user.hotels.show', $single_hotel->id) }}">
                                                            @if (count($single_hotel->hotelImages) > 0)
                                                                <img src="{{ asset('uploads/hotels/' . $single_hotel->hotelImages->first()->image) }}"
                                                                    class="img-fluid blur-up lazyload bg-img"
                                                                    alt="">
                                                            @endif
                                                        </a>
                                                        <div class="top-icon">
                                                            <a href="#" data-bs-toggle="tooltip"
                                                                title="Add to Wishlist">
                                                                <i class="far fa-heart"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="special-content">
                                                        <a href="{{ route('user.hotels.show', $single_hotel->id) }}">
                                                            <h5>{{ $single_hotel->title }}</h5>
                                                        </a>
                                                        <h5 class="mt-1">
                                                            <span><i class="fas fa-map-marker-alt"></i>
                                                                {{ $single_hotel->country->title }},
                                                                {{ $single_hotel->city->title }}
                                                            </span>
                                                        </h5>
                                                        <p>{{ $single_hotel->address }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>







    @endif
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.hotel_images').owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 1
                    },
                    1000: {
                        items: 1
                    }
                }
            })
        });
    </script>

    <script>
        const swiper = new Swiper('.mySwiper', {
            slidesPerView: 3,
            spaceBetween: 20,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                0: {
                    slidesPerView: 1
                },
                576: {
                    slidesPerView: 1
                },
                768: {
                    slidesPerView: 2
                },
                992: {
                    slidesPerView: 3
                },
            }
        });
    </script>
@stop