(function ($) {
    'use strict';

    const initDeviceCarousel = function ($scope, $) {
        const $nestedSliders = $scope.find('.sifency-nested-carousel');
        
        $nestedSliders.each(function() {
            const $this = $(this);
            let options = {};
            try {
                const rawOptions = $this.attr('data-swiper-options');
                if (rawOptions) options = JSON.parse(rawOptions);
            } catch (e) { console.log(e); }

            new Swiper($this[0], options);
        });

        const $mainContainer = $scope.find('.sifency-main-carousel').first();
        if ($mainContainer.length) {
            let mainOptions = {};
            try {
                const rawMainOptions = $mainContainer.attr('data-swiper-options');
                if (rawMainOptions) mainOptions = JSON.parse(rawMainOptions);
            } catch (e) { console.log(e); }

            if(mainOptions.navigation) {
                mainOptions.navigation.prevEl = $scope.find('.sifency-slider-nav-prev')[0];
                mainOptions.navigation.nextEl = $scope.find('.sifency-slider-nav-next')[0];
            }
            if(mainOptions.pagination) {
                mainOptions.pagination.el = $scope.find('.swiper-pagination')[0];
            }

            new Swiper($mainContainer[0], mainOptions);
        }
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/sifency-device-carousel.default', initDeviceCarousel);
    });

})(jQuery);