@extends('website.layouts.master', ['no_transparent_header' => false])

@section('title', "Book " . $unit->name . " trip حجز رحلة Destino Tours ")
@section('description', "Book Now " . $unit->name . " trip احجز الان رحلة" . $unit->short_description . " | Destino
Tours")
@section('keywords', "trip, best trip price for " . $unit->name . ", رحلة in egypt", ", best trip, best trips
price, " . $unit->name . " trip رحلة")

@section('css')

<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

<!-- tdatepicker -->
<link rel="stylesheet" href="{{ asset('js/datepicker/t-datepicker.min.css') }}" />
<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />

<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />


<script src="{{ asset('js/spotlight_master/spotlight.bundle.js') }}"></script>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

<style>
    .wrap {
        width: 1200px;
        margin: 30px auto;
        display: grid;
        grid-gap: 50px;
        grid-template-columns: 300px auto;
    }

    #map {
        width: 100%;
        height: 350px;
        border-radius: 25px;
    }
</style>
@endsection


@section('content')

<section class="mb-4">

    {{-- searching --}}
    <div class="booking_search_cont_header px-4 px-md-5 mx-auto" style="margin-top: -42px;">

        <div class="row">

            <form class="mb-0" action="{{ route('patient_auth.unit_search') }}" method="GET">
                @csrf

                <div class="bg-white border_radius_50 shadow-main py-3 px-3 px-md-4 d-flex align-items-center">

                    {{-- for small devices (mobiles) --}}
                    <div class="calander-left-border px-0 px-md-3 flex-grow-1 d-block d-md-none">
                        <div class="d-flex">
                            <img class="me-3" width="17px" src="{{ URL::asset('img/icons/location_pin.svg') }}"
                                alt="" />
                            <div>
                                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                                    Destination
                                </div>

                                <p class="text-gray-300 clickable-item-pointer mb-0" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvas_search_hotel" aria-controls="offcanvasTop"> Click
                                    Here to search
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- for large devices --}}

                    {{-- destination --}}
                    <div class="px-3 flex-grow-1 d-none d-md-block">

                        <div class="d-flex align-items-center">

                            <img class="me-3" width="17px" src="{{ URL::asset('img/icons/location_pin.svg') }}"
                                alt="" />

                            <div>
                                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                                    Destination
                                </div>

                                <div class="dropdown">

                                    <input type="text" name="search_hotel" class="booking_search_input search_hotel"
                                        data-bs-toggle="dropdown" aria-expanded="false" placeholder="Sharm Elshikh"
                                        id="dropdown_destination_book" value="{{ $slug }}">

                                    <input type="hidden" value="{{ $slug }}" name="search_hotel_input"
                                        class="search_hotel_input" required>

                                    <div class="dropdown-menu dropdown_booking_destination_cont dropdown-menu-end py-0">
                                        <div class="p-4 mb-0 pb-0">
                                            <p class="text-gray-300 text-xs mb-1 text-start"> What's your next
                                                Destination?
                                            </p>
                                        </div>
                                        <ul class="search_destination_cont" class="px-4 py-0 mb-0"
                                            aria-labelledby="dropdown_destination_book">
                                        </ul>
                                        <hr class="my-2">
                                        <div class="p-4 pt-0 pb-3">
                                            <p class="text-gray-300 text-xs mb-0 text-start"> Write the desiination name
                                                or its code..
                                            </p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>


                    </div>

                    {{-- from date --}}
                    <div class="calander-left-border px-3 d-none d-md-block">
                        <div class="d-flex">
                            <img class="me-3" width="24px" src="{{ URL::asset('img/icons/calendar.svg') }}" alt="" />
                            <div>
                                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                                    From
                                </div>
                                <input name="from_ht_date" type="text" value="{{ $from }}"
                                    class="booking_search_input border-0 datepicker_time bg-white @error('date') is-invalid @enderror"
                                    placeholder="Thu 16 Feb" data-enable-time="true" value="{{ old('date') }}" required>
                            </div>
                        </div>
                    </div>

                    {{-- to date --}}
                    <div class="calander-left-border px-3 d-none d-md-block">
                        <div class="d-flex">
                            <img class="me-3" width="24px" src="{{ URL::asset('img/icons/calendar.svg') }}" src=""
                                alt="" />
                            <div>
                                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                                    To
                                </div>
                                <input name="to_ht_date" type="text" value="{{ $to }}"
                                    class="booking_search_input border-0 datepicker_time bg-white @error('date_return') is-invalid @enderror"
                                    placeholder="Thu 16 Feb" data-enable-time="true" value="{{ old('date_return') }}"
                                    required>
                            </div>
                        </div>
                    </div>

                    {{-- submit --}}
                    <div class="px-3">
                        <button type="submit" class="yellow_400 border_radius_50 border-0">
                            <div class="d-flex fs-6">
                                <i class="fa-solid fa-magnifying-glass me-2"></i> Search
                            </div>
                        </button>
                    </div>

                </div>

            </form>

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

