<?php
/**
 * Color customization block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Color Customization', 'eventim-us-event-listings' ); ?></h1>
	</div>
	<div class="module-content">
		<div class="color-customization-grid">
			<?php
			$evusel_colorPickers = array(
				'button_background_color' => __( 'Button Background', 'eventim-us-event-listings' ),
				'button_text_color'       => __( 'Button Text', 'eventim-us-event-listings' ),
				'button_text_hover_color' => __( 'Button Text Hover', 'eventim-us-event-listings' ),
				'background_color'        => __( 'Event Listing Background', 'eventim-us-event-listings' ),
				'text_color'              => __( 'Event Card Text', 'eventim-us-event-listings' ),
			);

			foreach ( $evusel_colorPickers as $evusel_key => $evusel_label ) {
				$evusel_value = esc_attr( $evuselConfig->get( "color_theme.{$evusel_key}" ) );
				$evusel_id    = esc_attr( str_replace( '_', '-', $evusel_key ) );
				?>
				<div class="color-picker-item">
					<h4><?php echo esc_html( $evusel_label ); ?></h4>
					<div class="color-picker-container">
						<input type="color" id="<?php echo esc_attr( 'color-picker-' . $evusel_id . '-output' ); ?>"
							name="<?php echo esc_attr( "evusel_settings[color_theme][{$evusel_key}]" ); ?>"
							value="<?php echo esc_attr( $evusel_value ); ?>" data-original="<?php echo esc_attr( $evusel_value ); ?>"
							onchange="document.getElementById('<?php echo esc_js( $evusel_id . '-value' ); ?>').textContent = this.value">

						<h4 id="<?php echo esc_attr( $evusel_id . '-value' ); ?>"><?php echo esc_html( $evusel_value ); ?></h4>
					</div>
				</div>
				<?php
			}
			?>
		</div>

		<div style="margin-top: 20px;">
			<input type="button" value="<?php esc_attr_e( 'Reset colors', 'eventim-us-event-listings' ); ?>"
				id="seetickets_reset_default_colors" class="see-menu-item dispevli-menu-item-active float-right" />
		</div>
	</div>
</div>
