jQuery(document).ready(function ($) {
    $.the7Slider = function (el, userSettings) {
        const data = {
            selectors: {
                slider: '.elementor-slides-wrapper:not(.thumbs-slides-wrapper)',
                thumbsSlider: '.thumbs-slides-wrapper',
                slide: 'the7-swiper-slide',
                slideInnerContents: '.the7-slide-content',
                activeSlide: '.swiper-slide-active',
                activeDuplicate: '.swiper-slide-duplicate-active'
            },
            classes: {
                inPlaceTemplateEditable: "elementor-in-place-template-editable"
            },
            attributes: {
                dataAnimation: 'animation'
            },
            changeableProperties: {
                pause_on_hover: 'pauseOnHover',
                autoplay_speed: 'delay',
                transition_speed: 'speed',
                autoplay: 'autoplay'
            }
        };

        let $widget = $(el),
            elementorSettings,
            elementorAnimation,
            settings,
            methods,
            swiper,
            intersectionObserver,
            widgetType,
            $videoOverlay,
            $videoWrap,
            controls,
            autoplay,
            playOnMobile,
            currentDeviceMode,
            swiperThumbs,
            elements = {
                $swiperContainer: $widget.find(data.selectors.slider).first(),
                $swiperThumbsContainer: $widget.find(data.selectors.thumbsSlider).first(),
                animatedSlides: {},
                activeElements: []
            };
        elements.$slides = elements.$swiperContainer.find('> .the7-elementor-slides >' + '.' + data.selectors.slide);
        elements.$thumbsSlides = elements.$swiperThumbsContainer.find('> .the7-elementor-slides >' + '.' + data.selectors.slide);

        $widget.vars = {
            sliderInitialized: false,
            isInlineEditing: false
        };
        // Store a reference to the object
        $.data(el, "the7Slider", $widget);
        // Private methods
        methods = {
            initVars: function () {
                //update widget width css variable
                $widget.css("--widget-width", $widget.width() + 'px');
                if (elements.$swiperThumbsContainer.length) {
                    $widget.vars.thumbGap = the7Utils.parseIntParam($widget.css("--thumbs-spacing"), 0);
                    $widget.vars.colNum = the7Utils.parseIntParam($widget.css("--thumbs-items"), 3);
                }
                $widget.vars.isVertical = $widget.vars.scrollMode === "vertical";
            },
            init: function () {

                methods.initVars();
                elementorSettings = new The7ElementorSettings($widget);
                widgetType = elementorSettings.getWidgetType();
                settings = elementorSettings.getSettings();
                $videoOverlay = $widget.find(".the7-video-overlay");
                controls = !!settings['controls'];
                autoplay = !!settings['video_autoplay'];
                playOnMobile = !!settings['play_on_mobile'];
                currentDeviceMode = elementorFrontend.getCurrentDeviceMode();

                elementorAnimation = new The7ElementorAnimation();
                if ($widget[0].classList.contains('elementor-widget-the7-woocommerce-product-images-slider')) {
                    if (settings['open_lightbox'] === 'y') {
                        $widget.find('.the7-elementor-slides').initPhotoswipe();
                    }
                }

                if (elementorFrontend.isEditMode()) {
                    methods.handleCTA();
                }

                this.initThumb().then(() => this.initSlider());
                $widget.css("--widget-height", elements.$swiperContainer.height() + 'px');
                $widget.refresh();
                methods.handleResize = elementorFrontend.debounce(methods.handleResize, 1000);

                //Change variation image in the default drop down mode
                $( '.variations_form' ).on( 'found_variation', function( event, variation ) {
                    var $productSlider = $widget.find( '.dt-product-gallery' );
                    
                    if ( variation && variation.image && variation.image.src ) {
                        var imageSrc = variation.image.src;
                        
                        // Find the corresponding slide/image
                        var $targetSlide = $productSlider.find('img[src="' + imageSrc + '"]');
                
                        if ( $targetSlide.length ) {
                            var slideIndex = $targetSlide.closest('.the7-swiper-slide').index();
                            
                            // If using Swiper.js (WooCommerce default)
                            if ( typeof window.wc_single_product_params !== 'undefined' && typeof Swiper !== 'undefined' ) {
                                if ( swiper ) {
                                    swiper.slideTo( slideIndex ); // Scroll to the correct variation image
                                }
                            }
                        }
                    }
                });
            },

            runElementHandlers: function (elements) {
                [...elements].flatMap(el => [...el.querySelectorAll('.elementor-element')]).forEach(el => elementorFrontend.elementsHandler.runReadyTrigger(el));
            },

            handleElementHandlers: function (slider) {
                if (!slider) {
                    return;
                }
                const duplicatedSlides = Array.from(slider.slides).filter(slide => slide.classList.contains(slider.params.slideDuplicateClass));
                methods.runElementHandlers(duplicatedSlides);
            },

            handleCTA: function () {
                if (typeof elementorPro === 'undefined') {
                    return;
                }
                const emptyViewContainer = document.querySelector(`[data-id="${elementorSettings.getID()}"] .e-loop-empty-view__wrapper`);
                const emptyViewContainerOld = document.querySelector(`[data-id="${elementorSettings.getID()}"] .e-loop-empty-view__wrapper_old`);

                if (emptyViewContainerOld) {
                    $widget.css('opacity', 1);
                    return;
                }

                if (!emptyViewContainer) {
                    return;
                }

                const shadowRoot = emptyViewContainer.attachShadow({
                    mode: 'open'
                });
                shadowRoot.appendChild(elementorPro.modules.loopBuilder.getCtaStyles());
                shadowRoot.appendChild(elementorPro.modules.loopBuilder.getCtaContent(widgetType));
                if (methods.isLoop()) {
                    const ctaButton = shadowRoot.querySelector('.e-loop-empty-view__box-cta');
                    ctaButton.addEventListener('click', () => {
                        elementorPro.modules.loopBuilder.createTemplate();
                        methods.handleSlider();
                    });
                }
                $widget.css('opacity', 1);
            },
            bindEvents: function () {
                methods.initIntersectionObserver();
                elementorFrontend.elements.$window.on('the7-resize-width', methods.handleResize);
            },
            unBindEvents: function () {
                elementorFrontend.elements.$window.off('the7-resize-width', methods.handleResize);
                if (intersectionObserver !== undefined) {
                    intersectionObserver.unobserve($widget[0]);
                    intersectionObserver = undefined;
                }
            },
            handleSlider: function () {
                if (!$widget.vars.sliderInitialized) return;
                $widget.vars.isInlineEditing = true;
                $widget.addClass(data.classes.inPlaceTemplateEditable);
                swiper.slideTo(0);
                swiper.autoplay.stop();
                swiper.pagination.destroy();
                swiper.navigation.destroy();
                swiper.allowTouchMove = false;
                swiper.params.autoplay.disableOnInteraction = true;
                swiper.params.autoplay.pauseOnMouseEnter = false;
                swiper.params.autoplay.delay = 1000000; // Add a long delay so that the Swiper does not move while editing the Template. Even though it was paused, it will start again on mouse leave.
                swiper.update();
            },

            handleResize: function () {
                if (!$widget.vars.sliderInitialized) return;
                methods.removeElementsAnimation(true);
                methods.findAnimationInElements();
                methods.updateActiveElements();
                methods.removeElementsAnimation();
                methods.addElementsAnimation();
                currentDeviceMode = elementorFrontend.getCurrentDeviceMode();
                const deviceMode = elementorFrontend.getCurrentDeviceMode();
                if (currentDeviceMode === 'mobile' && autoplay && !playOnMobile) {
                    $videoWrap.removeClass('dt-pswp-item-no-click');
                } else if (autoplay && settings['open_lightbox'] === 'y') {
                    $videoWrap.addClass('dt-pswp-item-no-click');
                }
                if (typeof swiperThumbs !== 'undefined') {
                    swiperThumbs.changeDirection(methods.getDirection(currentDeviceMode));
                    if (deviceMode !== currentDeviceMode) {
                        swiperThumbs.update();
                    }
                }
                currentDeviceMode = deviceMode;
            },
            getLoopedSlides: function (slidesPerGroup) {
                let slides = methods.getSlidesCount();
                if (settings['slides_to_scroll'] !== 'all') {
                    return slides;
                }
                return Math.trunc(slides / slidesPerGroup) * slidesPerGroup;
            },
            getSlidesCount: function () {
                return elements.$slides.length;
            },
            initIntersectionObserver: function () {
                if ('yes' !== settings.autoplay) return;
                intersectionObserver = elementorModules.utils.Scroll.scrollObserver({
                    offset: '-15% 0% -15%',
                    callback: event => {
                        if (event.isInViewport) {
                            methods.swiperAutoplayStart();
                        } else {
                            methods.swiperAutoplayStop();
                        }
                    }
                });
                intersectionObserver.observe($widget[0]);
            },
            swiperAutoplayStop() {
                if ($widget.vars.sliderInitialized && !$widget.vars.isInlineEditing) {
                    swiper.autoplay.stop();
                }
            },
            swiperAutoplayStart() {
                if ($widget.vars.sliderInitialized && !$widget.vars.isInlineEditing) {
                    swiper.autoplay.start();
                }
            },
            getEffect() {
                return settings['transition'];
            },
            getSlidesPerView: function (device) {
                if ('slide' === methods.getEffect()) {
                    let slides_per_view = The7ElementorSettings.getResponsiveControlValue(settings, 'slides_per_view', 'size', device)
                    return +slides_per_view || 1;
                    //return Math.min(methods.getSlidesCount(), +slides_per_view || 1);
                }
                return 1;
            },

            isEnoughElements: function (slidesPerView) {
                return slidesPerView < methods.getSlidesCount();
            },
            getSlidesToScroll: function (slidesPerView) {
                let slidesToScroll = 1;
                if ('slide' === methods.getEffect()) {
                    if (settings['slides_to_scroll'] === 'all') {
                        slidesToScroll = slidesPerView;
                    }
                }
                return slidesToScroll;
            },
            getAutoHeight: function () {
                let autoHeight = true;
                if (methods.isLoop()) {
                    autoHeight = false;
                }
                return autoHeight;
            },
            getSwiperOptions: function () {
                let slidesPerView = methods.getSlidesPerView('desktop');

                swiperOptions = {
                    autoplay: this.getAutoplayConfig(),
                    grabCursor: true,
                    initialSlide: this.getInitialSlide(),
                    slidesPerView: slidesPerView,
                    slidesPerGroup: methods.getSlidesToScroll(slidesPerView),
                    loop: methods.isEnableLoop(slidesPerView),
                    loopPreventsSlide: true,
                    pauseOnMouseEnter: true,
                    speed: settings.transition_speed,
                    effect: methods.getEffect(),
                    observeParents: false,
                    observer: true,
                    handleElementorBreakpoints: false,
                    slideClass: data.selectors.slide,
                };
                if (!$widget[0].classList.contains('elementor-widget-the7-woocommerce-product-images-slider')) {
                    swiperOptions.autoHeight = methods.getAutoHeight();
                }

                if (typeof swiperThumbs !== 'undefined') {
                    swiperOptions.thumbs = {
                        swiper: swiperThumbs
                    };
                }
                const navigation = true,
                    pagination = true;
                if (navigation) {
                    swiperOptions.navigation = {
                        prevEl: elements.$swiperContainer.children('.the7-swiper-button-prev')[0],
                        nextEl: elements.$swiperContainer.children('.the7-swiper-button-next')[0]
                    };
                }
                if (pagination) {
                    swiperOptions.pagination = {
                        el: elements.$swiperContainer.children('.swiper-pagination')[0],
                        type: 'bullets',
                        bulletActiveClass: 'active',
                        bulletClass: 'owl-dot',
                        clickable: true,
                        renderBullet: function (index, className) {
                            return '<button role="button" class="' + className + '" aria-label="Go to slide ' + index + 1 + '"><span></span></button>';
                        },
                    };
                }
                //if (true === swiperOptions.loop) {
                swiperOptions.loopedSlides = methods.getLoopedSlides(swiperOptions.slidesPerGroup);
                //}
                if ('fade' === swiperOptions.effect) {
                    swiperOptions.fadeEffect = {
                        crossFade: true
                    };
                }
                if (settings.slides_gap) {
                    swiperOptions.spaceBetween = this.getSpaceBetween();
                }
                breakpoints = elementorFrontend.config.responsive.activeBreakpoints;
                swiperOptions.breakpoints = {};
                Object.keys(breakpoints).forEach(breakpointName => {
                    let breakPointVal = breakpoints[breakpointName].value;
                    swiperOptions.breakpoints[breakPointVal] = {};
                    let slidesPerView = methods.getSlidesPerView(breakpointName);
                    if (slidesPerView) {
                        swiperOptions.breakpoints[breakPointVal].slidesPerView = slidesPerView;
                        swiperOptions.breakpoints[breakPointVal].slidesPerGroup = methods.getSlidesToScroll(slidesPerView);
                        swiperOptions.breakpoints[breakPointVal].pagination = {};
                    }
                    if (settings.slides_gap) {
                        swiperOptions.breakpoints[breakPointVal]['spaceBetween'] = methods.getSpaceBetween(breakpointName);
                    }
                });

                let switchPointsWide = dtLocal.elementor.settings.container_width;
                let wideBreakpoint = settings['widget_columns_wide_desktop_breakpoint'];
                if (wideBreakpoint) {
                    switchPointsWide = wideBreakpoint;
                }
                let wideColumns = settings['wide_desk_columns'];
                if (wideColumns) {
                    swiperOptions.breakpoints[switchPointsWide] = {
                        slidesPerView: parseInt(wideColumns),
                        slidesPerGroup: methods.getSlidesToScroll(parseInt(wideColumns))
                    }
                }
                swiperOptions = methods.adjustBreakpointsConfig(swiperOptions);
                if (typeof userSettings !== 'undefined') {
                    swiperOptions = $.extend(true, swiperOptions, userSettings.swiperOptions);
                }

                return swiperOptions;
            },
            getThumbsOptions: function () {
                swiperOptions = {
                    grabCursor: true,
                    initialSlide: this.getInitialSlide(),
                    spaceBetween: this.getSpaceBetweenThumbs(),
                    observeParents: false,
                    watchSlidesProgress: true,
                    slidesPerView: "auto",
                    speed: 600,
                    threshold: 20,
                    slideClass: data.selectors.slide,
                    direction: this.getDirection(),
                    handleElementorBreakpoints: false,
                };
                const navigation = true;
                if (navigation) {
                    swiperOptions.navigation = {
                        prevEl: elements.$swiperThumbsContainer.siblings('.the7-thumbs-swiper-button-prev')[0],
                        nextEl: elements.$swiperThumbsContainer.siblings('.the7-thumbs-swiper-button-next')[0]
                    };
                }

                const breakpointsSettings = {},
                    breakpoints = elementorFrontend.config.responsive.activeBreakpoints;
                Object.keys(breakpoints).forEach(breakpointName => {
                    breakpointsSettings[breakpoints[breakpointName].value] = {
                        direction: this.getDirection(breakpointName),
                        spaceBetween: this.getSpaceBetweenThumbs(breakpointName)
                    };
                });
                swiperOptions.breakpoints = breakpointsSettings;
                swiperOptions = methods.adjustBreakpointsConfig(swiperOptions);
                return swiperOptions;
            },

            // Backwards compatibility for Elementor Pro <2.9.0 (old Swiper version - <5.0.0)
            // In Swiper 5.0.0 and up, breakpoints changed from acting as max-width to acting as min-width
            adjustBreakpointsConfig(config) {
                const elementorBreakpoints = elementorFrontend.config.responsive.activeBreakpoints,
                    elementorBreakpointValues = elementorFrontend.breakpoints.getBreakpointValues();
                    Object.keys(config.breakpoints).forEach(configBPKey => {
                        const configBPKeyInt = parseInt(configBPKey);
                        let breakpointToUpdate;

                        // The `configBPKeyInt + 1` is a BC Fix for Elementor Pro Carousels from 2.8.0-2.8.3 used with Elementor >= 2.9.0
                        if (configBPKeyInt === elementorBreakpoints.mobile.value || configBPKeyInt + 1 === elementorBreakpoints.mobile.value) {
                            // This handles the mobile breakpoint. Elementor's default sm breakpoint is never actually used,
                            // so the mobile breakpoint (md) needs to be handled separately and set to the 0 breakpoint (xs)
                            breakpointToUpdate = 0;
                        } else if (elementorBreakpoints.widescreen && (configBPKeyInt === elementorBreakpoints.widescreen.value || configBPKeyInt + 1 === elementorBreakpoints.widescreen.value)) {
                            // Widescreen is a min-width breakpoint. Since in Swiper >5.0 the breakpoint system is min-width based,
                            // the value we pass to the Swiper instance in this case is the breakpoint from the user, unchanged.
                            return;
                        } else {
                            // Find the index of the current config breakpoint in the Elementor Breakpoints array
                            const currentBPIndexInElementorBPs = elementorBreakpointValues.findIndex(elementorBP => {
                                // BC Fix for Elementor Pro Carousels from 2.8.0-2.8.3 used with Elementor >= 2.9.0
                                return configBPKeyInt === elementorBP || configBPKeyInt + 1 === elementorBP;
                            });

                            if (currentBPIndexInElementorBPs === -1) {
                                return;
                            }

                            // For all other Swiper config breakpoints, move them one breakpoint down on the breakpoint list,
                            // according to the array of Elementor's global breakpoints
                            breakpointToUpdate = elementorBreakpointValues[currentBPIndexInElementorBPs - 1];
                        }
                        config.breakpoints[breakpointToUpdate] = config.breakpoints[configBPKey];

                        // Then reset the settings in the original breakpoint key to the default values
                        config.breakpoints[configBPKey] = {
                            slidesPerView: config.slidesPerView,
                            slidesPerGroup: config.slidesPerGroup ? config.slidesPerGroup : 1
                        };

                        if ("spaceBetween" in config) {
                            config.breakpoints[configBPKey].spaceBetween = config.spaceBetween;
                        }
                    });
                    return config;
            },

            getSpaceBetween() {
                if ('fade' === swiperOptions.effect) {
                    return 0;
                }
                let device = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
                return The7ElementorSettings.getResponsiveControlValue(settings, 'slides_gap', 'size', device) || 0;
            },
            getDirection(device) {
                return The7ElementorSettings.getResponsiveControlValue(settings, 'thumbs_direction', '', device) || 'vertical';
            },
            getSpaceBetweenThumbs() {
                let device = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
                return The7ElementorSettings.getResponsiveControlValue(settings, 'thumbs_spacing', 'size', device) || 0;
            },
            getAutoplayConfig: function () {
                if ('yes' !== settings.autoplay) {
                    return false;
                }

                return {
                    stopOnLastSlide: true,
                    // Has no effect in infinite mode by default.
                    delay: settings.autoplay_speed,
                    disableOnInteraction: true
                };
            },

            handlePauseOnHover: function () {
                if (!$widget.vars.sliderInitialized) return;

                let toggleOn = false;
                if ('yes' === settings.pause_on_hover) {
                    toggleOn = true;
                }

                if ('yes' !== settings.autoplay) {
                    toggleOn = false;
                }
                if (toggleOn) {
                    elements.$swiperContainer.on({
                        mouseenter: () => {
                            methods.swiperAutoplayStop();
                        },
                        mouseleave: () => {
                            methods.swiperAutoplayStart();
                        }
                    });
                } else {
                    elements.$swiperContainer.off('mouseenter mouseleave');
                }
            },

            getInitialSlide() {
                return 0;
            },
            initThumb: async function () {
                const $thumbsSlider = elements.$swiperThumbsContainer;
                const Swiper = elementorFrontend.utils.swiper;
                if ($thumbsSlider.length) {
                    swiperThumbs = await new Swiper($thumbsSlider, this.getThumbsOptions());
                    methods.updateNav(swiperThumbs);
                    methods.updateBreakpoint(swiperThumbs);
                    methods.loopLazyFix(swiperThumbs);
                    swiperThumbs.on('snapGridLengthChange', methods.updateNav);
                    swiperThumbs.on('breakpoint', methods.updateBreakpoint);
                    methods.handleElementHandlers(swiperThumbs);
                }
            },
            initSlider: async function () {
                const $slider = elements.$swiperContainer;
                if (!$slider.length) return;
                const Swiper = elementorFrontend.utils.swiper;
                swiper = await new Swiper($slider, this.getSwiperOptions()); // Expose the swiper instance in the frontend


                $widget.vars.sliderInitialized = true;
                swiper.navigation.enabled = true;
                if (methods.isEnoughElements(swiper.params.slidesPerView)) {
                    swiper.navigation.enabled = false;
                    swiper.navigation.enabled = false;
                }

                $videoWrap = swiper.slides.find(".gallery-video-wrap");
                methods.clickVideo(swiper);
                methods.updateBreakpoint(swiper);
                methods.loopLazyFix(swiper);
                methods.loopPhotoswipeFix(swiper);
                methods.updateNav(swiper);
                methods.findAnimationInElements();
                $widget.css('opacity', 1);
                methods.updateActiveElements();
                methods.removeElementsAnimation();
                methods.zoomOnHover();
                setTimeout(() => {
                    methods.updateActiveElements();
                    methods.removeElementsAnimation(true);
                    methods.addElementsAnimation();
                }, 300);
                methods.handlePauseOnHover();
                swiper.on('slideChange', function () {
                    methods.playPauseVideo(swiper, 'pause');
                });
                swiper.on('slideChangeTransitionEnd', function () {
                    methods.updateActiveElements();
                    methods.removeElementsAnimation();
                    methods.addElementsAnimation();
                    methods.clickVideo(swiper);

                });
                swiper.on('snapGridLengthChange', methods.updateNav);
                swiper.on('breakpoint', methods.updateBreakpoint);
                methods.handleElementHandlers(swiper);
                $widget.find('.dt-owl-carousel-call, .elementor-owl-carousel-call, .related-projects, .slider-simple:not(.slider-masonry)').trigger('refresh.owl.carousel');
            },
            loopLazyFix: function (slider) {
                if (slider.params.loop) {
                    let $swiperDuplicates = $(slider.wrapperEl).children("." + (slider.params.slideDuplicateClass));
                    $swiperDuplicates.find(".is-loading").removeClass("is-loading");
                    $swiperDuplicates.layzrInitialisation();
                }
            },
            loopPhotoswipeFix: function (slider) {
                if (settings['open_lightbox'] === 'y') {
                    let $swiperDuplicates = $(slider.wrapperEl).children("." + (slider.params.slideDuplicateClass));
                    $swiperDuplicates.initPhotoswipe();
                }
            },
            updateNav: function (slider) {
                if (methods.isEnoughElements(slider.params.slidesPerView)) {
                    if (!slider.navigation.enabled) {
                        slider.navigation.destroy();
                        slider.navigation.init();
                        slider.navigation.update();

                        slider.pagination.destroy();
                        slider.pagination.init();
                        slider.pagination.render();
                        slider.pagination.update();
                        slider.navigation.enabled = true;
                    }
                } else if (slider.navigation.enabled) {
                    slider.navigation.destroy();
                    if (slider.navigation.$nextEl) {
                        slider.navigation.$nextEl.addClass(slider.params.navigation.disabledClass);
                    }
                    if (slider.navigation.$prevEl) {
                        slider.navigation.$prevEl.addClass(slider.params.navigation.disabledClass);
                    }

                    slider.pagination.destroy();
                    if (slider.pagination.$el) {
                        slider.pagination.$el.addClass(slider.params.pagination.hiddenClass);
                    }

                    slider.navigation.enabled = false;
                }
            },
            updateBreakpoint: function (slider) {
                methods.updateScrollSpeed(slider);
                let updateLoop = false;
                let oldLoop = slider.params.loop;
                slider.params.loop = methods.isEnableLoop(slider.params.slidesPerView)

                if (true === slider.params.loop) {
                    let oldLoopedSlides = slider.params.loopedSlides;
                    slider.params.loopedSlides = methods.getLoopedSlides(slider.params.slidesPerGroup);
                    if (slider.params.loopedSlides !== oldLoopedSlides) {
                        updateLoop = true;
                    }
                }
                if (slider.params.loop !== oldLoop && slider.params.loop) {
                    updateLoop = true;
                }
                if (updateLoop) {
                    slider.loopDestroy();
                    slider.loopCreate();
                    slider.updateSlides();
                    methods.loopLazyFix(slider);
                    methods.handleElementHandlers(slider);
                } else if (slider.params.loop !== oldLoop && !slider.params.loop) {
                    slider.loopDestroy();
                    slider.updateSlides();
                }
            },
            isEnableLoop: function (slidesPerView) {
                let result = 'yes' === settings.infinite;
                return result && methods.isEnoughElements(slidesPerView);
            },
            updateScrollSpeed: function (slider) {
                if (!slider.$el[0].classList.contains('thumbs-slides-wrapper')) {
                    slider.params.speed = settings.transition_speed;
                    if (slider.params.slidesPerGroup == slider.params.slidesPerView) {
                        slider.params.speed = slider.params.slidesPerView * settings.transition_speed;
                    }
                }
            },
            updateSwiperOption: function (propertyName) {
                if (!$widget.vars.sliderInitialized) return;

                let respControlNames = ['slides_to_scroll', 'slides_gap', 'slides_per_view'];
                let handled = false;
                respControlNames.forEach(controlName => {
                    if (propertyName.startsWith(controlName)) {
                        swiper.params.breakpoints = this.getSwiperOptions().breakpoints;
                        swiper.currentBreakpoint = false;
                        swiper.update();
                        handled = true;
                        methods.findAnimationInElements();
                        if (propertyName.startsWith('slides_per_view')) {
                            methods.updateActiveElements();
                            methods.addElementsAnimation();
                        }
                    }
                });

                if (handled) {
                    return;
                }

                const newSettingValue = settings[propertyName];
                let propertyToUpdate = data.changeableProperties[propertyName],
                    valueToUpdate = newSettingValue;

                switch (propertyName) {
                    case 'autoplay_speed':
                        swiper.autoplay.stop();
                        propertyToUpdate = 'autoplay';
                        valueToUpdate = {
                            delay: newSettingValue,
                            disableOnInteraction: true
                        };
                        break;
                    case 'pause_on_hover':
                        methods.handlePauseOnHover()
                        break;
                    case 'autoplay':
                        swiper.autoplay.stop();
                        valueToUpdate = methods.getAutoplayConfig()
                        methods.handlePauseOnHover()
                        break;
                }

                if ('pause_on_hover' !== propertyName) {
                    swiper.params[propertyToUpdate] = valueToUpdate;
                }
                swiper.update();
                if ('autoplay' === propertyToUpdate) {
                    if ('yes' === settings.autoplay) {
                        swiper.autoplay.start();
                    }
                }
            },
            isLoop: function () {
                return widgetType === 'the7-slider-loop';
            },

            updateActiveElements: function () {
                if (!swiper.params) return;
                let activeElements = [];

                let slidesPerView = swiper.params.slidesPerView ? swiper.params.slidesPerView : 1;
                let slidesStart = swiper.activeIndex;
                let slidesEnd = slidesStart + slidesPerView

                for (let activeSlideIndex = slidesStart; activeSlideIndex < slidesEnd; activeSlideIndex++) {
                    let activeSlide = elements.animatedSlides[activeSlideIndex];

                    if (activeSlide === undefined) {
                        continue;
                    }
                    //do not alter activeSlide
                    activeElements = $.merge($.merge([], activeSlide), activeElements);
                }

                let $activeDuplicates = $(swiper.slides).filter(data.selectors.activeDuplicate);
                $activeDuplicates.each(function (index) {
                    const duplicateIndex = $(swiper.slides).index($(this));
                    slidesStart = duplicateIndex;
                    slidesEnd = slidesStart + slidesPerView

                    for (let activeSlideIndex = duplicateIndex; activeSlideIndex < slidesEnd; activeSlideIndex++) {

                        const activeDuplicateSlide = elements.animatedSlides[activeSlideIndex];
                        if (activeDuplicateSlide !== undefined) {
                            //do not alter activeSlide
                            activeElements = $.merge($.merge([], activeDuplicateSlide), activeElements);
                        }
                    }
                });
                elements.activeElements = activeElements;
            },
            removeElementsAnimation(isForce = false) {
                if (!$widget.vars.sliderInitialized) return;
                let notActiveElements = [];
                Object.keys(elements.animatedSlides).forEach(function (slideKey) {
                    let e = elements.animatedSlides[slideKey];
                    notActiveElements = $.merge($.merge([], e), notActiveElements);
                });
                if (!isForce) {
                    notActiveElements = notActiveElements.filter(function (e) {
                        let val = $.inArray(e, elements.activeElements)
                        return val < 0
                    })
                }

                notActiveElements.forEach(function (e) {
                    let $element = e.$element.filter('.the7-ignore-anim');
                    if ($element.length) {
                        if (!isForce) {
                            $element.trigger("the7-slide:hide");
                        }
                    } else {
                        elementorAnimation.resetElement(e);
                    }
                });
            },

            addElementsAnimation() {
                if (!$widget.vars.sliderInitialized) return;
                elements.activeElements.forEach(function (e) {
                    let $element = e.$element.filter('.the7-ignore-anim');
                    if ($element.length) {
                        $element.trigger("the7-slide:change");
                    } else {
                        elementorAnimation.animateElement(e);
                    }
                });
            },

            findAnimationInElements() {
                if (!$widget.vars.sliderInitialized) return;
                let animatedSlides = {};

                $(swiper.slides).each(function (index) {
                        const $slide = $(this);
                        let elementsWithAnimation = elementorAnimation.findAnimationsInNode($slide);
                        if (elementsWithAnimation.length) {
                            animatedSlides[index] = elementsWithAnimation;
                        }
                    }
                );
                elements.animatedSlides = animatedSlides;
            },
            zoomOnHover() {
                if (settings['zoom_on_hover'] === 'y' && $('.mobile-false').length > 0) {
                    $('.the7-zoom-on-hover', elements.$swiperContainer).on({
                        mousemove: (e) => {
                            let zoomer = e.currentTarget;
                            let offsetX = e.offsetX ? e.offsetX : 0;
                            let offsetY = e.offsetX ? e.offsetY : 0;

                            let x = (offsetX / zoomer.offsetWidth) * 100
                            let y = (offsetY / zoomer.offsetHeight) * 100
                            zoomer.style.backgroundPosition = `${x}% ${y}%`;
                        },
                    });
                }
            },

            postMessageToPlayer: function (player, command) {
                if (player == null || command == null) return;
                player.contentWindow.postMessage(JSON.stringify(command), "*");
            },
            clickVideo: function (slider) {
                if ($videoOverlay.length && $videoOverlay.is(":visible") && settings['open_lightbox'] !== 'y') {
                    $videoWrap.parent().on('click', function (e) {
                        var $this = $(this);
                        if ($this.hasClass('playing-video')) {
                        } else {
                            $this.find(".the7-video-overlay").remove();
                            methods.playPauseVideo(slider, 'play');
                            $this.addClass('playing-video');
                        }

                    });
                } else {
                    if ((currentDeviceMode !== 'mobile' && autoplay || currentDeviceMode === 'mobile' && autoplay && playOnMobile)) {
                        methods.playPauseVideo(slider, 'play');
                    }
                }
            },
            playPauseVideo: function (slider, control) {
                let currentSlide = slider.slides.eq(slider.activeIndex);

                let iframe = currentSlide.find("iframe");
                let slideType = iframe.length > 0 ? iframe.attr("title").split(" ")[0] : "video";
                let player = iframe.length > 0 ? iframe[0] : null;
                let video = currentSlide.find("video")[0];

                let mute = !!settings['mute'];
                let loop = !!settings['loop'];

                if (slideType === "vimeo") {
                    switch (control) {
                        case "play":
                            methods.postMessageToPlayer(player, {
                                "method": "play",
                                "value": 1
                            });
                            break;
                        case "pause":
                            methods.postMessageToPlayer(player, {
                                "method": "pause",
                                "value": 1
                            });
                            break;
                    }
                } else if (slideType === "youtube") {
                    switch (control) {
                        case "play":
                            if (mute) {
                                methods.postMessageToPlayer(player, {
                                    "event": "command",
                                    "func": "mute"
                                });
                            }
                            methods.postMessageToPlayer(player, {
                                "event": "command",
                                "func": "playVideo"
                            });
                            if (loop) {
                                methods.postMessageToPlayer(player, {
                                    "event": "command",
                                    "func": "loop"
                                });
                            }
                            break;
                        case "pause":
                            methods.postMessageToPlayer(player, {
                                "event": "command",
                                "func": "pauseVideo"
                            });
                            break;
                    }

                } else if (slideType === "video" && video) {
                    control === "play" ? video.play() : video.pause();
                }
            },
        };

        //global functions
        $widget.refresh = function () {
            settings = elementorSettings.getSettings();
            methods.unBindEvents();
            methods.bindEvents();
        };
        this.update = function () {
            if (swiper) {
                swiper.update();
                if (swiperThumbs) {
                    swiperThumbs.update();
                }
            }
        }
        this.delete = function () {
            methods.unBindEvents();
            $widget.removeData("the7Slider");
            if (swiper) {
                swiper.destroy();
            }
        };

        this.updateSwiperOption = function (propertyName) {
            settings = elementorSettings.getSettings();
            methods.updateSwiperOption(propertyName);
        }

        this.onDocumentLoaded = function (document) {
            if (document.config.type === 'loop-item' && methods.isLoop()) {
                if (!$widget.vars.sliderInitialized) return;
                methods.handleSlider();
                let elementsToRemove = ['.swiper-pagination', '.the7-swiper-button'];
                const templateID = document.id;
                elementsToRemove = [...elementsToRemove, 'style#loop-' + templateID, 'link#font-loop-' + templateID, 'style#loop-dynamic-' + templateID];
                elementsToRemove.forEach(elementToRemove => {
                    $widget.find(elementToRemove).remove();
                });
            }
        }
        $widget.getSwiper = function () {
            return swiper;
        }
        this.getSwiper = function () {
            return swiper;
        }
        methods.init();
    };

    $.fn.the7Slider = function (settings) {
        var isCommand = "string" === typeof settings;
        var args = Array.prototype.slice.call(arguments, 1)

        this.each(function () {
            var $this = $(this);
            if (!isCommand) {
                $this.data("the7Slider", new $.the7Slider(this, settings));
                return
            }
            var instance = $this.data("the7Slider");
            if (!instance) {
                throw Error("Trying to perform the `" + settings + "` method prior to initialization")
            }
            if (!instance[settings]) {
                throw ReferenceError("Method `" + settings + "` not found in instance")
            }
            instance[settings].apply(instance, args);
        });
        return this
    };
});
(function ($) {
    // Make sure you run this code under Elementor.
    $(window).on("elementor/frontend/init", function () {
        elementorFrontend.hooks.addAction("frontend/element_ready/the7-slider.default", widgetHandler);
        elementorFrontend.hooks.addAction("frontend/element_ready/the7-slider-loop.post", widgetHandler);
        elementorFrontend.hooks.addAction("frontend/element_ready/the7-woocommerce-product-images-slider.default", widgetHandler);

        function widgetHandler($widget, $) {
            $(document).ready(function () {
                if (elementorFrontend.isEditMode()) {
                    The7ElementorAnimation.patchElementsAnimation($widget);
                }
                $widget.the7Slider();

            })
        }

        if (elementorFrontend.isEditMode()) {
            elementorEditorAddOnChangeHandler("the7-slider", refresh);
            elementorEditorAddOnChangeHandler("the7-slider-loop", refresh);
            elementorEditorAddOnChangeHandler("the7-woocommerce-product-images-slider", refresh);
            elementor.on("document:loaded", onDocumentLoaded);
        } else {
            The7ElementorAnimation.patchElementsAnimation($('.elementor-widget-the7-slider-common .the7-swiper-slide'));
        }

        function onDocumentLoaded(document) {
            var $elements = $('.elementor-widget-the7-slider-loop');
            $elements.each(function () {
                const $widget = $(this);
                const widgetData = $widget.data('the7Slider');
                if (typeof widgetData !== 'undefined') {
                    widgetData.onDocumentLoaded(document);
                }
            });
        }

        function refresh(controlView, widgetView) {
            let refresh_controls = [
                "autoplay_speed",
                "pause_on_hover",
                "autoplay",
                "transition_speed",
                ...The7ElementorSettings.getResponsiveSettingList('slides_gap'),
                "slides_to_scroll",
                ...The7ElementorSettings.getResponsiveSettingList('slides_per_view'),
            ];
            const controlName = controlView.model.get('name');
            if (-1 !== refresh_controls.indexOf(controlName)) {
                const $widget = $(widgetView.$el);
                const widgetData = $widget.data('the7Slider');
                if (typeof widgetData !== 'undefined') {
                    widgetData.updateSwiperOption(controlName);
                }
            }
        }

    });
})(jQuery);