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

@section('title', "Book " . $unit->name . " Hotel Now حجز فندق in " . $unit->destination->name )
@section('description', "Book " . $unit->name . " Hotel فندق حجز فندق in " . $unit->destination->name . " " .
$unit->short_description . " | Destino Tours")
@section('keywords', "hotel, book a hotel, book best hotel price for " . $unit->name . ", hotels in egypt, booking
hotel, book hotel, best hotel, best hotels
price, book hotels in " . $unit->destination->name . "," . $unit->name . " Hotel فندق")

@section('css')


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

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

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


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


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

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

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


@section('content')

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

        <div class="row">

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

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

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

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

                    {{-- for large devices --}}

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

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

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

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

                                <div class="dropdown">

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

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

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

                                </div>
                            </div>

                        </div>


                    </div>

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

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

                    {{-- 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="@if($room_qty){{ $room_qty }}@else 1 @endif" 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="@if($adult_qty){{ $adult_qty }}@else 0 @endif" 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="@if($room_qty){{ $room_qty }} @else 1 @endif" 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="@if($adult_qty){{ $adult_qty }} @else 1 @endif" 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="mb-3 container px-4 px-md-5 position-relative z-2 bg-white py-5 b-r-l-cont" style="">

    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <div class=" mb-1">
                @foreach ($unit->tags as $item)
                <a href="{{ route('patient_auth.show_tag', $item->tag->slug)}}">
                    <span class="badge badge_tags px-3 me-1 text-xxs" style="background-color: {{ $item->tag->color }}">
                        {{
                        $item->tag->name }}</span>
                </a>
                @endforeach
            </div>

            <h1 class="fw-bold mb-1">{{ $unit->name }}</h1>
            <div class="d-flex text-xs mb-0">
                <div class="">
                    <span><i class="fa-solid fa-star"></i></span>
                    <span><i class="fa-solid fa-star"></i></span>
                    <span><i class="fa-solid fa-star"></i></span>
                    <span><i class="fa-solid fa-star"></i></span>
                    <span><i class="fa-solid fa-star"></i></span>
                </div>
                <p class="ms-2 text-gray-400 mb-0">A hotel with <span class="fw-bold">{{ $unit->stars }} Stars</span>
                </p>
            </div>
            <p class="text-gray-300 text-s text-truncate"><i class="fa-solid fa-location-dot"></i> <span> {{
                    $unit->address }}</span></p>
        </div>

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

            <div class="mb-3">
                @if(!$type)
                <p class="text-xs text-gray-500 mb-0">Total Price for {{ $different }} Nights</p>
                <h1 class="fw-bold mb-0">{{ $rooms->min('price') }} <small class="text-xxs texst-gray-400 fw-light">L.E
                    </small>
                </h1>
                <a href="#rooms">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        Check Rooms
                    </div>
                </a>
                @else
                <a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_search_hotel"
                    aria-controls="offcanvasTop">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        Choose date
                    </div>
                </a>
                @endif

            </div>
        </div>

    </div>

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

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

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

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

            @if(count($unit->images_unit) > 0)

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

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

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


                @endif

                @endif

        </div>
    </div>

    <div>

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


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

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

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

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

                            @foreach ($unit->features as $item)
                            <li class="mb-2 fs-6 text-gray-800">
                                <i class="{{ $item->feature->icon }} ms-1 text-gray-400"></i> {{ $item->feature->name }}
                            </li>
                            @endforeach


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

            </div>

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

    </div>

</section>

<section class="container px-3 px-md-5 mb-5" id="rooms">
    <div class="col-12">
        <div id="map"></div>
    </div>
</section>


@if(!$type)

{{-- rooms --}}
<section class="container px-3 px-md-5 mb-5" id="rooms">
    <h5 class="fw-bold mb-3"><i class="fa-solid fa-bed"></i> Available Rooms</h5>


    @foreach ($rooms as $item)


    <div class="bg-white border_radius_20 px-3 px-md-3">

        {{-- available rooms --}}
        <div class="available_rooms_unit_cont">

            <div class="available_rooms_unit_item row border-bottom py-4">
                <div class="col-12 col-md-6 d-flex">
                    <img class="avatar-lg me-2 b-r-xs" src="{{ URL::asset('img/unit/rooms/' . $item->img) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">{{ $item->type->name }}</h5>
                        <h6 class="text-xs text-gray-400 mb-0"> {{ $item->info }}
                        </h6>
                        <h6 class="text-xs text-gray-400 mb-0"> {{ $item->view->name }}
                        </h6>
                    </div>
                </div>
                <div class="col-12 col-md-6 d-flex justify-content-around align-items-center">
                    <div>
                        <h6 class="mb-2 text-gray-800"><i class="fa-solid fa-user"></i> <i class="fa-solid fa-user"></i>
                            {{ $item->capacity }} People
                        </h6>
                        <h6 class="mb-2 text-gray-800"><i class="fa-solid fa-utensils"></i> {{ $item->meal->name
                            }}
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for {{ $different }} Nights per room</p>
                        <h2 class="fw-bold mb-1">{{ $item->price }} <small class="text-xxs texst-gray-400 fw-light">L.E
                            </small>
                        </h2>
                        <a class="yellow_400 border_radius_20 fw-normal text-s m-0 add_cart_ajax"
                            data-id="{{ $item->price_id }}" data-type="hotel" data-from="{{ $from }}"
                            data-to="{{ $to }}" data-qty="{{ $room_qty }}"> <i class="fas fa-arrow-right ms-1"></i>
                            Add To Cart
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>

    @endforeach

</section>
@endif

{{-- related hotels --}}

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

        <div class="mb-3">

            <h3 class="text-gray-800 fw-bold mb-0">
                Hotels You Might Like
            </h3>
            <h6 class="text-gray-300  mb-1">
                Here is a list of hotels for you
            </h6>
        </div>
    </div>
    <div class="swiper swiper_products">

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

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

@endsection

@section('js')

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

<script>
    let mapOptions = {
    center:[{{ $unit->latitude }}, {{ $unit->longitude }}],
    zoom:12
}

let map = new L.map('map' , mapOptions);

let layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; Tripo Travel Management System'
}).addTo(map);

L.marker([{{ $unit->latitude }}, {{ $unit->longitude }}]).addTo(map)
    .bindPopup('{{ $unit->name }}')
    .openPopup();

</script>


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

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

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

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

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

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

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

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

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


</script>

@endsection