{{-- for hotel search for small devices --}}
<div class="offcanvas h-75 offcanvas-top px-2 px-md-5" tabindex="-1" id="offcanvas_search_hotel"
    aria-labelledby="offcanvasTopLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasTopLabel"><i class="fa-solid fa-magnifying-glass"></i> Search for the
            best hotels offers</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>


    <form class="mb-0 myfrom" action="{{ route('patient_auth.unit_search') }}" method="GET" style="display: contents">
        @csrf
        <div class="offcanvas-body">
            <div>
                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                    <i class="fa-solid fa-location-dot me-2"></i>
                    Destination
                </div>

                <input type="text" name="search_hotel" class="booking_search_input search_hotel"
                    data-bs-toggle="dropdown" aria-expanded="false" placeholder="Sharm Elshikh"
                    id="dropdown_destination_book" value="{{ $slug }}">

                <input type="hidden" value="{{ $slug }}" name="search_hotel_input" class="search_hotel_input" required>

                <ul class="search_destination_cont" class="px-4 py-0 mb-0" aria-labelledby="dropdown_destination_book">
                </ul>
            </div>


            <div class="mb-3">
                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                    <i class="fa-solid fa-location-dot me-2"></i>
                    From
                </div>
                <input name="from_ht_date" type="text"
                    class="booking_search_input border-0 datepicker_time bg-white @error('from_ht_date') is-invalid @enderror"
                    placeholder="Thu 16 Feb" data-enable-time="true" value="{{ $from }}" required>
            </div>

            <div class="mb-3">
                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                    <i class="fa-solid fa-location-dot me-2"></i>
                    To
                </div>
                <input name="to_ht_date" type="text"
                    class="booking_search_input border-0 datepicker_time bg-white @error('to_ht_date') is-invalid @enderror"
                    placeholder="Thu 19 Feb" data-enable-time="true" value="{{ $to }}" required>
            </div>

        </div>

        <div class="modal-footer">
            <div class="right-side">
                <span class="text-gray-300 link-cust-text clickable-item-pointer" data-bs-dismiss="offcanvas">Never
                    Mind</span>
            </div>
            <div class="divider"></div>
            <div class="left-side">
                <button type="submit" class="btn btn-default btn-link main-color fw-bold">
                    Search <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>
        </div>
    </form>
</div>

