<?php
/**
 * Rules form template
 *
 * @since      1.0.0
 *
 * @package    PersonalizeWP
 * @subpackage PersonalizeWP/Admin/Partials
 */

use PersonalizeWP\Admin\PageCategories;
use PersonalizeWP\Admin\PageDashboard;
use PersonalizeWP\Rules_Conditions;
use PersonalizeWP\Model\Category;

defined( 'ABSPATH' ) || exit; // Exit if accessed directly.

if ( $this->getError( 'form' ) ) : ?>
<div class="alert alert-danger" role="alert">
	<?php
	echo implode( '<br>', array_map( 'esc_html', $this->getError( 'form' ) ) );
	?>
</div>
	<?php
endif;
?>

<input type="hidden" name="personalizewp_form[id]" value="<?php echo esc_attr( $rule->id ); ?>" />

<div class="row mb-4">
	<div class="col-12 col-lg-6">
		<div class="form-group mb-2">
			<label for="personalizewp_form[name]">
			<?php
			echo wp_kses(
				sprintf(
					/* translators: 1: %s HTML of asterisk indicating required field */
					__( 'Rule Name %s', 'personalizewp' ),
					'<span class="required">*</span>'
				),
				array(
					'span' => array(
						'class' => array(),
					),
				)
			);
			?>
			</label>
			<p class="description"><?php esc_html_e( 'Choose a name that describes the conditions for your rule.', 'personalizewp' ); ?></p>
			<input type="text" required id="personalizewp_form[name]" name="personalizewp_form[name]" value="<?php echo esc_attr( $rule->name ); ?>"
				class="form-control <?php echo ( $this->getError( 'name' ) ? esc_attr( 'is-invalid' ) : '' ); ?>" />
			<?php
			if ( $this->getError( 'name' ) ) :
				?>
			<div class="invalid-feedback">
				<span class="dashicons dashicons-warning"></span>
				<?php echo esc_html( implode( ', ', $this->getError( 'name' ) ) ); ?>
			</div>
				<?php
			endif;
			?>
		</div>
	</div>
</div>


