@extends('website.layouts.master')
@section('css')
@endsection
@section('content')
<div class="container-fluid service">
    <div class="containery">
        <!-- navbar  -->
        <header>
            @include('website.layouts.includes.topbar')

        </header>
        <section class="row mt-3 mb-0">

            <div class="col-12 px-3 px-md-5 position-relative mb-4 d-service" style="height: 320px">
                <img src="{{ URL::asset('img/dashboard/Group-39942.png') }}" alt="" class="w-100 h-100 radius-20"
                    style="object-fit: cover;height: 100%;">
                <div class="black-blur p-5 position-absolute justify-content-end radius-20 d-flex align-items-center top-0 bottom-0 right-0"
                    style="right:20px">
                    <div>

                        <h1 class="fw-bold m-0 text-capitalize text-dark">Discover more about <br> {{ $slug_tag->name }}
                        </h1>
                        <p class=" text-dark">{!! $slug_tag->description !!}</p>

                    </div>

                </div>
            </div>
        </section>
    </div>

    <section class="row mt-2 px-5" style="">

        <div class="col-12 px-5">
            <h2 class="fw-bold mb-1 text-capitalize mt-4"><i class="fa-solid fa-bed"></i> Where To Stay.
            </h2>
            <p class="mb-3">Get the best offer in {{ $slug_tag->name }}</p>

            <div class="swiper mySwiper pill-tabs mb-1 px-3">
                <div class="swiper-wrapper pb-5">
                    @foreach ($unit as $item)

                    <div class="swiper-slide mb-5">
                        <div class="card-product radius-20 shadow position-relative p-3 bg-white">
                            <div class="position-absolute icon-product mt-2 ms-2">
                                @if($item->hotel->aqua_park)
                                <i class="fa-solid fa-water-ladder"></i>
                                @endif
                                @if($item->hotel->swimming_pool)
                                <i class="fa-solid fa-person-swimming"></i>
                                @endif
                                @if($item->hotel->restaurant)
                                <i class="fa-solid fa-utensils"></i>
                                @endif
                                @if($item->hotel->beach)
                                <i class="fa-solid fa-umbrella-beach"></i>
                                @endif
                                @if($item->hotel->free_wifi)
                                <i class="fa-solid fa-wifi"></i>
                                @endif
                                @if($item->hotel->gym)
                                <i class="fa-solid fa-dumbbell"></i>
                                @endif
                            </div>

                            <a href="{{ route('patient_auth.unit_show', $item->unit_id) }}"> <img
                                    src="{{ URL::asset('img/products/' . $item->hotel->main_image) }}" alt=""></a>
                            <div class="d-flex justify-content-between align-items-baseline pt-3">
                                <h2 class="fs-6 fw-600 w-75">
                                    <a href="{{ route('patient_auth.unit_show', $item->unit_id) }}" class="text-dark">
                                        {{ $item->hotel->name }}</a>
                                </h2>
                                <p class="fs-8 secandry-light mb-0 text-end"><i
                                        class="fa-solid fa-location-arrow color-i"></i>
                                    {{ $item->hotel->destination->name }}</p>
                            </div>
                            <p class="secandry-light fs-8">{{
                                $item->hotel->short_description }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h3 class="fw-600 color-title m-0 fs-5">{{ $item->lowest }}</h3>
                                    <p class="secandry-light fs-9 m-0">Lowest Price for a person</p>
                                </div>
                                <a class="btn text-capitalize fs-8 radius-10 "
                                    href="{{ route('patient_auth.unit_show', $item->unit_id) }}">Book</a>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination bottom-0"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>

    <section class="row mt-5 px-5" style="background-color: #F5FDFF;">

        <div class="col-12 px-5">
            <h2 class="fw-bold mb-1 text-capitalize mt-4"><i class="fa-solid fa-mountain-sun"></i> Where To Reach there
                cheaply.
            </h2>
            <p class="mb-3">Get the best packages offer in {{ $slug_tag->name }} </p>

            <div class="swiper mySwiper pill-tabs mb-1 px-3">
                <div class="swiper-wrapper pb-5">
                    @foreach ($package as $item)
                    <div class="swiper-slide">
                        <div class="card-product radius-20 shadow position-relative p-3 bg-white">
                            <div class="position-absolute icon-product mt-2 ms-2">
                                @if($item->airline)
                                <i class="fa-solid fa-plane-up"></i>
                                @endif
                                @if($item->transp)
                                <i class="fa-solid fa-bus"></i>
                                @endif
                                @if($item->trip)
                                <i class="fa-solid fa-suitcase"></i>
                                @endif
                                @if($item->guide)
                                <i class="fa-solid fa-microphone"></i>
                                @endif
                                @if($item->fav)
                                <i class="fa-solid fa-star"></i>
                                @endif
                                <i class="fa-solid fa-utensils"></i>
                            </div>

                            <a href="{{ route('patient_auth.unit_package_show', $item->id) }}"> <img
                                    src="{{ URL::asset('img/products/' . $item->hotel->main_image) }}" alt=""></a>
                            <div class="d-flex justify-content-between align-items-baseline pt-3">
                                <h2 class="fs-6 fw-600 w-75">
                                    <a href="{{ route('patient_auth.unit_package_show', $item->unit_id) }}"
                                        class="text-dark">
                                        {{ $item->name }}</a>
                                </h2>
                                <p class="fs-8 secandry-light mb-0 text-end"><i
                                        class="fa-solid fa-location-arrow color-i"></i>
                                    {{ $item->hotel->destination->name }}</p>
                            </div>
                            <p class="secandry-light fs-8">{{
                                $item->short_description }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h3 class="fw-600 color-title m-0 fs-5">{{ $item->lowest }}</h3>
                                    <p class="secandry-light fs-9 m-0">Lowest Price for a person</p>
                                </div>
                                <a class="btn text-capitalize fs-8 radius-10 "
                                    href="{{ route('patient_auth.unit_package_show', $item->unit_id) }}">Book</a>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination bottom-0"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>

    <section class="row mt-5 px-5 mb-5" style="background-color: #F5FDFF;">
        <div class="col-12 px-5">
            <h2 class="fw-bold mb-1 text-capitalize mt-4"><i class="fa-solid fa-person-hiking"></i> What to do.
            </h2>
            <p class="mb-3">Here is the best things to do in {{ $slug_tag->name }}</p>

            <div class="swiper mySwiper pill-tabs mb-1 px-3">

                <div class="swiper-wrapper pb-5">
                    @foreach ($trip as $item)
                    <div class="swiper-slide">
                        <div class="card-product radius-20 shadow position-relative p-3 bg-white">
                            <div class="position-absolute icon-product mt-2 ms-2">

                            </div>

                            <a href="{{ route('patient_auth.trip_show', $item->id) }}"> <img
                                    src="{{ URL::asset('img/products/' . $item->main_image) }}" alt=""></a>
                            <div class="d-flex justify-content-between align-items-baseline pt-3">
                                <h2 class="fs-6 fw-600 w-75">
                                    <a href="{{ route('patient_auth.trip_show', $item->id) }}" class="text-dark">
                                        {{ $item->name }}</a>
                                </h2>
                                <p class="fs-8 secandry-light mb-0 text-end"><i
                                        class="fa-solid fa-location-arrow color-i"></i>
                                    {{ $item->destination->name }}</p>
                            </div>
                            <p class="secandry-light fs-8">{{
                                $item->short_description }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h3 class="fw-600 color-title m-0 fs-5">{{ $item->lowest }}</h3>
                                    <p class="secandry-light fs-9 m-0">Lowest Price for a person</p>
                                </div>
                                <a class="btn text-capitalize fs-8 radius-10 "
                                    href="{{ route('patient_auth.trip_show', $item->id) }}">Book</a>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination bottom-0"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>



    <section>
        <div class="row px-0 px-md-5">

            <div class="col-12  px-3 px-md-5 position-relative mb-4 d-service" style="height: 320px">
                <img src="{{ URL::asset('img/dashboard/Group-39941.png') }}" alt="" class="w-100 h-100 radius-20"
                    style="object-fit: cover;height: 100%;">
                <div
                    class="col-12 black-blur p-5 position-absolute justify-content-center radius-20 d-flex align-items-center top-0 bottom-0">
                    <div>

                        <h1 class="fw-bold m-0 text-capitalize text-dark">Do You want to Get your visa?</h1>
                        <p class=" text-dark">Get your visa now with our smart system for visa application</p>
                        <a href="{{ route('patient_auth.all_visa') }}"><button class="btn">Get
                                Now</button></a>
                    </div>

                </div>
            </div>

        </div>

    </section>

</div>
@endsection
@section('js')
<script>
    var swiper = new Swiper(".travel-detail", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper,
            },
        });

        var bswiper = new Swiper(".tourist", {
            loop: true,
            freeMode: true,
            spaceBetween: 20,
            grabCursor: true,
            slidesPerView: 7,
            touchEventsTarget: 'container',
            loop: true,
            loopFillGroupWithBlank: true,
            loop: true,
            freeMode: true,
            speed: 5000,
            freeModeMomentum: false,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                500: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                640: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                750: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                1424: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
            },
        })


        var swiper = new Swiper(".pill-tabs", {
            loop: true,
            freeMode: true,
            spaceBetween: 0,
            //
            slidesPerView: 6,
            touchEventsTarget: 'container',
            loop: true,
            loopFillGroupWithBlank: true,
            loop: true,
            freeMode: true,
            speed: 5000,
            freeModeMomentum: false,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                500: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                640: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                },
                750: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 40,
                },
                1424: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                },
            },

        });
</script>
@endsection