@extends('website.layouts.master', ['no_transparent_header' => false])
@section('css')
@section('title', "Book " . $unit->name . " Package حجز باكيدج" )
@section('description', "Book " . $unit->name . " package رحلة شاملة" . $unit->short_description . " | Destino Tours
")
@section('keywords', "book, booking package, best package price for " . $unit->name . ", رحلة شاملة in egypt", ", best
package, best packages price, " . $unit->name . " package رحلة شاملة")


<!-- 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.package_show', $slug) }}" method="GET">
                @csrf

                <div
                    class="bg-white border_radius_50 shadow-main py-3 px-3 px-md-4 d-flex align-items-center justify-content-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 --}}

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

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

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

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

                </div>

            </form>

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

{{-- for hotel search for small devices --}}
<div class="offcanvas h-75 offcanvas-top px-2 px-md-5" tabindex="-1" id="offcanvas_search_hotel"
    aria-labelledby="offcanvasTopLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasTopLabel"><i class="fa-solid fa-magnifying-glass"></i> Search for the
            package</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.package_show', $slug) }}" method="GET"
        style="display: contents">
        @csrf
        <div class="offcanvas-body">
            <input type="hidden" value="{{ $slug }}" name="slug" readonly class="search_hotel_input" required>

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

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

        </div>

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

<section class="mb-3 container px-4 px-md-5 position-relative z-2 bg-white 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)
                <span class="badge badge_tags px-3 me-1 text-xxs"
                    style="background-color: {{ $item->tag->color ?? "" }}"> {{
                    $item->tag->name ?? "" }}</span>
                @endforeach
            </div>

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

            <p class="text-gray-300 text-s text-truncate fw-bold"><i class="fa-solid fa-location-dot"></i> <span> {{
                    $unit->destination->name }} @foreach ($unit->itinerary as $item)
                    @if($unit->destination->name !== $unit->destination->name)
                    - <span class="fw-normal">{{ $unit->destination->name }}
                    </span>
                    @endif
                    @endforeach</span></p>
        </div>

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

            <div class="mb-3">
                @if(!$type)
                <p class="text-xs text-gray-500 mb-0">Started</p>
                <h1 class="fw-bold mb-0">{{ $unit->single_price }} <small class="text-xxs texst-gray-400 fw-light">L.E
                    </small>
                </h1>
                <a href="#rooms">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        Check Rooms
                    </div>
                </a>
                @else
                <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->imgs) == 0)
            <div class="col-12 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            @elseif(count($unit->imgs) == 1)
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            @elseif (count($unit->imgs) == 2)
            <div class="col-6 p-1">
                <a href="{{ URL::asset('img/package/' . $unit->main_image) }}" class="spotlight">
                    <img class="w-100 h-100 img_cover" src="{{ URL::asset('img/package/' . $unit->main_image) }}"
                        style="border-radius: 20px 00px 00px 20px">
                </a>
            </div>
            <div class="col-6 p-1">
                <div class="row">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[0]->img) }}"
                                style="border-radius: 20px 00px 00px 20px">
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 p-1">
                        <a href="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}" class="spotlight">
                            <img class="w-100 h-100 img_cover"
                                src="{{ URL::asset('img/package/' . $unit->imgs[1]->img) }}"
                                style="border-radius: 20px 00px 00px 20px">
                        </a>
                    </div>
                </div>
            </div>
            @elseif (count($unit->imgs) == 3)

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

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

            <div class="col-6">
                <div class="row h-100">

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

                </div>
            </div>

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

                @endif

        </div>
    </div>

    <div>

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


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

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

        </ul>

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

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

                    <div class="col-12 col-md-3">
                        <div>
                            <h5 class="mb-3 fw-bold"><i class="fa-solid fa-plus ms-1"></i> Includes</h5>
                            <ul class="no_dots_ul px-2 text-gray-600">
                                @foreach ($unit->includes as $item)
                                <li class="mb-2 fs-6 text-gray-800">
                                    <i class="fa-solid fa-circle text-xxs ms-1 text-gray-400"></i> {{
                                    $item->include_exclude->name }}
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div>
                            <h5 class="mb-3 fw-bold"><i class="fa-solid fa-minus ms-1"></i> Exclude</h5>
                            <ul class="no_dots_ul px-2 text-gray-600">
                                @foreach ($unit->excludes as $item)
                                <li class="mb-2 fs-6 text-gray-800">
                                    <i class="fa-solid fa-circle text-xxs ms-1 text-gray-400"></i> {{
                                    $item->include_exclude->name }}
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>


                </div>

            </div>

            {{-- itinerary --}}
            <div class="tab-pane fade show" id="itinerary_tap" role="tabpanel" aria-labelledby="airline_tap">

                <h5><i class="fa-solid fa-route mb-2"></i> See the Package Itinerary</h5>

                <div class="row ms-4">
                    <ul class="list-group patient-timeline" id="itinerary_cont">

                        @foreach ($unit->itinerary as $item)
                        <li
                            class="row flex-nowrap list-group-item d-flex justify-content-between position-relative price_div">
                            <i class="col patient-timeline-pointer fas fa-circle text-xxs mb-0 main-color"></i>
                            <div class="col-5 me-1">
                                <p class="text-xs text-gray-700 mb-0">Day {{ $item->day }}</p>
                                <h6 class="text-s fw-bold  mb-0">{{ $item->name }}</h6>
                                <p class="text-xs text-gray-400 mb-0">{{ $item->info }}</p>

                            </div>
                            <div class="col-4 align-self-center me-1">
                                <p class="text-xs text-gray-200 mb-0">{{ __('basic.destination') }}</p>
                                <h6 class="text-s text-gray-400 pe-2">{{ $item->destination->name }} </h6>
                            </div>

                        </li>

                        @endforeach
                    </ul>

                </div>

            </div>

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



        </div>
    </div>

    </div>