<div class="row mb-4">
	<div class="col-12 col-lg-6">
		<div class="form-group mb-2 category-dropdown">
			<label for="personalizewp_form[category_id]"><?php esc_html_e( 'Category', 'personalizewp' ); ?></label>
			<p class="description">
				<?php esc_html_e( 'If you would like to associate your rule with a category, you can choose one from the dropdown below.', 'personalizewp' ); ?>
				<?php
				printf(
					/* translators: 1: %s expands to a website link to /wp-admin/admin.php?page=personalizewp/categories, 2: </a> closing tag. */
					esc_html__( 'For more options, you can %1$screate a new category%2$s.', 'personalizewp' ),
					'<a href="' . esc_url( admin_url( PageCategories::$index_url ) ) . '" target="_blank">',
					'</a>'
				);
				?>
			</p>

			<select id="personalizewp_form[category_id]" name="personalizewp_form[category_id]" class="chosen-select form-control <?php echo ( $this->getError( 'category_id' ) ? esc_attr( 'is-invalid' ) : '' ); ?>">
				<?php
				$options = [ 0 => __( '-- Select a category --', 'personalizewp' ) ] + Category::list();
				foreach ( $options as $opt_val => $opt_label ) {
					printf(
						'<option value="%1$s" %2$s>%3$s</option>',
						esc_attr( $opt_val ),
						selected( (int) $rule->category_id === (int) $opt_val, true, false ),
						esc_html( $opt_label )
					);
				}
				?>
			</select>

			<?php
			if ( $this->getError( 'category_id' ) ) :
				?>
				<div class="invalid-feedback">
					<span class="dashicons dashicons-warning"></span>
					<?php echo esc_html( implode( ', ', $this->getError( 'category_id' ) ) ); ?>
				</div>
				<?php
				endif;
			?>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-12">
		<div class="form-group mb-2">
			<label>
			<?php
			echo wp_kses(
				sprintf(
					/* translators: 1: %s HTML of asterisk indicating required field */
					__( 'Conditions %s', 'personalizewp' ),
					'<span class="required">*</span>'
				),
				array(
					'span' => array(
						'class' => array(),
					),
				)
			);
			?>
			</label>
			<p class="description"><?php esc_html_e( 'All conditions within a single rule are matched using AND logic. This means that ALL conditions have to be met for the rule to be True. If you have multiple conditions and one condition is not met, the rule will be False. There is no limit to the number of conditions you can add.', 'personalizewp' ); ?></p>

			<?php
			// Used repeatedly
			$all_grouped_conditions_options = [ '' => __( '-- Select a measure --', 'personalizewp' ) ] + Rules_Conditions::grouped_list();
			?>
			<div id="conditions-container" class="conditions" data-condition-count="<?php echo (int) count( $rule->conditions ); ?>">
				<?php
				if ( $rule->conditions ) :
					foreach ( $rule->conditions as $i => $condition ) :
						?>

						<?php
						// Use the identifier to find the corresponding class
						$condition_class = Rules_Conditions::get_class( $condition->measure );
						// But then use the classes' identifier going forwards, in case of mapping
						$condition_identifier = ! empty( $condition_class->identifier ) ? $condition_class->identifier : $condition->measure;

						$condition_measure_key = ! is_null( $condition_class ) ? $condition_class->measure_key : null;
						$condition_meta_value  = ! is_null( $condition_measure_key ) && ! empty( $condition->meta->$condition_measure_key ) ? $condition->meta->$condition_measure_key : '';

						// Used repeatedly
						$condition_type            = ! is_null( $condition_class ) && method_exists( $condition_class, 'getComparisonType' ) ? $condition_class->getComparisonType() : '';
						$condition_comparator_opts = [ '' => __( '-- Select a comparator --', 'personalizewp' ) ];
						if ( ! is_null( $condition_class ) && method_exists( $condition_class, 'getComparators' ) ) {
							$condition_comparator_opts = $condition_comparator_opts + $condition_class->getComparators();
						}
						$condition_comparison_val_opts = [ '' => __( '-- Select a value --', 'personalizewp' ) ];
						if ( ! is_null( $condition_class ) && method_exists( $condition_class, 'getComparisonValues' ) ) {
							$condition_comparison_val_opts = $condition_comparison_val_opts + $condition_class->getComparisonValues();
						}
						?>

						<div data-condition="row" class="condition mb-3 mb-sm-3">

							<select name="personalizewp_form[conditions][measure][]" class="conditions-measure chosen-select">
								<?php
								foreach ( $all_grouped_conditions_options as $opt_val => $opt_label ) {
									if ( is_array( $opt_label ) ) {
										printf( '<optgroup label="%s">', esc_attr( $opt_val ) );
										foreach ( $opt_label as $sub_opt_val => $sub_opt_label ) {
											printf(
												'<option value="%1$s" %2$s>%3$s</option>',
												esc_attr( $sub_opt_val ),
												selected( $condition_identifier === $sub_opt_val, true, false ),
												esc_html( $sub_opt_label )
											);
										}
										echo '</optgroup>';
									} else {
										printf(
											'<option value="%1$s" %2$s>%3$s</option>',
											esc_attr( $opt_val ),
											selected( $condition_identifier === $opt_val, true, false ),
											esc_html( $opt_label )
										);
									}
								}
								?>
							</select>

							<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper">
								<input type="text" name="personalizewp_form[conditions][meta_value][]" value="<?php echo esc_attr( $condition_meta_value ); ?>"
									class="text-field field-meta-value-text" placeholder="<?php esc_attr_e( '-- Enter cookie name here --', 'personalizewp' ); ?>" autocomplete="off" />
							</div>

							<select name="personalizewp_form[conditions][comparator][]" class="conditions-comparator chosen-select">
								<?php
								foreach ( $condition_comparator_opts as $opt_val => $opt_label ) {
									printf(
										'<option value="%1$s" %2$s>%3$s</option>',
										esc_attr( $opt_val ),
										selected( $condition->comparator === $opt_val, true, false ),
										esc_html( $opt_label )
									);
								}
								?>
							</select>

							<?php
							switch ( $condition_type ) {
								case 'text':
									?>

								<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper" style="display: none;" data-dependency_measure="core_query_string" data-dependency_comparator="key_value">
									<input type="text" name="personalizewp_form[conditions][meta_value][]" value="<?php echo esc_attr( $condition_meta_value ); ?>"
										class="text-field field-meta-value-text" placeholder="<?php esc_attr_e( '-- Enter key here --', 'personalizewp' ); ?>" autocomplete="off" />
								</div>

								<select name="personalizewp_form[conditions][value][]" class="conditions-value chosen-select" <?php echo ( $condition->comparator === 'any' ? esc_attr( ' multiple' ) : '' ); ?>>
									<?php
									foreach ( $condition_comparison_val_opts as $opt_val => $opt_label ) {
										printf(
											'<option value="%1$s" %2$s>%3$s</option>',
											esc_attr( $opt_val ),
											selected( $condition->value === $opt_val, true, false ),
											esc_html( $opt_label )
										);
									}
									?>
								</select>

								<div class="text-field-wrapper field-wrapper-styles">
									<input type="text" name="personalizewp_form[conditions][value][]" value="<?php echo esc_attr( $condition->value ); ?>"
										class="text-field field-value-text" placeholder="<?php esc_attr_e( '-- Enter value here --', 'personalizewp' ); ?>" autocomplete="off" />
								</div>
								<div class="datepicker-field-wrapper field-wrapper-styles">
									<input type="text" name="personalizewp_form[conditions][value][]" value=""
										class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
								</div>

								<div class="days-field-wrapper field-wrapper-styles" style="display: none;">
									<input type="text" name="personalizewp_form[conditions][value][]" value=""
										class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
									<span class="equals-sign">=</span>
									<input type="number" name="personalizewp_form[conditions][days_number][]" value=""
										class="field-days-number" placeholder="<?php esc_attr_e( 'Days', 'personalizewp' ); ?>" min="0" autocomplete="off" />
								</div>
									<?php
									break;
								case 'datepicker':
									if ( ! empty( $condition->value ) ) :
										$formattedDate = gmdate( 'd/m/Y', strtotime( $condition->value ) );
									else :
										$formattedDate = '';
									endif;

									// For days_after/days_before conditions, use raw_value for the date field
									if ( in_array( $condition->comparator, [ 'days_after', 'days_before' ], true ) && ! empty( $condition->raw_value ) ) :
										$daysFormattedDate = gmdate( 'd/m/Y', strtotime( $condition->raw_value ) );
									else :
										$daysFormattedDate = $formattedDate;
									endif;

									// Get days_number from meta for days_after/days_before comparators
									$days_number = isset( $condition->meta->days_number ) ? (int) $condition->meta->days_number : '';
									?>

									<select name="personalizewp_form[conditions][value][]" class="conditions-value chosen-select" <?php echo ( $condition->comparator === 'any' ? esc_attr( ' multiple' ) : '' ); ?>>
										<?php
										foreach ( $condition_comparison_val_opts as $opt_val => $opt_label ) {
											printf(
												'<option value="%1$s" %2$s>%3$s</option>',
												esc_attr( $opt_val ),
												selected( $condition->value === $opt_val, true, false ),
												esc_html( $opt_label )
											);
										}
										?>
									</select>

									<div class="text-field-wrapper field-wrapper-styles">
										<input type="text" name="personalizewp_form[conditions][value][]" value=""
											class="text-field field-value-text" placeholder="<?php esc_attr_e( '-- Enter value here --', 'personalizewp' ); ?>" autocomplete="off" />
									</div>
									<div class="datepicker-field-wrapper field-wrapper-styles">
										<input type="text" name="personalizewp_form[conditions][value][]" value="<?php echo esc_attr( $formattedDate ); ?>"
											class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
									</div>

									<div class="days-field-wrapper field-wrapper-styles" style="display: none;">
										<input type="text" name="personalizewp_form[conditions][value][]" value="<?php echo esc_attr( $daysFormattedDate ); ?>"
											class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
										<span class="equals-sign">=</span>
										<input type="number" name="personalizewp_form[conditions][days_number][]" value="<?php echo esc_attr( $days_number ); ?>"
											class="field-days-number" placeholder="<?php esc_attr_e( 'Days', 'personalizewp' ); ?>" min="0" autocomplete="off" />
									</div>

									<?php
									break;
								default:
									?>

									<select name="personalizewp_form[conditions][value][]" class="conditions-value chosen-select" <?php echo ( $condition->comparator === 'any' ? esc_attr( ' multiple' ) : '' ); ?>>
										<?php
										foreach ( $condition_comparison_val_opts as $opt_val => $opt_label ) {
											printf(
												'<option value="%1$s" %2$s>%3$s</option>',
												esc_attr( $opt_val ),
												selected( $condition->value == $opt_val, true, false ), // phpcs:ignore Universal.Operators.StrictComparisons.LooseEqual -- Required to be loose comparison for time elapsed conditions.
												esc_html( $opt_label )
											);
										}
										?>
									</select>

									<div class="text-field-wrapper field-wrapper-styles">
										<input type="text" name="personalizewp_form[conditions][value][]" value=""
											class="text-field field-value-text" placeholder="<?php esc_attr_e( '-- Enter value here --', 'personalizewp' ); ?>" autocomplete="off" />
									</div>
									<div class="datepicker-field-wrapper field-wrapper-styles">
										<input type="text" name="personalizewp_form[conditions][value][]" value=""
											class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
									</div>

									<div class="days-field-wrapper field-wrapper-styles" style="display: none;">
										<input type="text" name="personalizewp_form[conditions][value][]" value=""
											class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
										<span class="equals-sign">=</span>
										<input type="number" name="personalizewp_form[conditions][days_number][]" value=""
											class="field-days-number" placeholder="<?php esc_attr_e( 'Days', 'personalizewp' ); ?>" min="0" autocomplete="off" />
									</div>
									<?php
									break;
							}
							?>

							<input type="hidden" name="personalizewp_form[conditions][raw_value][]" value="<?php echo esc_attr( $condition->raw_value ); ?>" class="conditions-raw-value" />
							<input type="hidden" name="personalizewp_form[conditions][comparisonType][]" value="<?php echo esc_attr( $condition_type ); ?>" class="the-comparison-type" />

							<?php
							/**
							 * Hook to allow extensions to add custom fields for existing conditions.
							 *
							 * @param object      $condition            The condition object
							 * @param object|null $condition_class      The condition class instance
							 * @param string      $condition_identifier The condition identifier
							 * @param string      $condition_type       The comparison type
							 */
							do_action( 'personalizewp_rule_condition_custom_fields', $condition, $condition_class, $condition_identifier, $condition_type );
							?>

								<div class="button-conditions-wrapper">
									<button type="button" class="remove-condition"><img class="" alt="<?php esc_attr_e( 'Remove', 'personalizewp' ); ?>" src="<?php echo esc_url( plugins_url( '../../img/bin.svg', __FILE__ ) ); ?>"></button>
								</div>

						</div>
						<?php
						if ( $this->getError( "conditions[{$i}]" ) ) :
							?>
							<div class="form-control is-invalid" style="display: none;"></div>
							<div class="invalid-feedback">
								<span class="dashicons dashicons-warning"></span>
								<?php echo esc_html( implode( ', ', $this->getError( "conditions[{$i}]" ) ) ); ?>
							</div>
							<?php
						endif;
					endforeach;
				else :
					?>
					<div data-condition-count="0" data-condition="row" class="condition mb-3 mb-sm-3">
						<select name="personalizewp_form[conditions][measure][]" class="conditions-measure chosen-select">
							<?php
							foreach ( $all_grouped_conditions_options as $opt_val => $opt_label ) {
								if ( is_array( $opt_label ) ) {
									printf( '<optgroup label="%s">', esc_attr( $opt_val ) );
									foreach ( $opt_label as $sub_opt_val => $sub_opt_label ) {
										printf(
											'<option value="%1$s" %2$s>%3$s</option>',
											esc_attr( $sub_opt_val ),
											selected( null === $sub_opt_val, true, false ),
											esc_html( $sub_opt_label )
										);
									}
									echo '</optgroup>';
								} else {
									printf(
										'<option value="%1$s" %2$s>%3$s</option>',
										esc_attr( $opt_val ),
										selected( null === $opt_val, true, false ),
										esc_html( $opt_label )
									);
								}
							}
							?>
						</select>
						<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][meta_value][]" value=""
								class="text-field field-meta-value-text" placeholder="<?php esc_attr_e( '-- Enter cookie name here --', 'personalizewp' ); ?>" autocomplete="off" />
						</div>

						<select name="personalizewp_form[conditions][comparator][]" class="conditions-comparator chosen-select">
							<?php
							$options = [ '' => __( '-- Select a comparator --', 'personalizewp' ) ];
							foreach ( $options as $opt_val => $opt_label ) {
								printf(
									'<option value="%1$s">%2$s</option>',
									esc_attr( $opt_val ),
									esc_html( $opt_label )
								);
							}
							?>
						</select>

						<select name="personalizewp_form[conditions][value][]" class="conditions-value chosen-select field-value-select">
							<?php
							$options = [ '' => __( '-- Select a value --', 'personalizewp' ) ];
							foreach ( $options as $opt_val => $opt_label ) {
								printf(
									'<option value="%1$s" %2$s>%3$s</option>',
									esc_attr( $opt_val ),
									selected( null === $opt_val, true, false ),
									esc_html( $opt_label )
								);
							}
							?>
						</select>

						<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper" style="display: none;" data-dependency_measure="core_query_string" data-dependency_comparator="key_value">
							<input type="text" name="personalizewp_form[conditions][meta_value][]" value=""
								class="text-field field-meta-value-text" placeholder="<?php esc_attr_e( '-- Enter key here --', 'personalizewp' ); ?>" autocomplete="off" />
						</div>

						<div class="text-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" value=""
								class="text-field field-value-text" placeholder="<?php esc_attr_e( '-- Enter value here --', 'personalizewp' ); ?>" autocomplete="off" />
						</div>

						<div class="datepicker-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" value=""
								class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
						</div>

						<div class="days-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" value=""
								class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
							<span class="equals-sign">=</span>
							<input type="number" name="personalizewp_form[conditions][days_number][]" value=""
								class="field-days-number" placeholder="<?php esc_attr_e( 'Days', 'personalizewp' ); ?>" min="0" autocomplete="off" />
						</div>

						<input type="hidden" name="personalizewp_form[conditions][raw_value][]" value="" class="conditions-raw-value" />
						<input type="hidden" name="personalizewp_form[conditions][comparisonType][]" value="select" class="the-comparison-type" />

						<div class="button-conditions-wrapper">
							<button type="button" class="remove-condition"><img class="" alt="<?php esc_attr_e( 'Remove', 'personalizewp' ); ?>" src="<?php echo esc_url( plugins_url( '../../img/bin.svg', __FILE__ ) ); ?>"></button>
						</div>
					</div>
					<?php
					if ( $this->getError( 'conditions[0]' ) ) :
						?>
					<div class="form-control is-invalid" style="display: none;"></div>
					<div class="invalid-feedback"><?php echo esc_html( implode( ', ', $this->getError( 'conditions[0]' ) ) ); ?></div>
						<?php
					endif;
					?>

					<?php
				endif;
				?>

			</div>
			<div id="condition-template" hidden>
					<div data-condition="added" class="condition mb-3 mb-sm-3">

						<select name="personalizewp_form[conditions][measure][]" class="conditions-measure" disabled>
							<?php
							foreach ( $all_grouped_conditions_options as $opt_val => $opt_label ) {
								if ( is_array( $opt_label ) ) {
									printf( '<optgroup label="%s">', esc_attr( $opt_val ) );
									foreach ( $opt_label as $sub_opt_val => $sub_opt_label ) {
										printf(
											'<option value="%1$s" %2$s>%3$s</option>',
											esc_attr( $sub_opt_val ),
											selected( null === $sub_opt_val, true, false ),
											esc_html( $sub_opt_label )
										);
									}
									echo '</optgroup>';
								} else {
									printf(
										'<option value="%1$s" %2$s>%3$s</option>',
										esc_attr( $opt_val ),
										selected( null === $opt_val, true, false ),
										esc_html( $opt_label )
									);
								}
							}
							?>
						</select>

						<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][meta_value][]" placeholder="<?php esc_attr_e( '-- Enter cookie name here --', 'personalizewp' ); ?>"
								class="text-field field-meta-value-text" autocomplete="off" disabled />
						</div>

						<select name="personalizewp_form[conditions][comparator][]" class="conditions-comparator" disabled>
							<?php
							$options = [ '' => __( '-- Select a comparator --', 'personalizewp' ) ];
							foreach ( $options as $opt_val => $opt_label ) {
								printf(
									'<option value="%1$s">%2$s</option>',
									esc_attr( $opt_val ),
									esc_html( $opt_label )
								);
							}
							?>
						</select>

						<select name="personalizewp_form[conditions][value][]" class="conditions-value" disabled>
							<?php
							$options = [ '' => __( '-- Select a value --', 'personalizewp' ) ];
							foreach ( $options as $opt_val => $opt_label ) {
								printf(
									'<option value="%1$s" %2$s>%3$s</option>',
									esc_attr( $opt_val ),
									selected( null === $opt_val, true, false ),
									esc_html( $opt_label )
								);
							}
							?>
						</select>
						<div class="meta-text-field-wrapper field-wrapper-styles meta-value-wrapper" style="display: none;" data-dependency_measure="core_query_string" data-dependency_comparator="key_value">
							<input type="text" name="personalizewp_form[conditions][meta_value][]" placeholder="<?php esc_attr_e( '-- Enter key here --', 'personalizewp' ); ?>"
								class="text-field field-meta-value-text" autocomplete="off" disabled />
						</div>

						<div class="text-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" placeholder="<?php esc_attr_e( '-- Enter value here --', 'personalizewp' ); ?>"
								class="text-field field-value-text" autocomplete="off" />
						</div>
						<div class="datepicker-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" value=""
								class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
						</div>

						<div class="days-field-wrapper field-wrapper-styles" style="display: none;">
							<input type="text" name="personalizewp_form[conditions][value][]" value=""
								class="datepicker-field field-value-datepicker" placeholder="<?php esc_attr_e( '-- Select a date --', 'personalizewp' ); ?>" autocomplete="off" />
							<span class="equals-sign">=</span>
							<input type="number" name="personalizewp_form[conditions][days_number][]" value=""
								class="field-days-number" placeholder="<?php esc_attr_e( 'Days', 'personalizewp' ); ?>" min="0" autocomplete="off" />
						</div>

						<input type="hidden" name="personalizewp_form[conditions][raw_value][]" value="" class="conditions-raw-value" disabled />
						<input type="hidden" name="personalizewp_form[conditions][comparisonType][]" value="" class="the-comparison-type" disabled />

						<?php
						/**
						 * Hook to allow extensions to add custom field templates for new conditions.
						 */
						do_action( 'personalizewp_rule_condition_template_custom_fields' );
						?>

						<div class="button-conditions-wrapper">
							<button type="button" class="remove-condition"><img class="" alt="<?php esc_attr_e( 'Remove', 'personalizewp' ); ?>" src="<?php echo esc_url( plugins_url( '../../img/bin.svg', __FILE__ ) ); ?>"></button>
						</div>
					</div>
				</div>

				<script type="text/javascript">
					var pwpRuleConditions = <?php echo wp_json_encode( Rules_Conditions::to_object() ); ?>;
				</script>
		</div>
	</div>
