@extends('website.layouts.master')
@section('css')
<style>
    .form-select ::data-placeholder {
        color: #ffa200;
    }

    input[type="date"]::before {
        color: #999999;
        content: attr(placeholder);
    }

    input[type="date"],
    input[type="date"]:focus,
    input[type="date"]:hover {
        color: #ffffff;
    }

    input[type="date"]:focus,
    input[type="date"]:valid {
        color: #1a093e;
    }

    input[type="date"]:focus::before,
    input[type="date"]:valid::before {
        content: "" !important;
    }
</style>
@endsection
@section('content')
<div class="container-fluid travel-details">
    <div class="containery">
        <!-- navbar  -->
        <header>
            @include('website.layouts.includes.topbar')
            <!-- hero section  -->
            <section class="row pt-5 mb-5">

                <div class="col-12 col-lg-6 ">



                    <div class="swiper mySwiper2 unit_imgs_swiper travel">
                        <div class="swiper-wrapper">
                            @foreach ($unit->imgs as $item)
                            <div class="swiper-slide">
                                <img src="{{ URL::asset('img/products/' . $item->img) }}" class="radius-10" />
                            </div>
                            @endforeach

                        </div>
                    </div>

                    <div thumbsSlider="" class="swiper mySwiper unit_imgs_swiper_thu travel-detail">
                        <div class="swiper-wrapper">
                            @foreach ($unit->imgs as $item)
                            <div class="swiper-slide">
                                <img src="{{ URL::asset('img/products/' . $item->img) }}" class="radius-10" />
                            </div>
                            @endforeach
                        </div>
                    </div>

                </div>

                <div class="col-12 col-lg-6 ">
                    <h2 class="fw-bold mb-4  fs-1 text-capitalize">
                        {{$unit->name}}
                        <span class="color-title fw-500 fs-3 ms-1">Full Package</span>
                    </h2>
                    <p class="mb-4">
                        {!! $unit->short_description !!}

                    </p>
                    <h3 class="fw-600 color-title fs-1 mb-0">
                        {{ $offer->sell }}
                    </h3>
                    <p class="text-gray-300 fs-6 fw-normal mb-4">Lowest Person Price</p>

                    <p class="fw-600 mb-4">
                        Good
                        <span class="yellow">
                            <i class="fa-solid fa-star fs-8 yellow"></i>
                            <i class="fa-solid fa-star fs-8 yellow"></i>
                            <i class="fa-solid fa-star fs-8 yellow"></i>
                        </span>
                        <i class="fa-solid fa-star fs-8 secandry-light"></i><i
                            class="fa-solid fa-star fs-8 secandry-light"></i>
                        <span class="secandry-light fw-500"> (130 review)</span>
                    </p>
                    <div class="d-flex">
                        <p class="secandry-light">
                            <i class="fa-solid fa-user blue"></i> Available For Groups
                        </p>
                        <p class="secandry-light">
                            <i class="fa-solid fa-location-arrow blue ms-3"></i> Approx 3
                            night trip
                        </p>
                    </div>
                    <p class="secandry-light">
                        <i class="fa-solid fa-location-dot blue"></i> El Salam Road Nabq
                        Bay, 46610 Sharm El Sheikh, Egypt
                    </p>
                    <div class="mt-3">
                        <button class="btn text-capitalize me-1 mb-1" data-bs-toggle="modal" href="#exampleModalToggle"
                            role="button" style="padding: 1rem 1.5rem">
                            <i class="fa-solid fa-location-arrow  fs-5"></i>
                            Book now
                        </button>


                        <button data-id="{{ $unit->id }}" data-type="full_package"
                            class="wishlist-btn text-capitalize me-1 mb-1 add_wishlist_ajax  @if ($unit->check_wishlist == true) wishlist-btn_active @endif"
                            style="padding: 1rem 1.5rem">
                            <i class="fa-solid fa-heart"></i>
                            add to favourite
                        </button>
                        <button class="btn share mb-1">
                            <i class="fa-solid fa-share-nodes fs-4"></i>
                        </button>

                        <div class="modal fade" id="exampleModalToggle" aria-hidden="true"
                            aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content p-4 radius-20" style="background-color: #FCFCFC">
                                    <div class="modal-header">
                                        <div class="modal-title" id="exampleModalToggleLabel">
                                            <h2 class="fw-bold text-capitalize">Booking details</h2>
                                            <p class="text-secondary m-0">
                                                Welcome back and discover the world
                                            </p>
                                        </div>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="card d-flex flex-row p-3 mb-3">
                                            <img src="{{ URL::asset('img/products/' . $unit->main_image) }}"
                                                class="col-12 p-0 radius-20" alt=""
                                                style="width: 100px;height: 120px; object-fit: cover;">
                                            <div class="d-flex flex-column justify-content-center  ms-3">
                                                <h2 class="fs-6 fw-600 mb-1 text-capitalize">
                                                    {{ $unit->name }}
                                                </h2>
                                                <p class="text-secondary fs-7 mb-1">
                                                    {!! $unit->short_description !!}
                                                </p>
                                                <div class="d-flex flex-wrap">
                                                    <p class="fs-8 secandry-light me-2 m-0">
                                                        <i class="fa-solid fa-location-arrow color-i"></i>
                                                        Approx 2 night trip
                                                    </p>
                                                    <p class="fs-8 secandry-light m-0">
                                                        <i class="fa-solid fa-user color-i"></i>
                                                        Available for Groups
                                                    </p>
                                                </div>
                                            </div>
                                            <h3 class="fw-500 fs-5 color-title m-0 ms-2 fw-bold">{{ $offer->sell }}</h3>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <label class="form-label">Quantity
                                                    <small>(Required)</small></label>
                                                <select
                                                    class="form-select form-control shadow radius-10 btn-drop mb-3 me-1"
                                                    name="qty_cart" id="qty_cart" data-placeholder="Choose one thing">

                                                    @for ($i = 1; $i < 50; $i++) <option value="{{ $i }}">{{ $i }}
                                                        </option>
                                                        @endfor
                                                </select>
                                                <div class=" text-red fs-8" id="add_cart-ErrorMsg"></div>
                                            </div>
                                            <div class="col-12 mb-4">
                                                <label class="form-label">Date
                                                    <small>(Required)</small></label>
                                                <input id="date_from_cart" name="date_from" type="date"
                                                    placeholder="checkin date"
                                                    class="shadow radius-10 btn-drop w-100 mb-3" required="">
                                            </div>
                                        </div>

                                        <div class="justify-content-center d-flex flex-column align-items-center p-0">
                                            <button data-id="{{ $offer->id }}" data-type="full_package"
                                                class="btn pt-3 pb-3 add_cart_ajax" id="btn-pay">
                                                Add to cart
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <style>
                                .form-select ::data-placeholder {
                                    color: #ffa200;
                                }

                                input[type="date"]::before {
                                    color: #999999;
                                    content: attr(placeholder);
                                }

                                input[type="date"],
                                input[type="date"]:focus,
                                input[type="date"]:hover {
                                    color: #ffffff;
                                }

                                input[type="date"]:focus,
                                input[type="date"]:valid {
                                    color: #1a093e;
                                }

                                input[type="date"]:focus::before,
                                input[type="date"]:valid::before {
                                    content: "" !important;
                                }
                            </style>
                        </div>
                    </div>
                </div>
            </section>
        </header>
    </div>
