( function( $ ) {
    "use strict";
    let pxl_tabs_company_features = function($scope) {
        $scope.find(".pxl-company-features").each(function() {
            const _this = $(this);
            let buttons = _this.find('.btn');
            let images = _this.find('.pxl-item--image');
            let contents = _this.find('.pxl-item--content');

            buttons.each(function(i, button) {
                $(button).on('click', function(e) {
                    e.preventDefault();
                    if ($(button).hasClass('active')) {
                        return;
                    }
                    buttons.removeClass('active')
                    images.removeClass('active')
                    contents.removeClass('active')
                    $(button).addClass('active');
                    let currentTab = $(button).attr('data-tab');
                    images.each(function(i, image) {
                        if($(image).hasClass(currentTab)) {
                            $(image).addClass('active');
                        }
                    })
                    contents.each(function(i, content) {
                        if($(content).hasClass(currentTab)) {
                            $(content).addClass('active');
                        }
                    })
                });
            });
        });
    }

    let pxl_widget_tabs_handler = function($scope) {
        $scope.find(".pxl-tabs").each(function() {
            let tabButtons = $(this).find('.pxl-tab--btn .btn');
            let tabContents = $(this).find('.pxl-tab--content');
            $(tabButtons).each(function(i, button) {
                $(button).on('click', function(e) {
                    e.preventDefault();
                    if ($(button).hasClass('active')) {
                        return;
                    }
                    tabButtons.removeClass('active');
                    tabContents.removeClass('active');
                    $(button).addClass('active');
                    let tabActive = $(button).data('tab');
                    $(tabContents).each(function(i, content) {
                        if ($(content).hasClass(tabActive)) {
                            $(content).addClass('active');
                        }
                    });
                });
            });
        });
    };

    $( window ).on( 'elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_pricing.default', function( $scope ) {
            pxl_widget_tabs_handler($scope);
        });
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_company_features.default', function( $scope ) {
            pxl_tabs_company_features($scope);
        });
    });

} )( jQuery );