<?php
/**
 * Event slider listing block.
 *
 * @package EventimUSEventListings
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="dashboard-module slider-module">
	<div class="module-header">
		<h1><?php esc_html_e( 'Event Slider', 'eventim-us-event-listings' ); ?></h1>
		<h4><?php esc_html_e( 'Display a full width event gallery with text and a ticket button, or display your gallery as images only with no text and ticket button', 'eventim-us-event-listings' ); ?></h4>
	</div>
	<div class="module-content">
		<div class="settings-form">
			<div class="form-row shortcode-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Shortcode', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="input-with-button">
						<input class="shortcode-info-input regular-text" type="text"
							value="[<?php echo esc_attr( $evuselConfig::SHORTCODE_SLIDER ); ?>]">
						<button type="button" class="see-menu-item dispevli-menu-item-active copy-shortcode" onclick="copyShortcode(this)">
							<?php esc_html_e( 'Copy', 'eventim-us-event-listings' ); ?>
						</button>
					</div>
				</div>
			</div>

			<div class="form-row slider-dropdown-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Number of Slides', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<select name="evusel_settings[shortcodes][slider][no_of_slides]" style="width: 100%; box-sizing: border-box;">
						<?php for ( $evusel_i = 2; $evusel_i <= 10; $evusel_i++ ) : ?>
							<option value="<?php echo esc_attr( $evusel_i ); ?>"
								<?php echo $evuselConfig->get( 'shortcodes.slider.no_of_slides' ) === (string) $evusel_i ? 'selected' : ''; ?>>
								<?php echo esc_html( $evusel_i ); ?>
							</option>
						<?php endfor; ?>
					</select>
				</div>
			</div>

			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Slider Layout', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="radio-options slider-radio-options">
						<div class="radio-option">
							<input type="radio" id="full-width-radio" name="evusel_settings[shortcodes][slider][layout]"
								value="full_width" 
								<?php echo $evuselConfig->get( 'shortcodes.slider.layout' ) === 'full_width' ? 'checked' : ''; ?>>
							<label for="full-width-radio">
								<?php esc_html_e( 'Full-width event image with text overlay', 'eventim-us-event-listings' ); ?>
							</label>
						</div>
						<div class="radio-option">
							<input type="radio" id="image-only-radio" name="evusel_settings[shortcodes][slider][layout]"
								value="image_only" 
								<?php echo $evuselConfig->get( 'shortcodes.slider.layout' ) === 'image_only' ? 'checked' : ''; ?>>
							<label for="image-only-radio">
								<?php esc_html_e( 'Full-width event image only', 'eventim-us-event-listings' ); ?>
							</label>
						</div>
					</div>
				</div>
			</div>

			<div class="form-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Navigation', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<div class="radio-options slider-radio-options">
						<div class="radio-option">
							<input type="radio" id="circles-radio" name="evusel_settings[shortcodes][slider][navigation]"
								value="arrows" 
								<?php echo $evuselConfig->get( 'shortcodes.slider.navigation' ) === 'arrows' ? 'checked' : ''; ?>>
							<label for="circles-radio">
								<?php esc_html_e( 'Arrows', 'eventim-us-event-listings' ); ?>
							</label>
						</div>
						<div class="radio-option">
							<input type="radio" id="arrows-radio" name="evusel_settings[shortcodes][slider][navigation]"
								value="circles" 
								<?php echo $evuselConfig->get( 'shortcodes.slider.navigation' ) === 'circles' ? 'checked' : ''; ?>>
							<label for="arrows-radio">
								<?php esc_html_e( 'Circles', 'eventim-us-event-listings' ); ?>
							</label>
						</div>
					</div>
				</div>
			</div>

			<div class="form-row toggle-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Autoplay Slider with infinite loop', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<label class="switch">
						<input type="checkbox" name="evusel_settings[shortcodes][slider][autoplay]"
							<?php echo $evuselConfig->get( 'shortcodes.slider.autoplay' ) === 'on' ? 'checked' : ''; ?>>
						<span class="slider round"></span>
					</label>
				</div>
			</div>

			<div class="form-row toggle-row">
				<div class="form-label">
					<label><?php esc_html_e( 'Images 100% width', 'eventim-us-event-listings' ); ?></label>
				</div>
				<div class="form-input">
					<label class="switch">
						<input type="checkbox" name="evusel_settings[shortcodes][slider][fullwidth]"
							<?php echo $evuselConfig->get( 'shortcodes.slider.fullwidth' ) === 'on' ? 'checked' : ''; ?>>
						<span class="slider round"></span>
					</label>
				</div>
			</div>

			<div class="form-row">
				<div class="form-input">
					<button type="button" class="see-delete-all" onclick="resetSliderSettings()">
						<?php esc_html_e( 'Reset Custom Slider Selection', 'eventim-us-event-listings' ); ?>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>