@if (count($sliders) > 0)

    @php
        $sliders->loadMissing('metadata');

        $slick = [
            'autoplay' => ($shortcode->is_autoplay ?: 'yes') == 'yes',
            'infinite' => ($shortcode->is_autoplay ?: 'yes') == 'yes',
            'autoplaySpeed' => in_array($shortcode->autoplay_speed, theme_get_autoplay_speed_options()) ? $shortcode->autoplay_speed : 5000,
            'speed' => 1000,
            'slidesToShow' => 1,
            'slidesToScroll' => 1,
            'appendArrows' => '.arrows-wrapper',
            'fade' => true,
        ];
    @endphp
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <style>
        .swiper-container {
            width: 100%;
            padding: 20px 25px;
            overflow: hidden;
        }
        .swiper-wrapper {
            display: flex;
        }
        .swiper-slide {
            width: auto;
            display: flex;
            justify-content: center;
        }
        .product-card {
            width: 100%; /* Full width within swiper slide */
            max-width: 240px; /* Max width for large screens */
            height: 260px; /* Fixed card height */
            padding: 15px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .product-card img {
            width: 100%; /* Full width of the card */
            height: 150px; /* Fixed height */
            border-radius: 8px;
            margin-bottom: 10px; /* Adjust margin as needed */
            object-fit: cover; /* Maintain aspect ratio and cover the area */
            margin-top: 10px;

        }
        .product-card h3 {
            margin: 5px 0;
            font-size: 14px; /* Decreased font size */
            color: #333;

        }
        .product-card p {
            margin: 5px 0;
            font-size: 12px; /* Decreased font size */
            color: #777;
        }
        .swiper-button-next, .swiper-button-prev {
            color: #000;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .swiper-button-prev {
            left: 0;
        }
        .swiper-button-next {
            right: 0;
        }
        .slider-container {
            position: relative;
            margin-bottom: 0px;

        }
        @media (max-width: 1024px) {
            .swiper-container {
                padding: 10px 0;
            }
            .product-card {
                max-width: 195px; /* Adjust card width */
                height: 240px; /* Adjust card height */
            }
        }
        @media (max-width: 768px) {
            .swiper-container {
                padding: 5px 0;
            }
            .product-card {
                max-width: 235px; /* Adjust card width */
                height: 220px; /* Adjust card height */
            }
        }
        @media (max-width: 480px) {
            .swiper-container {
                padding: 5px 0;
            }
            .product-card {
                max-width: 250px; /* Adjust card width */
                height: 200px; /* Adjust card height */
            }
        }

    .container {
    width:100%;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* background-color: #fff; */
    background-size:cover;
    }

    .form-wrapper {
        display: flex;
        transition: transform 0.3s ease; /* Smooth transition */
        width: 100%; /* Ensure it fills the container */
    }

    .form {
        min-width: 100%;
        box-sizing: border-box;
        padding: 12px;
        display: flex;
        flex-direction: column;
    }

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #ddd;
    /* background-color: #ffffff; */
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff43;
    color: #4f4e4e;
    cursor: pointer;
}

button:hover {
    border: 1px solid #8b8a8a;

}
.modal-content {
    color: #ffffff;
}

