JezK

Edit File: admin.js

const ADMIN_BAR_HEIGHT = 32;

function pysTagTemplateSelection( tag, container ) {
    // here we are finding option element of tag and
    // if it has property 'locked' we will add class 'locked-tag'
    // to be able to style element in select
    var $option = jQuery( '.pys-tags-pysselect2 option[value="' + tag.id + '"]' );
    if ( $option.attr( 'locked' ) ) {
        jQuery( container ).addClass( 'locked-tag' );
        tag.locked = true;
    }
    return tag.text;
}

// Add a variable to store the last selected Facebook event type
let _lastFacebookEventType = null;
let _lastPinterestEventType = null;
let _lastRedditEventType = null;
let _lastBingEventType = null;
let _lastTikTokEventType = null;

jQuery( document ).ready( function ( $ ) {

$(".password-block").each(function() {
        maskPassword($(this));
    });
    $(".maskedInput").on("input", function() {
        updatePassword($(this));
    });
    function toggleVisibilityBasedOnValue( e ) {
        let targetElement = $( "#" + e.data( "target" ) );
        if ( e.val() === e.data( "value" ) ) {
            targetElement.slideDown( 400 );
            setTimeout( () => targetElement.removeClass( "form-control-hidden" ), 400 );
        } else {
            targetElement.slideUp( 400 );
            setTimeout( () => targetElement.addClass( "form-control-hidden" ), 400 );
        }
    }

function toggleWooEventValueOption() {
        if ( $( 'input[name="pys[core][woo_event_value]"]:checked' ).val() === "price" ) {
            $( ".woo-event-value-option" ).slideUp( 400 );
        } else {
            $( ".woo-event-value-option" ).slideDown( 400 );
        }
    }

function toggleEDDEventValueOption() {
        if ( $( 'input[name="pys[core][edd_event_value]"]:checked' ).val() === "price" ) {
            $( ".edd-event-value-option" ).hide();
        } else {
            $( ".edd-event-value-option" ).show();
        }
    }

// Toggle neighbor block .purchaseOnTransactionMode for Woo/EDD purchase_on_transaction
    function togglePurchaseOnTransactionMode($input) {
        var $block = $input.closest('.card-body').find('.purchaseOnTransactionMode').first();
        if ($block.length === 0) return;
        if ($input.is(':checked')) {
            $block.slideDown(400);
        } else {
            $block.slideUp(400);
        }
    }

var purchaseOnTxSelectors = 'input[name="pys[core][woo_purchase_on_transaction]"], input[name="pys[core][edd_purchase_on_transaction]"]';
    $(document).on('change', purchaseOnTxSelectors, function() {
        togglePurchaseOnTransactionMode($(this));
    });
    $(purchaseOnTxSelectors).each(function(){ togglePurchaseOnTransactionMode($(this)); });

function showRelevantEventTriggerPanel() {

let triggerGroup = $( ".pys_triggers_wrapper .trigger_group" );
        $( ".event_triggers_panel" ).hide();
        if ( triggerGroup.length > 0 ) {
            $.each( triggerGroup, function ( index, trigger ) {
                trigger = $( trigger );

let triggerGroupId = trigger.attr( "data-trigger_id" ),
                    eventType = $( "#pys_event_" + triggerGroupId + "_trigger_type" ).val(),
                    panelName = trigger.find( "." + eventType + "_panel" );

$( panelName ).show();

let triggerPanel = $( panelName ),
                    triggerType = triggerPanel.data( "trigger_type" );

if ( $( '.event_trigger:not([data-trigger_id="-1"])', triggerPanel ).length == 0 ) {
                    cloneAndInsertTrigger( triggerPanel, triggerType );
                }
            } )
        }
    }

function cloneAndInsertTrigger( triggerPanel, triggerType ) {
        let triggers = $( ".event_trigger", triggerPanel ),
            clonedTrigger = $( triggers[ 0 ] ).clone( true ),
            triggerGroup = triggerPanel.closest( '.trigger_group' );

if ( triggerGroup.length > 0 ) {
            let triggerId = triggerGroup.attr( "data-trigger_id" ),
                newTriggerTriggerId = parseInt( $( triggers[ triggers.length - 1 ] ).attr( "data-trigger_id" ) ) + 1,
                newTriggerName = "pys[event][triggers][" + triggerId + "][" + triggerType + "_triggers][" + newTriggerTriggerId + "]";

clonedTrigger.attr( "data-trigger_id", newTriggerTriggerId );
            $( "select", clonedTrigger ).attr( "name", newTriggerName + "[rule]" );
            $( "input", clonedTrigger ).attr( "name", newTriggerName + "[value]" );
            clonedTrigger.css( "display", "block" );

const $inputWrapperList = clonedTrigger.find( '.input-number-wrapper' );
            $inputWrapperList.each( function () {
                addInputNumberListener( $( this ) );
            } );

clonedTrigger.insertBefore( $( ".insert-marker", triggerPanel ) );
        }
    }

function toggleTriggerGroupHead( triggerHead, panel ) {
        if ( triggerHead.length > 0 ) {
            triggerHead.each( function () {
                $( this ).attr( 'class', 'trigger_group_head trigger_group_' + panel );
            } )
        }
    }

function toggleEventDelay() {
        let triggerGroup = $( ".pys_triggers_wrapper .trigger_group" );

if ( triggerGroup.length > 0 ) {
            $.each( triggerGroup, function ( index, trigger ) {
                trigger = $( trigger );
                let trigger_type = trigger.find( '.pys_event_trigger_type' ).val();

if ( trigger_type === "page_visit" ) {
                    trigger.find( ".event-delay" ).css( "display", "flex" );
                } else {
                    trigger.find( ".event-delay" ).css( "display", "none" );
                }

if ( trigger_type === "number_page_visit" ) {
                    trigger.find( ".trigger_number_page_visit" ).css( "display", "flex" );
                } else {
                    trigger.find( ".trigger_number_page_visit" ).css( "display", "none" );
                }
            } )
        }
    }

function toggleFacebookPanel() {
        let event_facebook_enabled = $( "#pys_event_facebook_enabled" ),
            card = event_facebook_enabled.closest( '.card' ),
            configured = +card.attr( 'data-configured' ) === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( event_facebook_enabled.is( ":checked" ) ) {
                $( "#facebook_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#facebook_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $( '.facebook-not-configured-error' ).show();
            $( "#facebook_panel" ).addClass( 'disabled' );
            event_facebook_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

function updateFacebookEventParamsFrom() {
        let $select = $( '#pys_event_facebook_event_type' );
        if ( $select.length === 0 ) return;

let currentEventType = $select.val();
        let $panel = $( '#facebook_params_panel' );
        let $custom = $( '.facebook-custom-event-type' );

// If the event type hasn't changed, just ensure the panel is visible and return
        if ( currentEventType === _lastFacebookEventType && $panel.children('.param-field-wrapper').length > 0 ) {
            if ( $( '#pys_event_facebook_params_enabled' ).is( ":checked" ) ) {
                $panel.slideDown( 400 );
            }
            return;
        }

// Update the last selected event type
        _lastFacebookEventType = currentEventType;

if ( currentEventType === 'CustomEvent' ) {
            $custom.find('input[id*="_custom_event_type"]').attr('required', 'required')

$custom.slideDown( 400 );
            $panel.slideUp( 400, function () {
                // Save custom params before clearing
                let customParamsHtml = $( '.facebook-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-facebook-parameter)', $panel ).clone();

$( this ).html( '' );

// Restore custom params
                customParamsHtml.each(function() {
                    $panel.append( $(this) );
                });
                $panel.append( insertMarker );
                $panel.append( addButton );
            } );
        } else {
            $custom.find('input[id*="_custom_event_type"]').removeAttr('required');
            $('.custom-event-type-error').remove();
            $custom.slideUp( 400 );
            let fields = $select.find( ":selected" ).data( 'fields' );

if ( fields.length === 0 || !$( '#pys_event_facebook_params_enabled' ).is( ":checked" ) ) {
                $panel.slideUp( 400, function () {
                    // Save custom params before clearing
                    let customParamsHtml = $( '.facebook-custom-param', $panel ).clone();
                    let insertMarker = $( '.insert-marker', $panel ).clone();
                    let addButton = $( '.mt-24:has(.add-facebook-parameter)', $panel ).clone();

$( this ).html( '' );

// Restore custom params
                    customParamsHtml.each(function() {
                        $panel.append( $(this) );
                    });
                    $panel.append( insertMarker );
                    $panel.append( addButton );
                } );
            } else {
                // Save custom params before clearing
                let customParamsHtml = $( '.facebook-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-facebook-parameter)', $panel ).clone();

$panel.html( '' )
                fields.forEach( function ( item ) {
                    $panel.append( renderField( item ) )
                } );

// Restore custom params
                customParamsHtml.each(function() {
                    $panel.append( $(this) );
                });
                $panel.append( insertMarker );
                $panel.append( addButton );

$panel.slideDown( 400 );
            }

$custom.slideUp( 400 );
        }
    }

function togglePinterestPanel() {
        let event_pinterest_enabled = $( "#pys_event_pinterest_enabled" ),
            card = event_pinterest_enabled.closest( '.card' ),
            configured = +card.attr('data-configured') === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( event_pinterest_enabled.is( ":checked" ) ) {
                $( "#pinterest_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#pinterest_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $('.pinterest-not-configured-error').show();
            $( "#pinterest_panel" ).addClass( 'disabled' );
            event_pinterest_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

function togglePinterestParamsPanel() {
        if ( $( "#pys_event_pinterest_params_enabled" ).is( ":checked" ) ) {
            $( "#pinterest_params_panel" ).slideDown( 400 );
        } else {
            $( "#pinterest_params_panel" ).slideUp( 400 );
        }
    }

function updatePinterestParamsPanelClass() {
        var eventType = $( "#pys_event_pinterest_event_type" ).val();
        $( "#pinterest_params_panel" ).removeClass().addClass( eventType );
    }

function togglePinterestCustomCurrency() {
        if ( $( "#pys_event_pinterest_params_currency" ).val() === "custom" ) {
            $( ".pinterest-custom-currency" ).css( "visibility", "visible" );
        } else {
            $( ".pinterest-custom-currency" ).css( "visibility", "hidden" );
        }
    }

function updatePinterestEventParamsFrom() {
        let $select = $( '#pys_event_pinterest_event_type' );
        if ( $select.length === 0 ) return;

let currentEventType = $select.val();
        let $panel = $( '#pinterest_params_panel' );
        let $custom = $( '.pinterest-custom-event-type' );

if ( currentEventType === _lastPinterestEventType && $panel.children('.param-field-wrapper').length > 0 ) {
            if ( $( '#pys_event_pinterest_params_enabled' ).is( ":checked" ) ) {
                $panel.slideDown( 400 );
            }
            return;
        }

_lastPinterestEventType = currentEventType;

if ( currentEventType === 'partner_defined' || currentEventType === 'custom' ) {
            $custom.find('input[id*="_custom_event_type"]').attr('required', 'required');
            $custom.slideDown( 400 );
        } else {
            $custom.find('input[id*="_custom_event_type"]').removeAttr('required');
            $('.custom-event-type-error').remove();
            $custom.slideUp( 400 );
        }

let fields = $select.find( ":selected" ).data( 'fields' );

if ( fields.length === 0 || !$( '#pys_event_pinterest_params_enabled' ).is( ":checked" ) ) {
            $panel.slideUp( 400, function () {
                // Save custom params before clearing
                let customParamsHtml = $( '.pinterest-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-pinterest-parameter)', $panel ).clone();

$( this ).html( '' );

// Restore custom params
                customParamsHtml.each(function() {
                    $panel.append( $(this) );
                });
                $panel.append( insertMarker );
                $panel.append( addButton );
            } );
        } else {
            // Save custom params before clearing
            let customParamsHtml = $( '.pinterest-custom-param', $panel ).clone();
            let insertMarker = $( '.insert-marker', $panel ).clone();
            let addButton = $( '.mt-24:has(.add-pinterest-parameter)', $panel ).clone();
            $panel.html( '' )
            fields.forEach( function ( item ) {
                $panel.append( renderField( item ) )
            } );

// Restore custom params
            customParamsHtml.each(function() {
                $panel.append( $(this) );
            });
            $panel.append( insertMarker );
            $panel.append( addButton );

$panel.slideDown( 400 );
        }
    }

/**
	 * Toggle Reddit pixel panel
	 */
	function toggleRedditPanel() {
		let event_reddit_enabled = $( "#pys_event_reddit_enabled" ),
			card = event_reddit_enabled.closest( '.card' ),
			configured = +card.attr( 'data-configured' ) === 1,
			pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
			if ( event_reddit_enabled.is( ":checked" ) ) {
				$( "#reddit_panel" ).removeClass( 'disabled' );
				pixel_status.find( '.pixel-enabled' ).show();
				pixel_status.find( '.pixel-disabled' ).hide();
			} else {
				$( "#reddit_panel" ).addClass( 'disabled' );
				pixel_status.find( '.pixel-enabled' ).hide();
				pixel_status.find( '.pixel-disabled' ).show();
			}
		} else {
			$( '.reddit-not-configured-error' ).show();
			$( "#reddit_panel" ).addClass( 'disabled' );
			event_reddit_enabled.prop( 'checked', false ).prop( 'disabled', true );
		}
	}

toggleRedditPanel();
	toggleRedditCustomEventType();
	toggleRedditParamsPanel();

$( "#pys_event_reddit_enabled" ).on( 'click', function () {
		toggleRedditPanel();
	} );

$( "#pys_event_reddit_event_type" ).on( 'change', function () {
		updateRedditEventParamsFrom();
	} );

$( "#pys_event_reddit_params_enabled" ).on( 'click', function () {
		toggleRedditParamsPanel( true );
	} );

function updateRedditEventParamsFrom() {
		let $select = $( '#pys_event_reddit_event_type' );
		if ( $select.length === 0 ) {
			return;
		}

let currentEventType = $select.val();
		let $panel = $( '#reddit_params_panel' );
		let $custom = $( '.reddit-custom-event-type' );

if ( currentEventType === _lastRedditEventType && $panel.children('.param-field-wrapper').length > 0 ) {
            if ( $( '#pys_event_reddit_params_enabled' ).is( ":checked" ) ) {
                $panel.slideDown( 400 );
            }
            return;
        }

_lastRedditEventType = currentEventType;

if ( currentEventType === 'Custom' ) {
            $custom.find('input[id*="_custom_event_type"]').attr('required', 'required');
			$custom.slideDown( 400 );
		} else {
            $custom.find('input[id*="_custom_event_type"]').removeAttr('required');
			$custom.slideUp( 400 );
		}

let fields = $select.find( ":selected" ).data( 'fields' );

if ( fields.length === 0 || !$( '#pys_event_reddit_params_enabled' ).is( ":checked" ) ) {
			$panel.slideUp( 400, function () {
				$( this ).html( '' );
			} );
		} else {
			$panel.html( '' )
			fields.forEach( function ( item ) {
				$panel.append( renderField( item ) )
			} );

$panel.slideDown( 400 );
		}
	}

function toggleGoogleAnalyticsPanel() {
        if ( $( "#pys_event_ga_enabled" ).is( ":checked" ) ) {
            $( "#analytics_panel" ).show();
        } else {
            $( "#analytics_panel" ).hide();
        }
    }

function toggleGoogleAdsPanel() {
        if ( $( "#pys_event_google_ads_enabled" ).is( ":checked" ) ) {
            $( "#google_ads_panel" ).show();
        } else {
            $( "#google_ads_panel" ).hide();
        }
    }

function toggleBingPanel() {
        let event_bing_enabled = $( "#pys_event_bing_enabled" ),
            card = event_bing_enabled.closest( '.card' ),
            configured = +card.attr('data-configured') === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( event_bing_enabled.is( ":checked" ) ) {
                $( "#bing_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#bing_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $('.bing-not-configured-error').show();
            $( "#bing_panel" ).addClass( 'disabled' );
            event_bing_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

function updateBingEventParamsFrom() {
        let $select = $( '#pys_event_bing_event_type' );
        if ( $select.length === 0 ) return;

let currentEventType = $select.val();
        let $panel = $( '#bing_params_panel' );
        let $custom = $( '.bing-custom-event-type' );

if ( currentEventType === _lastBingEventType && $panel.children('.param-field-wrapper').length > 0 ) {
            if ( $( '#pys_event_bing_params_enabled' ).is( ":checked" ) ) {
                $panel.slideDown( 400 );
            }
            return;
        }

_lastBingEventType = currentEventType;

if ( currentEventType === 'Custom' ) {
            $custom.find('input[id*="_custom_event_type"]').attr('required', 'required');
            $custom.slideDown( 400 );
        } else {
            $custom.find('input[id*="_custom_event_type"]').removeAttr('required');
            $('.custom-event-type-error').remove();
            $custom.slideUp( 400 );
        }

let fields = $select.find( ":selected" ).data( 'fields' );

if ( fields.length === 0 || !$( '#pys_event_bing_params_enabled' ).is( ":checked" ) ) {
            $panel.slideUp( 400, function () {
                // Save custom params before clearing
                let customParamsHtml = $( '.bing-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-bing-parameter)', $panel ).clone();

$( this ).html( '' );

// Restore custom params
                customParamsHtml.each(function() {
                    $panel.append( $(this) );
                });
                $panel.append( insertMarker );
                $panel.append( addButton );
            } );
        } else {
            // Save custom params before clearing
            let customParamsHtml = $( '.bing-custom-param', $panel ).clone();
            let insertMarker = $( '.insert-marker', $panel ).clone();
            let addButton = $( '.mt-24:has(.add-bing-parameter)', $panel ).clone();

$panel.html( '' )
            fields.forEach( function ( item ) {
                $panel.append( renderField( item ) )
            } );

// Restore custom params
            customParamsHtml.each(function() {
                $panel.append( $(this) );
            });
            $panel.append( insertMarker );
            $panel.append( addButton );

$panel.slideDown( 400 );
        }
    }

function cloneEventCondition() {
        let cloned = $( '#pys_add_event_condition .condition_group' ).clone( true ),
            conditionWrapper = $( '.pys_conditions_wrapper' ),
            conditionGroup = $( '.pys_conditions_wrapper .condition_group' ),
            conditionId = 0;

if ( conditionGroup.length > 0 ) {
            conditionId = parseInt( $( conditionGroup[ conditionGroup.length - 1 ] ).attr( "data-condition_id" ) ) + 1;
        }
        $( '.pys_event_condition_type', cloned ).attr( {
            name: 'pys[event][conditions][' + conditionId + '][condition_type]',
            id: 'pys_event_' + conditionId + '_condition_type',
            value: 'url_filters'
        } );

cloned.attr( 'data-condition_id', conditionId );
        cloned.css( 'display', 'block' );

conditionWrapper.append( cloned );
        $( '.pys_event_condition_type', cloned ).trigger( 'change' );
    }

function checkConditionTypeAvailability( group, triggerPanel ) {
        let panelAvailability = group.find( '.' + triggerPanel + '_panel' );
        group.find( '.event_conditions_panel' ).hide();
        if ( panelAvailability.length === 0 ) {
            let clonedCondition = $( '#pys_add_event_condition .' + triggerPanel + '_panel' ).clone( true ),
            conditionId = group.attr( "data-condition_id" );
            switch ( triggerPanel ) {
                case 'url_filters':
                case 'url_parameters':
                case 'landing_page':
                case 'source':
                    $( 'select', clonedCondition ).attr( {
                        name: 'pys[event][conditions][' + conditionId + '][' + triggerPanel + '][condition_rule]',
                        id: 'pys_event_' + conditionId + '_'+ triggerPanel + '_condition_rule'
                    } );
                    $( 'input[type="text"]', clonedCondition ).attr( {
                        name: 'pys[event][conditions][' + conditionId + '][' + triggerPanel + '][condition_value]',
                        id: 'pys_event_' + conditionId + '_'+ triggerPanel + '_condition_value'
                    } );
                    break;
                case 'device' :

$( 'input[type="radio"]', clonedCondition ).each(function(index) {
                        const newId = 'pys_event_' + conditionId + '_device_' + index;
                        const newName = 'pys[event][conditions][' + conditionId + '][device]';
                        $(this).attr({
                            id: newId,
                            name: newName
                        });
                        $(this).next('.radio-checkbox-label').attr('for', newId);
                    });
                    break;
                case 'user_role':
                    $( 'select', clonedCondition ).attr( {
                        name: 'pys[event][conditions][' + conditionId + '][user_role][]',
                        id: 'pys_event_' + conditionId + '_user_role'
                    } );
                    $( 'input[type="hidden"]', clonedCondition ).attr( {
                        name: 'pys[event][conditions][' + conditionId + '][user_role][]',
                    } );
                    break;
            }

clonedCondition.show();
            let inserted = group.append(clonedCondition);
            $( '.pys-role-pysselect2', inserted ).each( function ( index, item ) {
                $(this).pysselect2()
            });
        } else {
            panelAvailability.show();
        }
    }

function cloneEventTrigger() {
        let cloned = $( '#pys_add_event_trigger .trigger_group' ).clone( true ),
            triggerWrapper = $( '.pys_triggers_wrapper .insert-marker-add-trigger' ),
            triggerGroup = $( '.pys_triggers_wrapper .trigger_group' ),
            triggerId = 0;

if ( triggerGroup.length > 0 ) {
            triggerId = parseInt( $( triggerGroup[ triggerGroup.length - 1 ] ).attr( "data-trigger_id" ) ) + 1;
        }

$( '.pys_event_trigger_type', cloned ).attr( {
            name: 'pys[event][triggers][' + triggerId + '][trigger_type]',
            id: 'pys_event_' + triggerId + '_trigger_type',
            value: 'page_visit'
        } );

$( '.event-delay input', cloned ).attr( {
            name: 'pys[event][triggers][' + triggerId + '][delay]',
            id: 'pys_event_' + triggerId + '_delay'
        } );

cloned.attr( 'data-trigger_id', triggerId );
        cloned.css( 'display', 'block' );

const $inputWrapperList = cloned.find( '.input-number-wrapper');
        $inputWrapperList.each( function () {
            addInputNumberListener( $( this ) );
        } );
        cloned.insertBefore( triggerWrapper );
        $( '.pys_event_trigger_type', cloned ).trigger( 'change' );
    }

function checkTriggerTypeAvailability( group, triggerPanel ) {
        let panelAvailability = group.find( '.' + triggerPanel + '_panel' );

if ( panelAvailability.length === 0 ) {

let panelNames;
            if ( triggerPanel === 'number_page_visit' ) {
                panelNames = [ triggerPanel + '_url', triggerPanel + '_conditional' ];
            } else {
                panelNames = [ triggerPanel ];
            }

panelNames.forEach( function ( panel ) {
                let clonedTrigger = $( '#pys_add_event_trigger .' + panel + '_panel' ).clone( true ),
                    triggerId = group.attr( "data-trigger_id" );
                switch ( panel ) {
                    case 'post_type':
                        $( '.trigger_post_type select', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][post_type_value]',
                            id: 'pys_event_' + triggerId + '_post_type_value'
                        } );
                        break;

case 'number_page_visit_conditional':
                        $( '.conditional_number_visit select', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][conditional_number_visit]',
                            id: 'pys_event_' + triggerId + '_conditional_number_visit'
                        } );

$( '.number_visit input', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][number_visit]',
                            id: 'pys_event_' + triggerId + '_number_visit'
                        } );
                        break;
                    case 'video_view':
                        $( '.pys_event_video_view_data', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_data]',
                        } );

$( '.pys_video_view_urls_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_urls][]',
                            id: 'pys_event_' + triggerId + '_video_view_urls'
                        } ).addClass( 'pys-tags-pysselect2' );

$( '.pys_video_view_triggers_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_triggers][]',
                            id: 'pys_event_' + triggerId + '_video_view_triggers'
                        } ).addClass( 'pys-pysselect2' );

$( '.pys_video_view_play_trigger', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_play_trigger]',
                            id: 'pys_event_' + triggerId + '_video_view_play_trigger'
                        } );
                        break;

case 'video_speed':
                        $( '.pys_event_video_speed_data', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_speed_data]',
                        } );

$( '.pys_video_speed_urls_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_speed_urls][]',
                            id: 'pys_event_' + triggerId + '_video_speed_urls'
                        } ).addClass( 'pys-tags-pysselect2' );

