<?php

/**
 * Trait WPCode_Pixel_Custom_Events_UI
 *
 * Encapsulates all Custom Events admin UI logic for the Conversion Pixels addon.
 * This keeps the main admin page class smaller and makes it easier to extend
 * Custom Events in the future.
 */
trait WPCode_Pixel_Custom_Events_UI {

	/**
	 * Output the HTML for a single custom event row.
	 *
	 * @param string|int $index The index of the row.
	 * @param array      $event The event data.
	 *
	 * @return void
	 */
	public function custom_event_row( $index, $event = array() ) {
		$defaults = array(
			'internal_name'               => '',
			'value'                       => '',
			'trigger_type'                => 'home_page',
			'delay'                       => 0,
			'scroll_pos_triggers'         => array(
				array(
					'value' => 50,
				),
			),
			'post_type_value'             => 'any',
			'url_click_triggers'          => array(
				array(
					'relation' => 'contains',
					'value'    => '',
				),
			),
			'url_click_label'             => '',
			'url_click_value'             => '',
			'email_link_triggers'         => array(
				array(
					'rule'  => 'match',
					'value' => '',
				),
			),
			'video_view_urls'             => '',
			'video_view_play_trigger'     => '50%',
			'form_field_urls'             => '',
			'form_field_field_names'      => '',
			'css_mouseover_selectors'     => array( '' ),
			// Click on HTML element (CSS selector) trigger.
			'css_click_selectors'         => array( '' ),
			// WPForms integration: specific form ID to track (0 = none).
			'wpforms_form_id'             => 0,
			// Page scroll URL scope defaults.
			'scroll_page_relation'        => 'any',
			'scroll_page_value'           => '',
			'number_page_visit_scope'     => 'any',
			'number_page_visit_pattern'   => '',
			'number_page_visit_condition' => '=',
			'number_page_visit_value'     => 3,
			'platforms'                   => array(),
			'labels'                      => array(),
		);
		$event = wp_parse_args( $event, $defaults );
		?>
		<div class="wpcode-settings-repeater-item wpcode-custom-event-item" data-index="<?php echo esc_attr( $index ); ?>">
			<?php
			// Internal event name & value.
			$this->metabox_row(
				__( 'Event Name', 'wpcode-pixel' ),
				$this->get_input_text(
					'custom_events[' . $index . '][internal_name]',
					$event['internal_name'],
					__( 'This name is used internally in WPCode and can also be sent to pixels as the base event name.', 'wpcode-pixel' ),
					true
				)
			);
			$this->metabox_row(
				__( 'Event Value', 'wpcode-pixel' ),
				$this->get_input_text(
					'custom_events[' . $index . '][value]',
					$event['value'],
					__( 'Optional numeric value that can be sent with this event (for example, revenue or score).', 'wpcode-pixel' )
				)
			);

			// Trigger type + delay header.
			$delay_triggers = array( 'post_type' );
			$show_delay     = in_array( $event['trigger_type'], $delay_triggers, true );
			// Detect WPForms plugin availability to conditionally show the related UI using is_plugin_active for Lite/Pro.
			if ( ! function_exists( 'is_plugin_active' ) ) {
				$plugin_include = ABSPATH . 'wp-admin/includes/plugin.php';
				if ( file_exists( $plugin_include ) ) {
					include_once $plugin_include; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable
				}
			}
			$wpforms_active = function_exists( 'is_plugin_active' )
				? ( is_plugin_active( 'wpforms-lite/wpforms.php' ) || is_plugin_active( 'wpforms/wpforms.php' ) )
				: ( function_exists( 'wpforms' ) || class_exists( '\\WPForms\\WPForms' ) );
			ob_start();
			?>
			<div class="wpcode-custom-event-trigger-header">
				<label for="wpcode-custom-event-trigger-type-<?php echo esc_attr( $index ); ?>" class="screen-reader-text">
					<?php esc_html_e( 'Trigger type', 'wpcode-pixel' ); ?>
				</label>
				<select
					id="wpcode-custom-event-trigger-type-<?php echo esc_attr( $index ); ?>"
					name="custom_events[<?php echo esc_attr( $index ); ?>][trigger_type]"
					class="select-standard wpcode-custom-event-trigger-type"
					autocomplete="off"
				>
					<option value="home_page" <?php selected( $event['trigger_type'], 'home_page' ); ?>><?php esc_html_e( 'Home page', 'wpcode-pixel' ); ?></option>
					<option value="scroll_pos" <?php selected( $event['trigger_type'], 'scroll_pos' ); ?>><?php esc_html_e( 'Page scroll', 'wpcode-pixel' ); ?></option>
					<option value="post_type" <?php selected( $event['trigger_type'], 'post_type' ); ?>><?php esc_html_e( 'Post type', 'wpcode-pixel' ); ?></option>
					<option value="url_click" <?php selected( $event['trigger_type'], 'url_click' ); ?>><?php esc_html_e( 'Click on HTML link', 'wpcode-pixel' ); ?></option>
					<option value="email_link" <?php selected( $event['trigger_type'], 'email_link' ); ?>><?php esc_html_e( 'Email Link', 'wpcode-pixel' ); ?></option>
					<option value="video_view" <?php selected( $event['trigger_type'], 'video_view' ); ?>><?php esc_html_e( 'Embedded Video View', 'wpcode-pixel' ); ?></option>
					<option value="form_field" <?php selected( $event['trigger_type'], 'form_field' ); ?>><?php esc_html_e( 'Filling out a form field', 'wpcode-pixel' ); ?></option>
					<option value="css_mouseover" <?php selected( $event['trigger_type'], 'css_mouseover' ); ?>><?php esc_html_e( 'Mouse over CSS selector', 'wpcode-pixel' ); ?></option>
					<option value="css_click" <?php selected( $event['trigger_type'], 'css_click' ); ?>><?php esc_html_e( 'Click on HTML element', 'wpcode-pixel' ); ?></option>
					<?php if ( $wpforms_active ) : ?>
						<option value="wpforms_form" <?php selected( $event['trigger_type'], 'wpforms_form' ); ?>><?php esc_html_e( 'WPForms Form Submission', 'wpcode-pixel' ); ?></option>
					<?php endif; ?>
					<option value="number_page_visit" <?php selected( $event['trigger_type'], 'number_page_visit' ); ?>><?php esc_html_e( 'Number of Page Visits', 'wpcode-pixel' ); ?></option>
				</select>
			</div>
			<?php
			$trigger_header = ob_get_clean();

			$this->metabox_row(
				__( 'Trigger', 'wpcode-pixel' ),
				$trigger_header
			);

			// 1. Home page trigger.
			ob_start();
			?>
			<p class="wpcode-custom-event-paragraph"><?php esc_html_e( 'This event will fire on the home page after', 'wpcode-pixel' ); ?></p>
			<input
				id="wpcode-custom-event-delay-<?php echo esc_attr( $index ); ?>"
				type="number"
				class="input-standard"
				name="custom_events[<?php echo esc_attr( $index ); ?>][delay]"
				value="<?php echo esc_attr( (int) $event['delay'] ); ?>"
				min="0"
				step="1"
				style="width: 80px;"
			/>
			<p class="wpcode-custom-event-paragraph">
			<?php
			esc_html_e( 'seconds.', 'wpcode-pixel' );
			?>
			</p>
			<?php
			$home_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-home-page-panel"
				data-trigger_type="home_page"
				<?php echo 'home_page' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Delay', 'wpcode-pixel' ),
					$home_panel_content
				);
				?>
			</div>

