(function ($) {
    "use strict";

    var SifencyTimelineHandler = function ($scope, $) {
        var $wrapper = $scope.find('.sifency-timeline-wrapper');
        var $swiperContainer = $scope.find('.sifency-tl-swiper');
        var $navItems = $wrapper.find('.sifency-tl-nav-item');
        var $progressBar = $wrapper.find('.sifency-tl-progress-bar');

        if (!$swiperContainer.length) return;

        var swiperOptions = $swiperContainer.data('swiper-options');

        swiperOptions.on = {
            slideChange: function () {
                updateTimelineNav(this.activeIndex);
            },
            init: function() {
                updateTimelineNav(this.activeIndex);
            }
        };

        var timelineSwiper = new Swiper($swiperContainer[0], swiperOptions);

        function updateTimelineNav(activeIndex) {
            $navItems.removeClass('active');
            $navItems.find('.sifency-tl-dot').removeClass('active');

            var $current = $navItems.eq(activeIndex);
            $current.addClass('active');
            $current.find('.sifency-tl-dot').addClass('active');

            var total = $navItems.length;
            if (total > 1) {
                var progress = (activeIndex / (total - 1)) * 100;
                $progressBar.css('width', progress + '%');
            } else {
                $progressBar.css('width', '100%');
            }
        }

        $navItems.on('click', function () {
            var index = $(this).data('index');
            timelineSwiper.slideTo(index);
        });
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/sifency-advanced-timeline.default', SifencyTimelineHandler);
    });

})(jQuery);