.arrows-top-right {
    top: 17px;x
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slider {
  padding-block: 15px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  mask-image: linear-gradient(to right, transparent 20% 80%, #000, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
}

.list {
  display: flex;
  /* width: calc(
    var(--width) * var(--imageQuantity) * 2
  ); */
  gap: calc(var(--width) / 1);
  animation: autoScroll 20s linear infinite;
}

.list:hover {
  animation-play-state: paused !important;
}

.item {
  width: var(--width);
  height: var(--height);
  flex-shrink: 0;
}

.item img {
  /* width: 100%; */
  height: 100%;
  transition: filter 0.5s ease-in-out;
  object-fit: cover;
}

@keyframes autoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
  }
}

    </style>

    <div
        class="section-content section-content__slider lazyload"
        @if ($shortcode->background) data-bg="{{ RvMedia::getImageUrl($shortcode->background) }}" @endif
    >
        <div class="container-xxxl">
            <div class="row gx-0 gx-md-3">
                <div class="@if (is_plugin_active('ads') && $shortcode->ads) col-md-12 col-lg-9 @else col-md-12 @endif">
                    <div class="section-slides-wrapper my-3">
                        <div
                            class="slide-body slick-slides-carousel"
                            data-slick="{{ json_encode($slick) }}"
                        >
                            @foreach ($sliders as $slider)
                                <div class="slide-item">
                                    <div class="slide-item__image">
                                        @if ($slider->link)
                                            <a href="{{ url($slider->link) }}">
                                        @endif
                                        @php
                                            $tabletImage = $slider->getMetaData('tablet_image', true) ?: $slider->image;
                                            $mobileImage = $slider->getMetaData('mobile_image', true) ?: $tabletImage;
                                        @endphp
                                        <picture>
                                            <source
                                                srcset="{{ RvMedia::getImageUrl($slider->image, null, false, RvMedia::getDefaultImage()) }}"
                                                media="(min-width: 1200px)"
                                            />
                                            <source
                                                srcset="{{ RvMedia::getImageUrl($tabletImage, null, false, RvMedia::getDefaultImage()) }}"
                                                media="(min-width: 768px)"
                                            />
                                            <source
                                                srcset="{{ RvMedia::getImageUrl($mobileImage, null, false, RvMedia::getDefaultImage()) }}"
                                                media="(max-width: 767px)"
                                            />
                                            <img
                                                src="{{ image_placeholder($slider->image) }}"
                                                alt="{{ $slider->title }}"
                                                loading="eager"
                                            />
                                        </picture>
                                        @if ($slider->link)
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="arrows-wrapper"></div>
                    </div>
                </div>

                @if (is_plugin_active('ads') && $shortcode->ads)
                    {{-- @php
                        dd($shortcode->ads);
                    @endphp --}}
                    <div class="col-12 col-lg-3 d-lg-block d-sm-none">
                        {{-- <div class="section-banner-wrapper my-3">
                            <div class="banner-medium">
                                <div class="banner-item__image">
                                    {!! display_ads_advanced($shortcode->ads) !!}
                                </div>
                            </div>
                        </div> --}}
                        @php
                        $brands = get_featured_brands();
                        @endphp
                        <div class="featured-brands__body slider-item arrows-top-right">
                            <div
                                class="featured-brands-body "
                                {{-- data-slick="{{ json_encode($slick) }}" --}}
                            >
                                {{-- @foreach ($brands as $brand)
                                    <div class="featured-brand-item">
                                        <div class="brand-item-body m-2  px-2">
                                            <a
                                                class="py-3"
                                                href="{{ $brand->url }}"
                                            >
                                                <div class="brand__thumb  img-fluid-eq">
                                                    <div class="img-fluid-eq__dummy"></div>
                                                    <div class="img-fluid-eq__wrap">
                                                        <img
                                                            class="lazyload mx-auto"
                                                            data-src="{{ RvMedia::getImageUrl($brand->logo, null, false, RvMedia::getDefaultImage()) }}"
                                                            src="{{ image_placeholder($brand->logo) }}"
                                                            alt="{{ $brand->name }}"
                                                        />
                                                    </div>
                                                </div>
                                                <div class="brand__text text-center pb-3">
                                                    <span class="  text-secondary text-uppercase brand__name">
                                                        {{ $brand->name }}
                                                    </span>
                                                    <div class="  brand__desc" >
                                                        <div style="font-size: 0.8rem;">
                                                            {!! BaseHelper::clean(Str::limit($brand->description, 150)) !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach --}}
                                <div class="container m-1"  style="background-image: url('https://media.istockphoto.com/id/1339264709/photo/flat-lay-with-womans-clothes-and-accessories.jpg?s=2048x2048&w=is&k=20&c=NKhylkVx_RfvuB5TzfVukUvY1Moc6TnF7JgnVoEi944=');box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;">
                                    <div class="form-wrapper">
                                        <form id="login-form" class="form">
                                            {{-- <a href="login"><h1 class="text-white m-4">Login</h1></a> --}}
                                            {{-- <input class="m-1" type="text" placeholder="Username" required>
                                            <input class="m-1" type="password" placeholder="Password" required> --}}
                                            @if (auth('customer')->check())
                                                <button type="button" class="btn" >
                                                    <h1 class="text-white">
                                                        {{ auth('customer')->user()->name }}
                                                    </h1>
                                                </button>
                                            @else
                                                <button  id="login" type="button" class="btn" data-toggle="modal" data-target="#exampleModal">
                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="80" height="80" viewBox="0 0 256 256" xml:space="preserve">

                                                        <defs>
                                                        </defs>
                                                        <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
                                                            <path d="M 45 0 C 20.147 0 0 20.147 0 45 c 0 24.853 20.147 45 45 45 s 45 -20.147 45 -45 C 90 20.147 69.853 0 45 0 z M 45 22.007 c 8.899 0 16.14 7.241 16.14 16.14 c 0 8.9 -7.241 16.14 -16.14 16.14 c -8.9 0 -16.14 -7.24 -16.14 -16.14 C 28.86 29.248 36.1 22.007 45 22.007 z M 45 83.843 c -11.135 0 -21.123 -4.885 -27.957 -12.623 c 3.177 -5.75 8.144 -10.476 14.05 -13.341 c 2.009 -0.974 4.354 -0.958 6.435 0.041 c 2.343 1.126 4.857 1.696 7.473 1.696 c 2.615 0 5.13 -0.571 7.473 -1.696 c 2.083 -1 4.428 -1.015 6.435 -0.041 c 5.906 2.864 10.872 7.591 14.049 13.341 C 66.123 78.957 56.135 83.843 45 83.843 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255, 255, 255); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                        </g>
                                                        </svg>
                                                </button>
                                            @endif
                                        </form>
                                        <form id="pincode-form" class="form">
                                            <h4 class="text-white">Enter Pincode</h4>
                                            <input class="m-2" type="text" placeholder="Pincode" required>
                                        </form>
                                    </div>
                                    <div class="buttons">
                                        <button id="prev">Previous</button>
                                        <button id="next">Next</button>
                                    </div>
                                </div>
                                <div class="container m-1 mt-4" style="background-image: url('https://cdn.pixabay.com/photo/2014/08/26/21/49/jeans-428614_1280.jpg');box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;">
                                    <a href="register"><h1 class="text-white m-4">
                                        Register As vendor
                                    </h1></a>
                                </div>

                                <div class="container m-1 mt-4 d-none d-lg-none d-xl-block" style="box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; background-color: #fff;">
                                    <a href="register"><h3 class="text-dark m-3">
                                        Download Our App
                                    </h3></a>

                                </div>
                            </div>
                            <div class="arrows-wrapper"></div>
                        </div>


                    </div>
                @endif
            </div>

        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content" style="background-size: cover;background-image: url(https://images.pexels.com/photos/10359558/pexels-photo-10359558.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load)" >
            <div class="modal-header">
              <h2 class="modal-title" id="exampleModalLabel">Welcome</h2>
              <button type="button" class="close btn btn-white text-white" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-6 col-sm-8 col-10">
                            {{-- <div class="card-header text-center">
                                <h3>Login</h3>
                            </div> --}}
                            <div class="card-body">
                                <form action="login" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="email">Username</label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">Password</label>
                                        <input type="password" class="form-control" id="password" name="password" required>
                                    </div>
                                    <button type="submit" class="btn btn-white border text-white m-2 col-3">Login</button>
                                    {{-- <a href="auth.social">
                                        <button type="button" class="btn btn-white border text-white m-2 col-3">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="red" x="0px" y="0px" width="25" height="25" viewBox="0 0 30 30">
                                                <path d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z"></path>
                                            </svg>
                                        </button>
                                    </a>
                                    <button type="button" class="btn btn-white border text-white m-2 col-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 48 48">
                                            <linearGradient id="Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1" x1="9.993" x2="40.615" y1="9.993" y2="40.615" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"></stop><stop offset="1" stop-color="#007ad9"></stop></linearGradient><path fill="url(#Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1)" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"></path><path fill="#fff" d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"></path>
                                            </svg>
                                    </button> --}}
                                    @if (SocialService::hasAnyProviderEnable())
                                        <div class="card-social-login-container">
                                            <div class="social-login-text">
                                                <div class="login-text">{{ __('Or login with') }}</div>
                                            </div>
                                            <div class="card-social-login-content">
                                                @foreach (SocialService::getProviderKeys() as $item)
                                                    @if (SocialService::getProviderEnabled($item))
                                                        <a
                                                            class="sl-button sl-button-{{ $item }} mt-2 m-1 bg-white"
                                                            href="{{ route('auth.social', array_merge([$item] )) }}"
                                                        >
                                                            <div class="sl-button-svg-container">
                                                                <span class="svg-icon">
                                                                    <svg>
                                                                        <use
                                                                            href="#svg-icon-sl-{{ $item }}"
                                                                            xlink:href="#svg-icon-sl-{{ $item }}"
                                                                        ></use>
                                                                    </svg>
                                                                </span>
                                                            </div>
                                                            <div class="sl-button-label-container text-dark">
                                                                <span>{!! BaseHelper::clean(__('Continue with <strong>:provider</strong>', ['provider' => $item])) !!}</span>
                                                            </div>
                                                        </a>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </form>
                                <div class="modal-footer justify-content-center">
                                    <a href="password/reset" class="col-5">
                                        <button type="button" class="btn btn-white border text-white m-2  text-nowrap">
                                            Reset Password ?
                                        </button>
                                    </a>
                                    <a href="register" class="col-3">
                                        <button type="button" class="btn btn-white border text-white m-2 ">
                                            Register
                                        </button>
                                    </a>
                                  </div>

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

    <div class="inline bg-light" id="sliders-container"></div>
    <div
                class="slider"
                style="--width: 200px; --height: 70px; --imageQuantity: 4"
                >
                <div class="list">
                    @foreach ($brands as $brand)
                    <div class="item">
                        <a
                            class="py-3"
                            href="{{ $brand->url }}"
                        >
                        <img
                        data-src="{{ RvMedia::getImageUrl($brand->logo, null, false, RvMedia::getDefaultImage()) }}"
                            src="{{ RvMedia::getImageUrl($brand->logo, null, false, RvMedia::getDefaultImage()) }}"
                            alt="{{ $brand->name }}"
                        />
                        </a>
                        </div>
                    @endforeach

                </div>
                </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script>
        $.ajax({
            type: "get",
            url: '{{ route('public.ajax.categoriesData') }}',
            contentType: "application/json",
            dataType: "json",
            success: function(response) {
            console.log(response);
            // $("#scroller").append('<li id="'+response.id+'"><a href="'+response.url+'" class="Card block-center-center gap-1" style=" box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;"><figure class="block-center-center gap-1"><picture><sourcesrcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/recommendation-carousel/images/img-1.avif"type="image/avif"/><img src="storage/'+response.image+'"alt=""width="100"height="100"/></picture><figcaption class="block-center-center gap-1"><div class="Name text-dark">'+response.name+'</div></figcaption></figure></a></li>');
            const slidersContainer = document.getElementById('sliders-container');
            const maxCardsPerSlider = 6;
            let currentSlider;
            let swiperInstances = [];

            function createNewSlider() {
                const sliderWrapper = document.createElement('div');
                sliderWrapper.classList.add('slider-container');

                const swiperContainer = document.createElement('div');
                swiperContainer.classList.add('swiper-container');

                const swiperWrapper = document.createElement('div');
                swiperWrapper.classList.add('swiper-wrapper');

                const nextButton = document.createElement('div');
                nextButton.classList.add('swiper-button-next');

                const prevButton = document.createElement('div');
                prevButton.classList.add('swiper-button-prev');

                swiperContainer.appendChild(swiperWrapper);
                sliderWrapper.appendChild(swiperContainer);
                sliderWrapper.appendChild(prevButton);
                sliderWrapper.appendChild(nextButton);
                slidersContainer.appendChild(sliderWrapper);

                const swiper = new Swiper(swiperContainer, {
                    // slidesPerView: 7,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: nextButton,
                        prevEl: prevButton,
                    },
                    slidesPerGroup: 1,
                    breakpoints: {
                        1024: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                        },
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 7,
                        },
                        480: {
                            slidesPerView: 2,
                            spaceBetween: 0,
                        }
                    }
                });

                swiperInstances.push(swiper);

                return swiper;
            }

            function addProductCard(product) {
                if (!currentSlider || currentSlider.slides.length >= maxCardsPerSlider) {
                    currentSlider = createNewSlider();
                }
                if(product.image!=null){
                    const card = document.createElement('div');
                    card.classList.add('product-card');
                    card.innerHTML=`<a href="${product.url}"><img src="storage/${product.image}" alt="${product.name}"><h3>${product.name}</h3></a>`;
                    const slide = document.createElement('div');
                    slide.classList.add('swiper-slide');
                    slide.appendChild(card);
                    currentSlider.appendSlide(slide);
                }

            }

            // Example products (JSON array)
            const products = response;

            products.forEach(addProductCard);
            },
            error: function(response) {
                console.log(response);
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
    const formWrapper = document.querySelector('.form-wrapper');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');
    const forms = document.querySelectorAll('.form');
    let currentForm = 0;
    const totalForms = forms.length;
    let startX;
    let isSwiping = false;

    function updateFormPosition() {
        const offset = -currentForm * 100;
        formWrapper.style.transform = `translateX(${offset}%)`;
    }

    nextButton.addEventListener('click', () => {
        currentForm = (currentForm + 1) % totalForms;
        updateFormPosition();
    });

    prevButton.addEventListener('click', () => {
        currentForm = (currentForm - 1 + totalForms) % totalForms;
        updateFormPosition();
    });

    formWrapper.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        isSwiping = true;
    });

    formWrapper.addEventListener('touchmove', (e) => {
        if (!isSwiping) return;
        const moveX = e.touches[0].clientX;
        const deltaX = startX - moveX;
        if (Math.abs(deltaX) > 50) { // Swipe threshold
            if (deltaX > 0) {
                // Swipe left
                currentForm = (currentForm + 1) % totalForms;
            } else {
                // Swipe right
                currentForm = (currentForm - 1 + totalForms) % totalForms;
            }
            updateFormPosition();
            isSwiping = false; // End swipe after action
        }
    });

    formWrapper.addEventListener('touchend', () => {
        isSwiping = false;
    });

    // Initialize the form position
    updateFormPosition();
});

    </script>
@endif