$( '.pys_video_speed_triggers_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_speed_triggers][]',
                            id: 'pys_event_' + triggerId + '_video_speed_triggers'
                        } ).addClass( 'pys-pysselect2' );

$( '.pys_video_speed_rate', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_speed_rate]',
                            id: 'pys_event_' + triggerId + '_video_speed_rate'
                        } );

let disableWatchVideo = $( '.switcher_event_disable_watch_video', clonedTrigger );

disableWatchVideo.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_disable_watch_video]',
                        } );

disableWatchVideo.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][video_view_disable_watch_video]',
                            id: 'pys_event_' + triggerId + '_disable_watch_video'
                        } );

disableWatchVideo.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_disable_watch_video'
                        } );

break;
                    case 'elementor_form':
                        $( '.pys_event_elementor_form_data', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][elementor_form_data]',
                        } );

$( '.pys_elementor_form_urls_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][elementor_form_urls][]',
                            id: 'pys_event_' + triggerId + '_elementor_form_urls'
                        } ).addClass( 'pys-tags-pysselect2' );

$( '.pys_elementor_form_triggers_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][elementor_form][forms][]',
                            id: 'pys_event_' + triggerId + '_elementor_form_triggers'
                        } ).addClass( 'pys-pysselect2' );

let disableElementorForm = $( '.switcher_event_disabled_form_action', clonedTrigger );

disableElementorForm.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][' + panel + '][disabled_form_action]',
                        } );

disableElementorForm.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][' + panel + '][disabled_form_action]',
                            id: 'pys_event_' + triggerId + '_' + panel + '_disabled_form_action'
                        } );

disableElementorForm.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_' + panel + '_disabled_form_action'
                        } );

break;
                    case 'form_field':
                        $( '.pys_event_form_field_data', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][form_field_data]',
                        } );
                        $( '.pys_form_field_urls_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][form_field_urls][]',
                            id: 'pys_event_' + triggerId + '_pys_form_field_urls_event'
                        } ).addClass( 'pys-tags-pysselect2' );

$( '.pys_form_field_triggers_event', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][form_field][form]',
                            id: 'pys_event_' + triggerId + '_form_field_triggers'
                        } ).addClass( 'pys-pysselect2' );

$('.pys_form_field_event', clonedTrigger).attr({
                            name: 'pys[event][triggers][' + triggerId + '][form_field][field]',
                            id: 'pys_event_' + triggerId + '_form_field'
                        }).addClass( 'pys-pysselect2' );

break;
                    case 'email_link':

$( 'select.pys_email_link_triggers', clonedTrigger ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][email_link_triggers]',
                            id: 'pys_event_' + triggerId + '_email_link_triggers'
                        } );

let disableEmailLink = $( '.switcher_event_email_link_event', clonedTrigger );

disableEmailLink.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][email_link_disable_email_event]',
                        } );

disableEmailLink.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][email_link_disable_email_event]',
                            id: 'pys_event_' + triggerId + '_email_link_disable_email_event'
                        } );

disableEmailLink.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_email_link_disable_email_event'
                        } );

break;
                    case 'purchase':
                        let transactionOnly = $( '.switcher_event_transaction_only_action', clonedTrigger );
                        transactionOnly.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][purchase_transaction_only]',
                        } );
                        transactionOnly.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][purchase_transaction_only]',
                            id: 'pys_event_' + triggerId + '_purchase_transaction_only'
                        } );
                        transactionOnly.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_purchase_transaction_only'
                        } );

case 'add_to_cart':
                    case 'purchase':
                        let trackValueAndCurrency = $( '.switcher_event_track_value_and_currency', clonedTrigger );
                        trackValueAndCurrency.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][track_value_and_currency]',
                        } );
                        trackValueAndCurrency.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][track_value_and_currency]',
                            id: 'pys_event_' + triggerId + '_track_value_and_currency'
                        } );
                        trackValueAndCurrency.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_track_value_and_currency'
                        } );
                        break;
                    case 'CF7':
                    case 'fluentform':
                    case 'formidable':
                    case 'forminator':
                    case 'gravity':
                    case 'ninjaform':
                    case 'wpforms':
                    case 'wsform':