</section>

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

    @if($unit->single_price > 0)
    <div class="bg-white border_radius_20 px-3 px-md-3 mb-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/package/' . $unit->main_image) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">Single Room</h5>
                        <h6 class="text-xs text-gray-400 mb-0">Price for 1 person</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>
                            1 Person
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for 1 Person</p>
                        <h2 class="fw-bold mb-1">{{ $unit->single_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="{{ $unit->offer_id }}" data-cat="single" data-type="package"
                            data-from="{{ $from }}" data-to="{{ $to }}" data-qty="1"> <i
                                class="fas fa-arrow-right ms-1"></i>
                            Add To Cart
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>
    @endif

    @if($unit->double_price > 0)
    <div class="bg-white border_radius_20 px-3 px-md-3 mb-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/package/' . $unit->main_image) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">Double Room</h5>
                        <h6 class="text-xs text-gray-400 mb-0">Price for 2 person</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>
                            2 Person
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for 2 Person</p>
                        <h2 class="fw-bold mb-1">{{ $unit->double_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="{{ $unit->offer_id }}" data-cat="double" data-type="package"
                            data-from="{{ $from }}" data-to="{{ $to }}" data-qty="1"> <i
                                class="fas fa-arrow-right ms-1"></i>
                            Add To Cart
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>
    @endif

    @if($unit->triple_price > 0)
    <div class="bg-white border_radius_20 px-3 px-md-3 mb-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/package/' . $unit->main_image) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">Double Room</h5>
                        <h6 class="text-xs text-gray-400 mb-0">Price for 3 person</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>
                            <i class="fa-solid fa-user"></i>
                            3 Person
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for 3 Person</p>
                        <h2 class="fw-bold mb-1">{{ $unit->triple_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="{{ $unit->offer_id }}" data-cat="triple" data-type="package"
                            data-from="{{ $from }}" data-to="{{ $to }}" data-qty="1"> <i
                                class="fas fa-arrow-right ms-1"></i>
                            Add To Cart
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>
    @endif

    @if($unit->quad_price > 0)
    <div class="bg-white border_radius_20 px-3 px-md-3 mb-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/package/' . $unit->main_image) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">Qouad Room</h5>
                        <h6 class="text-xs text-gray-400 mb-0">Price for 4 person</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>
                            <i class="fa-solid fa-user"></i> <i class="fa-solid fa-user"></i>
                            4 Person
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for 4 Person</p>
                        <h2 class="fw-bold mb-1">{{ $unit->quad_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="{{ $unit->offer_id }}" data-cat="quad" data-type="package" data-from="{{ $from }}"
                            data-to="{{ $to }}" data-qty="1"> <i class="fas fa-arrow-right ms-1"></i>
                            Add To Cart
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>
    @endif

</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">
                Packages You Might Like
            </h3>
            <h6 class="text-gray-300  mb-1">
                Here is a list of packages for you
            </h6>
        </div>
    </div>
    <div class="swiper swiper_products">

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

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

@endsection

@section('js')

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

<script>
    // show all itinerary
    let mapOptions_2 = {
            center:[0, 0],
            zoom:4
    }

    let map_itin = new L.map('map' , mapOptions_2);
    /* views:
    defult (https://tile.openstreetmap.org/{z}/{x}/{y}.png)
    1- airport (https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png)
    2- black (https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png)
    3- setlite (https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x})
        */
    let layer_2 = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: 'Tripo For Tourism Management',
    }).addTo(map_itin);
    

    // // searching 
    //     var searchLayer = L.layerGroup().addTo(map_itin);
    //     //... adding data in searchLayer ...
    //     map_itin.addControl( new L.Control.Search({layer: searchLayer}) );
    //     //searchLayer is a L.LayerGroup contains searched markers
    // //end searching

    //     // marker
    //     L.marker(["29.967278421053223", "31.297988891601566"]).addTo(map_itin)
    //         .bindPopup('Your Unit Location')
    //         .openPopup();

    var polygon = L.polygon([
        @foreach ($unit->itinerary as $item)
            [{{ $item->latitude . ',' . $item->longitude}}],
        @endforeach
    ]).addTo(map_itin);
    
    map_itin.fitBounds(polygon.getBounds());


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