<section class="mb-3 container px-4 px-md-5 position-relative z-2 bg-white pt-4 pb-5 b-r-l-cont" style="">

    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>

            <div class=" mb-1">
                @foreach ($unit->tags as $item)
                <span class="badge badge_tags px-3 me-1 text-xxs" style="background-color: {{ $item->tag->color }}"> {{
                    $item->tag->name }}</span>
                @endforeach
            </div>

            <h3 class="fw-bold mb-0">{{ $unit->name }}</h3>

            <p class="text-gray-300 text-s text-truncate fw-bold"><i class="fa-solid fa-location-dot"></i> <span> {{
                    $unit->destination->name }}</span></p>
        </div>

        <div class="text-center px-2 px-md-4">

            <div class="mb-3">
                @if(!$type)
                <p class="text-xs text-gray-500 mb-0">Started</p>
                <h1 class="fw-bold mb-0">{{ $unit->single_price }} <small class="text-xxs texst-gray-400 fw-light">L.E
                    </small>
                </h1>
                <a href="#rooms">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        Check Rooms
                    </div>
                </a>
                @else
                <p class="text-xs text-gray-500 mb-0">Started</p>
                <h1 class="fw-bold mb-0">{{ $offer->sell }} <small class="text-xxs texst-gray-400 fw-light">L.E
                    </small>
                </h1>
                <a data-bs-toggle="modal" data-bs-target="#choose_date"
                    class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i class="fas fa-arrow-right ms-1"></i>
                    Add To Cart
                </a>
                @endif

            </div>
        </div>

    </div>

    <div class="pt-0 px-3 px-md-4 pt-md-0 p-md-4 gallery_hotel position-relative pb-3 border_radius_20">

        <div class="row spotlight-group" data-animation="scale">
            <a href="{{ URL::asset('img/website/test/Imasge.png') }}" data-lightbox="Hotel Name"
                class="black_btn border_radius_20 fw-normal position-absolute border-0 shadow-lgg spotlight"
                style="bottom: 35px; left: 4%;">
                <i class="fa-solid  fa-table-cells-large ms-1"></i>
                Show All Gallery
            </a>

            @if(count($unit->imgs) == 0)
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            @elseif(count($unit->imgs) == 1)
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            @elseif (count($unit->imgs) == 2)
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            <div class="col-6 p-1">
                <div class="row">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}"
                                style="border-radius: 20px 00px 00px 20px">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}"
                                style="border-radius: 20px 00px 00px 20px">
                        </a>
                    </div>
                </div>
            </div>
            @elseif (count($unit->imgs) == 3)

            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>

            <div class="col-6">
                <div class="row h-100">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}">
                        </a>
                    </div>
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}"
                                style="border-radius: 0px 20px 0px 0px">
                        </a>
                    </div>
                    <div class="col-12 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[2]->img) }}" class="spotlight">
                            <img class="w-100  img_cover" src="{{ URL::asset('img/package/' . $unit->imgs[2]->img) }}">
                        </a>
                    </div>
                </div>
            </div>
            @else
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>

            <div class="col-6">
                <div class="row h-100">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}">
                        </a>
                    </div>
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}"
                                style="border-radius: 0px 20px 0px 0px">
                        </a>
                    </div>
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[2]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[2]->img) }}">
                        </a>
                    </div>
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[3]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[3]->img) }}"
                                style="border-radius: 0px 0px 20px 0px">
                        </a>
                    </div>
                </div>
            </div>

            @for($i = 4; $i < count($unit->imgs); $i++)
                <a class="spotlight" data-src="{{ URL::asset('img/package/' . $unit->imgs[$i]->img) }}">
                </a>
                @endfor

                @endif

        </div>
    </div>

    <div>

        <div class="d-flex align-items-center flex-wrap">
            <div class="second-color ms-2">
                <span><i class="fa-solid fa-star"></i></span>
                <span><i class="fa-solid fa-star"></i></span>
                <span><i class="fa-solid fa-star"></i></span>
                <span><i class="fa-solid fa-star"></i></span>
                <span><i class="fa-solid fa-star"></i></span>
            </div>
            <h3 class="fw-bold mb-0">4.5<small class="text-gray-400 fw-light text-s">/5</small></h3>
        </div>
    </div>
</section>


<section class="container px-3 px-md-5 mb-4">
    <div class="bg-white border_radius_20 p-3 p-md-5" style="min-height: 455px">

        <ul class="nav nav-tabs mb-5 border-0 pe-0" id="myTab" role="tablist">
            <li class="nav-item " role="presentation">
                <button class="nav-link active text-gray-400" id="hotel-tab" data-bs-toggle="tab"
                    data-bs-target="#info_tap" type="button" role="tab" aria-controls="info_tap" aria-selected="true"
                    class="text-gray-500"><i class="fas fa-hotel ms-1"></i>
                    Description</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-gray-400" id="airline_tap-tab" data-bs-toggle="tab"
                    data-bs-target="#review_tap" type="button" role="tab" aria-controls="review_tap"
                    aria-selected="false" class="main-color"><i class="fa-solid fa-users ms-1"></i>
                    Rates</button>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="info_tap" role="tabpanel" aria-labelledby="bus_tap">

                <div class="row">
                    <div class="col-12 col-md-9 pe-5">
                        <h3 class="mb-3">
                            Discover <span class=" fw-bold"> {{ $unit->name }}</span>
                        </h3>
                        <p class=" text-gray-400">{!! $unit->description !!}</p>
                    </div>

                    <div class="col-12 col-md-3">

                    </div>


                </div>

            </div>

            {{-- rate --}}
            <div class="tab-pane fade show" id="review_tap" role="tabpanel" aria-labelledby="airline_tap">
                No rate yet
            </div>



        </div>
    </div>

    </div>

</section>


{{-- related hotels --}}

