@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.unit_search') }}" 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>

                    {{-- qty --}}
                    <div class="px-3 d-none d-md-block">
                        <div class="d-flex align-items-center">

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

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

                                    <p class="clickable-item-pointer text-gray-300 mb-0 text-truncate"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <span id="room_show_qty">1 Room</span>
                                        <span id="adult_show_qty">1 Adult</span>
                                    </p>

                                    <ul class="dropdown-menu dropdown_booking_qty_cont p-4">
                                        <li class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0"> Rooms</h6>
                                            <div class="counter_book_btn pe-4">
                                                <span data-type="room" class="plus_counter_btn bg-dark">+</span>
                                                <input type="text" class="counter_book_count" name="room_qty"
                                                    value="{{ $room_qty }}" readonly>
                                                <span data-type="room" class="minus_counter_btn bg-dark">-</span>
                                            </div>
                                        </li>
                                        <hr>
                                        <li class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0"> Adults</h6>
                                            <div class="counter_book_btn pe-4">
                                                <span data-type="adult" class="plus_counter_btn bg-dark">+</span>
                                                <input type="text" class="counter_book_count" name="adult_qty"
                                                    value="{{ $adult_qty }}" readonly>
                                                <span data-type="adult" class="minus_counter_btn bg-dark">-</span>
                                            </div>
                                        </li>
                                        <li class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="mb-0"> Children</h6>
                                            <div class="counter_book_btn pe-4">
                                                <span data-type="child" class="plus_counter_btn bg-dark">+</span>
                                                <input type="text" class="counter_book_count" name="child_qty" value="0"
                                                    readonly>
                                                <span data-type="child" class="minus_counter_btn bg-dark">-</span>
                                            </div>
                                        </li>
                                        <hr>

                                        <li class="d-flex justify-content-between align-items-center">
                                            <p class="text-gray-300 text-xs mb-0  text-end">You must be below 18
                                                years
                                                old
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </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>

            <hr class="text-gray-300">

            <div>
                <div class="d-flex align-items-center text-s fw-bold text-gray-700 mb-0">
                    <i class="fa-solid fa-users me-2"></i>
                    Room and Traveler
                </div>
                <ul class=" px-0">
                    <li class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Rooms </h6>
                        <div class="counter_book_btn pe-4">
                            <span data-type="room" class="plus_counter_btn bg-dark">+</span>
                            <input type="text" class="counter_book_count" name="room_qty" value="{{ $room_qty }}"
                                readonly>
                            <span data-type="room" class="minus_counter_btn bg-dark">-</span>
                        </div>
                    </li>
                    <hr class="text-gray-300">
                    <li class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Adult </h6>
                        <div class="counter_book_btn pe-4">
                            <span data-type="adult" class="plus_counter_btn bg-dark">+</span>
                            <input type="text" class="counter_book_count" name="adult_qty" value="{{ $adult_qty }}"
                                readonly>
                            <span data-type="adult" class="minus_counter_btn bg-dark">-</span>
                        </div>
                    </li>
                    <li class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Children</h6>
                        <div class="counter_book_btn pe-4">
                            <span data-type="child" class="plus_counter_btn bg-dark">+</span>
                            <input type="text" class="counter_book_count" name="child_qty" value="0" readonly>
                            <span data-type="child" class="minus_counter_btn bg-dark">-</span>
                        </div>
                    </li>
                </ul>
            </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.unit_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'] }}">
        <input type="hidden" name="room_qty" value="{{ $_GET['room_qty'] }}">
        <input type="hidden" name="adult_qty" value="{{ $_GET['adult_qty'] }}">
        <input type="hidden" name="child_qty" value="{{ $_GET['child_qty'] }}">
        @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">

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

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

                        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-headingOne">
                            <div class="accordion-body">
                                @foreach ($chains as $item)
                                <div class="form-check">
                                    <label class="form-check-label clickable-item-pointer" for="chain{{ $item->id }}">
                                        {{ $item->name }}
                                    </label>
                                    <input name="chains[]" multiple="multiple" value="{{ $item->name }}"
                                        class="form-check-input clickable-item-pointer" type="checkbox"
                                        id="chain{{ $item->id }}" onchange="this.form.submit()"
                                        @if(!empty($chains_filter) && in_array($item->name,$chains_filter)) checked
                                    @endif>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    @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['stars']))
                    @php
                    $stars = $_GET['stars'];
                    @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-stars" aria-expanded="true"
                                aria-controls="panelsStayOpen-stars">
                                Stars
                            </button>
                        </h2>

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

                                <span class="chbox_true">
                                    <input type="radio" name="stars" id="star1" value="1" onchange="this.form.submit()"
                                        @if (!empty($stars) && $stars==1) checked @endif><label for="star1">
                                        <i class="fa-solid fa-star "></i> 1</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="stars" id="star2" value="2" onchange="this.form.submit()"
                                        @if (!empty($stars) && $stars==2) checked @endif><label for="star2">
                                        <i class="fa-solid fa-star"></i> 2</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="stars" id="star3" value="3" onchange="this.form.submit()"
                                        @if (!empty($stars) && $stars==3) checked @endif><label for="star3">
                                        <i class="fa-solid fa-star"></i> 3</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="stars" id="star4" value="4" onchange="this.form.submit()"
                                        @if (!empty($stars) && $stars==4) checked @endif><label for="star4">
                                        <i class="fa-solid fa-star"></i> 4</label>
                                </span>

                                <span class="chbox_true">
                                    <input type="radio" name="stars" id="star5" value="5" onchange="this.form.submit()"
                                        @if (!empty($stars) && $stars==5) checked @endif><label for="star5">
                                        <i class="fa-solid fa-star"></i> 5</label>
                                </span>
                            </div>
                        </div>
                    </div>


                    @if (!empty($_GET['features']))
                    @php
                    $feature_filter = explode(',', $_GET['features']);
                    @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-feature" aria-expanded="true"
                                aria-controls="panelsStayOpen-feature">
                                Features
                            </button>
                        </h2>

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

                                @foreach ($features as $item)
                                <span class="chbox_true chbox_true_with_icon">
                                    <input name="features[]" type="checkbox" id="feature{{ $item->id }}"
                                        value="{{ $item->name }}" onchange="this.form.submit()"
                                        @if(!empty($feature_filter) && in_array($item->name,$feature_filter)) checked
                                    @endif><label for="feature{{ $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">
                                Hotel 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['hotel_type']))
                    @php
                    $hotel_type = $_GET['hotel_type'];
                    @endphp
                    @endif


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

                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-headingOne">
                            <div class="accordion-body">
                                <div class="form-check">
                                    <label class="form-check-label clickable-item-pointer" for="hotel_type_1">
                                        Hotel
                                    </label>
                                    <input name="hotel_type" value="1" class="form-check-input clickable-item-pointer"
                                        type="checkbox" id="hotel_type_1" onchange="this.form.submit()"
                                        @if(!empty($hotel_type) && $hotel_type==1) checked @endif>
                                </div>
                            </div>
                        </div>

                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-headingOne">
                            <div class="accordion-body">
                                <div class="form-check">
                                    <label class="form-check-label clickable-item-pointer" for="hotel_type_2">
                                        Apartment
                                    </label>
                                    <input name="hotel_type" value="2" class="form-check-input clickable-item-pointer"
                                        type="checkbox" id="hotel_type_2" onchange="this.form.submit()"
                                        @if(!empty($hotel_type) && $hotel_type==2)) checked @endif>
                                </div>
                            </div>
                        </div>

                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                            aria-labelledby="panelsStayOpen-headingOne">
                            <div class="accordion-body">
                                <div class="form-check">
                                    <label class="form-check-label clickable-item-pointer" for="hotel_type_3">
                                        Cruise
                                    </label>
                                    <input name="hotel_type" value="3" class="form-check-input clickable-item-pointer"
                                        type="checkbox" id="hotel_type_3" onchange="this.form.submit()"
                                        @if(!empty($hotel_type) && $hotel_type==3) checked @endif>
                                </div>
                            </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.unit_search') }}" 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'] }}">
                    <input type="hidden" name="room_qty" value="{{ $_GET['room_qty'] }}">
                    <input type="hidden" name="adult_qty" value="{{ $_GET['adult_qty'] }}">
                    <input type="hidden" name="child_qty" value="{{ $_GET['child_qty'] }}">
                    @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> Hotels 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.unit_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'] }}">
                                <input type="hidden" name="room_qty" value="{{ $_GET['room_qty'] }}">
                                <input type="hidden" name="adult_qty" value="{{ $_GET['adult_qty'] }}">
                                <input type="hidden" name="child_qty" value="{{ $_GET['child_qty'] }}">
                                @else
                                <input type="hidden" name="type" value="{{ $_GET['type'] }}">
                                @endif

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

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

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


                                        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-headingOne">
                                            <div class="accordion-body">
                                                @foreach ($chains as $item)
                                                <div class="form-check">
                                                    <label class="form-check-label clickable-item-pointer"
                                                        for="chain{{ $item->id }}">
                                                        {{ $item->name }}
                                                    </label>
                                                    <input name="chains[]" multiple="multiple" value="{{ $item->name }}"
                                                        class="form-check-input clickable-item-pointer" type="checkbox"
                                                        id="chain{{ $item->id }}" onchange="this.form.submit()"
                                                        @if(!empty($chains_filter) &&
                                                        in_array($item->name,$chains_filter))
                                                    checked
                                                    @endif>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>


                                    @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['stars']))
                                    @php
                                    $stars = $_GET['stars'];
                                    @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-stars"
                                                aria-expanded="true" aria-controls="panelsStayOpen-stars">
                                                Stars
                                            </button>
                                        </h2>

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

                                                <span class="chbox_true">
                                                    <input type="radio" name="stars" id="star1" value="1"
                                                        onchange="this.form.submit()" @if (!empty($stars) && $stars==1)
                                                        checked @endif><label for="star1">
                                                        <i class="fa-solid fa-star "></i> 1</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="stars" id="star2" value="2"
                                                        onchange="this.form.submit()" @if (!empty($stars) && $stars==2)
                                                        checked @endif><label for="star2">
                                                        <i class="fa-solid fa-star"></i> 2</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="stars" id="star3" value="3"
                                                        onchange="this.form.submit()" @if (!empty($stars) && $stars==3)
                                                        checked @endif><label for="star3">
                                                        <i class="fa-solid fa-star"></i> 3</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="stars" id="star4" value="4"
                                                        onchange="this.form.submit()" @if (!empty($stars) && $stars==4)
                                                        checked @endif><label for="star4">
                                                        <i class="fa-solid fa-star"></i> 4</label>
                                                </span>

                                                <span class="chbox_true">
                                                    <input type="radio" name="stars" id="star5" value="5"
                                                        onchange="this.form.submit()" @if (!empty($stars) && $stars==5)
                                                        checked @endif><label for="star5">
                                                        <i class="fa-solid fa-star"></i> 5</label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>



                                    @if (!empty($_GET['features']))
                                    @php
                                    $feature_filter = explode(',', $_GET['features']);
                                    @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-feature"
                                                aria-expanded="true" aria-controls="panelsStayOpen-feature">
                                                Features
                                            </button>
                                        </h2>

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

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

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

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


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

                                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-headingOne">
                                            <div class="accordion-body">
                                                <div class="form-check">
                                                    <label class="form-check-label clickable-item-pointer"
                                                        for="hotel_type_1">
                                                        Hotel
                                                    </label>
                                                    <input name="hotel_type" value="1"
                                                        class="form-check-input clickable-item-pointer" type="checkbox"
                                                        id="hotel_type_1" onchange="this.form.submit()"
                                                        @if(!empty($hotel_type) && $hotel_type==1) checked @endif>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-headingOne">
                                            <div class="accordion-body">
                                                <div class="form-check">
                                                    <label class="form-check-label clickable-item-pointer"
                                                        for="hotel_type_2">
                                                        Apartment
                                                    </label>
                                                    <input name="hotel_type" value="2"
                                                        class="form-check-input clickable-item-pointer" type="checkbox"
                                                        id="hotel_type_2" onchange="this.form.submit()"
                                                        @if(!empty($hotel_type) && $hotel_type==2)) checked @endif>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="panelsStayOpen-property_type" class="accordion-collapse collapse show"
                                            aria-labelledby="panelsStayOpen-headingOne">
                                            <div class="accordion-body">
                                                <div class="form-check">
                                                    <label class="form-check-label clickable-item-pointer"
                                                        for="hotel_type_3">
                                                        Cruise
                                                    </label>
                                                    <input name="hotel_type" value="3"
                                                        class="form-check-input clickable-item-pointer" type="checkbox"
                                                        id="hotel_type_3" onchange="this.form.submit()"
                                                        @if(!empty($hotel_type) && $hotel_type==3) checked @endif>
                                                </div>
                                            </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">

                    @if(count($hotels) > 0)

                    {{-- ------ chooses hotel ------- --}}
                    <div class="col-12 mb-2">
                        @if($fav_hotel)

                        <div class="tourism_product_h row mx-0 mb-2 text-white" style="background-color: #005fbe;">
                            @if($fav_hotel->status == true)
                            @php
                            $url = route('patient_auth.unit_show', $fav_hotel->slug . '?slug=' . $fav_hotel->slug .
                            '&search_hotel_input=' . $slug .
                            '&from_ht_date=' . $from . '&to_ht_date=' . $to . '&room_qty=' . $room_qty. '&adult_qty=' .
                            $adult_qty);
                            @endphp
                            @elseif($type === "direct")
                            @php
                            $url = route('patient_auth.unit_show', [$fav_hotel->slug, 'direct']);
                            @endphp
                            @else
                            @php
                            $url = route('patient_auth.unit_show', [$fav_hotel->slug, 'direct']);
                            @endphp
                            @endif
                            <div
                                class="col-4 col-md-3 text-center align-self-center justify-content-between px-2 align-items-center calander-left-border">

                                <div class="d-flex justify-content-center">
                                    <div>
                                        @if($fav_hotel->status == true)
                                        <p class="text-xs text-blue-200 mb-0">Total Price for {{ $fav_hotel->nights }}
                                            Nights</p>
                                        <h2 class="fw-bold mb-0">{{ $fav_hotel->price }} <small
                                                class="text-xxs texst-blue-400 fw-light">L.E
                                            </small>
                                        </h2>
                                        <a href="{{ $url }}">
                                            <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                                                    class="fas fa-arrow-right ms-1"></i>
                                                Check Availability
                                            </div>
                                        </a>
                                        @elseif($type === "direct")
                                        <h5 class="fw-bold mb-0 text-blue-400">Choose Date</h5>
                                        @else
                                        <h4 class="mb-0 fw-bold text-s">
                                            <a href="{{ route('patient_auth.contact_us', ['book=' . $item->name]) }}">
                                                <p class="mb-0 text-green">Special Offer</p>
                                                <h6 class="text-white">Ask for Price</h6>
                                            </a>
                                        </h4>
                                        @endif

                                    </div>

                                </div>

                            </div>

                            <div class="col-8 col-md-6 px-3 py-4 text-start">
                                <span class="text-xs"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
                                        class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
                                        class="fa-solid fa-star"></i>
                                </span>
                                <a href="{{ $url }}" class="text-white fw-bold fs-5">{{ $fav_hotel->name }}
                                </a>

                                <p class="text-blue-300 text-s text-truncate"><i class="fa-solid fa-location-dot"></i>
                                    <span> {{
                                        $fav_hotel->address }}</span>
                                </p>

                                <p class="text-blue-300 text-s two_line_linit">{{ $fav_hotel->short_description }}</p>

                                <h6 class="text-blue-200"><i class="fa-solid fa-star"></i> 5.0</h6>
                            </div>

                            <div class="col-12 col-md-3 px-0">
                                <a href="{{ $url }}">
                                    <img src="{{ URL::asset('img/unit/' . $fav_hotel->main_image) }}" title="cover">
                                </a>
                            </div>
                        </div>
                        @endif

                    </div>

                    {{------- end of fav hotel -------}}

                    @foreach ($hotels as $item)
                    <div class="col-12 mb-2">
                        @include('website.layouts.components.hotel_h')
                    </div>
                    @endforeach
                    @else
                    <div class="py-5 text-center bg-white b-r-s-cont my-4">
                        <img width="500px" class="img-fluid p-md-2 mb-2"
                            src="{{ URL::asset('img/svg/undraw_into_the_night_vumiw.svg') }}" alt="">
                        <div>
                            <h3 class="mb-0">Our offers has been ended</h3>
                            <h6 class="mb-0 text-gray-400">We are working to add new items soon</h6>
                            <a class="text-gray-300 link-cust-text" href="{{ route('website_homepage') }}">Discover the
                                world more
                                <i class="fas fa-angle-right text-s"></i></a>

                        </div>
                    </div>
                    @endif

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