				<?php
				// 2. Page scroll trigger.
				$scroll_triggers = is_array( $event['scroll_pos_triggers'] ) ? $event['scroll_pos_triggers'] : array();
				if ( empty( $scroll_triggers ) ) {
					$scroll_triggers = array(
						array(
							'value' => 50,
						),
					);
				}

				ob_start();
				?>
			<div class="wpcode-custom-scroll-triggers">
				<div class="wpcode-event-trigger" data-trigger_id="-1" style="display:none;">
					<div class="wpcode-scroll-threshold-input">
						<input
							type="number"
							value="50"
							min="0"
							max="100"
							step="1"
						/>
						<p class="wpcode-custom-event-paragraph">%</p>
					</div>
					<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
						<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
					</button>
				</div>
				<?php foreach ( $scroll_triggers as $t_index => $scroll_trigger ) : ?>
					<?php $scroll_value = isset( $scroll_trigger['value'] ) ? (int) $scroll_trigger['value'] : 50; ?>
					<div class="wpcode-event-trigger" data-trigger_id="<?php echo esc_attr( $t_index ); ?>">
						<div class="wpcode-scroll-threshold-input">
							<input
								type="number"
								name="custom_events[<?php echo esc_attr( $index ); ?>][scroll_pos_triggers][<?php echo esc_attr( $t_index ); ?>][value]"
								value="<?php echo esc_attr( $scroll_value ); ?>"
								min="0"
								max="100"
								step="1"
							/>
								<p class="wpcode-custom-event-paragraph">%</p>
						</div>
					</div>
				<?php endforeach; ?>
				<div class="insert-marker"></div>
			</div>
			<?php
			$scroll_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-scroll-pos-panel"
				data-trigger_type="scroll_pos"
				<?php echo 'scroll_pos' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Scroll thresholds', 'wpcode-pixel' ),
					$scroll_panel_content
				);
				?>
			</div>

				<?php
				// Page URL rule for scroll trigger (separate panel).
				$scroll_relation = isset( $event['scroll_page_relation'] ) ? $event['scroll_page_relation'] : 'any';
				$scroll_value    = isset( $event['scroll_page_value'] ) ? $event['scroll_page_value'] : '';

				// Use the same relation labels source as other URL conditions.
				// Keep keys consistent with saved values: contains / notcontains / = / !=.
				$relation_labels = array();
				if ( function_exists( 'wpcode_get_conditions_relation_labels' ) ) {
					$all_relations   = wpcode_get_conditions_relation_labels();
					$allowed_keys    = array( 'contains', 'notcontains', '=', '!=' );
					$relation_labels = array_intersect_key( $all_relations, array_flip( $allowed_keys ) );
				}

				// Fallback or supplement, in case the helper is missing or filtered.
				$relation_labels = array_merge(
					array(
						'contains'    => __( 'Contains', 'wpcode-pixel' ),
						'notcontains' => __( 'Doesn\'t Contain', 'wpcode-pixel' ),
						'='           => __( 'Is', 'wpcode-pixel' ),
						'!='          => __( 'Is not', 'wpcode-pixel' ),
					),
					$relation_labels
				);

				ob_start();
				?>

				<select
					id="wpcode-custom-event-scroll-page-scope-<?php echo esc_attr( $index ); ?>"
					class="select-standard wpcode-operators-standard"
					name="custom_events[<?php echo esc_attr( $index ); ?>][scroll_page_relation]"
					autocomplete="off"
				>
					<option value="any" <?php selected( $scroll_relation, 'any' ); ?>>
						<?php esc_html_e( 'Any page', 'wpcode-pixel' ); ?>
					</option>
					<?php foreach ( $relation_labels as $rel_key => $rel_label ) : ?>
						<option value="<?php echo esc_attr( $rel_key ); ?>" <?php selected( $scroll_relation, $rel_key ); ?>>
							<?php echo esc_html( $rel_label ); ?>
						</option>
					<?php endforeach; ?>
				</select>
				<input
					type="text"
					class="wpcode-regular-text wpcode-wide-text wpcode-scroll-page-url"
					name="custom_events[<?php echo esc_attr( $index ); ?>][scroll_page_value]"
					value="<?php echo esc_attr( $scroll_value ); ?>"
					placeholder="<?php esc_attr_e( 'Enter URL or part of URL', 'wpcode-pixel' ); ?>"
					autocomplete="off"
				/>

			<?php
			$scroll_url_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-scroll-pos-url-panel"
				data-trigger_type="scroll_pos"
				<?php echo 'scroll_pos' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Page URL', 'wpcode-pixel' ),
					$scroll_url_panel_content
				);
				?>
			</div>

				<?php
				// 3. Post type trigger.
				// List all public post types available on this site, plus an "Any" option.
				$registered_post_types = get_post_types(
					array(
						'public' => true,
					),
					'objects'
				);

				ob_start();
				?>
			<select
				name="custom_events[<?php echo esc_attr( $index ); ?>][post_type_value]"
				class="select-standard"
			>
				<option value="any" <?php selected( $event['post_type_value'], 'any' ); ?>>
					<?php esc_html_e( 'Any', 'wpcode-pixel' ); ?>
				</option>
				<?php if ( ! empty( $registered_post_types ) && is_array( $registered_post_types ) ) : ?>
					<?php foreach ( $registered_post_types as $post_type_key => $post_type_obj ) : ?>
						<option value="<?php echo esc_attr( $post_type_key ); ?>" <?php selected( $event['post_type_value'], $post_type_key ); ?>>
							<?php echo esc_html( isset( $post_type_obj->labels->singular_name ) ? $post_type_obj->labels->singular_name : $post_type_key ); ?>
						</option>
					<?php endforeach; ?>
				<?php endif; ?>
			</select>
			<?php
			$post_type_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-post-type-panel"
				data-trigger_type="post_type"
				<?php echo 'post_type' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Post type', 'wpcode-pixel' ),
					$post_type_panel_content
				);
				?>
			</div>

				<?php
				// 4. Click on HTML link trigger (URL rules + overrides).
				$url_click_triggers = is_array( $event['url_click_triggers'] ) ? $event['url_click_triggers'] : array();
				if ( empty( $url_click_triggers ) ) {
					$url_click_triggers = array(
						array(
							'relation' => 'contains',
							'value'    => '',
						),
					);
				}

				$relation_labels = array();
				if ( function_exists( 'wpcode_get_conditions_relation_labels' ) ) {
					$all_relations   = wpcode_get_conditions_relation_labels();
					$allowed_keys    = array( 'contains', 'notcontains', '=', '!=' );
					$relation_labels = array_intersect_key( $all_relations, array_flip( $allowed_keys ) );
				}

				$relation_labels = array_merge(
					array(
						'contains'    => __( 'Contains', 'wpcode-pixel' ),
						'notcontains' => __( 'Doesn\'t Contain', 'wpcode-pixel' ),
						'='           => __( 'Is', 'wpcode-pixel' ),
						'!='          => __( 'Is not', 'wpcode-pixel' ),
					),
					$relation_labels
				);

				ob_start();
				?>
			<div class="wpcode-custom-url-click-triggers">
				<div class="wpcode-event-trigger" data-trigger_id="-1" style="display:none;">
					<select class="select-standard wpcode-operators-standard" autocomplete="off">
						<?php foreach ( $relation_labels as $rel_key => $rel_label ) : ?>
							<option value="<?php echo esc_attr( $rel_key ); ?>"><?php echo esc_html( $rel_label ); ?></option>
						<?php endforeach; ?>
					</select>
					<input
						type="text"
						class="input-standard wpcode-wide-text"
						placeholder="<?php esc_attr_e( 'Part of URL to match', 'wpcode-pixel' ); ?>"
					/>
					<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
						<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
					</button>
				</div>
				<?php foreach ( $url_click_triggers as $t_index => $url_trigger ) : ?>
					<?php
					$relation = isset( $url_trigger['relation'] ) ? $url_trigger['relation'] : 'contains';
					$value    = isset( $url_trigger['value'] ) ? $url_trigger['value'] : '';
					?>
					<div class="wpcode-event-trigger" data-trigger_id="<?php echo esc_attr( $t_index ); ?>">
						<select
							class="select-standard wpcode-operators-standard"
							name="custom_events[<?php echo esc_attr( $index ); ?>][url_click_triggers][<?php echo esc_attr( $t_index ); ?>][relation]"
							autocomplete="off"
						>
								<?php foreach ( $relation_labels as $rel_key => $rel_label ) : ?>
								<option value="<?php echo esc_attr( $rel_key ); ?>" <?php selected( $relation, $rel_key ); ?>>
									<?php echo esc_html( $rel_label ); ?>
								</option>
							<?php endforeach; ?>
						</select>
						<input
							type="text"
							class="input-standard wpcode-wide-text"
							placeholder="<?php esc_attr_e( 'Part of URL to match', 'wpcode-pixel' ); ?>"
							name="custom_events[<?php echo esc_attr( $index ); ?>][url_click_triggers][<?php echo esc_attr( $t_index ); ?>][value]"
							value="<?php echo esc_attr( $value ); ?>"
						/>
						<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
							<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
						</button>
					</div>
				<?php endforeach; ?>
				<div class="insert-marker"></div>
				<p>
					<button class="button button-secondary add-event-trigger" type="button">
						<?php esc_html_e( 'Add another URL rule', 'wpcode-pixel' ); ?>
					</button>
				</p>
			</div>
				<?php

				$url_click_panel_content = ob_get_clean();
				?>
			<div
				class="wpcode-event-triggers-panel wpcode-url-click-panel"
				data-trigger_type="url_click"
				<?php echo 'url_click' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Link URL', 'wpcode-pixel' ),
					$url_click_panel_content
				);
				?>
			</div>

				<?php
				// 5. Email link trigger.
				$email_link_triggers = is_array( $event['email_link_triggers'] ) ? $event['email_link_triggers'] : array();
				if ( empty( $email_link_triggers ) ) {
					$email_link_triggers = array(
						array(
							'rule'  => 'match',
							'value' => '',
						),
					);
				}

				ob_start();
				?>
			<div class="wpcode-custom-email-link-triggers">
				<div class="wpcode-event-trigger" data-trigger_id="-1" style="display:none;">
					<select class="select-standard wpcode-operators-standard" autocomplete="off">
						<option value="match"><?php esc_html_e( 'Link Match', 'wpcode-pixel' ); ?></option>
						<option value="contains"><?php esc_html_e( 'Link Contains', 'wpcode-pixel' ); ?></option>
						<option value="any"><?php esc_html_e( 'Any Email Link', 'wpcode-pixel' ); ?></option>
					</select>
					<input
						type="text"
						class="input-standard trigger_url"
						placeholder="<?php esc_attr_e( 'mailto:example@example.com', 'wpcode-pixel' ); ?>"
					/>
					<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
						<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
					</button>
				</div>
				<?php foreach ( $email_link_triggers as $t_index => $email_trigger ) : ?>
					<?php
					$rule  = isset( $email_trigger['rule'] ) ? $email_trigger['rule'] : 'match';
					$value = isset( $email_trigger['value'] ) ? $email_trigger['value'] : '';
					?>
					<div class="wpcode-event-trigger" data-trigger_id="<?php echo esc_attr( $t_index ); ?>">
						<select
							class="select-standard wpcode-operators-standard"
							name="custom_events[<?php echo esc_attr( $index ); ?>][email_link_triggers][<?php echo esc_attr( $t_index ); ?>][rule]"
							autocomplete="off"
						>
							<option value="match" <?php selected( $rule, 'match' ); ?>><?php esc_html_e( 'Link Match', 'wpcode-pixel' ); ?></option>
							<option value="contains" <?php selected( $rule, 'contains' ); ?>><?php esc_html_e( 'Link Contains', 'wpcode-pixel' ); ?></option>
							<option value="any" <?php selected( $rule, 'any' ); ?>><?php esc_html_e( 'Any Email Link', 'wpcode-pixel' ); ?></option>
						</select>
						<input
							type="text"
							class="input-standard trigger_url wpcode-wide-text"
							placeholder="<?php esc_attr_e( 'mailto:example@example.com', 'wpcode-pixel' ); ?>"
							name="custom_events[<?php echo esc_attr( $index ); ?>][email_link_triggers][<?php echo esc_attr( $t_index ); ?>][value]"
							value="<?php echo esc_attr( $value ); ?>"
						/>
						<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
							<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
						</button>
					</div>
				<?php endforeach; ?>
				<div class="insert-marker"></div>
				<p>
					<button class="button button-secondary add-event-trigger" type="button">
						<?php esc_html_e( 'Add another Link', 'wpcode-pixel' ); ?>
					</button>
				</p>
			</div>
				<?php
				$email_panel_content = ob_get_clean();
				?>
			<div
				class="wpcode-event-triggers-panel wpcode-email-link-panel"
				data-trigger_type="email_link"
				<?php echo 'email_link' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Email Link', 'wpcode-pixel' ),
					$email_panel_content
				);
				?>
			</div>

				<?php
				// 6. Embedded video view trigger (simplified).
				// Page URLs panel.
				ob_start();
				?>
				<?php
				echo $this->get_input_text(
					'custom_events[' . $index . '][video_view_urls]',
					$event['video_view_urls'],
					__( 'Page URLs that contain embedded videos (comma separated).', 'wpcode-pixel' ),
					true
				);
				?>
			<?php
			$video_urls_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-video-view-panel"
				data-trigger_type="video_view"
				<?php echo 'video_view' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				// Label "Page URL" will be rendered inside wpcode-metabox-form-row-label.
				$this->metabox_row(
					__( 'Page URL', 'wpcode-pixel' ),
					$video_urls_panel_content
				);
				?>
			</div>

				<?php
				// Fire when video reaches panel (separate row).
				ob_start();
				?>
			<select
				id="wpcode-custom-event-video-trigger-<?php echo esc_attr( $index ); ?>"
				class="select-standard"
				name="custom_events[<?php echo esc_attr( $index ); ?>][video_view_play_trigger]"
			>
				<option value="0%" <?php selected( $event['video_view_play_trigger'], '0%' ); ?>><?php esc_html_e( 'Play', 'wpcode-pixel' ); ?></option>
				<option value="10%" <?php selected( $event['video_view_play_trigger'], '10%' ); ?>><?php esc_html_e( '10%', 'wpcode-pixel' ); ?></option>
				<option value="50%" <?php selected( $event['video_view_play_trigger'], '50%' ); ?>><?php esc_html_e( '50%', 'wpcode-pixel' ); ?></option>
				<option value="90%" <?php selected( $event['video_view_play_trigger'], '90%' ); ?>><?php esc_html_e( '90%', 'wpcode-pixel' ); ?></option>
				<option value="100%" <?php selected( $event['video_view_play_trigger'], '100%' ); ?>><?php esc_html_e( '100%', 'wpcode-pixel' ); ?></option>
			</select>
			<?php
			$video_trigger_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-video-view-trigger-panel"
				data-trigger_type="video_view"
				<?php echo 'video_view' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				// Label "Fire when video reaches" rendered in wpcode-metabox-form-row-label.
				$this->metabox_row(
					__( 'Fire when video reaches', 'wpcode-pixel' ),
					$video_trigger_panel_content
				);
				?>
			</div>

				<?php
				// 7. Filling out a form field trigger.
				// First panel: URLs where the form appears.
				ob_start();
				?>
				<?php
				echo $this->get_input_text(
					'custom_events[' . $index . '][form_field_urls]',
					$event['form_field_urls'],
					__( 'URLs where the form appears (comma separated).', 'wpcode-pixel' ),
					true
				);
				$form_urls_panel_content = ob_get_clean();
				?>
			<div
				class="wpcode-event-triggers-panel wpcode-form-field-panel"
				data-trigger_type="form_field"
				<?php echo 'form_field' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Form Page URL', 'wpcode-pixel' ),
					$form_urls_panel_content
				);
				?>
			</div>

				<?php
				// Second panel: specific form fields that should trigger the event.
				ob_start();
				?>
				<?php
				echo $this->get_input_text(
					'custom_events[' . $index . '][form_field_field_names]',
					$event['form_field_field_names'],
					__( 'Field names that should trigger the event (comma separated).', 'wpcode-pixel' ),
					true
				);
				$form_fields_panel_content = ob_get_clean();
				?>
			<div
				class="wpcode-event-triggers-panel wpcode-form-field-names-panel"
				data-trigger_type="form_field"
				<?php echo 'form_field' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				// Label appears inside wpcode-metabox-form-row-label as "Form field".
				$this->metabox_row(
					__( 'Form field', 'wpcode-pixel' ),
					$form_fields_panel_content
				);
				?>
			</div>

				<?php
				// 8. Mouse over CSS selector trigger.
				$css_selectors = is_array( $event['css_mouseover_selectors'] ) ? $event['css_mouseover_selectors'] : array();
				if ( empty( $css_selectors ) ) {
					$css_selectors = array( '' );
				}

				ob_start();
				?>
			<div class="wpcode-custom-css-mouseover-selectors">
				<div class="wpcode-event-trigger" data-trigger_id="-1" style="display:none;">
					<input
						type="text"
						class="input-standard"
						placeholder="<?php esc_attr_e( 'Enter CSS selector', 'wpcode-pixel' ); ?>"
					/>
					<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
						<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
					</button>
				</div>
				<?php foreach ( $css_selectors as $t_index => $selector ) : ?>
					<div class="wpcode-event-trigger" data-trigger_id="<?php echo esc_attr( $t_index ); ?>">
						<input
							type="text"
							class="input-standard"
							name="custom_events[<?php echo esc_attr( $index ); ?>][css_mouseover_selectors][<?php echo esc_attr( $t_index ); ?>]"
							placeholder="<?php esc_attr_e( '.my-button:hover', 'wpcode-pixel' ); ?>"
							value="<?php echo esc_attr( $selector ); ?>"
						/>
							<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
							<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
						</button>
					</div>
				<?php endforeach; ?>
				<div class="insert-marker"></div>
				<p>
					<button class="button button-secondary add-event-trigger" type="button">
						<?php esc_html_e( 'Add another selector', 'wpcode-pixel' ); ?>
					</button>
				</p>
			</div>
			<?php
			$css_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-css-mouseover-panel"
				data-trigger_type="css_mouseover"
				<?php echo 'css_mouseover' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Mouse over CSS selector', 'wpcode-pixel' ),
					$css_panel_content
				);
				?>
			</div>

				<?php
				// 9. Click on HTML element (CSS selector) trigger.
				$css_click_selectors = is_array( $event['css_click_selectors'] ) ? $event['css_click_selectors'] : array();
				if ( empty( $css_click_selectors ) ) {
					$css_click_selectors = array( '' );
				}

				ob_start();
				?>
			<div class="wpcode-custom-css-click-selectors">
				<div class="wpcode-event-trigger" data-trigger_id="-1" style="display:none;">
					<input
						type="text"
						class="input-standard"
						placeholder="<?php esc_attr_e( 'Enter CSS selector, e.g. a or .class a', 'wpcode-pixel' ); ?>"
					/>
					<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
						<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
					</button>
				</div>
				<?php foreach ( $css_click_selectors as $t_index => $selector ) : ?>
					<div class="wpcode-event-trigger" data-trigger_id="<?php echo esc_attr( $t_index ); ?>">
						<input
							type="text"
							class="input-standard"
							name="custom_events[<?php echo esc_attr( $index ); ?>][css_click_selectors][<?php echo esc_attr( $t_index ); ?>]"
							placeholder="<?php esc_attr_e( 'Enter CSS selector, e.g. a or .class a', 'wpcode-pixel' ); ?>"
							value="<?php echo esc_attr( $selector ); ?>"
						/>
							<button type="button" class="button button-link remove-row" aria-label="<?php esc_attr_e( 'Remove', 'wpcode-pixel' ); ?>">
							<?php wpcode_icon( 'trash', 25, 25, '0 -4 15 20' ); ?>
						</button>
					</div>
				<?php endforeach; ?>
				<div class="insert-marker"></div>
				<p>
					<button class="button button-secondary add-event-trigger" type="button">
						<?php esc_html_e( 'Add another selector', 'wpcode-pixel' ); ?>
					</button>
				</p>
			</div>
			<?php
			$css_click_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-css-click-panel"
				data-trigger_type="css_click"
				<?php echo 'css_click' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Click on HTML element', 'wpcode-pixel' ),
					$css_click_panel_content
				);
				?>
			</div>

				<?php
				// 10. WPForms Form submission trigger.
				// Build the UI only if WPForms is active.
				if ( $wpforms_active ) :
					$wpforms_forms = array();
					if ( function_exists( 'wpforms' ) || class_exists( '\WPForms\WPForms' ) ) {
						$wpforms_posts = get_posts(
							array(
								'post_type'      => 'wpforms',
								'post_status'    => 'publish',
								'posts_per_page' => -1,
								'orderby'        => 'title',
								'order'          => 'ASC',
							)
						);
						if ( ! empty( $wpforms_posts ) ) {
							foreach ( $wpforms_posts as $wpforms_post ) {
								$wpforms_forms[ $wpforms_post->ID ] = $wpforms_post->post_title;
							}
						}
					}

					ob_start();
					?>
			<select
				name="custom_events[<?php echo esc_attr( $index ); ?>][wpforms_form_id]"
				class="select-standard"
			>
				<option value="0" <?php selected( (int) $event['wpforms_form_id'], 0 ); ?>>
					<?php esc_html_e( 'Select WPForms form', 'wpcode-pixel' ); ?>
				</option>
					<?php if ( ! empty( $wpforms_forms ) ) : ?>
						<?php foreach ( $wpforms_forms as $form_id => $form_title ) : ?>
						<option value="<?php echo esc_attr( $form_id ); ?>" <?php selected( (int) $event['wpforms_form_id'], (int) $form_id ); ?>>
							<?php echo esc_html( $form_title ); ?>
						</option>
					<?php endforeach; ?>
				<?php endif; ?>
			</select>
					<?php
					$wpforms_panel_content = ob_get_clean();
					?>
			<div
				class="wpcode-event-triggers-panel wpcode-wpforms-form-panel"
				data-trigger_type="wpforms_form"
					<?php echo 'wpforms_form' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
					<?php
					$this->metabox_row(
						__( 'WPForms Form', 'wpcode-pixel' ),
						$wpforms_panel_content
					);
					?>
			</div>
				<?php endif; ?>

				<?php
				// 11. Number of page visits trigger.
				ob_start();
				?>
			<select
				id="wpcode-custom-event-page-scope-<?php echo esc_attr( $index ); ?>"
				class="select-standard wpcode-select-standard"
				name="custom_events[<?php echo esc_attr( $index ); ?>][number_page_visit_scope]"
				autocomplete="off"
			>
				<option value="any" <?php selected( $event['number_page_visit_scope'], 'any' ); ?>><?php esc_html_e( 'Any URLs', 'wpcode-pixel' ); ?></option>
				<option value="contains" <?php selected( $event['number_page_visit_scope'], 'contains' ); ?>><?php esc_html_e( 'URL contains', 'wpcode-pixel' ); ?></option>
				<option value="match" <?php selected( $event['number_page_visit_scope'], 'match' ); ?>><?php esc_html_e( 'URL match', 'wpcode-pixel' ); ?></option>
			</select>
			<?php
			echo $this->get_input_text(
				'custom_events[' . $index . '][number_page_visit_pattern]',
				$event['number_page_visit_pattern'],
				'',
				true
			);
			?>
			<p>
				<?php esc_html_e( 'Fire when page was visited:', 'wpcode-pixel' ); ?>
				<select
					class="select-standard"
					name="custom_events[<?php echo esc_attr( $index ); ?>][number_page_visit_condition]"
				>
					<option value="=" <?php selected( $event['number_page_visit_condition'], '=' ); ?>>=</option>
					<option value=">" <?php selected( $event['number_page_visit_condition'], '>' ); ?>>&gt;</option>
					<option value="<" <?php selected( $event['number_page_visit_condition'], '<' ); ?>>&lt;</option>
					<option value=">=" <?php selected( $event['number_page_visit_condition'], '>=' ); ?>>&ge;</option>
					<option value="<=" <?php selected( $event['number_page_visit_condition'], '<=' ); ?>>&le;</option>
				</select>
				<input
					type="number"
					class="input-standard"
					name="custom_events[<?php echo esc_attr( $index ); ?>][number_page_visit_value]"
					value="<?php echo esc_attr( (int) $event['number_page_visit_value'] ); ?>"
					min="1"
					step="1"
					style="width: 80px;"
				/>
				<?php esc_html_e( 'times', 'wpcode-pixel' ); ?>
			</p>
			<?php
			$visits_panel_content = ob_get_clean();
			?>
			<div
				class="wpcode-event-triggers-panel wpcode-number-page-visit-panel"
				data-trigger_type="number_page_visit"
				<?php echo 'number_page_visit' === $event['trigger_type'] ? '' : 'style="display:none;"'; ?>
			>
				<?php
				$this->metabox_row(
					__( 'Page URL', 'wpcode-pixel' ),
					$visits_panel_content
				);
				?>
			</div>

			<div class="wpcode-pixels-chooser-row">
				<?php
				$this->metabox_row(
					__( 'Pixels', 'wpcode-pixel' ),
					$this->get_pixels_inputs( $event['platforms'], $index, isset( $event['labels'] ) ? $event['labels'] : array() )
				);
				?>
			</div>

			<div class="wpcode-settings-repeater-item-actions">
				<button type="button" class="wpcode-button wpcode-button-secondary wpcode-remove-repeater-item">
					<?php esc_html_e( 'Remove Event', 'wpcode-pixel' ); ?>
				</button>
			</div>
		</div>
			<?php
	}
}


