jQuery(document).ready(function($) {
    $(document).on('change', '.sifency-toggle-checkbox', function() {
        var $checkbox = $(this);
        var isChecked = $checkbox.is(':checked');
        
        var $widget = $checkbox.closest('.elementor-widget');
        var $container = $checkbox.closest('.sifency-toggle-container');
        
        if(isChecked) {
            $container.find('.text-monthly').removeClass('active');
            $container.find('.text-yearly').addClass('active');
        } else {
            $container.find('.text-yearly').removeClass('active');
            $container.find('.text-monthly').addClass('active');
        }

        $widget.find('.sifency-pricing-card').each(function() {
            var $card = $(this);
            var $priceWrap   = $card.find('.sifency-price-wrap');
            var $featureWrap = $card.find('.sifency-pricing-features');
            
            var $amount = $priceWrap.find('.sifency-price-amount');
            var $period = $priceWrap.find('.sifency-price-period');
            
            var $monthlyList = $featureWrap.find('.sifency-pricing-features-list.is-monthly');
            var $yearlyList  = $featureWrap.find('.sifency-pricing-features-list.is-yearly');
            
            var priceA  = $priceWrap.attr('data-price-a');
            var periodA = $priceWrap.attr('data-period-a');
            var priceB  = $priceWrap.attr('data-price-b');
            var periodB = $priceWrap.attr('data-period-b');
            
            $priceWrap.addClass('sifency-switching');
            $featureWrap.css({ 'opacity': '0', 'transition': 'opacity 0.2s ease-in-out' });
            
            setTimeout(function() {
                if (isChecked) {
                    $amount.html(priceB);
                    $period.html(periodB);
                    
                    $monthlyList.hide();
                    $yearlyList.show();
                } else {
                    $amount.html(priceA);
                    $period.html(periodA);
                    
                    $yearlyList.hide();
                    $monthlyList.show();
                }
                
                $priceWrap.removeClass('sifency-switching');
                $featureWrap.css('opacity', '1');
            }, 200);
        });
    });
});