let form = $( '.select_event_trigger_form_wrapper .trigger_form_select', clonedTrigger ),
                            disableEventWrapper = $( '.switcher_event_form_disable_event', clonedTrigger );

form.attr( {
                            name: 'pys[event][triggers][' + triggerId + '][' + panel + '][forms][]',
                            id: 'pys_event_' + triggerId + '_' + panel
                        } );

form.addClass( 'pys-pysselect2' );

disableEventWrapper.find( 'input[type="hidden"]' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][' + panel + '][disabled_form_action]',
                        } );

disableEventWrapper.find( 'input.custom-switch-input' ).attr( {
                            name: 'pys[event][triggers][' + triggerId + '][' + panel + '][disabled_form_action]',
                            id: 'pys_event_' + triggerId + '_' + panel + '_disabled_form_action'
                        } );

disableEventWrapper.find( 'label.custom-switch-btn' ).attr( {
                            for: 'pys_event_' + triggerId + '_' + panel + '_disabled_form_action'
                        } );

break;
                }

clonedTrigger.css( "display", "block" );
                let inserted = clonedTrigger.insertBefore( group.find( '.insert-marker-trigger.' + panel + '_marker' ) );
                console.log(inserted)
                $( '.pys-tags-pysselect2', inserted ).each( function () {
                    if ( !$( this ).data( 'select2' ) ) {
                        $( this ).pysselect2( {
                            tags: true,
                            tokenSeparators: [ ",", " " ],
                            templateSelection: pysTagTemplateSelection
                        } )
                    }
                } )

$( 'select.pys-pysselect2', inserted ).each( function () {
                    if ( !$( this ).data( 'select2' ) ) {
                        $( this ).pysselect2( {
                            placeholder: $( this ).data( "placeholder" ),
                        } );
                    }
                } );

const $inputWrapperList = clonedTrigger.find( '.input-number-wrapper');
                $inputWrapperList.each( function () {
                    addInputNumberListener( $( this ) );
                } );
            } );
        }
    }

// Initialize popovers
    $( () => {
        tippy('[data-toggle="pys-popover"]', {
            allowHTML: true,
            animation: 'fade',
            trigger: 'click',
            appendTo: document.querySelector('#pys'),
            maxWidth: 320,
            content(reference) {
                const id = reference.getAttribute('data-popover_id');
                return $( "#pys-" + id ).html();
            },
            interactive: true
        } );

tippy('.copy-icon', {
            content(reference) {
                const id = reference.getAttribute('data-popover_id');
                return $( "#pys-" + id ).html();
            },
            appendTo: document.querySelector('#pys'),
            maxWidth: 320,
            trigger: 'click',
            placement: 'bottom',
            animation: 'fade',
            onShow(instance) {
                setTimeout(() => {
                    instance.hide();
                }, 3000);
            }
        });

} );

