<?php /* Template Name: Signup Page */
get_header(); ?>
 <section class="register-sec">
    <div class="container custom-container">
        <div id="signup-form-result"></div>
        <div class="register-inner">
            <div class="left-sec">
                <div class="left-content">
                     <div class="register-title">
                   Create Your <br> <span>Account</span>
                </div>
                <div class="register-content">
                    Join Security Equipment Depot for secure access 
                to premium equipment and services
                </div>
                </div>
               
            </div>
            <div class="rt-sec">
            <div class="registr-container">
        
          
         <form class="register-form" id="signupForm" data-parsley-validate autocomplete="off">
            <div class="row">
                <div class="col-md-6">
                <div class="form-group long-msg-error">
                    <label for="firstName" class="form-label">First Name <span class="star">*</span></label>
                    <div class="position-relative reg-form-inner">
                    <span class="form-icon "><img src="<?php echo get_template_directory_uri(); ?>/img/person.svg" alt="person"></span>
                    <input class="form-control" type="text" autocomplete="off" maxlength="50" name="first_name" 
                                            data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"  
                                            required  
                                            data-parsley-trigger="change"
                                            data-parsley-required-message="First name is required."
                                            data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."oninput="validateName(this)" placeholder="Enter your first name">
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label for="lastName" class="form-label">Last Name <span class="star">*</span></label>
                    <div class="position-relative reg-form-inner">
                        <span class="form-icon "><img src="<?php echo get_template_directory_uri(); ?>/img/person.svg" alt="person"></span>
                    <input class="form-control" type="text" autocomplete="off" maxlength="50"  name="last_name" 
                                            data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"  
                                            required  
                                            data-parsley-trigger="change"
                                            data-parsley-required-message="Last name is required."
                                            data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed." oninput="validateName(this)" placeholder="Enter your last name">
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label for="email" class="form-label">Email Address <span class="star">*</span></label>
                    <div class="position-relative reg-form-inner">
                    <span class="form-icon "><img src="<?php echo get_template_directory_uri(); ?>/img/email-img.svg" alt="email"></span>
                    <input class="form-control" type="email" autocomplete="off" value="" name="email" id="email" required data-parsley-type="email" maxlength="50" data-parsley-trigger="change" data-parsley-required-message="Email is required." 
                                        data-parsley-type-message="Enter a valid email address." placeholder="Enter your email address">
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label for="phone" class="form-label">Phone Number <span class="star">*</span></label>
                    <div class="phone-input-wrapper d-flex">
                        <select class="country-code form-select" name="country_code" required data-parsley-required-message="Please select a country code.">
                            <!-- <option value="">Select Country Code</option> -->
                            <?php foreach ($country_codes as $code => $label): ?>
                                <option value="<?php echo esc_attr($code); ?>" <?php selected($code, '+1'); ?>>
                                    <?php echo esc_html($code); ?>
                                </option>
                            <?php endforeach; ?>

                        </select>
                        <input class="form-control phone-number-input" type="text" maxlength="10" autocomplete="off" name="phone" required data-parsley-pattern="^[0-9]+$" 
                        data-parsley-length="[10,10]"
                                            data-parsley-trigger="change" 
                                            data-parsley-required-message="Phone number is required."
                                            data-parsley-pattern-message="Only numeric values are allowed."
                                            data-parsley-length-message="Phone number must be exactly 10 digits long."
                                            onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                            inputmode="numeric" placeholder="Enter your phone number" >
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label for="password" class="form-label">Password <span class="star">*</span></label>
                    <div class="position-relative reg-form-inner reg-form-inner">
                    <span class="form-icon "><img src="<?php echo get_template_directory_uri(); ?>/img/lock-icon.svg" alt="loc"> </span>
                    <input class="form-control" type="password" maxlength="20" autocomplete="new-password" value="" name="password" id="password" required minlength="8" data-parsley-required-message="Password is required."
                                        data-parsley-length-message="Password must be between 8 and 20 characters long."
                                        data-parsley-minlength-message="Password must be at least 8 characters long." placeholder="Enter your password">
                    <span class="form-icon eye-ico">
                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
                    </span>
                    
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label for="confirmPassword" class="form-label">Confirm Password <span class="star">*</span></label>
                    <div class="position-relative reg-form-inner">
                    <span class="form-icon "> <img src="<?php echo get_template_directory_uri(); ?>/img/lock-icon.svg" alt="password" /></span>
                    <input class="form-control" type="password" maxlength="20" autocomplete="off" id="confirm_password" name="confirm_password" required data-parsley-equalto="#password" minlength="8" data-parsley-required-message="Confirm password is required."
                    data-parsley-length-message="Password must be between 8 and 20 characters long."
                                        data-parsley-equalto-message="Passwords do not match." placeholder="Confirm your password">
                    <span class="form-icon eye-ico">
                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
                    </span>
                    
                    </div>
                </div>
                </div>
            </div>

            <div class=" form-footer">
                <a href="<?= site_url('login') ?>" class="btn btn-secondary">Back to Login</a>
                <button class="btn btn-orange" id="signUpBtn">Sign Up</button>
            </div>
            
            </form>



        </div>
        </div>
        </div>
    </div>
  </section>
<footer class="footer footer-login">
  <div class="container custom-container">
    <div class="row footer-col">
      <div class="f-col-left">
        <div class="footer-logo">
          <a href="<?=site_url();?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo"></a>
        </div>
       
      </div>

      <div class="f-col-rt">
        <div class="list-items">
            <ul class="list">
            <li>
                <a href="">Terms and Conditions</a>
            </li>
             <li>
                <a href="">Privacy Policy</a>
            </li>
             <li>
                &copy; <script>document.write(new Date().getFullYear());</script> Security Equipment Depot | Built by <a href="https://kornerstonemedia.com" target="_blank"><strong>Kornerstone Media</strong></a>
            </li>
        </ul>
        <div class="follow-sec">
        <span class="follow-txt">Follow Us</span>
         <a href="#"  class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/google-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/youtube1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/insta1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/fb-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/linkedin-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/twitter-1.svg" alt="google"></a>
        </div>
        </div>
      
      </div>
  </div>
</footer>
<?php wp_footer(); ?>
</body>

</html>