<?php
/**
 * Social media sharing block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Social Media Sharing', 'eventim-us-event-listings' ); ?></h1>
	</div>
	<div class="module-content">
		<div class="form-grid">
			<!-- Style Selection -->
			<div class="form-row">
				<div class="form-label">
					<label for="radio-social-icon-circles-on"><?php esc_html_e( 'Style', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-field social-radio-field">
					<fieldset>
						<legend class="screen-reader-text"><?php esc_html_e( 'Select social icon style', 'eventim-us-event-listings' ); ?></legend>
						<input type="radio" id="radio-social-icon-circles-on"
							name="evusel_settings[social_icon_circles]" value="on"
							<?php echo $evuselConfig->get( 'social_icon_circles' ) === 'on' ? 'checked' : ''; ?>>
						<label for="radio-social-icon-circles-on">
							<?php esc_html_e( 'Filled backgrounds', 'eventim-us-event-listings' ); ?>
						</label>
						<input type="radio" id="radio-social-icon-circles-off"
							name="evusel_settings[social_icon_circles]" value="off"
							<?php echo $evuselConfig->get( 'social_icon_circles' ) === 'off' ? 'checked' : ''; ?>>
						<label for="radio-social-icon-circles-off">
							<?php esc_html_e( 'Icon only', 'eventim-us-event-listings' ); ?>
						</label>
					</fieldset>
				</div>
			</div>

			<!-- Background Color Picker -->
			<div class="form-row">
				<div class="form-label">
				<label for="color-picker-social-icon"><?php esc_html_e( 'Icon color', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-field social-color-field">
					<div class="color-picker-container">
						<input type="color" id="color-picker-social-background"
							name="evusel_settings[social_icon_color]"
							value="<?php echo esc_attr( $evuselConfig->get( 'social_icon_color' ) ?? '#000000' ); ?>"
							data-original="<?php echo esc_attr( $evuselConfig->get( 'social_icon_color' ) ?? '#000000' ); ?>"
							onchange="document.getElementById('social-background-value').textContent = this.value">
						<h4 id="social-background-value"><?php echo esc_html( $evuselConfig->get( 'social_icon_color' ) ?? '#000000' ); ?></h4>
					</div>
				</div>
			</div>

			<!-- Icon Color Picker -->
			<div class="form-row">
				<div class="form-label">
				<label for="color-picker-social-background"><?php esc_html_e( 'Background color', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-field social-color-field">
					<div class="color-picker-container">
						<input type="color" id="color-picker-social-icon"
							name="evusel_settings[social_icon_background_color]"
							value="<?php echo esc_attr( $evuselConfig->get( 'social_icon_background_color' ) ?? '#FFFFFF' ); ?>"
							data-original="<?php echo esc_attr( $evuselConfig->get( 'social_icon_background_color' ) ?? '#FFFFFF' ); ?>"
							onchange="document.getElementById('social-icon-value').textContent = this.value">
						<h4 id="social-icon-value"><?php echo esc_html( $evuselConfig->get( 'social_icon_background_color' ) ?? '#FFFFFF' ); ?></h4>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>