@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->images_unit as $item)
                            <div class="swiper-slide">
                                <img src="{{ URL::asset('img/products/' . $item->unit_images) }}" class="radius-10" />
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div thumbsSlider="" class="swiper mySwiper unit_imgs_swiper_thu travel-detail">
                        <div class="swiper-wrapper">
                            @foreach ($unit->images_unit as $item)
                            <div class="swiper-slide">
                                <img src="{{ URL::asset('img/products/' . $item->unit_images) }}" 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">
                        {{$offer->name}}
                        <span class="color-title fw-500 fs-3 ms-1">Package</span>
                    </h2>
                    <p class="mb-4">
                        {!! $offer->short_description !!}

                    </p>
                    <h3 class="fw-600 color-title fs-1 mb-0">
                        {{ $offer->lowest }}

                    </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> {{ $offer->duration }}
                            Days Trip
                        </p>
                    </div>
                    <p class="secandry-light">
                        <i class="fa-solid fa-location-dot blue"></i> {{ $unit->destination->name }}
                    </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="{{ $offer->id }}" data-type="unit_package"
                            class="wishlist-btn text-capitalize me-1 mb-1 add_wishlist_ajax  @if ($offer->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 {{ $offer->duration }} 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>

                                        </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="row">
                                            @foreach ($offer->prices as $item)
                                            <div class="">
                                                <div
                                                    class="row bg-white align-items-center shadow mb-3 p-3 radius-20 flex-wrap">
                                                    <div class="col">
                                                        <div class="d-flex align-items-center">
                                                            <div class="m-2">
                                                                <h2 class="fs-5 fw-bold mb-1">{{ $item->name }}</h2>
                                                                <span class="fs-7 gray">{{ $item->info }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col text-end">

                                                        <h3 class="fw-600 color-title fs-5 mb-0">
                                                            {{ $item->sell }}
                                                        </h3>
                                                    </div>
                                                    <div class="col text-end">
                                                        <button data-id="{{ $item->id }}" data-type="unit_package"
                                                            class="btn text-capitalize m-1 add_cart_ajax"
                                                            style="width: 80px;">
                                                            Add To Cart</button>
                                                    </div>

                                                </div>
                                            </div>
                                            @endforeach
                                        </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-capitalize">about {{ $offer->name }}.</h2>
        <p>
            {!! $offer->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->images_unit as $item)
                    <div class="swiper-slide">
                        <img style="object-fit: cover; height: 100%; width: 100%; "
                            src="{{ URL::asset('img/products/' . $item->unit_images) }}" class="radius-10" />
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <section class="row mb-5">
        <h2 class="fw-bold mb-1 text-capitalize text-center">
            Reasons to choose {{ $unit->name }}
        </h2>
        <p class="text-center">
            Located in {{ $unit->destination->name }} ,
            {{ $unit->name }}
        </p>
        @if($unit->aqua_park)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-water-ladder fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Enjoy the Aqua Park</p>
        </div>
        @endif
        @if($unit->swimming_pool)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-person-swimming fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">A wondful swimming pool</p>
        </div>
        @endif
        @if($unit->parking)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-square-parking fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Parking</p>
        </div>
        @endif
        @if($unit->spa)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-spa fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Relaxed with Spa</p>
        </div>
        @endif
        @if($unit->restaurant)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-utensils fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Yummy Food</p>
        </div>
        @endif
        @if($unit->beach)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-umbrella-beach fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">A great beach</p>
        </div>
        @endif
        @if($unit->free_wifi)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-wifi fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Free WIFI</p>
        </div>
        @endif
        @if($unit->gym)
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-dumbbell fs-2 bg-yellow yellow p-3 radius-10"></i>
            <i class=""></i>
            <p class="light fs-6 ms-4 m-0">Gym</p>
        </div>
        @endif

        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-lock fs-2 bg-yellow yellow p-3 radius-10"></i>
            <p class="light fs-6 ms-4 m-0">Booking is safe</p>
        </div>
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-laptop fs-2 bg-yellow yellow p-3 radius-10"></i>
            <p class="light fs-6 ms-4 m-0">Manage your bookings online</p>
        </div>
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-headset fs-2 bg-yellow yellow p-3 radius-10"></i>
            <p class="light fs-6 ms-4 m-0">The staff speaks English</p>
        </div>
        <div class="d-flex align-items-center mt-4 col-20 col-12 col-md-6">
            <i class="fa-solid fa-headset fs-2 bg-yellow yellow p-3 radius-10"></i>
            <p class="light fs-6 ms-4 m-0">Great location and facilities</p>
        </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 hotel 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