</div>
<div class="containery">
    <section class="row mb-5">
        <h2 class="fw-bold mb-4 text-center text-capitalize">{{ $unit->name }}.</h2>
        <p>
            {!! $unit->description !!}
        </p>
        <div class="row mb-4 mt-5">
            <div class="swiper mySwiper tourist radius-20">
                <div class="swiper-wrapper radius-20" style="height: 350px">
                    @foreach ($unit->imgs as $item)
                    <div class="swiper-slide">
                        <img style="object-fit: cover; height: 100%; width: 100%; "
                            src="{{ URL::asset('img/products/' . $item->img) }}" class="radius-10" />
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
</div>

<section class="row mt-5 px-5">

    <div class="col-12 px-5">
        <h2 class="fw-bold mb-1 text-capitalize mt-4"><i class="fa-solid fa-hotel"></i> Related to {{ $unit->name
            }}.
        </h2>
        <p class="mb-3">Get the trips matches you</p>

        <div class="swiper mySwiper pill-tabs mb-1 px-3">
            <div class="swiper-wrapper pb-5">
                @foreach ($related_hotels as $item)

                <div class="swiper-slide mb-5">
                    <div class="card-product radius-20 shadow position-relative p-3 bg-white">
                        <div class="position-absolute icon-product mt-2 ms-2">
                            @if($item->aqua_park)
                            <i class="fa-solid fa-water-ladder"></i>
                            @endif
                            @if($item->swimming_pool)
                            <i class="fa-solid fa-person-swimming"></i>
                            @endif
                            @if($item->restaurant)
                            <i class="fa-solid fa-utensils"></i>
                            @endif
                            @if($item->beach)
                            <i class="fa-solid fa-umbrella-beach"></i>
                            @endif
                            @if($item->free_wifi)
                            <i class="fa-solid fa-wifi"></i>
                            @endif
                            @if($item->gym)
                            <i class="fa-solid fa-dumbbell"></i>
                            @endif
                        </div>

                        <a href="{{ route('patient_auth.unit_show', $item->id) }}"> <img
                                src="{{ URL::asset('img/products/' . $item->main_image) }}" alt=""></a>
                        <div class="d-flex justify-content-between align-items-baseline pt-3">
                            <h2 class="fs-6 fw-600 w-75 text-truncate">
                                <a href="{{ route('patient_auth.unit_show', $item->id) }}" class="text-dark">
                                    {{ $item->name }}</a>
                            </h2>
                            <p class="fs-8 secandry-light mb-0 text-end text-truncate"><i
                                    class="fa-solid fa-location-arrow color-i"></i>
                                {{ $item->destination->name }}</p>
                        </div>
                        <p class="secandry-light fs-8 text-truncate">{{
                            $item->short_description }}</p>
                        <div class="d-flex justify-content-between align-items-center">

                            @if (count($item->offers) >0)
                            <div>
                                <h3 class="fw-600 color-title m-0 fs-5">{{ $item->offers[0]->lowest }}</h3>
                                <p class="secandry-light fs-9 m-0">Lowest Price for a person</p>
                            </div>
                            @endif

                            <a class="btn text-capitalize fs-8 radius-10 "
                                href="{{ route('patient_auth.unit_show', $item->id) }}">Book</a>

                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination bottom-0"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</section>