// Initialize pysselect2 for select elements
    $( ".pys_triggers_wrapper .pys_form_field_urls_event" ).each( function () {
        $( this ).pysselect2({
            tags: true,
            tokenSeparators: [ ",", " " ],
            templateSelection: pysTagTemplateSelection
        }).on('pysselect2:unselecting', function (e) {
            if ($(e.params.args.data.element).attr('locked')) {
                e.preventDefault();
            }
        });
    });
    $( ".pys_triggers_wrapper .pys_form_field_triggers_event:not(.pys-pysselect2)" ).each( function () {
        $( this ).pysselect2({
            templateResult: function (data) {
                if (!data.id) return data.text;

const $el = $(data.element);
                const selector = $el.data('selector');

$( ".pys_triggers_wrapper .pys_form_field_event:not(.pys-pysselect2)" ).each( function () {
        $( this ).pysselect2({
            templateResult: function (data) {
                if (!data.id) return data.text;

const $el = $(data.element);
                const type = $el.data('type');
                const id = $el.data('id');

return $(`
                    <div>
                        <strong>${data.text}</strong>
                        <div style="font-size: 0.75em; color: #aaa;">Type: ${type}</div>
                        <div style="font-size: 0.75em; color: #aaa;">ID: ${id}</div>
                    </div>
                `);
            },
            templateSelection: function (data) {
                return data.text;
            }
        });
    });

$( ".pys-pysselect2" ).each( function () {
        $( this ).pysselect2( {
            placeholder: $( this ).data( "placeholder" )
        } );
    } );

$( ".pys-tags-pysselect2" ).pysselect2( {
        tags: true,
        tokenSeparators: [ ",", " " ],
        templateSelection: pysTagTemplateSelection
    } ).on( 'pysselect2:unselecting', function ( e ) {
        if ( $( e.params.args.data.element ).attr( 'locked' ) ) {
            e.preventDefault();
        }
    } );

// Controls visibility based on select elements' values
    $( "select.controls-visibility" ).on( "change", function ( e ) {
        toggleVisibilityBasedOnValue( $( this ) );
    } ).each( function ( index, element ) {
        toggleVisibilityBasedOnValue( $( element ) );
    } );

// Collapse card functionality
    $( ".card-collapse, .card-header-label .general-property-svg" ).on( 'click', function () {
        let cardBody = $( this ).closest( ".card, .card-video" ).children( ".card-body" ),
            cardHeader = $( this ).closest( ".card-header, .card-video-header" );

if ( cardHeader.length > 0 ) {
            cardHeader.toggleClass( "header-opened" );
        }

cardBody.slideToggle( 400 );
    } );

// Toggle visibility based on custom switch inputs
    $( ".collapse-control .custom-switch-input" ).on( 'change', function () {
        let $this = $( this ),
            targetElement = $( "." + $this.data( "target" ) );
        if ( targetElement.length > 0 ) {
            if ( $this.prop( "checked" ) ) {
                targetElement.slideDown( 400 );
            } else {
                targetElement.slideUp( 400 );
            }
        }
    } ).trigger( "change" );

toggleWooEventValueOption();
    $( 'input[name="pys[core][woo_event_value]"]' ).on( 'change', function () {
        toggleWooEventValueOption();
    } );

toggleEDDEventValueOption();
    $( 'input[name="pys[core][edd_event_value]"]' ).on( 'change', function () {
        toggleEDDEventValueOption();
    } );

toggleCogSourceOption();
    $( 'input[name="pys[core][woo_cog_source]"]' ).on( 'change', function () {
        toggleCogSourceOption();
    } );

//toggle all events
    $( "#pys_select_all_events" ).on( 'change', function () {
        if ( $( this ).prop( "checked" ) ) {
            $( ".pys-select-event" ).prop( "checked", "checked" );
        } else {
            $( ".pys-select-event" ).prop( "checked", false );
        }

checkEventsState();
    } );

$( ".pys-select-event" ).on( 'change', function () {
       checkEventsState();
    })

toggleEventDelay();
    showRelevantEventTriggerPanel();
    $( ".pys_event_trigger_type" ).on( 'change', function () {
        let triggerGroup = $( this ).closest( '.trigger_group' ),
            triggerHead = $( this ).closest( '.trigger_group_head' ),
            panel = $( this ).val();

checkTriggerTypeAvailability( triggerGroup, panel )
        toggleEventDelay();
        showRelevantEventTriggerPanel();
        toggleTriggerGroupHead( triggerHead, panel );
    } );

$('.pys_conditions_wrapper .pys-role-pysselect2').each( function ( index, value ) {
        $(this).pysselect2();
    } );
    $( ".pys_event_condition_type" ).on( 'change', function () {
        let conditionGroup = $( this ).closest( '.condition_group' ),
            panel = $( this ).val();
        checkConditionTypeAvailability( conditionGroup, panel );
    } );

$( document ).on( 'click', '.add-event-trigger', function () {
        let triggerPanel = $( this ).closest( ".event_triggers_panel" ),
            triggerType = triggerPanel.data( "trigger_type" );
        cloneAndInsertTrigger( triggerPanel, triggerType );
    } );

$( document ).on( 'click', '.pys_gads_phone_add_number', function ( e ) {
        e.preventDefault();
        let $wrap = $( this ).closest( '.ga_ads_phone_numbers_wrap' ),
            $template = $wrap.find( '.pys_gads_phone_number_template' ),
            $existing = $wrap.find( '.pys_gads_phone_number_row' ).not( '.pys_gads_phone_number_template' );

let newId = 0;
        $existing.each( function () {
            let id = parseInt( $( this ).attr( 'data-trigger_id' ), 10 );
            if ( !isNaN( id ) && id >= newId ) {
                newId = id + 1;
            }
        } );

let baseName = 'pys[event][ga_ads_phone_numbers][' + newId + ']',
            $row = $template.clone()
                .removeClass( 'pys_gads_phone_number_template' )
                .removeAttr( 'style' )
                .attr( 'data-trigger_id', newId );

$row.find( 'input[data-field="number"]' ).attr( 'name', baseName + '[number]' );
        $row.find( 'input[data-field="label"]' ).attr( 'name', baseName + '[label]' );

$row.insertBefore( $wrap.find( '.pys_gads_phone_number_insert_marker' ) );
        updateGadsPhoneRemoveButtons();
    } );

$( document ).on( 'click', '.button-remove-row', function ( e ) {
        let $row = $( this ).closest( ".event_trigger, .facebook-custom-param, .pinterest-custom-param, .ga-ads-custom-param, .bing-custom-param, .tiktok-custom-param, .reddit-custom-param" );
        if ( $row.hasClass( 'pys_gads_phone_number_template' ) ) {
            return;
        }
        let isPhoneRow = $row.hasClass( 'pys_gads_phone_number_row' );
        $row.remove();
        if ( isPhoneRow ) {
            updateGadsPhoneRemoveButtons();
        }
    } );

/**
     * Facebook Edit Event
     */
    if ( $( '#pys_event_facebook_event_type' ).length > 0 ) {
        $( '#pys_event_facebook_event_type' ).on( 'change', function () {
            updateFacebookEventParamsFrom()
        } )

$( '#pys_event_facebook_params_enabled' ).on( 'change', function () {
            updateFacebookParamFormVisibility( true )
        } )

if ( $( '#pys_event_facebook_event_type' ).val() === 'CustomEvent' ) {
            $( '.facebook-custom-event-type' ).find('input[id*="_custom_event_type"]').attr('required', 'required')
            $( '.facebook-custom-event-type' ).css( 'display', 'block' )
        } else {
            $( '.facebook-custom-event-type' ).css( 'display', 'none' )
        }
        updateFacebookParamFormVisibility();
        // Initialize _lastFacebookEventType after initial setup
        _lastFacebookEventType = $( '#pys_event_facebook_event_type' ).val();
    }

toggleFacebookPanel();
    $( "#pys_event_facebook_enabled" ).on( 'click', function () {
        toggleFacebookPanel();
    } );
    $( document ).on( 'click', '.add-facebook-parameter', function () {
        var facebookParamsPanel = $( "#facebook_params_panel" ),
            customParams = $( ".facebook-custom-param", facebookParamsPanel ),
            clonedParam = $( customParams[ 0 ] ).clone( true ),
            newParamId = $( customParams[ customParams.length - 1 ] ).data( "param_id" ) + 1,
            newParamName = "pys[event][facebook_custom_params][" + newParamId + "]";

clonedParam.data( "param_id", newParamId );
        $( "input.custom-param-name", clonedParam ).attr( "name", newParamName + "[name]" );
        $( "input.custom-param-value", clonedParam ).attr( "name", newParamName + "[value]" );
        $( "input.custom-param-selector", clonedParam ).attr( "name", newParamName + "[selector]" );
        $( "input.custom-param-dynamic-checkbox", clonedParam ).attr( "name", newParamName + "[dynamic]" );
        clonedParam.css( "display", "flex" );
        clonedParam.insertBefore( $( ".insert-marker", facebookParamsPanel ) );
    } );

/**
     * Pinterest Edit Event
     */
    if ( $( '#pys_event_pinterest_event_type' ).length > 0 ) {
        $( '#pys_event_pinterest_event_type' ).on( 'change', function () {
            updatePinterestEventParamsFrom()
        } )

$( '#pys_event_pinterest_params_enabled' ).on( 'change', function () {
            updatePinterestParamFormVisibility( true )
        } )

if ( $( '#pys_event_pinterest_event_type' ).val() === 'partner_defined' || $( '#pys_event_pinterest_event_type' ).val() === 'custom' ) {
            $( '.pinterest-custom-event-type' ).find('input[id*="_custom_event_type"]').attr('required', 'required')
            $( '.pinterest-custom-event-type' ).css( 'display', 'block' )
        } else {
            $( '.pinterest-custom-event-type' ).css( 'display', 'none' )
        }
        updatePinterestParamFormVisibility();
        _lastPinterestEventType = $( '#pys_event_pinterest_event_type' ).val();
    }

togglePinterestPanel();
    togglePinterestCustomEventType();
    togglePinterestParamsPanel();
    updatePinterestParamsPanelClass();
    togglePinterestCustomCurrency();
    $( "#pys_event_pinterest_enabled" ).on( 'click', function () {
        togglePinterestPanel();
    } );
    $( "#pys_event_pinterest_params_currency" ).on( 'change', function () {
        togglePinterestCustomCurrency();
    } );
    $( document ).on( 'click', '.add-pinterest-parameter', function () {
        var pinterestParamsPanel = $( "#pinterest_params_panel" ),
            customParams = $( ".pinterest-custom-param", pinterestParamsPanel ),
            clonedParam = $( customParams[ 0 ] ).clone( true ),
            newParamId = $( customParams[ customParams.length - 1 ] ).data( "param_id" ) + 1,
            newParamName = "pys[event][pinterest_custom_params][" + newParamId + "]";

toggleGoogleAnalyticsPanel();
    $( "#pys_event_ga_enabled" ).on( 'click', function () {
        toggleGoogleAnalyticsPanel();
    } );

toggleGoogleAdsPanel();
    toggleGoogleAdsCustomEventAction();
    $( "#pys_event_google_ads_enabled" ).on( 'click', function () {
        toggleGoogleAdsPanel();
    } );
    $( "#pys_event_google_ads_event_action" ).on( 'change', function () {
        toggleGoogleAdsCustomEventAction();
    } );
    $( document ).on( 'click', '.add-google_ads-parameter', function () {
        var googleAdsParamsPanel = $( "#google_ads_params_panel" ),
            customParams = $( ".google_ads-custom-param", googleAdsParamsPanel ),
            clonedParam = $( customParams[ 0 ] ).clone( true ),
            newParamId = $( customParams[ customParams.length - 1 ] ).data( "param_id" ) + 1,
            newParamName = "pys[event][google_ads_custom_params][" + newParamId + "]";

clonedParam.data( "param_id", newParamId );
        $( "input.custom-param-name", clonedParam ).attr( "name", newParamName + "[name]" );
        $( "input.custom-param-value", clonedParam ).attr( "name", newParamName + "[value]" );
        clonedParam.css( "display", "flex" );
        clonedParam.insertBefore( $( ".insert-marker", googleAdsParamsPanel ) );
    } );

/**
     * Bing Edit Event
     */
    if ( $( '#pys_event_bing_event_type' ).length > 0 ) {
        $( '#pys_event_bing_event_type' ).on( 'change', function () {
            updateBingEventParamsFrom()
        } )

$( '#pys_event_bing_params_enabled' ).on( 'change', function () {
            updateBingParamFormVisibility( true )
        } )

if ( $( '#pys_event_bing_event_type' ).val() === 'Custom' ) {
            $( '.bing-custom-event-type' ).find('input[id*="_custom_event_type"]').attr('required', 'required')
            $( '.bing-custom-event-type' ).css( 'display', 'block' )
        } else {
            $( '.bing-custom-event-type' ).find('input[id*="_custom_event_type"]').removeAttr('required')
            $( '.bing-custom-event-type' ).css( 'display', 'none' )
        }
        updateBingParamFormVisibility();
        _lastBingEventType = $( '#pys_event_bing_event_type' ).val();
    }

toggleBingPanel();
    $( "#pys_event_bing_enabled" ).on( 'click', function () {
        toggleBingPanel();
    } );
    $( document ).on( 'click', '.add-bing-parameter', function () {
        var bingParamsPanel = $( "#bing_params_panel" ),
            customParams = $( ".bing-custom-param", bingParamsPanel ),
            clonedParam = $( customParams[ 0 ] ).clone( true ),
            newParamId = $( customParams[ customParams.length - 1 ] ).data( "param_id" ) + 1,
            newParamName = "pys[event][bing_custom_params][" + newParamId + "]";

//add trigger
    $( '#pys-add-trigger .add-trigger' ).on( 'click', function ( e ) {
        e.preventDefault();
        cloneEventTrigger();
    } );

$( '#pys-add-condition .add-condition' ).on( 'click', function ( e ) {
        e.preventDefault();
        cloneEventCondition();
    } );

//check for empty triggers
    if ( $( '.pys_conditions_wrapper .condition_group' ).length === 0 ) {
        $( '#pys-add-condition .add-condition' ).trigger( 'click' );
    }

if ( $( '.pys_triggers_wrapper .trigger_group' ).length === 0 ) {
        $( '#pys-add-trigger .add-trigger' ).trigger( 'click' );
    }

function toggleMergedGA() {
        let merged_ga_enabled = $( "#pys_event_ga_ads_enabled" ),
            card = merged_ga_enabled.closest( '.card' ),
            configured = +card.attr( 'data-configured' ) === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( merged_ga_enabled.is( ":checked" ) ) {
                $( "#merged_analytics_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#merged_analytics_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $( '.gatags-not-configured-error' ).show();
            $( "#merged_analytics_panel" ).addClass( 'disabled' );
            merged_ga_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

toggleMergedGA();
    $( "#pys_event_ga_ads_enabled" ).on( 'click', function () {
        toggleMergedGA();
    } )

function toggleGTMPanel() {
        let event_gtm_enabled = $( "#pys_event_gtm_enabled" ),
            card = event_gtm_enabled.closest( '.card' ),
            configured = +card.attr( 'data-configured' ) === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( event_gtm_enabled.is( ":checked" ) ) {
                $( "#gtm_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#gtm_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $( '.gtm-not-configured-error' ).show();
            $( "#gtm_panel" ).addClass( 'disabled' );
            event_gtm_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

toggleGTMPanel();

$( "#pys_event_gtm_enabled" ).on( 'click', function () {
        toggleGTMPanel()
    } )

checkStepActive();
    calculateStepsNums();

$( '.woo_initiate_checkout_enabled input[type="checkbox"]' ).on( 'change', function () {
        checkStepActive()
    } );
    $( '.checkout_progress input[type="checkbox"]' ).on( 'change', function () {
        calculateStepsNums();
    } );

updatePurchaseFDPValue( $( "#pys_facebook_fdp_purchase_event_fire" ) );
    $( "#pys_facebook_fdp_purchase_event_fire" ).on( 'change', function () {

updatePurchaseFDPValue( this );
    } );

updateAddToCartFDPValue( $( "#pys_facebook_fdp_add_to_cart_event_fire" ) );
    $( "#pys_facebook_fdp_add_to_cart_event_fire" ).on( 'change', function () {

updateAddToCartFDPValue( this );
    } );

updatePostEventFields();

$( ".pys_event_trigger_type" ).on( 'change', function () {
        updatePostEventFields();
    } );

$(document).on('change', '.event_trigger .pys_number_page_visit_triggers, .event_trigger .pys_email_link_triggers', function() {
        if ( $( this ).val() === 'any' ) {
            $( this ).closest( '.event_trigger' ).find( '.trigger_url' ).hide();
        } else {
            $( this ).closest( '.event_trigger' ).find( '.trigger_url' ).show();
        }
    } );

$( ".action_old,.action_g4,.action_merged_g4" ).on( 'change', function () {
        let value = $( this ).val(),
            ga_param_list = '',
            ga_ads_param_list = '';

$( ".ga-param-list, .ga-ads-param-list" ).slideUp( 200, function () {
            $( this ).html( "" );
            for ( let i = 0; i < ga_fields.length; i++ ) {
                if ( ga_fields[ i ].name == value ) {
                    ga_fields[ i ].fields.forEach( function ( el ) {
                        console.log(el)
                        ga_param_list += '<div class="ga_param mb-24 param-field-wrapper" data-param-key="' + el.name + '">\n' +
                            '<div class="mb-8">' +
                            '<label class="custom-event-label">' + el.name + '</label>' +
                            '</div>' +
                            '<input type="hidden" name="pys[event][ga_params][' + el.name + '][input_type]" value="' + el.input_type + '">' +
                            '<input type="text" name="pys[event][ga_params][' + el.name + '][value]" class="input-standard param-value-input" placeholder="">' +
                            '<input type="text" name="pys[event][ga_params][' + el.name + '][selector]" class="input-standard param-selector-input" placeholder="CSS Selector (e.g., .price)" style="display: none;">' +
                            '<div class="mt-8 d-flex align-items-center">' +
                            '<input type="checkbox" name="pys[event][ga_params][' + el.name + '][dynamic]" value="1" class="param-dynamic-checkbox" />' +
                            '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                            '</div>' +
                            '</div>';
                        ga_ads_param_list += '<div class="ga_ads_param mb-24 param-field-wrapper" data-param-key="' + el.name + '">\n' +
                            '<div class="mb-8">' +
                            '<label class="custom-event-label">' + el.name + '</label>' +
                            '</div>' +
                            '<input type="hidden" name="pys[event][ga_ads_params][' + el.name + '][input_type]" value="' + el.input_type + '">' +
                            '<input type="text" name="pys[event][ga_ads_params][' + el.name + '][value]" class="input-standard param-value-input" placeholder="">' +
                            '<input type="text" name="pys[event][ga_ads_params][' + el.name + '][selector]" class="input-standard param-selector-input" placeholder="CSS Selector (e.g., .price)" style="display: none;">' +
                            '<div class="mt-8 d-flex align-items-center">' +
                            '<input type="checkbox" name="pys[event][ga_ads_params][' + el.name + '][dynamic]" value="1" class="param-dynamic-checkbox" />' +
                            '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                            '</div>' +
                            '</div>';
                    } );
                    break;
                }
            }

if ( ga_param_list.length > 0 ) {
                $( ".ga-param-list" ).append( ga_param_list ).slideDown( 400 );
            }

if ( ga_ads_param_list.length > 0 ) {
                $( ".ga-ads-param-list" ).append( ga_ads_param_list ).slideDown( 400 );
            }
        } );

let group = $( 'option:selected', this ).attr( 'group' );
        $( this ).parent().siblings( '#ga_ads_event_action_group' ).val( group );

if ( group == "Retail/Ecommerce" ) {
            $( ".ga_woo_info" ).slideDown( 400 );
        } else {
            $( ".ga_woo_info" ).slideUp( 400 );
        }
        updateGAActionSelector();
    } );

let action_merged_g4 = $( ".action_merged_g4" );

if ( action_merged_g4.length > 0 ) {
        var value = $( '.action_merged_g4' ).val();
        if ( $( ".ga-ads-param-list .ga_ads_param" ).length == 0 ) {
            for ( i = 0; i < ga_fields.length; i++ ) {
                if ( ga_fields[ i ].name == value ) {
                    ga_fields[ i ].fields.forEach( function ( el ) {
                        $( ".ga-ads-param-list" ).append( '<div class="row mb-3 ga_ads_param">\n' +
                            '<label class="col-5">' + el.name + '</label>' +
                            '<div class="col-4">' +
                            '<input type="text" name="pys[event][ga_ads_params][' + el.name + ']" class="form-control">' +
                            '</div>' +
                            ' </div>' );
                    } );
                    break;
                }
            }
        }

let group = $( 'option:selected', action_merged_g4 ).attr( 'group' );
        group = group ? group : "All Properties";
        action_merged_g4.parent().siblings( '#ga_ads_event_action_group' ).val( group );

if ( group == "Retail/Ecommerce" ) {
            $( ".ga_woo_info" ).attr( 'style', "display: block" );
        } else {
            $( ".ga_woo_info" ).attr( 'style', "display: none" );
        }
        updateGAActionSelector();
    }

let action_gtm = $( ".action_gtm" );

action_gtm.on( 'change', function () {
        let value = $( this ).val(),
            gtm_param_list = '';

$( ".gtm-param-list" ).slideUp(200, function () {
            $( this ).html( "" );

for ( let i = 0; i < gtm_fields.length; i++ ) {
                if ( gtm_fields[ i ].name == value ) {
                    gtm_fields[ i ].fields.forEach( function ( el ) {
                        gtm_param_list += '<div class="mb-24 gtm_param param-field-wrapper" data-param-key="' + el.name + '">' +
                            '<div class="mb-8">' +
                            '<label class="custom-event-label">' + el.name + '</label>' +
                            '</div>' +
                            '<input type="hidden" name="pys[event][gtm_params][' + el.name + '][input_type]" value="' + el.input_type + '">' +
                            '<input type="text" name="pys[event][gtm_params][' + el.name + '][value]" class="form-control input-standard param-value-input" placeholder="">' +
                            '<input type="text" name="pys[event][gtm_params][' + el.name + '][selector]" class="form-control input-standard param-selector-input" placeholder="CSS Selector (e.g., .price)" style="display: none;">' +
                            '<div class="mt-8 d-flex align-items-center">' +
                            '<input type="checkbox" name="pys[event][gtm_params][' + el.name + '][dynamic]" value="1" class="param-dynamic-checkbox" />' +
                            '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                            '</div>' +
                            '</div>';
                    } );
                    break;
                }
            }

if ( gtm_param_list.length > 0 ) {
                $( ".gtm-param-list" ).append( gtm_param_list ).slideDown( 400 );
            }
        });

let group = $( 'option:selected', this ).attr( 'group' );
        $( this ).parent().siblings( '#gtm_event_action_group' ).val( group );

if ( group == "Retail/Ecommerce" ) {
            $( ".gtm_woo_info" ).slideDown(400);
        } else {
            $( ".gtm_woo_info" ).slideUp(400);
        }
        updateGTMActionSelector();
    } )

if(action_gtm.length > 0) {
        let value = $('.action_gtm').val(),
            gtm_param_list = '';

if($(".gtm-param-list .gtm_param").length == 0) {
            for(let i=0;i<gtm_fields.length;i++){
                if(gtm_fields[i].name == value) {
                    gtm_fields[ i ].fields.forEach( function ( el ) {
                        gtm_param_list += '<div class="mb-24 gtm_param param-field-wrapper" data-param-key="' + el.name + '">' +
                            '<div class="mb-8">' +
                            '<label class="custom-event-label">' + el.name + '</label>' +
                            '</div>' +
                            '<input type="hidden" name="pys[event][gtm_params][' + el.name + '][input_type]" value="' + el.input_type + '">' +
                            '<input type="text" name="pys[event][gtm_params][' + el.name + '][value]" class="form-control input-standard param-value-input" placeholder="">' +
                            '<input type="text" name="pys[event][gtm_params][' + el.name + '][selector]" class="form-control input-standard param-selector-input" placeholder="CSS Selector (e.g., .price)" style="display: none;">' +
                            '<div class="mt-8 d-flex align-items-center">' +
                            '<input type="checkbox" name="pys[event][gtm_params][' + el.name + '][dynamic]" value="1" class="param-dynamic-checkbox" />' +
                            '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                            '</div>' +
                            '</div>';
                    } );
                    break;
                }
            }

if ( gtm_param_list.length > 0 ) {
                $( ".gtm-param-list" ).append( gtm_param_list ).slideDown( 400 );
            }
        }

let group = $( 'option:selected', action_gtm ).attr( 'group' );
        group = group ? group : "All Properties";
        action_gtm.parent().siblings( '#gtm_event_action_group' ).val( group );

if($('option:selected', this).attr('group') == "Retail/Ecommerce") {
            $(".gtm_woo_info").attr('style',"display: block");
        } else {
            $(".gtm_woo_info").attr('style',"display: none");
        }
        updateGTMActionSelector();
    }

$( '.gtm-custom-param-list' ).on( "click", '.gtm-custom-param .button-remove-row', function () {
        let messageContainer = $( "#custom-param-message" );

$( this ).parents( '.gtm-custom-param' ).remove();
        if ( messageContainer.length && $( ".gtm-custom-param-list .gtm-custom-param" ).length < 5 ) {
            messageContainer.slideUp( 400 );
        }
    } );

$( document ).on( 'click', '.add-gtm-parameter', function () {
        let currentCount = $( ".gtm-custom-param-list .gtm-custom-param" ).length,
            messageContainer = $( "#custom-param-message" );

if ( currentCount < 5 ) {
            let index = currentCount + 1;
            $( ".gtm-custom-param-list" ).append( '<div class="gtm-custom-param" data-param_id="' + index + '">' +
                '<div class="mt-24">' +
                '<div class="d-flex align-items-center">' +
                '<div>' +
                '<input type="text" placeholder="Enter name" class="custom-param-name input-standard"' +
                ' name="pys[event][gtm_custom_params][' + index + '][name]"' +
                ' value="">' +
                '</div>' +
                '<div class="ml-16" style="flex: 1;">' +
                '<input type="text" placeholder="Enter value" class="custom-param-value input-standard"' +
                ' name="pys[event][gtm_custom_params][' + index + '][value]"' +
                ' value="" style="width: 100%;">' +
                '</div>' +
                '<div class="ml-16" style="flex: 1; display: none;">' +
                '<input type="text" placeholder="CSS Selector (e.g., .price)" class="custom-param-selector input-standard"' +
                ' name="pys[event][gtm_custom_params][' + index + '][selector]"' +
                ' value="" style="width: 100%;">' +
                '</div>' +
                '<button type="button" class="btn button-remove-row">' +
                '<i class="icon-delete" aria-hidden="true"></i>' +
                '</button>' +
                '</div>' +
                '<div class="mt-8 d-flex align-items-center">' +
                '<input type="checkbox" name="pys[event][gtm_custom_params][' + index + '][dynamic]" value="1" class="custom-param-dynamic-checkbox" />' +
                '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                '</div>' +
                '</div>' +
                '</div>' );
            if ( messageContainer.length ) {
                messageContainer.slideUp( 400 );
            }
        } else {
            if ( messageContainer.length ) {
                messageContainer.text( "You can add up to 5 custom parameters only." );
                messageContainer.slideDown( 400 );
            } else {
                $(".gtm-custom-param-list").after('<div class="critical_message mt-24" id="custom-param-message">You can add up to 5 custom parameters only.</div>');
            }
        }
    } );

$('.ga-custom-param-list').on("click",'.ga-custom-param .remove-row',function(){
       $(this).parents('.ga-custom-param').remove();
    });

$( document ).on( 'click', '.add-ga-ads-parameter', function () {
        let index = $( ".ga-ads-custom-param-list .ga-ads-custom-param" ).length + 1;

$( ".ga-ads-custom-param-list" ).append( '<div class="ga-ads-custom-param" data-param_id="' + index + '">' +
            '<div class="mt-24">' +
            '<div class="d-flex align-items-center">' +
            '<div>' +
            '<input type="text" placeholder="Enter name" class="custom-param-name input-standard"' +
            ' name="pys[event][ga_ads_custom_params][' + index + '][name]"' +
            ' value="">' +
            '</div>' +
            '<div class="ml-16" style="flex: 1;">' +
            '<input type="text" placeholder="Enter value" class="custom-param-value input-standard"' +
            ' name="pys[event][ga_ads_custom_params][' + index + '][value]"' +
            ' value="" style="width: 100%;">' +
            '</div>' +
            '<div class="ml-16" style="flex: 1; display: none;">' +
            '<input type="text" placeholder="CSS Selector (e.g., .price)" class="custom-param-selector input-standard"' +
            ' name="pys[event][ga_ads_custom_params][' + index + '][selector]"' +
            ' value="" style="width: 100%;">' +
            '</div>' +
            '<div>' +
            '<button type="button" class="btn button-remove-row">' +
            '<i class="icon-delete" aria-hidden="true"></i>' +
            '</button>' +
            '</div>' +
            '</div>' +
            '<div class="mt-8 d-flex align-items-center">' +
            '<input type="checkbox" name="pys[event][ga_ads_custom_params][' + index + '][dynamic]" value="1" class="custom-param-dynamic-checkbox" />' +
            '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
            '</div>' +
            '</div>' +
            '</div>' );
    } );

$( "#import_events_file" ).on( 'change', function () {
        var fd = new FormData();
        fd.append( "_wpnonce", $( "#import_events_file_nonce" ).val() );
        fd.append( "action", "pys_import_events" );
        fd.append( $( this ).attr( "name" ), $( this ).prop( 'files' )[ 0 ] );

$.ajax( {
            url: ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function ( data ) {
                if ( data.success ) {
                    location.reload();
                } else {
                    alert( data.data )
                }

}, error: function ( data ) {
                console.log( data );
            }
        } );
    } );

function updatePostEventFields() {
        const arr_form_trigger = [ "CF7", "fluentform", "formidable", "forminator", "gravity", "ninjaform", "wpforms", "wsform" ],
            triggerGroup = $( ".trigger_group" ),
            fire_once = $( "#fire_event_once" );

let available_triggers = [];
        fire_once.show();

if ( triggerGroup.length > 0 ) {
            $.each( triggerGroup, function ( index, trigger ) {
                trigger = $( trigger );

let trigger_type = trigger.find( '.pys_event_trigger_type' ).val(),
                    embedded_video_view = trigger.find( ".embedded_video_view" ),
                    post_type = trigger.find( ".trigger_post_type" ),
                    post_type_error = trigger.find( ".post_type_error" ),
                    video_view_error = trigger.find( ".video_view_error" ),
                    elementor_form = trigger.find( ".elementor_form" ),
                    elementor_form_error = trigger.find( ".elementor_form_error" );

available_triggers.push( trigger_type );

trigger.find( ".trigger_number_page_visit" ).css( "display", "none" );
                if ( trigger_type == "post_type" ) {
                    trigger.find( ".event-delay" ).css( "display", "flex" );
                    post_type.show();
                    post_type_error.show();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide()
                } else if ( trigger_type == "number_page_visit" ) {
                    trigger.find( ".trigger_number_page_visit" ).css( "display", "flex" );
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                } else if ( trigger_type == "gads_phone_conversion" ) {
	                trigger.find( ".trigger_gads_phone_conversion" ).css( "display", "flex" );
	                post_type_error.hide();
	                post_type.hide();
	                embedded_video_view.hide();
	                video_view_error.hide();
	                elementor_form.hide();
	                elementor_form_error.hide();
                } else if(trigger_type == "home_page") {
                    trigger.find(".event-delay").css("display", "flex");
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                } else if(trigger_type == "add_to_cart") {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                } else if(trigger_type == "purchase") {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                } else if(trigger_type == "elementor_form") {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.show();
                    elementor_form_error.hide();
                } else if ( trigger_type == "video_view" ) {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.show();
                    video_view_error.hide();
                } else if($.inArray(trigger_type, arr_form_trigger) != -1 || trigger_type == "email_link") {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                } else {
                    post_type_error.hide();
                    post_type.hide();
                    embedded_video_view.hide();
                    video_view_error.hide();
                    elementor_form.hide();
                    elementor_form_error.hide();
                }
            } )
        }

if ( available_triggers.length > 0 ) {

let i = available_triggers.indexOf( 'number_page_visit' ),
                number_page_visit = [];

while ( i !== -1 ) {
                number_page_visit.push( i );
                i = available_triggers.indexOf( 'number_page_visit', i + 1 );
            }

if ( available_triggers.length === number_page_visit.length ) {
                fire_once.hide();
            }
        }

let hasGadsPhoneTrigger = available_triggers.indexOf( 'gads_phone_conversion' ) !== -1;
        $( '.ga_ads_conversion_label_wrap' ).toggle( !hasGadsPhoneTrigger );
        $( '.ga_ads_phone_numbers_wrap' ).toggle( hasGadsPhoneTrigger );
        updateGadsPhoneRemoveButtons();
        applyGadsPhoneTriggerLock( hasGadsPhoneTrigger );
    }

function applyGadsPhoneTriggerLock( active ) {
        let $addBtn = $( '#pys-add-trigger .add-trigger' ),
	        pys_event_ga_ads_track_single_woo_data = $('#pys_event_ga_ads_track_single_woo_data'),
	        pys_event_ga_ads_track_cart_woo_data = $('#pys_event_ga_ads_track_cart_woo_data'),
	        pys_ga_ads_track_woo_data = $('#pys_ga_ads_track_woo_data');
        $addBtn.prop( 'disabled', !!active )
            .toggleClass( 'disabled', !!active )
            .css( {
                opacity: active ? 0.4 : '',
                cursor: active ? 'not-allowed' : '',
                'pointer-events': active ? 'none' : ''
            } );

let new_pixel_options = [];
        if ( active ) {
            // Keep only the first gads_phone_conversion trigger, drop the rest
            let $phoneTrigger = $( '.pys_triggers_wrapper .trigger_group' ).filter( function () {
                return $( this ).find( '.pys_event_trigger_type' ).val() === 'gads_phone_conversion';
            } ).first();
            if ( $phoneTrigger.length > 0 ) {
                $( '.pys_triggers_wrapper .trigger_group' ).not( $phoneTrigger ).remove();
            }

new_pixel_options = pysAdmin?.google_ads?.conversion_ids || [];

pys_event_ga_ads_track_single_woo_data.prop( 'checked', false ).prop( 'disabled', true );
	        pys_event_ga_ads_track_cart_woo_data.prop( 'checked', false ).prop( 'disabled', true );
	        pys_ga_ads_track_woo_data.hide();

} else {
	        new_pixel_options = pysAdmin?.ga_merged?.ids || [];

pys_event_ga_ads_track_single_woo_data.prop( 'disabled', false );
	        pys_event_ga_ads_track_cart_woo_data.prop( 'disabled', false );
	        pys_ga_ads_track_woo_data.show();
        }

let pixels_selector = $( '#pys_ga_ads_pixel_id_event' );

let previouslySelected = pixels_selector.val();
	    if ( previouslySelected === null || previouslySelected === undefined ) {
		    previouslySelected = [];
	    } else if ( !Array.isArray( previouslySelected ) ) {
		    previouslySelected = [ previouslySelected ];
	    }
	    previouslySelected = previouslySelected.map( String );

pixels_selector.empty();

Object.entries( new_pixel_options ).forEach( ( [ key, option ] ) => {
		    const isSelected = previouslySelected.indexOf( String( key ) ) !== -1;
		    const newOption = new Option( option, key, isSelected, isSelected );
		    pixels_selector.append( newOption );
	    } );

pixels_selector.trigger( 'change' );

// Map of non-Google pixel enable inputs to their panel ids
        let pixelMap = [
            { input: '#pys_event_facebook_enabled',  panel: '#facebook_panel'          },
            { input: '#pys_event_pinterest_enabled', panel: '#pinterest_panel'         },
            { input: '#pys_event_reddit_enabled',    panel: '#reddit_panel'            },
            { input: '#pys_event_bing_enabled',      panel: '#bing_panel'              },
            { input: '#pys_event_tiktok_enabled',    panel: '#tiktok_panel'            },
            { input: '#pys_event_gtm_enabled',       panel: '#gtm_panel'               }
        ];

$.each( pixelMap, function ( i, item ) {
            let $input = $( item.input );
            if ( $input.length === 0 ) {
                return;
            }
            let $card = $input.closest( '.card' ),
                $status = $card.find( '.custom-event-pixel-status .pixel-status' );

if ( active ) {
                if ( $input.is( ':checked' ) ) {
                    $input.prop( 'checked', false );
                }
                $status.find( '.pixel-enabled' ).hide();
                $status.find( '.pixel-disabled' ).show();
                $( item.panel ).addClass( 'disabled' );
                $card.hide();
            } else {
                $card.show();
            }
        } );
    }

function updateGAFields() {
        var allValues = $( "#pys_ga_pixel_id_event option" ).map( function () {
            return $( this ).val();
        } ).get();
        var selectedValues = $( "#pys_ga_pixel_id_event" ).val();

var hasAWElement = selectedValues && ( selectedValues.some( value => value.startsWith( 'AW' ) ) || ( selectedValues.includes( 'all' ) && allValues.some( value => value.startsWith( 'AW' ) ) ) );
        if ( hasAWElement ) {
            $( '.conversion_label' ).css( 'display', 'flex' );
        } else {
            $( '.conversion_label' ).hide();
        }

}

if ( $( "#pys_ga_pixel_id_event" ).length > 0 ) {
        $( "#pys_ga_pixel_id_event" ).on( 'change', function () {
            updateGAFields()
        } )
        updateGAFields();
    }

function updateGAADSFields() {
        var allValues = $( "#pys_ga_ads_pixel_id_event option" ).map( function () {
            return $( this ).val();
        } ).get();
        var selectedValues = $( "#pys_ga_ads_pixel_id_event" ).val();

}

if ( $( "#pys_ga_ads_pixel_id_event" ).length > 0 ) {
        $( "#pys_ga_ads_pixel_id_event" ).on( 'change', function () {
            updateGAADSFields()
        } )
        updateGAADSFields();
    }

$( document ).on( 'change', '.ga_tracking_id,#pys_ga_tracking_id_0', function () {
        let text = '<span class="not-support-tag form-text text-small">We identified this tag as a Google Analytics Universal property.</span>'
        if ( $( this ).val().indexOf( 'G' ) === 0 ) {
            text = '<span class="form-text text-small">We identified this tag as a GA4 property.</span>';
        }
        $( this ).next().html( text );
    } );

function renderField( data ) {
        if ( data.type === "input" ) {
            // Extract parameter key from name (e.g., "pys[event][facebook_params][value]" -> "value")
            var paramKey = data.label;
            var baseName = data.name.replace('[value]', '').replace('[selector]', '').replace('[dynamic]', '').replace('[input_type]', '');

return '<div class="mt-24 param-field-wrapper" data-param-key="' + paramKey + '">' +
                '<div class="mb-8">' +
                '<label class="custom-event-label">' + data.label + '</label>' +
                '</div>' +
                '<input type="hidden" name="' + baseName + '[input_type]" value="' + data.input_type + '">' +
                // Value input (shown when dynamic mode is OFF)
                '<input type="text" name="' + baseName + '[value]" value="" placeholder="" class="input-standard param-value-input">' +
                // Selector input (hidden by default, shown when dynamic mode is ON)
                '<input type="text" name="' + baseName + '[selector]" value="" placeholder="CSS Selector (e.g., .price)" class="input-standard param-selector-input" style="display: none;">' +
                // Dynamic checkbox
                '<div class="mt-8 d-flex align-items-center">' +
                '<input type="checkbox" name="' + baseName + '[dynamic]" value="1" class="param-dynamic-checkbox" />' +
                '<label class="ml-8" style="font-size: 13px; color: #666;">Use dynamic value from page</label>' +
                '</div>' +
                '</div>';
        }
    }

/**
     * TikTok Edit Event
     */
    if ( $( '#pys_event_tiktok_event_type' ).length > 0 ) {
        $( '#pys_event_tiktok_event_type' ).on( 'change', function () {
            updateTikTokEventParamsFrom()
        } )

$( '#pys_event_tiktok_params_enabled' ).on( 'change', function () {
            updateTiktokParamFormVisibility( true )
        } )

if ( $( '#pys_event_tiktok_event_type' ).val() === 'CustomEvent' ) {
            $( '.tiktok-custom-event-type' ).find('input[id*="_custom_event_type"]').attr('required', 'required')
            $( '.tiktok-custom-event-type' ).css( 'display', 'block' )
        } else {
            $( '.tiktok-custom-event-type' ).css( 'display', 'none' )
        }
        updateTiktokParamFormVisibility();
        _lastTikTokEventType = $( '#pys_event_tiktok_event_type' ).val();
    }

function updateTikTokEventParamsFrom() {
        let $select = $( '#pys_event_tiktok_event_type' );
        if ( $select.length === 0 ) return;

let currentEventType = $select.val();
        let $panel = $( '#tiktok_params_panel' );
        let $custom = $( '.tiktok-custom-event-type' );
        
        if ( currentEventType === _lastTikTokEventType && $panel.children('.param-field-wrapper').length > 0 ) {
            if ( $( '#pys_event_tiktok_params_enabled' ).is( ":checked" ) ) {
                $panel.slideDown( 400 );
            }
            return;
        }

_lastTikTokEventType = currentEventType;

if ( currentEventType === 'CustomEvent' ) {
            $custom.find('input[id*="_custom_event_type"]').attr('required', 'required');

$custom.slideDown( 400 );
            $panel.slideUp( 400, function () {
                // Save custom params before clearing
                let customParamsHtml = $( '.tiktok-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-tiktok-parameter)', $panel ).clone();

$( this ).html( '' );

if ( fields.length === 0 || !$( '#pys_event_tiktok_params_enabled' ).is( ":checked" ) ) {
                $panel.slideUp( 400, function () {
                    // Save custom params before clearing
                    let customParamsHtml = $( '.tiktok-custom-param', $panel ).clone();
                    let insertMarker = $( '.insert-marker', $panel ).clone();
                    let addButton = $( '.mt-24:has(.add-tiktok-parameter)', $panel ).clone();

$( this ).html( '' );

// Restore custom params
                    customParamsHtml.each(function() {
                        $panel.append( $(this) );
                    });
                    $panel.append( insertMarker );
                    $panel.append( addButton );
                } );
            } else {
                // Save custom params before clearing
                let customParamsHtml = $( '.tiktok-custom-param', $panel ).clone();
                let insertMarker = $( '.insert-marker', $panel ).clone();
                let addButton = $( '.mt-24:has(.add-tiktok-parameter)', $panel ).clone();

$panel.html( '' )
                fields.forEach( function ( item ) {
                    $panel.append( renderField( item ) )
                } );

$panel.slideDown( 400 );
            }

$custom.slideUp( 400 );
        }
    }

function updateTikTokPanelVisibility() {
        let tiktok_enabled = $( "#pys_event_tiktok_enabled" ),
            card = tiktok_enabled.closest( '.card' ),
            configured = +card.attr( 'data-configured' ) === 1,
            pixel_status = card.find( '.custom-event-pixel-status .pixel-status' );

if ( configured ) {
            if ( tiktok_enabled.is( ":checked" ) ) {
                $( "#tiktok_panel" ).removeClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).show();
                pixel_status.find( '.pixel-disabled' ).hide();
            } else {
                $( "#tiktok_panel" ).addClass( 'disabled' );
                pixel_status.find( '.pixel-enabled' ).hide();
                pixel_status.find( '.pixel-disabled' ).show();
            }
        } else {
            $( '.tiktok-not-configured-error' ).show();
            $( "#tiktok_panel" ).addClass( 'disabled' );
            tiktok_enabled.prop( 'checked', false ).prop( 'disabled', true );
        }
    }

updateTikTokPanelVisibility()
    $( "#pys_event_tiktok_enabled" ).on( 'click', function () {
        updateTikTokPanelVisibility()
    } )
    $( document ).on( 'click', '.add-tiktok-parameter', function () {
        var tiktokParamsPanel = $( "#tiktok_params_panel" ),
            customParams = $( ".tiktok-custom-param", tiktokParamsPanel ),
            clonedParam = $( customParams[ 0 ] ).clone( true ),
            newParamId = $( customParams[ customParams.length - 1 ] ).data( "param_id" ) + 1,
            newParamName = "pys[event][tiktok_custom_params][" + newParamId + "]";

/**
     * Dynamic Parameter Mode Toggle
     * Handles switching between static value input and dynamic selector input
     */
    $( document ).on( 'change', '.param-dynamic-checkbox, .custom-param-dynamic-checkbox', function () {
        var $checkbox = $( this );
        var $wrapper = $checkbox.closest( '.param-field-wrapper, .facebook-custom-param, .tiktok-custom-param, .pinterest-custom-param, .bing-custom-param, .reddit-custom-param, .ga-ads-custom-param, .gtm-custom-param' );
        var isChecked = $checkbox.is( ':checked' );

if ( isChecked ) {
            // Dynamic mode: hide value input, show selector input
            $wrapper.find( '.param-value-input, .custom-param-value' ).hide();
            $wrapper.find( '.param-value-input, .custom-param-value' ).parent().hide();
            $wrapper.find( '.param-selector-input, .custom-param-selector' ).parent().show();
            $wrapper.find( '.param-selector-input, .custom-param-selector' ).show();
        } else {
            // Static mode: show value input, hide selector input
            $wrapper.find( '.param-selector-input, .custom-param-selector' ).hide();
            $wrapper.find( '.param-selector-input, .custom-param-selector' ).parent().hide();
            $wrapper.find( '.param-value-input, .custom-param-value' ).parent().show();
            $wrapper.find( '.param-value-input, .custom-param-value' ).show();
        }
    } );

$( "select.pys_hidden_content" ).each( function ( el ) {
        hideShowHiddenData( $( this ) )
    } )

$( "select.pys_hidden_content" ).on( "change", function () {
        hideShowHiddenData( $( this ) )
    } )

function hideShowHiddenData( $elSwitch ) {
        var point = $elSwitch.data( "hidden" );
        var value = $elSwitch.val();

$( point ).each( function () {
            if ( $( this ).data( "hide_value" ) === value ) {
                $( this ).show();
            } else {
                $( this ).hide()
            }
        } )
    }

$( "#pys_core_automatic_events_enabled, #pys_core_fdp_enabled" ).on( "change", function () {
        let $cardHeader = $( this ).parents( ".card-header" ),
            $headSwitch = $cardHeader.find( ".card-collapse" ),
            $body = $( this ).parents( ".card" ).children( ".card-body" );
        if ( $( this ).is( ':checked' ) ) {
            $headSwitch.css( "display", "block" );
        } else {
            $body.slideUp( 400 );
            $headSwitch.css( "display", "none" );
            $cardHeader.removeClass( "header-opened" );
        }
    } )

//toggle card (dashboard)
    let $disable_card = $( "#pys .disable-card .custom-switch-input" );
    $disable_card.on( "change", function () {
        toggleDashboardAutomaticEventsCard( $( this ) );
    } )

$disable_card.each( function () {
        toggleDashboardAutomaticEventsCard( $( this ) );
    } )

function toggleDashboardAutomaticEventsCard( $card ) {
        let $header = $card.closest( ".disable-card-wrap" ),
            $headSwitch = $header.find( ".card-collapse" ),
            $body = $card.closest( ".card" ).children( ".card-body" ),
            $disable_card = $card.closest( ".disable-card" );

if ( $card.is( ':checked' ) ) {
            $headSwitch.css( "display", "flex" );
            $disable_card.removeClass( "disabled" );
        } else {
            $body.removeClass( "show" );
            $body.slideUp( 400 );
            $headSwitch.css( "display", "none" );
            $header.removeClass( "header-opened" );
            $disable_card.addClass( "disabled" );
        }
    }

$("#pys").on("click", ".copy_text", function () {
        let textToCopy = $(this).text();
        let popoverIcon = $(this).find(".copy-icon")[0];

navigator.clipboard.writeText(textToCopy).then(() => {
            const instance = popoverIcon._tippy;
            if (instance) {
                instance.show();
            }
        }).catch(err => console.error("Error copied: ", err));
    })

$( "#pys .pys_utm_builder .utm, #pys .pys_utm_builder .site_url" ).on( "input", function () {

updateBuilderUrl()
    } )

function updateBuilderUrl() {
        let utms = ""
        let urls = $( "#pys .pys_utm_builder .site_url" ).val()
        $( "#pys .pys_utm_builder .utm" ).each( function () {
            if ( $( this ).val() != "" ) {
                if ( utms === "" ) {
                    utms = $( this ).data( 'type' ) + "=" + $( this ).val()
                } else {
                    utms += "&" + $( this ).data( 'type' ) + "=" + $( this ).val()
                }
            }
        } )
        if ( utms != "" ) {
            utms = "?" + utms
        }
        $( "#pys .build_utms_with_url span.insert" ).text( urls + utms )
        $( "#pys .build_utms span.insert" ).text( utms )
    }

updateBuilderUrl()
    $body = $( 'body' );
    $body.on( 'change', '.plate #pys_ga_use_server_api', function () {
        if ( this.checked == '1' ) {
            $( this ).parents( '.plate' ).find( '#pys_ga_server_access_api_token_0' ).removeAttr( 'disabled' )
        } else {
            $( this ).parents( '.plate' ).find( '#pys_ga_server_access_api_token_0' ).attr( 'disabled', 'disabled' )
        }
    } )

/**
     * Video trigger handler
     */
    $( document ).on( 'click', '.embedded_video_view .pys-scan-video', function ( e ) {
        let event_trigger = $( this ).closest( '.embedded_video_view' ),
            urls = event_trigger.find( '.pys_video_view_urls_event' ).val(),
            error = event_trigger.find( '.video_view_error' ),
            message = error.find( '.event_error' ),
            button = $( this ),
            video_view_triggers = event_trigger.find( '.pys_video_view_triggers' );
        error.slideUp( 400 );

if ( urls.length > 0 ) {

let site_url = window.location.origin,
                valid = true,
                not_valid_urls = [],
                not_valid_message = 'The URLs " %s " are not related to the site: ' + site_url + '. Please enter valid video URLs';

urls.forEach( function ( url ) {
                if ( !url.startsWith( site_url ) ) {
                    valid = false;
                    not_valid_urls.push( url );
                }
            } )

if ( !valid ) {
                not_valid_message = not_valid_message.replace( '%s', not_valid_urls.join( ', ' ) );
                message.html( not_valid_message );
                error.slideDown( 400 );
                return;
            }
            button.html( 'Scanning...' ).prop( 'disabled', true );

let data = {
                _wpnonce: $( '#_wpnonce' ).val(),
                action: 'pys_scan_video',
                urls: urls
            };

$.ajax( {
                url: ajaxurl,
                data: data,
                type: 'POST',
                success: function ( data ) {
                    if ( data.success ) {
                        event_trigger.find( '.pys_event_video_view_data' ).val( JSON.stringify( data.data ) );
                        let video_triggers = event_trigger.find( '.pys_video_view_triggers_event' );
                        video_triggers.find( 'option' ).remove();
                        if ( data.data.length > 0 ) {
                            Object.entries( data.data ).forEach( function ( [ key, item ] ) {
                                video_triggers.append( $( '<option>', {
                                    value: item.id,
                                    text: item.title
                                } ) );
                            } )
                            video_view_triggers.slideDown( 400 );
                            video_triggers.pysselect2( 'open' );
                        } else {
                            message.html( 'These URLs do not contain any videos' );
                            error.slideDown( 400 );
                            video_view_triggers.slideUp( 400 );
                        }
                    } else {
                        message.html( 'Something went wrong' );
                        error.slideDown( 400 );
                        video_view_triggers.slideUp( 400 );
                    }
                },
                error: function ( data ) {
                    message.html( data.responseJSON.data );
                    error.slideDown( 400 );
                    video_view_triggers.slideUp( 400 );
                    console.log( data );
                },
                complete: function () {
                    button.html( button.val() ).prop( 'disabled', false );
                }
            } );
        } else {
            message.html( 'Please enter video URLs' );
            error.slideDown( 400 );
            video_view_triggers.slideUp( 400 );
        }
    } )

/**
     * Video speed scan handler
     */
    $( document ).on( 'click', '.embedded_video_speed .pys-scan-video', function ( e ) {
        let event_trigger = $( this ).closest( '.embedded_video_speed' ),
            urls = event_trigger.find( '.pys_video_speed_urls_event' ).val(),
            error = event_trigger.find( '.video_speed_error' ),
            message = error.find( '.event_error' ),
            button = $( this ),
            video_speed_triggers = event_trigger.find( '.pys_video_speed_triggers' );
        error.slideUp( 400 );

if ( urls && urls.length > 0 ) {
            let site_url = window.location.origin,
                urlArray = Array.isArray( urls ) ? urls : [ urls ];

let validUrls = urlArray.filter( function ( url ) {
                return url.indexOf( site_url ) === 0;
            } );
            if ( validUrls.length === 0 ) {
                message.html( 'Please enter valid URLs from this site' );
                error.slideDown( 400 );
                return;
            }

button.html( 'Scanning...' ).prop( 'disabled', true );

let data = {
                _wpnonce: $( '#_wpnonce' ).val(),
                action: 'pys_scan_video',
                urls: urls
            };

$.ajax( {
                url: ajaxurl,
                data: data,
                type: 'POST',
                success: function ( data ) {
                    if ( data.success ) {
                        event_trigger.find( '.pys_event_video_speed_data' ).val( JSON.stringify( data.data ) );
                        let video_triggers = event_trigger.find( '.pys_video_speed_triggers_event' );
                        video_triggers.find( 'option' ).remove();
                        if ( data.data.length > 0 ) {
                            Object.entries( data.data ).forEach( function ( [ key, item ] ) {
                                video_triggers.append( $( '<option>', {
                                    value: item.id,
                                    text: item.title || item.id
                                } ) );
                            } );
                            video_speed_triggers.slideDown( 400 );
                            video_triggers.pysselect2( 'open' );
                        } else {
                            message.html( 'These URLs do not contain any videos' );
                            error.slideDown( 400 );
                            video_speed_triggers.slideUp( 400 );
                        }
                    } else {
                        message.html( 'Something went wrong' );
                        error.slideDown( 400 );
                        video_speed_triggers.slideUp( 400 );
                    }
                },
                error: function ( data ) {
                    message.html( data.responseJSON ? data.responseJSON.data : 'Request failed' );
                    error.slideDown( 400 );
                    video_speed_triggers.slideUp( 400 );
                    console.log( data );
                },
                complete: function () {
                    button.html( button.val() ).prop( 'disabled', false );
                }
            } );
        } else {
            message.html( 'Please enter video URLs' );
            error.slideDown( 400 );
            video_speed_triggers.slideUp( 400 );
        }
    } )

/**
     * Elementor forms handler
     */
    $( document ).on( 'click', '.pys-scan-elementor-form', function ( e ) {
        let event_trigger = $( this ).closest( '.elementor_form' ),
            urls = event_trigger.find( '.pys_elementor_form_urls_event' ).val(),
            error = event_trigger.find( '.elementor_form_error' ),
            message = error.find( '.event_error' ),
            button = $( this ),
            elementor_form_triggers = event_trigger.find( '.pys_elementor_form_triggers' );

error.slideUp( 400 );

if ( urls.length > 0 ) {

let site_url = window.location.origin,
                valid = true,
                not_valid_urls = [],
                not_valid_message = 'The URLs " %s " are not related to the site: ' + site_url + '. Please enter valid Elementor form URLs';

let data = {
                _wpnonce: $( '#_wpnonce' ).val(),
                action: 'pys_scan_elementor_form',
                urls: urls
            };

$.ajax( {
                url: ajaxurl,
                data: data,
                type: 'POST',
                success: function ( data ) {
                    if ( data.success ) {

$( '.pys_event_elementor_form_data' ).val( JSON.stringify( data.data ) );
                        let form_triggers = event_trigger.find( '.pys_elementor_form_triggers_event' );
                        form_triggers.find( 'option' ).remove();
                        if ( data.data.length > 0 ) {
                            Object.entries( data.data ).forEach( function ( [ key, item ] ) {
                                form_triggers.append( $( '<option>', {
                                    value: item.id,
                                    text: item.title + ' - ID  ' + item.id
                                } ) );
                            } )
                            elementor_form_triggers.slideDown( 400 );
                            form_triggers.pysselect2( 'open' );
                        } else {
                            message.html( 'These URLs do not contain any forms' );
                            error.slideDown( 400 );
                            elementor_form_triggers.slideUp( 400 );
                        }
                    } else {
                        message.html( 'Something went wrong' );
                        error.slideDown( 400 );
                        elementor_form_triggers.slideUp( 400 );
                    }
                },
                error: function ( data ) {
                    message.html( data.responseJSON.data );
                    error.slideDown( 400 );
                    elementor_form_triggers.slideUp( 400 );
                    console.log( data );
                },
                complete: function () {
                    button.html( button.val() ).prop( 'disabled', false );
                }
            } );
        } else {
            message.html( 'Please enter form pages URLs' );
            error.slideDown( 400 );
            elementor_form_triggers.slideUp( 400 );
        }
    } );

/**
     * Any forms handler
     */

$(document).on('click', '.pys-scan-forms', function (e) {
        const panel = $(this).closest('.form_field_panel');
        const urlsInput = panel.find('.pys_form_field_urls_event');
        const errorBox = panel.find('.elementor_form_error');
        const messageBox = errorBox.find('.event_error');
        const button = $(this);
        const formTriggersBlock = panel.find('.pys_form_field_triggers');
        const formTriggersSelect = panel.find('.pys_form_field_triggers_event');

const urls = urlsInput.val();
        errorBox.slideUp(400);

if (!urls || urls.length === 0) {
            messageBox.html('Please enter form pages URLs');
            errorBox.slideDown(400);
            formTriggersBlock.slideUp(400);
            return;
        }

// Проверка: все ли URL принадлежат текущему сайту
        const siteUrl = window.location.origin;
        const notValidUrls = urls.filter(url => !url.startsWith(siteUrl));

if (notValidUrls.length > 0) {
            const errorText = `The URLs "${notValidUrls.join(', ')}" are not related to the site: ${siteUrl}. Please enter valid Elementor form URLs.`;
            messageBox.html(errorText);
            errorBox.slideDown(400);
            return;
        }

// Запускаем скан
        button.html('Scanning...');
        const ajaxData = {
            _wpnonce: $('#_wpnonce').val(),
            action: 'pys_scan_any_form',
            urls: urls
        };

$.ajax({
            url: ajaxurl,
            type: 'POST',
            data: ajaxData,

success: function (response) {
                if (!response.success) {
                    messageBox.html('Something went wrong');
                    errorBox.slideDown(400);
                    formTriggersBlock.slideUp(400);
                    return;
                }

// Сохраняем полученные формы
                panel.find( '.pys_event_form_field_data' ).val( JSON.stringify( response.data ) );
                dataForms = response.data;
                formTriggersSelect.empty();

// Заполняем селект форм
                let formsFound = false;
                dataForms.forEach(item => {
                    Object.values(item.forms).forEach(form => {
                        formsFound = true;
                        formTriggersSelect.append($('<option>', {
                            value: form.selector,
                            text: form.title,
                            'data-selector': form.selector
                        }));
                    });
                });

if (formsFound) {
                    formTriggersBlock.slideDown(400);
                    formTriggersSelect.pysselect2({
                        templateResult: function (data) {
                            if (!data.id) return data.text;

const $el = $(data.element);
                            const selector = $el.data('selector');

return $(`
                            <div>
                                <strong>${data.text}</strong>
                                ${selector ? `<div style="font-size: 0.75em; color: #aaa;">${selector}</div>` : ''}
                            </div>
                        `);
                        },
                        templateSelection: function (data) {
                            return data.text;
                        }
                    });
                } else {
                    messageBox.html('These URLs do not contain any forms');
                    errorBox.slideDown(400);
                    formTriggersBlock.slideUp(400);
                }
            },

error: function (xhr) {
                const errorText = xhr?.responseJSON?.data || 'Unexpected error';
                messageBox.html(errorText);
                errorBox.slideDown(400);
                formTriggersBlock.slideUp(400);
                console.error(xhr);
            },

complete: function () {
                button.html(button.val()).prop('disabled', false);
            }
        });
    });

// Обработка выбора формы
    $(document).on('change', '.trigger_form_select', function () {
        const panel = $(this).closest('.form_field_panel');
        const errorBox = panel.find('.elementor_form_error');
        const messageBox = errorBox.find('.event_error');
        const fieldsBlock = panel.find('.pys_form_fields');
        const eventFieldSelect = panel.find('.pys_form_field_event');
        const dataFormsRaw = panel.find('.pys_event_form_field_data').val();
        let dataForms = [];

try {
            dataForms = JSON.parse(dataFormsRaw);
        } catch (e) {
            console.error('Invalid JSON in dataForms', e);
        }
        eventFieldSelect.empty();
        const selectedSelector = $(this).val();
        const form = getFormBySelector(selectedSelector, dataForms);

if (!form) {
            console.warn('Selector не найден');
            return;
        }

// Заполняем список полей
        form.fields.forEach(field => {
            eventFieldSelect.append($('<option>', {
                value: field.selector,
                text: `Name: ${field.name}`,
                'data-type': field.type,
                'data-id': field.id
            }));
        });

fieldsBlock.slideDown(400);
        eventFieldSelect.pysselect2({
            templateResult: function (data) {
                if (!data.id) return data.text;

const $el = $(data.element);
                const type = $el.data('type');
                const id = $el.data('id');

// Поиск формы по CSS-селектору
    function getFormBySelector(selector, dataForms) {
        for (const item of dataForms) {
            for (const form of Object.values(item.forms)) {
                if (form.selector === selector) {
                    return form;
                }
            }
        }
        return null;
    }

//Remove trigger
    $( document ).on( 'click', '.pys_triggers_wrapper .pys_remove_trigger .button-remove-row', function () {
        $( this ).closest( '.trigger_group' ).remove();
        updatePostEventFields();
    } )

$( document ).on( 'click', '.pys_conditions_wrapper .button-remove-row', function () {
        $( this ).closest( '.condition_group' ).remove();
    } )

const $inputWrapperList = $( '.input-number-wrapper' );

$inputWrapperList.each( function () {
        addInputNumberListener( $( this ) );
    } );

function addInputNumberListener( $wrapper ) {
        const $input = $wrapper.find( 'input' );
        const incrementation = Number( $input.attr( 'step' ) ) || 1;

$wrapper.find( '.increase' ).on( 'click', function ( e ) {
            e.preventDefault();
            incInputNumber( $input, incrementation );
        } );

$wrapper.find( '.decrease' ).on( 'click', function ( e ) {
            e.preventDefault();
            incInputNumber( $input, -incrementation );
        } );
    }

function incInputNumber( $input, step ) {

if ( !$input.is( ':disabled' ) ) {
            let val = Number( $input.val() );

if ( isNaN( val ) ) val = 0;
            val += +step;

const max = $input.attr( 'max' );
            const min = $input.attr( 'min' );

if ( max !== undefined && val > Number( max ) ) {
                val = Number( max );
            } else if ( min !== undefined && val < Number( min ) ) {
                val = Number( min );
            } else if ( val < 0 ) {
                val = 0;
            }

$input.val( val ).attr( 'value', val );
        }
    }

$('#pys_event_title').on( "change", function ( e ) {
        const value = $(this).val();
        $.ajax( {
            url: ajaxurl,
            data: {
                action: 'get_transform_title',
                _wpnonce: $( '#get_transform_title_wpnonce' ).val(),
                title: value
            },
            type: 'POST',
            success: function ( data ) {
                $('#manual_custom_object_name').text(data.data.title);
                $('input#pys_event_gtm_custom_object_name').val(data.data.title);
            }, error: function ( data ) {
                console.log( data );
            }
        } );

});

$('input#pys_event_gtm_custom_object_name').on( "input", function ( e ) {
        const value = $(this).val();
        $('#manual_custom_object_name').text(value);
    });

//save settings
    $('#pys-save-settings').on('click', function () {
        $('#pys-form').submit();
    });

// Custom validation for custom event type fields
    $('#pys-form').on('submit', function (e) {
        // Find all custom event inputs with required attribute (event_type, event_action, custom fields)
        let $requiredCustomEventInputs = $('input[id*="_custom_event_type"][required], input[id*="_custom_event_action"][required], input[id*="_custom"][required]');
        let hasError = false;
        let firstErrorInput = null;

// Remove any existing error messages
        $('.custom-event-type-error').remove();

$requiredCustomEventInputs.each(function () {
            let $input = $(this);
            let value = $input.val().trim();

// Check if the input is visible and empty
            if ($input.is(':visible') && value === '') {
                hasError = true;

if (!firstErrorInput) {
                    firstErrorInput = $input;
                }

// Add error message after the input
                let errorMessage = '<div class="critical_message mt-8 custom-event-type-error">Add a name for your event, or select a standard event instead.</div>';
                $input.after(errorMessage);
            }
        });

if (hasError) {
            e.preventDefault();

// Scroll to the first error
            if (firstErrorInput) {
                $('html, body').animate({
                    scrollTop: firstErrorInput.offset().top - 100
                }, 500);

// Focus on the first error input
                firstErrorInput.focus();
            }

return false;
        }
    });

// Remove error message when user starts typing
    $(document).on('input', 'input[id*="_custom_event_type"], input[id*="_custom_event_action"], input[id*="_custom"]', function () {
        $(this).next('.custom-event-type-error').remove();
    });

$('.logs-wrapper .icon-trash').on('click', function (){
        $(this).closest('.card').addClass('loading');
    });

$("#pys .logs_enable input[id$='logs_enable']").on('change', function () {
        let isChecked = $(this).prop("checked");
        let card = $(this).closest('.card');
        let textarea = card.find("textarea");
        if (isChecked) {
            textarea.prop("disabled", false);
        } else {
            textarea.prop("disabled", true);
        }
    });

function maskPassword(block) {
        const passwordInput = block.find(".passwordInput");
        const maskedInput = block.find(".maskedInput");

if (passwordInput.length && maskedInput.length) {
            maskedInput.val('');
            maskedInput.attr("placeholder", "*".repeat(passwordInput.val().length));
        }
    }

function updatePassword(maskedInput) {
        const block = maskedInput.closest(".password-block");
        const passwordInput = block.find(".passwordInput");

let realValue = passwordInput.val().split("");
        let maskedValue = maskedInput.val();
        if (maskedValue.length > 0 && maskedValue.trim().length > 0) {
            passwordInput.val(maskedValue);
        }
        else {
            passwordInput.val(maskedValue.data('value'));
        }
    }

$(".licenses-wrapper .btn.btn-block").on("click", function() {
        const licenseBlock = $(this).closest(".card");
        const headButtonBlock = licenseBlock.find(".head-button-block");
        const passwordBlock = licenseBlock.find(".card-body .password-block");

maskPassword(passwordBlock);

headButtonBlock.find(".btn").hide();
        headButtonBlock.find(".icon-load").addClass("active");
        passwordBlock.find(".maskedInput").attr("disabled", true);
    });

// Queue Management JavaScript
    if ($('#queue-stats-container').length > 0) {
        
        // Refresh statistics
        $('#refresh-stats').on('click', function() {
            const $btn = $(this);
            const originalText = $btn.html();
            
            $btn.html('<i class="fa fa-spinner fa-spin"></i> Refreshing...');
            $btn.prop('disabled', true);
            
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'pys_refresh_queue_stats',
                    _wpnonce: $('#_wpnonce').val()
                },
                success: function(response) {
                    if (response.success) {
                        updateQueueStats(response.data);
                        showMessage('Statistics refreshed successfully', 'success');
                    } else {
                        showMessage('Failed to refresh statistics: ' + response.data, 'error');
                    }
                },
                error: function() {
                    showMessage('Error refreshing statistics', 'error');
                },
                complete: function() {
                    $btn.html(originalText);
                    $btn.prop('disabled', false);
                }
            });
        });

// Manual queue processing
        $('#manual-process-queue').on('click', function() {
            const $btn = $(this);
            const originalText = $btn.html();
            
            if (!confirm('Are you sure you want to process the queue manually? This may take some time.')) {
                return;
            }
            
            $btn.addClass('loading');
            $btn.prop('disabled', true);
            
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'pys_process_queue_manual',
                    _wpnonce: $('#_wpnonce').val()
                },
                success: function(response) {
                    if (response.success) {
                        showMessage(response.data.message, 'success');
                        // Refresh stats after processing
                        $('#refresh-stats').trigger('click');
                    } else {
                        showMessage('Failed to process queue: ' + response.data, 'error');
                    }
                },
                error: function() {
                    showMessage('Error processing queue', 'error');
                },
                complete: function() {
                    $btn.removeClass('loading');
                    $btn.html(originalText);
                    $btn.prop('disabled', false);
                }
            });
        });

// Clear old records
        $('#clear-old-records').on('click', function() {
            const $btn = $(this);
            const originalText = $btn.html();
            
            if (!confirm('Are you sure you want to clear old records? This action cannot be undone.')) {
                return;
            }
            
            $btn.addClass('loading');
            $btn.prop('disabled', true);
            
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'pys_cleanup_queue',
                    _wpnonce: $('#_wpnonce').val()
                },
                success: function(response) {
                    if (response.success) {
                        showMessage(response.data.message, 'success');
                        // Refresh stats after clearing
                        $('#refresh-stats').trigger('click');
                    } else {
                        showMessage('Failed to clear old records: ' + response.data, 'error');
                    }
                },
                error: function() {
                    showMessage('Error clearing old records', 'error');
                },
                complete: function() {
                    $btn.removeClass('loading');
                    $btn.html(originalText);
                    $btn.prop('disabled', false);
                }
            });
        });

// Reset failed events
        $('#reset-failed-events').on('click', function() {
            const $btn = $(this);
            const originalText = $btn.html();
            
            if (!confirm('Are you sure you want to reset failed events? They will be retried again.')) {
                return;
            }
            
            $btn.addClass('loading');
            $btn.prop('disabled', true);
            
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'pys_reset_failed_events',
                    _wpnonce: $('#_wpnonce').val()
                },
                success: function(response) {
                    if (response.success) {
                        showMessage(response.data.message, 'success');
                        // Refresh stats after reset
                        $('#refresh-stats').trigger('click');
                    } else {
                        showMessage('Failed to reset failed events: ' + response.data, 'error');
                    }
                },
                error: function() {
                    showMessage('Error resetting failed events', 'error');
                },
                complete: function() {
                    $btn.removeClass('loading');
                    $btn.html(originalText);
                    $btn.prop('disabled', false);
                }
            });
        });

// Auto-refresh stats every 30 seconds
        setInterval(function() {
            $('#refresh-stats').trigger('click');
        }, 30000);
    }

// Helper functions
    function updateQueueStats(stats) {
        $('#pending-count').text(stats.pending || 0);
        $('#processed-count').text(stats.processed || 0);
        $('#failed-count').text(stats.failed || 0);
        $('#total-count').text(stats.total || 0);
        $('#last-processed').text(stats.last_processed || 'Never');
        $('#queue-status').text(stats.queue_status_text || 'Unknown').attr('class', 'queue-status ' + (stats.queue_status || 'idle'));
        $('#processing-rate').text(stats.processing_rate || '0');
        $('#success-rate').text(stats.success_rate || '100');
    }

/**
	 * Function to update the fixed width of the save settings
	 */
	function updateFixedWidth() {
		const leftMenu = document.getElementById( 'adminmenuwrap' ),
			saveSettings = document.querySelector( '.save-settings' );

if ( leftMenu && saveSettings ) {
			saveSettings.style.left = `${ leftMenu.offsetWidth }px`;
		}
	}

window.addEventListener( 'load', updateFixedWidth );

const container = document.getElementById( 'adminmenuwrap' );

if ( container ) {
		const resizeObserver = new ResizeObserver( entries => {
			for ( let entry of entries ) {
				updateFixedWidth();
			}
		} );

resizeObserver.observe( container );
	}

// ── Meta row remove ─────────────────────────────────────────────────────

$( document ).on( 'click', '.remove-meta-row', function () {
		$( this ).closest( '.meta-block' ).remove();
	} );

// ── Multi-pixel collapse UI ──────────────────────────────────────────────

function initCard( $card ) {
		if ( $card.data( 'pys-collapse-init' ) ) return;
		$card.data( 'pys-collapse-init', true );

$card.find( '.pys-collapse-toggle' ).remove();
		$card.find( '.pys-collapsed-summary' ).remove();
		$card.removeClass( 'pys-collapsed' );

var $dataWrap    = $card.find( '.pixel-data-wrap' );
		var $enableRow   = $card.find( '.pixel-switcher-enabled' );
		var $pixelIdField = $dataWrap.find( '.pys-pixel-id-field' ).first();

function getIdText() {
			var $inp = $pixelIdField.find( 'input[type="text"]' ).first();
			return $inp.val() || $inp.attr( 'placeholder' ) || '—';
		}

var $summary = $( '<div class="pys-collapsed-summary"><span class="pys-id-label"></span><span class="pys-id-value"></span></div>' );
		var $btn = $( '<button type="button" class="pys-collapse-toggle" title="Expand / collapse settings">' +
			'<svg class="general-property-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> ' +
			'<rect class="rect" x="3" y="6" width="18" height="2" rx="1" fill="#C5C5C5" fill-opacity="0.5"></rect> ' +
			'<rect class="rect" x="3" y="11" width="18" height="2" rx="1" fill="#C5C5C5" fill-opacity="0.5"></rect> ' +
			'<rect class="rect" x="3" y="16" width="18" height="2" rx="1" fill="#C5C5C5" fill-opacity="0.5"></rect> ' +
			'<circle class="circle" cx="8" cy="7" r="2" fill="#BBBBBB"></circle> ' +
			'<circle class="circle" cx="16" cy="12" r="2" fill="#BBBBBB"></circle> ' +
			'<circle class="circle" cx="8" cy="17" r="2" fill="#BBBBBB"></circle> ' +
			'</svg></button>' );

$pixelIdField.find( 'input[type="text"]' ).first().on( 'input change', function () {
			$summary.find( '.pys-id-value' ).text( $( this ).val() || $( this ).attr( 'placeholder' ) || '—' );
		} );

$enableRow.append( $summary );
		if ( $card.find( '.remove_pixel' ).length > 0 ) {
			$card.find( '.remove_pixel' ).append( $btn );
		} else {
			$enableRow.parent().append( $btn );
		}

$summary.find( '.pys-id-value' ).text( getIdText() );
		$card.addClass( 'pys-collapsed' );
		$dataWrap.hide();
		$summary.show();

$btn.on( 'click', function ( e ) {
			e.preventDefault();
			if ( $card.hasClass( 'pys-collapsed' ) ) {
				$card.removeClass( 'pys-collapsed' );
				$dataWrap.slideDown( 400 );
			} else {
				$summary.find( '.pys-id-value' ).text( getIdText() );
				$card.addClass( 'pys-collapsed' );
				$dataWrap.slideUp( 400 );
			}
		} );
	}

function initCollapseContainer( sc ) {
		var $sc    = $( sc );
		var $cards = $sc.children( '.plate.pixel_info' );
		if ( $cards.length <= 2 ) return;
		$cards.each( function () { initCard( $( this ) ); } );
	}

$( '.settings_content' ).each( function () { initCollapseContainer( this ); } );

if ( typeof MutationObserver !== 'undefined' ) {
		$( '.settings_content' ).each( function () {
			var sc = this;
			var observer = new MutationObserver( function ( mutations ) {
				var hasNewCard = false;
				mutations.forEach( function ( mutation ) {
					mutation.addedNodes.forEach( function ( node ) {
						if ( node.nodeType === 1 && $( node ).is( '.plate.pixel_info' ) ) {
							hasNewCard = true;
						}
					} );
				} );
				if ( hasNewCard ) { initCollapseContainer( sc ); }
			} );
			observer.observe( sc, { childList: true } );
		} );
	}

} );

// ── Global tracking enable / disable + per-pixel enable / disable ────────────
document.addEventListener( 'DOMContentLoaded', function () {

const mainCheckbox   = document.getElementById( 'pys_core_enable_all_tracking_ids' );
	const mainParentCard = mainCheckbox ? mainCheckbox.closest( '.card' ) : null;
	const cardBody       = mainParentCard ? mainParentCard.querySelector( '.card-body' ) : null;

if ( mainCheckbox && cardBody ) {
		setCardBodyState( mainCheckbox.checked, cardBody );
		mainCheckbox.addEventListener( 'change', function () {
			setCardBodyState( this.checked, cardBody );
		} );
	}

document.querySelectorAll( '#pys .pixel-switcher-enabled .custom-switch-input' ).forEach( function ( checkbox ) {
		const parentCard   = checkbox.closest( '.pixel_info' );
		const cardBodyPixel = parentCard ? parentCard.querySelector( '.pixel-data-wrap' ) : null;
		setCardBodyState( checkbox.checked, cardBodyPixel );
	} );

document.addEventListener( 'change', function ( event ) {
		if ( event.target && event.target.matches( '#pys .pixel-switcher-enabled .custom-switch-input' ) ) {
			const parentCard    = event.target.closest( '.pixel_info' );
			const cardBodyPixel = parentCard ? parentCard.querySelector( '.pixel-data-wrap' ) : null;
			setCardBodyState( event.target.checked, cardBodyPixel );
		}
	} );

// ---- Global Custom Parameters for GA & Ads Events ----
	(function () {
		var $list     = $('#pys_ga_global_params_list');
		var $template = $('#pys_ga_global_param_template');
		var $addBtn   = $('#pys_ga_add_global_param');
		var $labels   = $('#pys_ga_global_params_labels');

if ( ! $addBtn.length ) return;

var paramIndex = parseInt( $addBtn.data('param-count'), 10 ) || 0;

function updateLabelsVisibility() {
			if ( $list.find('.ga-global-params__row').length > 0 ) {
				$labels.show();
			} else {
				$labels.hide();
			}
		}

$addBtn.on('click', function (e) {
			e.preventDefault();
			var $row = $template.clone()
				.removeAttr('id')
				.css('display', 'flex')
				.appendTo($list);
			$row.find('input[type="text"]').eq(0)
				.attr('name', 'pys[gatags][ga_global_custom_params][' + paramIndex + '][name]');
			$row.find('input[type="text"]').eq(1)
				.attr('name', 'pys[gatags][ga_global_custom_params][' + paramIndex + '][value]');
			var $checkbox = $row.find('input[type="checkbox"]');
			if ( $checkbox.length ) {
				$checkbox.attr(
					'name',
					'pys[gatags][ga_global_custom_params][' + paramIndex + '][page_view_only]'
				);
			}
			paramIndex++;
			updateLabelsVisibility();
		});

$(document).on('click', '.remove-ga-global-param', function () {
			$(this).closest('.ga-global-params__row').remove();
			updateLabelsVisibility();
		});

updateLabelsVisibility();

// Dynamic show/hide "Just for page view" column
		function isPageViewEnabled() {
			if ( $( '#pys_ga_custom_page_view_event' ).is( ':checked' ) ) return true;
			if ( $( '#pys_google_ads_page_view_post_enabled' ).is( ':checked' ) ) return true;
			if ( $( '#pys_google_ads_page_view_page_enabled' ).is( ':checked' ) ) return true;
			if ( $( '.page_view_custom_post_enabled:checked' ).length > 0 ) return true;
			return false;
		}

$( document ).on(
			'change',
			'#pys_ga_custom_page_view_event, #pys_google_ads_page_view_post_enabled, ' +
			'#pys_google_ads_page_view_page_enabled, .page_view_custom_post_enabled',
			updatePvColumnVisibility
		);
	})();
	// ---- / Global Custom Parameters for GA & Ads Events ----

// ---- Meta CAPI dynamic warnings ----
    (function () {
        function updateMetaCapiWarnings($container) {
            var $toggle  = $container.find('#pys_facebook_use_server_api');
            var $token   = $container.find('textarea[name*="facebook"][name*="server_access_api_token"]').first();
            var on       = $toggle.is(':checked');
            var hasToken = $token.val().trim() !== '';
            $container.find('.pys-capi-enable-warning').toggleClass('pys-capi-hidden', on);
            $container.find('.pys-capi-token-warning').toggleClass('pys-capi-hidden', !(on && !hasToken));
            $container.find('.pys-capi-warning-triangle').toggleClass('pys-capi-hidden', !(!on || !hasToken));
        }

$( document ).on('change', '#pys_facebook_use_server_api', function () {
            updateMetaCapiWarnings($( this ).closest('.pixel_info'));
        });

$( document ).on('input', 'textarea[name*="facebook"][name*="server_access_api_token"]', function () {
            updateMetaCapiWarnings($( this ).closest('.pixel_info'));
        });
    })();
    // ---- / Meta CAPI dynamic warnings ----

} );