@extends('website.layouts.master', ['no_transparent_header' => false])
@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') }}" />
<style>

</style>
@endsection


@section('content')

<section class="">

    {{-- 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.search_package') }}" method="GET">
                @csrf

                <div class="bg-white border_radius_50 shadow-main py-3 px-3 px-md-5 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.search_package') }}" 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="my-3 container px-4 px-md-5">


    <form id="myform" class="mt-1" method="post" action="{{ route('patient_auth.package_search_filter') }}">
        {{ csrf_field() }}


        @if($type !== "direct")
        <input type="hidden" name="type" value="not_direct">
        {{-- the defulat search of the user --}}
        <input type="hidden" name="search_hotel_input" value="{{ $_GET['search_hotel_input'] }}">
        <input type="hidden" name="to_ht_date" value="{{ $_GET['to_ht_date'] }}">
        <input type="hidden" name="from_ht_date" value="{{ $_GET['from_ht_date'] }}">
        @else
        <input type="hidden" name="type" value="{{ $_GET['type'] }}">
        @endif

        <div class="row pt-4">

            {{-- search filterion --}}
            <div class="col-lg-3 bg-white border_radius_20 p-4 shadow-main d-none d-md-block">
                <div class="d-flex justify-content-between">
                    <div class=" fw-bold">
                        <i class="fa-solid fa-filter"></i>
                        Search Filter
                    </div>
                    <a href="#" class="text-xs text-gray-300 link-cust-text">Delete All</a>
                </div>

                <div class="accordion accordion_search_booking" id="accordionPanelsStayOpenExample">


                    @if (!empty($_GET['client_rating']))
                    @php
                    $client_rating = $_GET['client_rating'];
                    @endphp
                    @endif

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                            <button class="accordion-button text-gray-400" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-rate" aria-expanded="true"
                                aria-controls="panelsStayOpen-rates">
                                Clients Rating
                            </button>
                        </h2>

                        <div id="panelsStayOpen-rate" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-rates">
                            <div class="accordion-body">

                                <span class="chbox_true">
                                    <input type="radio" name="client_rating" id="client_rating1" value="1"
                                        onchange="this.form.submit()"><label for="client_rating1">1
                                        +</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="client_rating" id="client_rating2" value="2"
                                        onchange="this.form.submit()"><label for="client_rating2">2
                                        +</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="client_rating" id="client_rating3" value="3"
                                        onchange="this.form.submit()"><label for="client_rating3">3
                                        +</label>
                                </span>
                                <span class="chbox_true">
                                    <input type="radio" name="client_rating" id="client_rating4" value="4"
                                        onchange="this.form.submit()"><label for="client_rating4">4
                                        +</label>
                                </span>
                                <span class="chbox_true">
                                    <input type="radio" name="client_rating" id="client_rating5" value="5"
                                        onchange="this.form.submit()"><label for="client_rating5">5
                                        +</label>
                                </span>
                            </div>
                        </div>
                    </div>


                    @if (!empty($_GET['includes']))
                    @php
                    $includes_filter = explode(',', $_GET['includes']);
                    @endphp
                    @endif

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                            <button class="accordion-button text-gray-400" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-includes" aria-expanded="true"
                                aria-controls="panelsStayOpen-includes">
                                Includes
                            </button>
                        </h2>

                        <div id="panelsStayOpen-includes" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-includes">
                            <div class="accordion-body">

                                @foreach ($includes as $item)
                                <span class="chbox_true chbox_true_with_icon">
                                    <input name="includes[]" type="checkbox" id="includes{{ $item->id }}"
                                        value="{{ $item->name }}" onchange="this.form.submit()"
                                        @if(!empty($includes_filter) && in_array($item->name,$includes_filter)) checked
                                    @endif><label for="includes{{ $item->id }}">{{ $item->name
                                        }}</label>
                                </span>
                                @endforeach

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

                    @if (!empty($_GET['tags']))
                    @php
                    $tag_filter = explode(',', $_GET['tags']);
                    @endphp
                    @endif

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                            <button class="accordion-button text-gray-400" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-tag" aria-expanded="true"
                                aria-controls="panelsStayOpen-tag">
                                Package Type
                            </button>
                        </h2>

                        <div id="panelsStayOpen-tag" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-tag">
                            <div class="accordion-body">

                                @foreach ($tags as $item)
                                <span class="chbox_true chbox_true_with_icon">
                                    <input name="tags[]" type="checkbox" id="tag{{ $item->id }}"
                                        value="{{ $item->slug }}" onchange="this.form.submit()" @if(!empty($tag_filter)
                                        && in_array($item->slug,$tag_filter)) checked
                                    @endif><label for="tag{{ $item->id }}">{{ $item->name
                                        }}</label>
                                </span>
                                @endforeach

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


                    @if (!empty($_GET['price_from']))
                    @php
                    $price_from = $_GET['price_from'];
                    $price_to = $_GET['price_to'];
                    @endphp
                    @endif

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                            <button class="accordion-button text-gray-400" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-price" aria-expanded="true"
                                aria-controls="panelsStayOpen-price">
                                Price
                            </button>
                        </h2>

                        <div id="panelsStayOpen-price" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-price">
                            <div class="accordion-body">
                                <div class="price_range">
                                    <div class="price-input_price_range_st price-input_price_range">
                                        <div class="field">
                                            <span class="text-gray-200">From</span>
                                            <input name="price_from" type="number" class="input-min_price_range"
                                                readonly onchange="this.form.submit()" @if (!empty($price_from))
                                                value="{{ $price_from }}" @else value="2555" @endif>
                                        </div>
                                        <div class="separator_price_range_st separator_price_range">-</div>
                                        <div class="field">
                                            <span class="text-gray-200">To</span>
                                            <input name="price_to" type="number" class="input-max_price_range" readonly
                                                onchange="this.form.submit()" @if (!empty($price_to))
                                                value="{{ $price_to }}" @else value="7500" @endif>
                                        </div>
                                    </div>
                                    <div class="slider_price_range_st slider_price_range">
                                        <div class="progress_price_range_st progress_price_range"></div>
                                    </div>
                                    <div class="range-input_price_range_st range-input_price_range">
                                        <input type="range" class="range-min" min="0" max="10000" value="2500"
                                            step="100">
                                        <input type="range" class="range-max" min="0" max="10000" value="7500"
                                            step="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="col-lg-9 px-3 px-md-5">



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


                    @if($type !== "direct")
                    <input type="hidden" name="type" value="not_direct}">
                    {{-- the defulat search of the user --}}
                    <input type="hidden" name="search_hotel_input" value="{{ $_GET['search_hotel_input'] }}">
                    <input type="hidden" name="to_ht_date" value="{{ $_GET['to_ht_date'] }}">
                    <input type="hidden" name="from_ht_date" value="{{ $_GET['from_ht_date'] }}">
                    @else
                    <input type="hidden" name="type" value="{{ $_GET['type'] }}">
                    @endif


                    @if (!empty($_GET['sort']))
                    @php
                    $sort = $_GET['sort'];
                    @endphp
                    @else
                    @php
                    $sort = "lastest";
                    @endphp
                    @endif

                    {{-- sort search --}}
                    <div
                        class="bg-white border_radius_20 shadow-main px-2 px-md-5 py-3 d-flex justify-content-between mb-3 overflow-auto">
                        <div class="ms-4 booking_sort_ht_item position-relative clickable-item-pointer 
                        @if($sort === 'lastest') active_sort_ht @endif ">
                            <span class=" chbox_true">
                                <input type="radio" name="sort" id="sort_1" value="lastest"
                                    onchange="this.form.submit()"><label
                                    class="m-0 p-0 border-0 text-gray-800 mb-0 fw-bold text-l"
                                    for="sort_1">Latest</label>
                            </span>
                        </div>

                        <div class="ms-0 ms-md-4 booking_sort_ht_item position-relative clickable-item-pointer calander-left-border 
                        @if($sort === 'cheapest') active_sort_ht @endif">
                            <span class="chbox_true">
                                <input type="radio" name="sort" id="sort_2" value="cheapest"
                                    onchange="this.form.submit()"><label
                                    class="m-0 p-0 border-0 text-gray-800 mb-0 fw-bold text-l"
                                    for="sort_2">Cheapest</label>
                            </span>
                        </div>

                        <div class="ms-0 ms-md-4 booking_sort_ht_item position-relative clickable-item-pointer calander-left-border 
                        @if($sort === 'most_popular') active_sort_ht @endif">
                            <span class="chbox_true">
                                <input type="radio" name="sort" id="sort_3" value="most_popular"
                                    onchange="this.form.submit()"><label
                                    class="m-0 p-0 border-0 text-gray-800 mb-0 fw-bold text-l" for="sort_3">Most
                                    Popular</label>
                            </span>
                        </div>

                        <div class="ms-0 ms-md-4 booking_sort_ht_item position-relative clickable-item-pointer calander-left-border 
                        @if($sort === 'stars_rating') active_sort_ht @endif">
                            <span class="chbox_true">
                                <input type="radio" name="stars_rating" id="sort_4" value="stars_rating"
                                    onchange="this.form.submit()"><label
                                    class="m-0 p-0 border-0 text-gray-800 mb-0 fw-bold text-l" for="sort_4">Stars
                                    Rating</label>
                            </span>
                        </div>
                    </div>

                </form>


                <div class="d-flex text-gray-300 justify-content-between align-items-center">
                    <p class="mb-2">There are <span class="fw-bold"> {{ $hotels->count() }}</span> Packages in this page
                    </p>

                    <a class="white_btn border-0 border_radius_20 d-block d-md-none mb-3" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvas_sort" aria-controls="offcanvasStart"><i
                            class="fa-solid fa-filter"></i>
                        Search Filter</a>

                    <div class="offcanvas offcanvas-start px-3" tabindex="-1" id="offcanvas_sort"
                        aria-labelledby="offcanvasTopLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasTopLabel"><i class="fa-solid fa-filter"></i>
                                Search Filter </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>

                        <div class="offcanvas-body">


                            <form id="myform" class="mt-1" method="post"
                                action="{{ route('patient_auth.package_search_filter') }}">
                                {{ csrf_field() }}


                                @if($type !== "direct")
                                <input type="hidden" name="type" value="not_direct">
                                {{-- the defulat search of the user --}}
                                <input type="hidden" name="search_hotel_input"
                                    value="{{ $_GET['search_hotel_input'] }}">
                                <input type="hidden" name="to_ht_date" value="{{ $_GET['to_ht_date'] }}">
                                <input type="hidden" name="from_ht_date" value="{{ $_GET['from_ht_date'] }}">
                                @else
                                <input type="hidden" name="type" value="{{ $_GET['type'] }}">
                                @endif

                                <div class="accordion accordion_search_booking" id="accordionPanelsStayOpenExample">

                                    @if (!empty($_GET['client_rating']))
                                    @php
                                    $client_rating = $_GET['client_rating'];
                                    @endphp
                                    @endif


                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                            <button class="accordion-button text-gray-400" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-rate"
                                                aria-expanded="true" aria-controls="panelsStayOpen-rates">
                                                Clients Rating
                                            </button>
                                        </h2>

                                        <div id="panelsStayOpen-rate" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-rates">
                                            <div class="accordion-body">

                                                <span class="chbox_true">
                                                    <input type="radio" name="client_rating" id="client_rating1"
                                                        value="1" onchange="this.form.submit()"><label
                                                        for="client_rating1">1
                                                        +</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="client_rating" id="client_rating2"
                                                        value="2" onchange="this.form.submit()"><label
                                                        for="client_rating2">2
                                                        +</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="client_rating" id="client_rating3"
                                                        value="3" onchange="this.form.submit()"><label
                                                        for="client_rating3">3
                                                        +</label>
                                                </span>
                                                <span class="chbox_true">
                                                    <input type="radio" name="client_rating" id="client_rating4"
                                                        value="4" onchange="this.form.submit()"><label
                                                        for="client_rating4">4
                                                        +</label>
                                                </span>
                                                <span class="chbox_true">
                                                    <input type="radio" name="client_rating" id="client_rating5"
                                                        value="5" onchange="this.form.submit()"><label
                                                        for="client_rating5">5
                                                        +</label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    @if (!empty($_GET['includes']))
                                    @php
                                    $includes_filter = explode(',', $_GET['includes']);
                                    @endphp
                                    @endif


                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                            <button class="accordion-button text-gray-400" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-includes"
                                                aria-expanded="true" aria-controls="panelsStayOpen-includes">
                                                Includes
                                            </button>
                                        </h2>

                                        <div id="panelsStayOpen-includes" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-includes">
                                            <div class="accordion-body">

                                                @foreach ($includes as $item)
                                                <span class="chbox_true chbox_true_with_icon">
                                                    <input name="includes[]" type="checkbox"
                                                        id="includes{{ $item->id }}" value="{{ $item->name }}"
                                                        onchange="this.form.submit()" @if(!empty($includes_filter) &&
                                                        in_array($item->name,$includes_filter)) checked
                                                    @endif><label for="includes{{ $item->id }}">{{ $item->name
                                                        }}</label>
                                                </span>
                                                @endforeach

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

                                    @if (!empty($_GET['price_from']))
                                    @php
                                    $price_from = $_GET['price_from'];
                                    $price_to = $_GET['price_to'];
                                    @endphp
                                    @endif


                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                            <button class="accordion-button text-gray-400" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-price"
                                                aria-expanded="true" aria-controls="panelsStayOpen-price">
                                                Price
                                            </button>
                                        </h2>

                                        <div id="panelsStayOpen-price" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-price">
                                            <div class="accordion-body">
                                                <div class="price_range">
                                                    <div
                                                        class="price-input_price_range_st price-input_price_range_small">
                                                        <div class="field">
                                                            <span class="text-gray-200">From</span>
                                                            <input type="number" class="input-min_price_range_small"
                                                                value="2500" readonly>
                                                        </div>
                                                        <div class="separator_price_range_small">-</div>
                                                        <div class="field">
                                                            <span class="text-gray-200">To</span>
                                                            <input type="number" class="input-max_price_range"
                                                                value="7500" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="slider_price_range_st slider_price_range_small">
                                                        <div class="progress_price_range_st progress_price_range_small">
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="range-input_price_range_st range-input_price_range_small">
                                                        <input type="range" class="range-min_small" min="0" max="10000"
                                                            value="2500" step="100">
                                                        <input type="range" class="range-max_small" min="0" max="10000"
                                                            value="7500" step="100">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </form>
                        </div>

                    </div>

                </div>

                <div class="row">
                    @foreach ($hotels as $item)
                    <div class="col-12 mb-2">
                        @include('website.layouts.components.package_h')
                    </div>
                    @endforeach
                </div>

                <div class="d-flex mt-2 justify-content-end">
                    {{ $hotels->appends(request()->input())->links() }}
                </div>
            </div>

        </div>

    </form>
</section>

<br>
@endsection


@section('js')

<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 ms-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">لا يوجد نتائج بحث</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(slug);
        $(".search_hotel").attr("placeholder", name);
    })
</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>

<script>
    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>


@endsection