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

<div id="<?php echo esc_attr( $element_wrapper_id ); ?>" class="wordform-tel-field-options-wrapper show-hide-common-class-all-options-wrapper-element" data-wrapper-element-type = "tel" 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" /><?php esc_html_e( 'Required', 'wordform-pro' ); ?>
			<small>( <?php esc_html_e( 'Check if Required', 'wordform-pro' ); ?> )</small>
		</li>
	</ul>
	<hr/>

	<strong><?php esc_html_e( 'Tel Label:', 'wordform-pro' ); ?></strong>
	<ul class="wordform-input-label">	
		<li>				    
			<input class="wordform-tel-label-name" type="text" placeholder="Tel Label" />
		</li>
	</ul>	
	<hr/>
	    
	<ul class="wordform-input-label wordform-options-tel-settings-values-ul-wrapper">	        
		<li>				
            <label><?php esc_html_e( 'Tel Number MinLength:', 'wordform-pro' ); ?></label><br/>
			<input class="wordform-tel-min-length" data-tel-length-field = "min" type="number" value="6" placeholder="6" />
		</li>
		<li>
            <label><?php esc_html_e( 'Tel Number MaxLength:', 'wordform-pro' ); ?></label><br/>    				    
			<input class="wordform-tel-max-length" data-tel-length-field = "max" type="number" value="14" placeholder="14" />
		</li>
        <hr/>
		<li>
			<input class="telhints-checkbox" type="checkbox" /><?php esc_html_e( 'Show Hints', 'wordform-pro' ); ?>			
            <input class="wordform-input-tel-selected-pattern-regex-example-phone-numbers" type="text" value="Ex: +33123456789, 49891234567" /><br/>
            <small><em>( <?php esc_html_e( 'If checked Phone hint shown beside Tel label', 'wordform-pro' ); ?> )</em></small>			
		</li>
	</ul>	
    <hr/>
    
	<ul class="wordform-input-tel-selected-pattern-ul">				
        <li>
            <strong><?php esc_html_e( 'Selected Regex Pattern:', 'wordform-pro' ); ?></strong>
        </li>
		<li>            
            <input class="wordform-input-tel-selected-pattern-regex-value" type="text" value="^\+?[0-9]{6,14}$" readonly />			
		</li> 
	</ul>
    <hr/>
    
    <div class="wordform-default-tel-pattern-list-wrapper-div">                        
        <ul>
            <li>
                <strong><?php esc_html_e( 'Select Regex Pattern:', 'wordform-pro' ); ?></strong>
            </li>
            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^\+?[0-9]{6,14}$" checked>
                    <b>Generic Flexible International</b><br>
                    <code>Pattern="^\+?[0-9]{6,14}$"</code><br>
                    ✅ <em>Ex: +33123456789, 49891234567</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^\+?[1-9]\d{1,14}$">
                    <b>Basic International Format (E.164)</b><br>
                    <code>Pattern="^\+?[1-9]\d{1,14}$"</code><br>
                    ✅ <em>Ex: +14155552671, 14155552671</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^\+?[0-9]{1,4}?[-.\s]?(\(?[0-9]{1,4}?\)?[-.\s]?)*[0-9]{1,9}$">
                    <b>International with Spaces, Dashes, or Dots</b><br>
                    <code>Pattern="^\+?[0-9]{1,4}?[-.\s]?(\(?[0-9]{1,4}?\)?[-.\s]?)*[0-9]{1,9}$"</code><br>
                    ✅ <em>Ex: +1-415-555-2671, +44 20 7946 0958, +91.98765.43210</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^(\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$">
                    <b>North America (USA/Canada, NANP)</b><br>
                    <code>Pattern="^(\(\d{3}\)|\d{3})[-\s]?\d{3}[-\s]?\d{4}$"</code><br>
                    ✅ <em>Ex: (415) 555-2671, 415-555-2671</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$">
                    <b>UK Phone Numbers</b><br>
                    <code>Pattern="^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$"</code><br>
                    ✅ <em>Ex: +44 7700 900123, 07700 900123</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="^(\+91[\-\s]?)?[6-9]\d{9}$">
                    <b>India (Mobile Numbers)</b><br>
                    <code>Pattern="^(\+91[\-\s]?)?[6-9]\d{9}$"</code><br>
                    ✅ <em>Ex: +91 9876543210, 9876543210</em>
                </label>
            </li>

            <li>
                <label>
                    <input type="radio" name="phonePattern" value="">
                    <b>Write Custom Regex Pattern</b><br/>      
                    <input class="wordform-input-tel-custom-pattern-regex-value" type="text" value="" placeholder="Write Regex Pattern" />			                                              
                </label>
                <small><i class="fa-solid fa-circle-info"></i> <?php esc_html_e( 'Ensure the regex pattern is valid; otherwise, phone number input may not function correctly.', 'wordform-pro' ); ?></small><br/>
            </li>
        </ul>    
    </div>
	
</div><!-- /.wordform-tel-field-options-wrapper -->