<div class="container-fluid" style="background-color: #F5FDFF;">
    <div class="containery">

        <section class="mb-6 justify-content-between align-items-center py-5">
            <div>
                <button class="btn see ms-3" style="height: fit-content;  float: right">
                    see all
                </button>
                <h2 class="fw-bold mb-1 text-capitalize">our clients opinions.</h2>
                <p>
                    Located in Sharm El Sheikh, a 2-minute walk from Nabq Bay Beach,
                </p>
            </div>
            <div class="row">
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="card-review radius-20 shadow p-4 mb-4">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="d-flex align-items-center">
                                <img src="images/pexels-3586798.png" class="rounded-circle" alt=""
                                    style="height: 3.5rem">
                                <div class="ms-3">
                                    <h6 class="m-0 fs-7 fw-600 text-secondary">Mike taylor</h6>
                                    <p class="fs-8 m-0">Lahore, Pakistan</p>
                                </div>
                            </div>
                            <p class="fs-8 fw-600 mb-0 ms-2 mt-2">
                                Good
                                <span class="yellow">
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                </span>
                                <i class="fa-solid fa-star fs-8 secandry-light"></i><i
                                    class="fa-solid fa-star fs-8 secandry-light"></i>
                            </p>
                        </div>
                        <p class="fs-8 mt-2 mb-0">
                            On the Windows talking painted pasture yet its express parties
                            use. Sure last upon he same as knew next. Of believed or
                            diverted no. “On the Windows talking painted p Sure last upon
                            he same as knew next.”
                        </p>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="card-review radius-20 shadow p-4 mb-4">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="d-flex align-items-center">
                                <img src="images/pexels-3586798.png" class="rounded-circle" alt=""
                                    style="height: 3.5rem">
                                <div class="ms-3">
                                    <h6 class="m-0 fs-7 fw-600 text-secondary">Mike taylor</h6>
                                    <p class="fs-8 m-0">Lahore, Pakistan</p>
                                </div>
                            </div>
                            <p class="fs-8 fw-600 mb-0 ms-2 mt-2">
                                Good
                                <span class="yellow">
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                </span>
                                <i class="fa-solid fa-star fs-8 secandry-light"></i><i
                                    class="fa-solid fa-star fs-8 secandry-light"></i>
                            </p>
                        </div>
                        <p class="fs-8 mt-2 mb-0">
                            On the Windows talking painted pasture yet its express parties
                            use. Sure last upon he same as knew next. Of believed or
                            diverted no. “On the Windows talking painted p Sure last upon
                            he same as knew next.”
                        </p>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="card-review radius-20 shadow p-4 mb-4">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="d-flex align-items-center">
                                <img src="images/pexels-3586798.png" class="rounded-circle" alt=""
                                    style="height: 3.5rem">
                                <div class="ms-3">
                                    <h6 class="m-0 fs-7 fw-600 text-secondary">Mike taylor</h6>
                                    <p class="fs-8 m-0">Lahore, Pakistan</p>
                                </div>
                            </div>
                            <p class="fs-8 fw-600 mb-0 ms-2 mt-2">
                                Good
                                <span class="yellow">
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                </span>
                                <i class="fa-solid fa-star fs-8 secandry-light"></i><i
                                    class="fa-solid fa-star fs-8 secandry-light"></i>
                            </p>
                        </div>
                        <p class="fs-8 mt-2 mb-0">
                            On the Windows talking painted pasture yet its express parties
                            use. Sure last upon he same as knew next. Of believed or
                            diverted no. “On the Windows talking painted p Sure last upon
                            he same as knew next.”
                        </p>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="card-review radius-20 shadow p-4 mb-4">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="d-flex align-items-center">
                                <img src="images/pexels-3586798.png" class="rounded-circle" alt=""
                                    style="height: 3.5rem">
                                <div class="ms-3">
                                    <h6 class="m-0 fs-7 fw-600 text-secondary">Mike taylor</h6>
                                    <p class="fs-8 m-0">Lahore, Pakistan</p>
                                </div>
                            </div>
                            <p class="fs-8 fw-600 mb-0 ms-2 mt-2">
                                Good
                                <span class="yellow">
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                    <i class="fa-solid fa-star fs-8 yellow"></i>
                                </span>
                                <i class="fa-solid fa-star fs-8 secandry-light"></i><i
                                    class="fa-solid fa-star fs-8 secandry-light"></i>
                            </p>
                        </div>
                        <p class="fs-8 mt-2 mb-0">
                            On the Windows talking painted pasture yet its express parties
                            use. Sure last upon he same as knew next. Of believed or
                            diverted no. “On the Windows talking painted p Sure last upon
                            he same as knew next.”
                        </p>
                    </div>
                </div>
            </div>
        </section>
        {{-- <section class="row mb-6 p-5 blue-bg text-light radius-20 contact">
            <form id="contactForm ">
                <div class="col-12 col-md-6">
                    <h2 class="fw-bold">Contact Us</h2>
                    <p>
                        On the Windows talking painted pasture yet its express parties
                        use. Sure last upon he same as knew next. Of believed or
                    </p>
                </div>

                <!-- Name input -->
                <div class="mb-3 d-flex row">
                    <div class="col-12 col-md-4">
                        <input class="form-control contact p-3 mt-3 fw-300 text-light" id="name" type="text"
                            placeholder="Name" data-sb-validations="required" />
                    </div>
                    <div class="col-12 col-md-4">
                        <input class="form-control contact p-3 mt-3 fw-300 col-md-4 col-12 text-light" id="emailAddress"
                            type="email" placeholder="Email Address" data-sb-validations="required, email" />
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="input-group">
                            <select class="form-select contact p-3 mt-3 fw-300 text-light" id="inputGroupSelect01">
                                <option selected>Service</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- Message input -->

                <div class="mb-3 text-center">
                    <textarea class="form-control contact p-2 fw-300 text-light" id="message" type="text"
                        placeholder="Message" style="height: 10rem" data-sb-validations="required"></textarea>
                    <button class="btn btn-lg btn-send text-center mt-3 fs-6 text-light" type="submit">
                        send
                    </button>
                </div>
                <!-- Form submit button -->
            </form>
        </section> --}}
    </div>
</div>
@endsection
@section('js')
<script>
    var bswiper = new Swiper(".tourist", {
            loop: true,
            freeMode: true,
            spaceBetween: 20,
            grabCursor: true,
            slidesPerView: 7,
            touchEventsTarget: "container",
            loop: true,
            loopFillGroupWithBlank: true,
            loop: true,
            freeMode: true,
            speed: 5000,
            freeModeMomentum: false,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                500: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                640: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                750: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                1424: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
            },
        });
        var swiper = new Swiper(".travel-detail", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper,
            },
        });


        var swiper = new Swiper(".pill-tabs", {
            loop: true,
            freeMode: true,
            spaceBetween: 0,
            //
            slidesPerView: 6,
            touchEventsTarget: 'container',
            loop: true,
            loopFillGroupWithBlank: true,
            loop: true,
            freeMode: true,
            speed: 5000,
            freeModeMomentum: false,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                500: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                640: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                },
                750: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 40,
                },
                1424: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                },
            },

        });
</script>
@endsection