<section class="container mb-0 bg-white b-r-l-cont pt-4">
    <div class="d-flex justify-content-between mb-0">

        <div class="mb-3">

            <h3 class="text-gray-800 fw-bold mb-0">
                Packages You Might Like
            </h3>
            <h6 class="text-gray-300  mb-1">
                Here is a list of packages for you
            </h6>
        </div>
        <a href="#">
            <div class="border_black_btn border_radius_20 fw-normal"> Discover More
            </div>
        </a>
    </div>
    <div class="swiper swiper_products">

        <div class="swiper-wrapper">
            @foreach ($related_hotels as $item)
            @include('website.layouts.components.product_slider')
            @endforeach
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</section>





<!-- Modal lab insert data -->
<div class="modal fade" id="choose_date" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">


        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-calendar me-1"></i>
                    Choose Date</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-5 py-3">

                <form id="add_price_modal">

                    <div class="row mb-2">

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('Traveling Date') }}
                                <small>({{ __('basic.optional') }})</small></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                    </div>
                                </div>
                                <input id="arrival_date_modal" type="text" class="form-control datepicker_time"
                                    placeholder="YYYY/MM" required>
                            </div>
                        </div>

                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <div class="left-side">
                    <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                        __('basic.never mind') }}</button>
                </div>
                <div class="divider"></div>
                <div class="right-side">
                    <button class="btn btn-default btn-link main-color fw-bold add_cart_ajax" data-bs-dismiss="modal"
                        data-id="{{ $offer->id }}" data-cat="" data-type="trip" data-from="{{ $from }}"
                        data-to="{{ $to }}" data-qty="1">Add To
                        Cart</button>
                </div>
            </div>
        </div>

    </div>

</div>

@endsection

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>


<!-- datapicker date and time -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    //-------- datepicker time --------
        $('.datepicker_time').flatpickr({
            enableTime: false,
            dateFormat: "Y-m-d",
            theme: "dark", // defaults to "light"
        });
</script>


{{-- gallery lightbox --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"
    integrity="sha512-Ixzuzfxv1EqafeQlTCufWfaC6ful6WFqIz4G+dWvK0beHw0NVJwvCKSgafpy5gwNqKmgUfIBraVwkKI+Cz0SEQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true,
      'disableScrolling': true,
    })

    var full_height_width_slider_swiper = new Swiper(".full_height_width_slider_swiper", {
        pagination: {
        el: ".swiper-pagination",
      },
    });
 
    var swiper = new Swiper(".to_do_desti_swiper", {
      slidesPerView: "auto",
      loop: true,
      touchEventsTarget: 'container',
      slidesPerView: "auto",
      touchEventsTarget: 'container',
      spaceBetween: 10,
      loop: true,
      
    });
</script>


<script src="{{ asset('js/datepicker/t-datepicker.min.js') }}"></script>


<script>
    $('.t-datepicker').tDatePicker({
        autoClose:true,
        durationArrowTop:200,
        numCalendar:2
    });
</script>

<script>
    // Send Search Text to the server
        $(".search_hotel").keyup(function() {
        let search_query = $(this).val();
        if (search_query != "") {

            var url = "{{ route('patient_auth.destination_search', ':id') }}";
            url = url.replace(':id', search_query);

            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $(".search_destination_cont").empty();

                    $('.dropdown_booking_destination_cont').show();

                    if (data.length > 0) {
                        var html = ''
                        $.each(data, function(key, value) {
                            html += 
                            '<li data-slug="' + value.slug + '" data-name="' + value.name + '" class="d-flex align-items-center clickable-item-pointer fs-6 link-cust-text text-gray-300 mb-2 search_hotel_select">' +
                                    '<i class="fa-solid fa-location-dot me-2"></i>' +
                                    '<p class="mb-0 text-end">' + value.name + '</p>' +
                            '</li>' 
                        });
                        $('.search_destination_cont').html(html);
                    }else{
                        $('.search_destination_cont').html('<li class="d-flex align-items-center fs-6 text-gray-300 mb-2">No serach found</li>' );
                    }
                },
            });
        } else {
            // $('.dropdown_booking_destination_cont').hide();
        }
    });

    $(document).on('click', '.search_hotel_select', function() {

        var slug = $(this).data('slug');
        var name = $(this).data('name');

        $(".search_hotel").val(name);
        $('.search_hotel_input').val(slug);
    })


</script>

@endsection