<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>

<div id="<?php echo esc_attr( $element_wrapper_id ); ?>" class="wordform-captcha-field-options-wrapper show-hide-common-class-all-options-wrapper-element" data-wrapper-element-type = "captcha" data-element-index-val="<?php echo esc_attr( $element_index ); ?>" >	

	<h4><?php esc_html_e( 'Field Required:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-required-ul">
		<li>
			<input class="required-checkbox" type="checkbox" checked /><?php esc_html_e( 'Required', 'wordform-pro' ); ?>
			<small>( <?php esc_html_e( 'Check if Required', 'wordform-pro' ); ?> )</small>
		</li>
	</ul>
	<hr/>

	<h4><?php esc_html_e( 'Captcha Label:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-input-label">	
		<li>				    
			<input class="wordform-captcha-label-name" type="text" placeholder="Captcha Label" />
		</li>
	</ul>	
	<hr/>
	
	<h4><?php esc_html_e( 'Placeholder Text:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-captcha-placeholder-text">	
		<li>				    
			<input  class="captcha-placeholder-show-checkbox" type="checkbox" checked /><?php esc_html_e( 'Show', 'wordform-pro' ); ?>
            <small><em>( <?php esc_html_e( 'Checked to show placeholder Text', 'wordform-pro' ); ?> )</em></small>
		</li>
		<li>				    
			<input class="wordform-captcha-placeholder-text-input" type="text" placeholder="Type Captcha Here" />
		</li>        
	</ul>	
	<hr/>

	<?php
	$captcha_templates     = (array) SftcyWordformCaptcha::wordform_captcha_background_template();
	$captcha_fonts         = (array) SftcyWordformCaptcha::wordform_available_captcha_fonts();
	$template_label_id_all = 'templateLabel-' . ( count( $captcha_templates ) + 1 ) . '-' . $element_index;
	$default_template       = ! empty( $captcha_templates[0] ) ? $captcha_templates[0] : '';
	?>

	<h4><?php esc_html_e( 'Captcha Digits:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-input-label">
		<li>
			<select class="wordform-captcha-digit-length-select">
				<?php for ( $i = 3; $i <= 8; $i++ ) : ?>
					<option value="<?php echo esc_attr( $i ); ?>" <?php selected( 4, $i, true ); ?>><?php echo esc_html( $i ); ?></option>
				<?php endfor; ?>
			</select>
			<small><em><?php esc_html_e( 'Select how many random digits will be shown in the captcha image.', 'wordform-pro' ); ?></em></small>
		</li>
	</ul>
	<hr/>

	<h4><?php esc_html_e( 'Captcha Font Style:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-input-label">
		<li>
			<select class="wordform-captcha-font-style-select">
				<?php foreach ( $captcha_fonts as $font_slug => $font ) : ?>
					<option value="<?php echo esc_attr( $font_slug ); ?>" <?php selected( 'blackopsone', $font_slug, true ); ?>><?php echo esc_html( $font['label'] ); ?></option>
				<?php endforeach; ?>
			</select>
			<small><em><?php esc_html_e( 'Used in both the builder preview and the generated captcha image.', 'wordform-pro' ); ?></em></small>
		</li>
	</ul>
	<hr/>

	<h4><?php esc_html_e( 'Captcha Template Align:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-build-captcha-template-align">	
		<li>				    			
			<input type="radio" id="wordFormCaptchaTemplateBtnAlignLeft" class="wordform-build-captcha-template-align-input" name="wordform-build-captcha-template-align-input" value="left" checked="checked" />
			<label for="wordFormFormCaptchaTemplateBtnAlignLeft"><?php esc_html_e( 'Left', 'wordform-pro' ); ?></label>&nbsp;&nbsp;			
			<input type="radio" id="wordFormFormCaptchaTemplateBtnAlignCenter" class="wordform-build-captcha-template-align-input" name="wordform-build-captcha-template-align-input" value="center" />
			<label for="wordFormFormCaptchaTemplateBtnAlignCenter"><?php esc_html_e( 'Center', 'wordform-pro' ); ?></label>&nbsp;&nbsp;
			<input type="radio" id="wordFormFormCaptchaTemplateBtnAlignRight" class="wordform-build-captcha-template-align-input" name="wordform-build-captcha-template-align-input" value="right" />
			<label for="wordFormFormCaptchaTemplateBtnAlignRight"><?php esc_html_e( 'Right', 'wordform-pro' ); ?></label>			
		</li>
	</ul>	
	<hr/>

	<h4><?php esc_html_e( 'Captcha Template:', 'wordform-pro' ); ?></h4>
	<ul class="wordform-captcha-style-mode-group">
		<li>
			<label>
				<input type="radio" name="wordform-captcha-style-mode-<?php echo esc_attr( $element_index ); ?>" class="wordform-captcha-style-mode-radio" value="template" checked="checked" />
				<?php esc_html_e( 'Template Image', 'wordform-pro' ); ?>
			</label>
			&nbsp;&nbsp;
			<label>
				<input type="radio" name="wordform-captcha-style-mode-<?php echo esc_attr( $element_index ); ?>" class="wordform-captcha-style-mode-radio" value="dynamic" />
				<?php esc_html_e( 'Dynamic Color', 'wordform-pro' ); ?>
			</label>
		</li>
		<li><small><em><?php esc_html_e( 'Keep the existing template mode, or generate a cleaner captcha image from your selected colors.', 'wordform-pro' ); ?></em></small></li>
	</ul>
	<hr/>

	<div class="wordform-captcha-template-settings-group">
	<ul class="wordform-field-options">
		<li class="wordform-captcha-template-all-option">
			<label for="<?php echo esc_attr( $template_label_id_all ); ?>" class="wordform-captcha-template-selection-label-wrapper">
				<input type="radio" id="<?php echo esc_attr( $template_label_id_all ); ?>" name="wordform-captcha-template-selection-<?php echo esc_attr( $element_index ); ?>" class="wordform-captcha-template-selection wordform-captcha-template-radio" value="all" /> 
				<strong><?php esc_html_e( 'All', 'wordform-pro' ); ?></strong>				
				<small>(<?php esc_html_e( 'Template will be selected randomly.', 'wordform-pro' ); ?>)</small>
			</label>
		</li>
	<?php
	foreach ( $captcha_templates  as $key => $captcha_background_template_image_name ) {
		$template_label_id  = 'templateLabel-' . $key . '-' . $element_index;
		$template_image_url = plugin_dir_url( __DIR__ ) . '../admin/views/captcha-templates-images/' . $captcha_background_template_image_name;
		?>
		<li>
			<label for="<?php echo esc_attr( $template_label_id ); ?>" class="wordform-captcha-template-selection-label-wrapper">	        
			<input id="<?php echo esc_attr( $template_label_id ); ?>" name="wordform-captcha-template-selection-<?php echo esc_attr( $element_index ); ?>" class="wordform-captcha-template-image-selection wordform-captcha-template-radio" value="<?php echo esc_attr( $captcha_background_template_image_name ); ?>" type="radio" <?php checked( $default_template, $captcha_background_template_image_name, true ); ?>   />					    
			<img class="wordform-captcha-template-image" src="<?php echo esc_url( $template_image_url ); ?>" alt="Captcha Image" />			
			</label>          
		</li>
	<?php } ?>	
	</ul>
	</div>
	<div class="wordform-captcha-dynamic-colors-group" style="display:none;">
		<h4><?php esc_html_e( 'Dynamic Background Color:', 'wordform-pro' ); ?></h4>
		<ul class="wordform-input-label">
			<li><input class="wordform-captcha-background-color-input" type="color" value="#eef2ff" /></li>
		</ul>
		<hr/>

		<h4><?php esc_html_e( 'Captcha Text Color:', 'wordform-pro' ); ?></h4>
		<ul class="wordform-input-label">
			<li><input class="wordform-captcha-text-color-input" type="color" value="#111827" /></li>
		</ul>
		<hr/>

		<h4><?php esc_html_e( 'Noise Accent Color:', 'wordform-pro' ); ?></h4>
		<ul class="wordform-input-label">
			<li><input class="wordform-captcha-noise-color-input" type="color" value="#cbd5e1" /></li>
			<li><small><em><?php esc_html_e( 'Used for the light noise lines and dots behind the captcha numbers.', 'wordform-pro' ); ?></em></small></li>
		</ul>
	</div>
	<hr/>
	

</div><!-- /.wordform-captcha-field-options-wrapper -->