</div>

	<div class="mb-3">
		<button type="button" class="add-condition">&plus; <?php esc_html_e( 'Add', 'personalizewp' ); ?></button>
	</div>

<div id="form-actions">
	<?php
	if ( 0 !== (int) $rule->id ) :
		?>
		<button type="submit" class="primary btn"><?php esc_html_e( 'Save Changes', 'personalizewp' ); ?></button>
		<button type="reset" class="secondary btn"><?php esc_html_e( 'Reset', 'personalizewp' ); ?></button>
		<?php
	else :
		?>
		<button type="submit" class="primary btn"><?php esc_html_e( 'Create Rule', 'personalizewp' ); ?></button>
		<a href="<?php echo esc_url( admin_url( PageDashboard::$index_url ) ); ?>" class="secondary btn"><?php esc_html_e( 'Cancel', 'personalizewp' ); ?></a>
		<?php
	endif;
	?>
</div>


<script type="text/javascript">
(function( $ ) {
	'use strict';

	$( ".the-comparison-type" ).each(function( i ) {
		showCorrectComparisonTypeField(this);
	});

	$( ".conditions-measure" ).each(function( i ) {
		showMeasureKeyField(this);
	});

	$(window).load(function() {
		const ruleForm  = $('#pwp-form');
		const formActions = $('#pwp-form #form-actions');
		const consContainer = document.querySelector('#conditions-container');
		formActions.hide();
		ruleForm.on( 'change', function() {
			formActions.show();
			var count = consContainer.querySelectorAll('.condition:not([data-condition=deleted]').length;
			consContainer.setAttribute( 'data-condition-count', count );
		} );
		ruleForm.on( 'input', function() {
			formActions.show();
		} );
		ruleForm.on( 'submit', function() {
			// Remove all 'deleted' inputs so not to affect server processing.
			var deletedCons = document.querySelectorAll( 'div[data-condition="deleted"]' );
			deletedCons.forEach(row => {
				row.parentNode.removeChild(row);
			});
		} );
		ruleForm.on( 'reset', function() {
			// Revert all 'deleted' rows.
			var deletedCons = document.querySelectorAll( 'div[data-condition="deleted"]' );
			deletedCons.forEach(row => {
				row.dataset.condition = row.dataset.prevCondition;
				row.hidden = false;
			});
			// Remove all 'added' rows.
			var addedCons = document.querySelectorAll( 'div[data-condition="added"]' );
			addedCons.forEach(row => {
				row.parentNode.removeChild(row);
			});
			var count = consContainer.querySelectorAll('.condition:not([data-condition=deleted]').length;
			consContainer.setAttribute( 'data-condition-count', count );
			formActions.hide();
		} );
	} );

	if (typeof pwpRuleConditions !== 'undefined') {
		var $conditionTemplate = $('#condition-template .condition');
		var $comparatorEl;
		var $valueEl;

		$(document).on('change', '.conditions-measure', function() {
			personalizewp_measure_set_related_fields(this);
		});

		$(document).on('change', '.conditions-comparator', function() {
			var $parent = $(this).parents('.condition');
			var $measureEl = $parent.find('.conditions-measure');

			personalizewp_set_value_field_type(this);
			personalizewp_comparator_set_related_fields(this);
			showCorrectComparisonTypeField($measureEl[0]);
		});

		$(document).on('change', '.conditions-value', function() {
			personalizewp_set_raw_value_field_value(this);
		});

		$(document).on('click', '.remove-condition', function(e) {
			var parent = e.target.closest("[data-condition]");
			// Mark it was 'deleted'.
			parent.dataset.prevCondition = parent.dataset.condition;
			parent.dataset.condition = 'deleted';
			parent.hidden = true;
			$('#pwp-form').trigger('change'); // Trigger jquery compat event
		});

		$(document).on('keyup blur', '.field-value-text', function() {
			var $rawValuesEl = $(this).parents('.condition').find('.conditions-raw-value');

			$rawValuesEl.val($(this).val());
		});

		$(document).on('focus',".datepicker-field", function() {
			$(this).datepicker({
				dateFormat: 'dd/mm/yy',
				altField: $(this).parents('.condition').find('.conditions-raw-value'),
				altFormat: 'yy-mm-dd'
			});
		});

		// Handle days field input changes to update raw value for days_after/days_before comparators
		$(document).on('change keyup', '.days-field-wrapper input', function() {
			// The datepicker altField will handle raw_value updates automatically
			// No manual intervention needed for date fields
		});

		$(document).on('click', '.add-condition', function(e) {
			var $template = $conditionTemplate.clone();

			$template.children('select, input').prop("disabled", false);

			$template.find('.field-meta-value-text').prop("disabled", false);

			var value = $template.children('.conditions-value').first().val();
			$template.children('.conditions-raw-value').val(value);

			$('#conditions-container').append($template);
		});
	}

	function personalizewp_set_value_field_type(el, measure) {

		var $parent = $(el).parent();
		var comparator = $(el).val();
		var $textInput = $parent.find('.field-value-text');

		$textInput.prop("disabled", false);

		if (typeof pwpRuleConditions[measure] !== 'undefined') {

			if (pwpRuleConditions[measure].comparisonType === 'select') {

				var $valueEl = $parent.children('.conditions-value');
				$valueEl.prop("multiple", (comparator === 'any') ? "multiple" : "");
			}
		} else {
			if ( 'any_value' === comparator || 'no_value' === comparator ) {
				$textInput.prop("disabled", true);
			}
		}
	}

	function personalizewp_measure_set_related_fields(el) {

		var $parent = $(el).parent();
		var measure = $(el).val();
		var $rawValuesEl = $parent.find('.conditions-raw-value');

		var $comparatorEl = $parent.children('.conditions-comparator');
		var $valueEl = $parent.children('.conditions-value');
		var $comparisonTypeEl = $parent.find('.the-comparison-type');

		var $selectFieldContainer = $parent.find('.conditions-value');
		var $textFieldContainer = $parent.find('.text-field-wrapper');
		var $datePickerFieldContainer = $parent.find('.datepicker-field-wrapper');
		var $metaTextFieldContainer = $parent.find('.meta-text-field-wrapper');
		var $daysFieldContainer = $parent.find('.days-field-wrapper');

		$comparisonTypeEl.val(pwpRuleConditions[measure].comparisonType);

		// reset input values
		$textFieldContainer.children('.field-value-text').val('');
		$datePickerFieldContainer.children('.field-value-datepicker').val('');
		$metaTextFieldContainer.children('.field-meta-value-text').val('').prop('disabled', false);
		$daysFieldContainer.find('.datepicker-field, .field-days-number').val('');

		$comparatorEl.find('option').not(':first').remove();
		$valueEl.find('option').not(':first').remove();

		if (typeof pwpRuleConditions[measure] !== 'undefined') {
			$.each(pwpRuleConditions[measure].comparators, function(key,value) {
				$comparatorEl.append($("<option></option>")
					.attr("value", key).text(value));
			});

			$.each(pwpRuleConditions[measure].comparisonValues, function(key,value) {
				$valueEl.append($("<option></option>")
					.attr("value", key).text(value));
			});
		}

		personalizewp_set_value_field_type(el, measure);
		personalizewp_set_raw_value_field_value(el);

		// show/hide field types dependant on the measure
		showMeasureKeyField(el);
		showCorrectComparisonTypeField(el);
	}

	function showMeasureKeyField(el) {
		var $parent = $(el).parent();
		var measure = $(el).val();
		var comparator = $parent.children('.conditions-comparator').val();
		var $textInput = $parent.find('.field-value-text');
		var $metaTextFieldContainer = $parent.find('.meta-text-field-wrapper').not('[data-dependency_measure]');
		var $metaKeyInput = $metaTextFieldContainer.find('.field-meta-value-text');

		if (measure === 'core_cookie' || measure === 'core_user_meta') {
			// Revert to text input if it was converted to a country select
			personalizewp_revert_meta_to_text($metaTextFieldContainer);
			$metaTextFieldContainer.show();

			// Update placeholder text based on condition type
			if (measure === 'core_cookie') {
				$metaKeyInput.attr('placeholder', '<?php esc_attr_e( '-- Enter cookie name here --', 'personalizewp' ); ?>');
			} else if (measure === 'core_user_meta') {
				$metaKeyInput.attr('placeholder', '<?php esc_attr_e( '-- Enter user meta key here --', 'personalizewp' ); ?>');
			}
		} else if (measure === 'core_visitor_state') {
			personalizewp_show_country_select($metaTextFieldContainer);
			$metaTextFieldContainer.show();
		} else {
			$metaTextFieldContainer.hide();
		}

		if ( 'any_value' === comparator || 'no_value' === comparator ) {
			$textInput.prop("disabled", true);
		}

		personalizewp_comparator_set_related_fields($parent.children('.conditions-comparator'));
	}

	/**
	 * Convert the meta text field into a country select dropdown for the state condition.
	 */
	function personalizewp_show_country_select($container) {
		var $input = $container.find('.field-meta-value-text');
		var existingValue = $input.val();

		// Don't re-create if already converted
		if ($container.find('.field-meta-country-select').length > 0) {
			return;
		}

		// Get country options from the visitor country condition
		var countries = {};
		if (typeof pwpRuleConditions['core_visitor_country'] !== 'undefined') {
			countries = pwpRuleConditions['core_visitor_country'].comparisonValues;
		}

		// Create the select element with the same name as the text input
		var $select = $('<select></select>')
			.attr('name', $input.attr('name'))
			.addClass('field-meta-country-select')
			.append($('<option></option>').attr('value', '').text('<?php echo esc_js( __( '-- Select a country --', 'personalizewp' ) ); ?>'));

		$.each(countries, function(key, value) {
			var $option = $('<option></option>').attr('value', key).text(value);
			if (key === existingValue) {
				$option.prop('selected', true);
			}
			$select.append($option);
		});

		// Hide the text input, insert select after it
		$input.hide().prop('disabled', true);
		$container.append($select);

		// If we have a pre-selected country, load its subdivisions
		if (existingValue) {
			var $condition = $container.closest('.condition');
			personalizewp_load_subdivisions(existingValue, $condition);
		}
	}

	/**
	 * Revert a country select back to a text input (when switching condition type).
	 */
	function personalizewp_revert_meta_to_text($container) {
		var $select = $container.find('.field-meta-country-select');
		if ($select.length > 0) {
			$select.remove();
			$container.find('.field-meta-value-text').show().prop('disabled', false).val('');
		}
	}

	/**
	 * Load subdivisions for a country via REST API and populate the value dropdown.
	 */
	function personalizewp_load_subdivisions(countryCode, $condition) {
		var $valueEl = $condition.children('.conditions-value');
		var currentValue = $valueEl.val() || $condition.children('.conditions-raw-value').val();
		var defaultOptionText = $valueEl.find('option:first').text();
		// Clear existing options
		$valueEl.find('option').not(':first').remove();
		$valueEl.find('option:first').text(defaultOptionText);

		if (!countryCode) {
			return;
		}

		wp.apiFetch({
			path: 'personalizewp/v1/subdivisions/' + encodeURIComponent(countryCode),
			method: 'GET',
		}).then(function(response) {
			if (response) {
				$.each(response, function(key, value) {
					var $option = $('<option></option>').attr('value', key).text(value);
					if (key === currentValue) {
						$option.prop('selected', true);
					}
					$valueEl.append($option);
				});
			}
		}).catch(function() {
			$valueEl.find('option:first')
				.prop('selected', true)
				.text('<?php echo esc_js( __( 'Failed to load states. Please refresh the page.', 'personalizewp' ) ); ?>');
		});
	}

	// Handle country select changes for the state condition
	$(document).on('change', '.field-meta-country-select', function() {
		var $condition = $(this).closest('.condition');
		var countryCode = $(this).val();

		// Also update the hidden text input value so form submission works
		$condition.find('.field-meta-value-text').val(countryCode);

		personalizewp_load_subdivisions(countryCode, $condition);
	});

	function showCorrectComparisonTypeField(el) {
		var $parent = $(el).parent();

		var $comparisonTypeValue = $parent.find('.the-comparison-type').val();
		var $comparator = $parent.find('.conditions-comparator').val();
		var $measure = $parent.find('.conditions-measure').val();

		var $selectFieldContainer = $parent.find('.conditions-value');
		var $textFieldContainer = $parent.find('.text-field-wrapper');
		var $datePickerFieldContainer = $parent.find('.datepicker-field-wrapper');
		var $daysFieldContainer = $parent.find('.days-field-wrapper');

		// Hide all field containers first
		$selectFieldContainer.hide();
		$textFieldContainer.hide();
		$datePickerFieldContainer.hide();
		$daysFieldContainer.hide();

		switch($comparisonTypeValue) {
			case 'text':
				$selectFieldContainer.hide();
				$textFieldContainer.show();
			break;
			case 'datepicker':
				// Check if this is visiting_date measure with days_after or days_before comparator
				// PersonalizeWP enhancement: Show days field for days_after/days_before comparators
				if ($measure === 'core_visiting_date' && ($comparator === 'days_after' || $comparator === 'days_before')) {
					$daysFieldContainer.show();
				} else {
					$datePickerFieldContainer.show();
				}
			break;
			default:
				$selectFieldContainer.show();
		}
	}

	function personalizewp_set_raw_value_field_value(el) {
		var $parent = $(el).parent();

		var $valueEl = $parent.children('.conditions-value');
		var $rawValuesEl = $parent.children('.conditions-raw-value').first();
		var value = $valueEl.val();

		if (Array.isArray(value)) {
			$rawValuesEl.val(JSON.stringify(value));
		} else {
			$rawValuesEl.val(value);
		}
	}

	/**
	 * Displays related fields based on comparator value
	 *
	 * @param $comparator comparator element
	 */
	function personalizewp_comparator_set_related_fields($comparator) {
		let $parent = $($comparator).parents('.condition');
		let measure = $parent.find('.conditions-measure').val();
		let comparator = $($comparator).val();

		$parent.find('[data-dependency_measure][data-dependency_comparator]').hide()
			.find('[name]').prop('disabled', 'disabled');

		let dependencyFields = $parent.find('[data-dependency_measure="'+ measure +'"][data-dependency_comparator="'+ comparator +'"]');
		dependencyFields.each(function() {
			let $field = $(this).find('[name]');

			$parent.find('[name="'+ $field.attr('name') +'"]').prop('disabled', true);
			$field.prop('disabled', false);

			if (measure === 'core_query_string') {
				$field.attr('placeholder', '<?php esc_attr_e( '-- Enter key here --', 'personalizewp' ); ?>');
			}
			$(this).show();
		});
	}
	$(window).on('load', function() {
		$('.conditions-comparator').each(function() {
			personalizewp_comparator_set_related_fields($(this));
		});

		// Also trigger field visibility for existing conditions
		$('.conditions-measure').each(function() {
			showCorrectComparisonTypeField(this);
		});
	});

	// Days After/Before functionality
	// Handle datepicker in days field wrapper
	$(document).on('focus', '.days-field-wrapper .datepicker-field', function() {
		$(this).datepicker({
			dateFormat: 'dd/mm/yy',
			altField: $(this).parents('.condition').find('.conditions-raw-value'),
			altFormat: 'yy-mm-dd'
		});
	});

})( jQuery );

</script>
