@extends('frontend.layouts.app')

@section('title', __('test'))

@section('content')
<div class="my-40 container">
     <!-- Swiper -->
     <div class="swiper mySwiper relative">
        <div class="swiper-wrapper">
            @for ($i=1; $i<6; $i++)
                <div class="swiper-slide rounded-3xl">Slide {{ $i }}</div>
            @endfor
        </div>
        <div class="flex items-center gap-4 absolute bottom-10 left-[10%]">
            <div class="swiper-button-prev" style="position: unset;"><img class="rotate-180" src="{{ asset('img/arrw-slider.png') }}" alt=""></div>
            <div class="relative mb-[17%] z-40">
                <div class="swiper-pagination !w-max" style="position: unset;"></div>
            </div>
            <div class="swiper-button-next" style="position: unset;"><img src="{{ asset('img/arrw-slider.png') }}" alt=""></div>
        </div>
      </div>
</div>

<div class="container">
    <div class="splide" role="group" aria-label="Splide Basic HTML Example">
        <div class="splide__track">
              <ul class="splide__list">
                  <li class="splide__slide h-60 w-full bg-slate-400">Slide 01</li>
                  <li class="splide__slide h-60 w-full bg-slate-400">Slide 02</li>
                  <li class="splide__slide h-60 w-full bg-slate-400">Slide 03</li>
              </ul>
        </div>
    </div>
</div>
@endsection

@push('after-styles')
    <style>

    .swiper > .swiper-wrapper > .swiper-slide {
        opacity: 0;
        height: 600px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }

      .swiper > .swiper-wrapper > .swiper-slide.swiper-slide-next{
        flex-basis: 70%;
        margin-left: -25%;
      }

      .swiper > .swiper-wrapper > .swiper-slide.swiper-slide-active{
            /* width: 50%!important; */
            height: 75%;
            /* flex-basis: 40%; */
            margin-left: -20%;
            margin-bottom: auto;
            margin-top: auto;
            /* margin-right: -10%;
            transform: scale(.7)!important */
      }


      .swiper-slide:nth-child(1n) {
        background-color: rgb(206, 17, 17);
      }

      .swiper-slide:nth-child(2n) {
        background-color: rgb(0, 140, 255);
      }

      .swiper-slide:nth-child(3n) {
        background-color: rgb(10, 184, 111);
      }

      .swiper-slide:nth-child(4n) {
        background-color: rgb(211, 122, 7);
      }

      .swiper-slide:nth-child(5n) {
        background-color: rgb(118, 163, 12);
      }

      .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #000;
      }

      .swiper .swiper-button-prev::after, .swiper .swiper-button-next::after {
        content: unset;
      }
    </style>
@endpush

@push('after-scripts')
    <script>
        $(document).ready(function(){
            var swiper = new Swiper(".mySwiper", {
                effect: "creative",
                autoHeight: true,
                slidesPerView: 2,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },

                creativeEffect: {
                    perspective: true,
                    prev: {
                        translate: [500, 0, -700],
                        opacity: 0
                    },
                    next: {
                        translate: ["100%", 0, 0],
                    },
                },
                on: {
                        init: function () {
                            let x = "translate3d(calc(250px), calc(0px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.7)"
                            $('.swiper-slide-active').css({"transform": x})
                        },

                        beforeTransitionStart: function (swiper) {
                            const activeIndex = swiper.activeIndex;
                            // let nextIndex = swiper.activeIndex + 1;
                            let prevIndex = swiper.previousIndex;
                            // let width = swiper.slides[activeIndex].swiperSlideOffset;
                            let translate = swiper.translate;

                            for (var i = 0; i < swiper.slides.length; i++){
                                var slide = swiper.slides[i];

                                if (activeIndex == i) {
                                    $(slide).css({
                                        transform: `translate3d(calc(${translate + 250}px), calc(0px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.7)`
                                    });
                                }

                            }
                        },
                    }
                });
            });


    </script>
@endpush