<?php
/**
 * Login Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 7.0.1
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

do_action( 'woocommerce_before_customer_login_form' ); ?>

<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>
<?php
$themeurl = get_theme_root_uri() . '/';
?>
<style>
    .float-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        margin-bottom: 5%;
    }
    .float-child{
        border: 1px solid #c36;
        font-weight: bold;
        padding: 8px 0px 8px 26px;
        background: #fcb900;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
		padding: 8px 0px 8px 26px;
		border-radius: 8px 8px 8px 8px;
		color:#000;
		text-align: center;
    }
	.woocommerce-privacy-policy-text{display:none;}
	.login-class{
		border: 1px solid #cfc8d8;
    padding: 20px;
    margin: 2em 0;
    text-align: left;
    border-radius: 5px;
	}
	.close{float:right;}
	#pop-outer-reg {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
        height: 100%;
		z-index: 10;
        overflow:scroll;
        padding: 40px 40px 0 40px;
	}
	.pop-inner {
		background-color: #fff;
		width: 500px;
		height: auto;
		padding: 25px;
		margin: 5% auto;
        
	}
    .error-msg,.required{color:red;font-weight:bold;margin: 0 !important;float: none !important;}
    .succ-msg{color:#5cb85c}

	.input {
		height: 45px;
  		width: 42px;
  		border-radius: 6px;
		border: none;
		border-bottom: 3px solid rgba(0, 0, 0, 0.5);
		margin: 0 10px;
		text-align: center;
		font-size: 36px;
		cursor: not-allowed;
		pointer-events: none;
	}
	
	.input:focus {
		border-bottom: 3px solid orange;
		outline: none;
	}
	
	.input:nth-child(1) {
		cursor: pointer;
		pointer-events: all;
	}
	#otpstatus{
		margin: 2%;
		padding: 2%;
		color: #5cb85c;
		font-weight: bold;
	}
	.required-fields{
		color:red;
		font-weight:bold;
		font-size:16px;
	}
	.login-class h3{color:#EE1A21 !important;font-size: 1.75rem !important;}
	.text-h-18{font-weight:bold;color:#EE1A21;font-size: 1.75rem;}
	.loginSellingPoints {
		color:#000;
		padding: 20px 0 10px 10px;
		font-weight: bold;
	}
</style>
<div class="u-columns col2-set row" id="customer_login">

	<div class="u-column1 col-md-6">

<?php endif; ?>
		<div class="login-class">
		<div class="text-h-18">Sign In</div><br>
		
                        <div class="float-container">
                            <div class="float-child" id="usernametab">Login with Email</div>   
                            <div class="float-child" id="otptab">Login with Mobile</div>
                        </div>
                         
                        <form class="woocommerce-form woocommerce-form-login login" method="post" id="loginUserName">
							<h5><?php esc_html_e( 'Login with Email', 'martfury' ); ?></h5>
							<?php do_action( 'woocommerce_login_form_start' ); ?>
                            <label for="customer_firstname" class="">Username or email address<span class="required-fields">*</span></label>
                            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                                <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" required
                                       placeholder="<?php esc_attr_e( 'Username or email address', 'woocommerce' ); ?>"
                                       name="username" id="username" autocomplete="username"
                                       value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>"/>
                            </p>

                            <p class="">
                            <label for="customer_firstname" class="">Password <span class="required-fields">*</span></label>
                                <input class="woocommerce-Input woocommerce-Input--text input-text form-control" required
                                       placeholder="<?php esc_attr_e( 'Password', 'martfury' ); ?>" type="password"
                                       autocomplete="current-password"
                                       name="password" id="password"/>
                            </p>

							<?php do_action( 'woocommerce_login_form' ); ?>

                            <p class="form-row">
                                <span class="woocommerce-form-row__remember">
                                    <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
                                        <input class="woocommerce-form__input woocommerce-form__input-checkbox"
                                               name="rememberme" type="checkbox" id="rememberme" value="forever"/>
                                        <span><?php esc_html_e( 'Remember me', 'martfury' ); ?></span>
                                     </label>
                                   &nbsp;&nbsp;<a class="lost-password"
                                      href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Forgot your password?', 'martfury' ); ?></a>
                                </span> <br>
								</p>
								<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
                                <button type="submit" class="btn btn-primary" name="login"
                                        value="<?php esc_attr_e( 'Login', 'martfury' ); ?>"><?php esc_html_e( 'Login', 'martfury' ); ?></button>
                            

							<?php do_action( 'woocommerce_login_form_end' ); ?>

                        </form>
						<?php
                        $return = log_the_user_in();
                        if( is_wp_error( $return ) ) {
                            echo $return->get_error_message();
                        }
                        ?>
                        <form class="" method="post" id="loginOTP" style="display:none">
                            <h5><?php esc_html_e( 'Login with OTP', 'martfury' ); ?></h5>
                            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
                            <label for="customer_firstname" class="">Customer Phone Number <span class="required-fields">*</span></label>
                                <input type="text" class="woocommerce-Input form-control" required
                                        placeholder="<?php esc_attr_e( 'Phone Number', 'martfury' ); ?>"
                                        name="user_phone_otp" id="user_phone_otp" autocomplete="user_phone_otp"
                                        value="" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"/>
										<span id="loginValidstatus" class="error-msg"></span>
                            </p>
                            <div id="getMobileOtp" style="display:none">
                                <a href="javascript:void(0);" id="" class="" style="color:#EE1A21">Click here to Get OTP</a>
                            </div>
							
                            <div id="otpLoginVerifyField" style="display:none">
                            <div id="inputs" class="inputs">
                                <input class="form-control" type="text" id="loginotpvalue" maxlength="4" value="" placeholder="Verify OTP" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
                                <a href="javascript:void(0);" id="verifyLoginotp" style="color:#EE1A21">Click here to Verify OTP</a>
                                    <div id="mobileTimer"></div>
                                    <a href="javascript:void(0);" id="resendloginotp" style="display:none" style="color:#EE1A21">Click here to Resend OTP</a>
									<span id="loginotpstatus"></span>
                            </div>


                            </div>
                            
                            <p class="form-row">
							
                                <?php wp_nonce_field( 'woocommerce-login-with-otp', 'woocommerce-login-with-otp' ); ?>
                                <button type="submit" class="btn btn-primary" id="validateotpbtn" name="login_otp"
                                        value="<?php esc_attr_e( 'Login with OTP', 'martfury' ); ?>"><?php esc_html_e( 'Login with OTP', 'martfury' ); ?></button>
                            </p>
                        </form>
</div>
<?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?>

	</div>

	<div class="u-column2 col-md-6">

		
		<div class="login-class">
			<div class="text-h-18">Not a Member Yet?<br></div>
                
                <div class="loginSellingPoints">
				Create an Account to: <br><br>
                    -&nbsp;Receive Exclusive Offers
                    <br><br>
                    -&nbsp;Add Items to Your Wishlist
                    <br><br>
                    -&nbsp;View Recently Rental Product
                    <br><br>
                    -&nbsp;Make Rental
                </div>
                <div class="clear" style="height:15px">&nbsp;</div>
                <button type="button" class="btn btn-primary registerBtn">Create Account</button>
                <br>
            </div>
			<div style="display: none;" id="pop-outer-reg">
            <div class="pop-inner">
                <button class="close">X</button>
                <h4><?php esc_html_e( 'Create a free account', 'woocommerce' ); ?></h4>
				<h5>Already a member? <a href="">Sign in</a></h5>
		<form method="post" class="woocommerce-form woocommerce-form-register register form-group" <?php do_action( 'woocommerce_register_form_tag' ); ?> id="registrationForm">

			<?php do_action( 'woocommerce_register_form_start' ); ?>
			
			<p class="form-row form-row-first validate-required" id="billing_last_name_field" data-priority="20">
				<label for="customer_firstname" class="">First Name <span class="required-fields">*</span></label>
				<span class="woocommerce-input-wrapper">
					<input type="text" class="input-text form-control" name="customer_firstname" id="customer_firstname" placeholder="Enter First Name" value="">
				</span>
				<span class="error-message firstname_wc"></span>
			</p>
			<p class="form-row form-row-last validate-required" id="billing_last_name_field" data-priority="20">
				<label for="customer_firstname" class="">Last Name <span class="required-fields">*</span></label>
					<span class="woocommerce-input-wrapper">
					<input type="text" class="input-text form-control" name="customer_lastname" id="customer_lastname" placeholder="Enter Last Name" value="">
				</span>
				<span class="error-message lastname_wc"></span>
			</p>

			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

				<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
					<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
					<input type="text" class="woocommerce-Input woocommerce-Input--text input-text form-control" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
				</p>

			<?php endif; ?>			

			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
				<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
				<input type="email" class="woocommerce-Input woocommerce-Input--text input-text form-control" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
				<span class="error-message email_wc"></span>
			</p>
			<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

				<p class="">
					<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
					<input type="password" class="woocommerce-Input woocommerce-Input--text input-text form-control" name="password" id="reg_password" autocomplete="new-password" />
					<span class="error-message password_wc	"></span>
				</p>

			<?php else : ?>

				<p><?php esc_html_e( 'A link to set a new password will be sent to your email address.', 'woocommerce' ); ?></p>

			<?php endif; ?>
			<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide" id="billing_last_name_field" data-priority="20">
                        <label for="billing_last_name" class="">Phone Number <span class="required-fields">*</span></label>
                            
                            <input type="text" class="woocommerce-Input woocommerce-Input--text input-text form-control" name="user_phone" id="user_phone" placeholder="Enter Phone Number" value="" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
                        
						<span class="error-message phone_wc"></span>
						<span class="otpstatus"></span>
						<input type="hidden" id="phoneExists" name="phoneExists" value="0">
						<input type="hidden" id="otp_verify_status" name="otp_verify_status" value="1">
                    </p>
<div id="getOtp" style="display:none">
	<a href="javascript:void(0);" id="" class="">Click here to get OTP</a>
</div>
<div id="otpVerifyField" style="display:none">
<div id="inputs" class="inputs">
	<input class="input-text" type="text" id="otpvalue" maxlength="4" value="" placeholder="Verify OTP" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
	<a href="javascript:void(0);" id="verifyotp">Click here to verify OTP</a>
	<div id="timer"></div>
		<!--<div id="safeTimer" style="display:none">
			<p id="safeTimerDisplay">03:00</p>
		</div>
		<div id="resetTimer" style="display:none">
			<p id="resetTimerDisplay">03:00</p>
		</div> -->
		<a href="javascript:void(0);" id="resendotp" style="display:none">Click here to Resend OTP</a>
</div>


</div>
<span id="otpstatus"></span>
			

			<?php do_action( 'woocommerce_register_form' ); ?>

			<p class="woocommerce-form-row form-row">
				<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
				<button type="submit" class="btn btn-primary" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
			</p>

			<?php do_action( 'woocommerce_register_form_end' ); ?>

		</form>
		</div>
		</div>

	</div>

</div>
<?php endif; ?>

<?php do_action( 'woocommerce_after_customer_login_form' ); ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  jQuery("#otpstatus").html("");
  jQuery("#loginotpstatus").html("");
  var timerInterval;
 jQuery('#user_phone').on('keyup', function() {
	//alert(jQuery('#afreg_additional_6324').val.length);
	var lengthCount = this.value.length;
	if(lengthCount>=10){
		jQuery("#getOtp").css("display", "block");
		//if (confirm("Are You Sure to Send OTP") == true) {
			
			//$("#otpVerifyField").css("display", "block");
		//}
	}
 });
 jQuery('#validateotpbtn').on('click', function() {
	var user_phone = jQuery('#user_phone_otp').val();
	if(user_phone.length<10){
		jQuery("#loginValidstatus").html("Please Enter 10 Digit Mobile Number");
		return false;
	}
 });	 
 jQuery('#getOtp').on('click', function() {
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=getotp';?>";
	var user_phone = jQuery('#user_phone').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone,
            success: function(data){
				if(data == 0){
					jQuery("#otpVerifyField").css("display", "block");
					clearInterval(timerInterval);
                    startTimer(180);
					jQuery("#otpstatus").html("4 Digit OTP Sent Successfully in your mobile number through sms");
					jQuery('#getOtp').css("display", "none");
				}else{
					jQuery("#otpstatus").html("Error Occurs!!!");
				}
                
            }
        });
	
 });
 jQuery('#resendotp').on('click', function() {
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=resendotp';?>";
	var user_phone = jQuery('#user_phone').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone,
            success: function(data){
				if(data == 0){
					jQuery("#otpstatus").html("OTP Resent Successfully");
					jQuery('#otpvalue').css("display", "block");
					jQuery('#verifyotp').css("display", "block");
					jQuery('#timer').css("display", "block");
					clearInterval(timerInterval);
                    startTimer(180);
				}else{
					jQuery("#otpstatus").html("Error Occurs!!!");
				}
            }
        });
	
 });
 jQuery('#reg_email').on('blur', function() {
        var lead_email = jQuery('#reg_email').val();
        var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=emailwp';?>";
		if(lead_email !== ''){
			jQuery.ajax({
				type: "POST",
				url: vurl,
				data: "lead_email=" + lead_email,
				success: function(data){
					if(data == 1){
						jQuery(".email_wc").html("Email Already Exists. Try Another Email!!").addClass("error-msg");
						return false;
					}else{
						jQuery(".email_wc").html("");
						return true;
					}
					
				}
			});
		}else{
			jQuery(".email_wc").html('');
			return true;
		}
    });
    jQuery('#user_phone').on('keyup', function() {
        var lead_phone = jQuery('#user_phone').val();
        var purl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=phonewp';?>";
		if(lead_phone!== ''){
			jQuery.ajax({
				type: "POST",
				url: purl,
				data: "lead_phone=" + lead_phone,
				success: function(data){
					if(data == 1){
						jQuery(".phone_wc").html("Phone number Already Exists. Try Another One!!").addClass("error-msg");
						jQuery('#getOtp').css("display", "none");
						jQuery("#phoneExists").val(1);
						return false;
					}else{
						jQuery(".phone_wc").html("");
						return true;
					}
					
				}
			});
		}else{
			jQuery(".phone_wc").html("");
			return true;
		}
    });
	function startTimer(duration) {
            var timer = duration, minutes, seconds;
            timerInterval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                $('#timer').text(minutes + ":" + seconds);

                if (--timer < 0) {
                    clearInterval(timerInterval);
					jQuery('#timer').css("display", "none");
                    $('#otpstatus').html("OTP expired. Please request a new one.");
					expireotp();
					jQuery('#otpvalue').css("display", "none");
					jQuery('#verifyotp').css("display", "none");
                }
            }, 1000);
        }
 /* function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = 0;
			clearInterval(timer);
			//alert("Timedout");
            timer = duration; // uncomment this line to reset timer automatically after reaching 0
        }
    }, 1000);
    if(timer == 0){
		alert("Timedout");
	}
} */
//setTimeout(expireotp, 180000);
	 function expireotp(){
		var user_phone = jQuery('#user_phone').val();
		jQuery('#resendotp').css("display", "block");
			var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=expireotp';?>";
			jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone,
            success: function(data){
				jQuery('#resendotp').css("display", "block");
            }
        });
	}

jQuery('#verifyotp').on('click', function() {
	verifyOtp();
});
function verifyOtp(){
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=validateotp';?>";
	
	var otp = jQuery('#otpvalue').val();
	if(otp == '' || otp.length < 4){
		alert("Enter 4 digit OTP ");
		return false;
	}
	var user_phone = jQuery('#user_phone').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: {
                'otp': otp,
                'user_phone': user_phone
            },
            success: function(data){
				if(data == 2){
					jQuery("#otpstatus").html("OTP Expired");
					jQuery('#resendotp').css("display", "block");
				}else if(data == 3){
					jQuery("#otpstatus").html("OTP Validated Successfully").css({"color": "green"});
					jQuery("#otp_verify_status").val(2);
					jQuery('#resendotp').css("display", "none");
					jQuery('#getotp').css("display", "none");
					jQuery('#otpVerifyField').css("display", "none");
					jQuery("#registerwc").css('display', 'block');
					jQuery(".phone_wc").html('');
				}else if(data == 4){
					jQuery("#otpstatus").html("Invalid OTP. Try Again!!!").css({"color": "red"});
					clearInterval(timerInterval);
					jQuery('#timer').css("display", "none");
					jQuery('#resendotp').css("display", "block");
					jQuery('#getotp').css("display", "none");
					jQuery('#otpVerifyField').css("display", "block");
					/* jQuery('#otpvalue').css("display", "none");
					jQuery('#verifyotp').css("display", "none"); */
				}else if(data == 5){
					jQuery("#otpstatus").html("Error Occurs. Try Again!!");
					jQuery('#resendotp').css("display", "block");
					jQuery('#getotp').css("display", "none");
					jQuery('#otpVerifyField').css("display", "none");
				}
            }
        });
}

 jQuery("#registerwc").css('display', 'none');
    jQuery("#loginotpstatus").html("");
    jQuery('#usernametab').on('click', function() {
        jQuery("#loginUserName").css("display", "block");
        jQuery("#loginOTP").css("display", "none");
        jQuery('#otptab').css("background", "#ccc");
        jQuery('#usernametab').css("background", "orange");
    }); 
    jQuery('#otptab').on('click', function() {
        jQuery("#loginUserName").css("display", "none");
        jQuery("#loginOTP").css("display", "block");
        jQuery('#usernametab').css("background", "#ccc");
        jQuery('#otptab').css("background", "orange");
    });

    jQuery('#user_phone_otp').on('keyup', function() {
	//alert(jQuery('#afreg_additional_6324').val.length);
	var lengthCount = this.value.length;
	if(lengthCount>=10){
        jQuery("#getMobileOtp").css("display", "block");
		jQuery("#validateotpbtn").prop('disabled', true);
		//if (confirm("Are You Sure to Send OTP") == true) {
			
		//}
	}
 });
 jQuery('#getMobileOtp').on('click', function() {
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=getmobileotp';?>";
	var user_phone_otp = jQuery('#user_phone_otp').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone_otp,
            success: function(data){
                jQuery("#loginotpstatus").html("");
				if(data == 0){
					jQuery("#otpLoginVerifyField").css("display", "block");
					clearInterval(timerInterval);
                    startMobileTimer(180); // 3 minutes countdown

					jQuery("#loginotpstatus").html("OTP Sent Successfully").css("color", "green");
					jQuery('#getMobileOtp').css("display", "none");
				}else if(data == 1){
					jQuery("#loginotpstatus").html("Error Occurs!!!");
				}else if(data == 3){
					jQuery("#loginotpstatus").html("Invalid Mobile Number!!!").addClass("error-msg");
				}
                
            }
        });
	
 });
 
 function startMobileTimer(duration) {
            var timer = duration, minutes, seconds;
            timerInterval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                $('#mobileTimer').text(minutes + ":" + seconds);

                if (--timer < 0) {
                    clearInterval(timerInterval);
                    jQuery('#mobileTimer').text("OTP expired. Please request a new one.");
					expireloginotp();
                }
            }, 1000);
        }
 
	 function expireloginotp(){
		var user_phone = jQuery('#user_phone_otp').val();
		jQuery('#resendloginotp').css("display", "block");
			var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=expireloginotp';?>";
			jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone,
            success: function(data){
                jQuery("#loginotpstatus").html("");
                if(data == 1){
                    jQuery("#loginotpstatus").html("OTP Expired");
				    jQuery('#resendloginotp').css("display", "block");
                }else if(data == 2){
                    jQuery("#loginotpstatus").html("Invalid Mobile Number");
					jQuery("#loginotpstatus").html("");
                }else{
                    jQuery("#loginotpstatus").html("Error Occurs!!!");
					jQuery("#loginotpstatus").html("");
                }
				
            }
        });
	}

jQuery('#resendloginotp').on('click', function() {
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=resendloginotp';?>";
	var user_phone = jQuery('#user_phone_otp').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: "user_phone=" + user_phone,
            success: function(data){
                jQuery("#loginotpstatus").html("");
				if(data == 0){
					jQuery("#loginotpstatus").html("OTP Resent Successfully")
                    .css({"color": "green"});
					clearInterval(timerInterval);
                    startMobileTimer(180); // 3 minutes countdown
				}else if(data == 2){
                    jQuery("#loginotpstatus").html("Invalid Mobile Number");
                }else{
                    jQuery("#loginotpstatus").html("Error Occurs!!!");
                }
            }
        });
	
 });

 jQuery('#verifyLoginotp').on('click', function() {
	verifyLoginOtp();
});
function verifyLoginOtp(){
	var vurl = "<?php echo get_bloginfo('url').'/wp-content/themes/hello-elementor-child/custom/api.php?type=validateloginotp';?>";
	
	var otp = jQuery('#loginotpvalue').val();
	if(otp == '' || otp.length < 4){
		alert("Enter 4 didgit Otp ");
		return false;
	}
	var user_phone = jQuery('#user_phone_otp').val();
	jQuery.ajax({
            type: "POST",
            url: vurl,
            data: {
                'otp': otp,
                'user_phone': user_phone
            },
            success: function(data){
                jQuery("#loginotpstatus").html("");
				if(data == 2){
					jQuery("#loginotpstatus").html("OTP Expired")
                    .css({"color": "red"});
					jQuery('#resendloginotp').css("display", "block");
				}else if(data == 3){
					jQuery("#loginotpstatus").html("OTP Validated Successfully").css("color", "green");
					jQuery('#resendloginotp').css("display", "none");
					jQuery('#getMobileOtp').css("display", "none");
					jQuery('#verifyLoginotp').css("display", "none");
                    jQuery("#validateotpbtn").prop('disabled', false);
				}else if(data == 4){
					jQuery("#loginotpstatus").html("Invalid OTP. Try Again!!!")
                    .css({"color": "red"});
					jQuery('#resendloginotp').css("display", "block");
					jQuery('#getMobileOtp').css("display", "none");
					jQuery('#verifyLoginotp').css("display", "block");
				}
            }
        });
}

jQuery(".registerBtn").on('click', function() {
	jQuery('#pop-outer-reg').css("display", "block");
});   
jQuery(".close").on('click', function() {
	jQuery('#pop-outer-reg').css("display", "none");
});
$('#registrationForm').submit(function(event) {
	var customer_firstname = $('#customer_firstname').val();
	var customer_lastname = $('#customer_lastname').val();
	var password = $('#reg_password').val();
	var email = $('#reg_email').val();
	var user_phone = $('#user_phone').val();
	var otp_verify_status = $('#otp_verify_status').val();
	var phoneExists = $('#phoneExists').val();
	if(customer_firstname == ''){
		jQuery('.firstname_wc').html("Please Enter First Name").addClass("error-msg");
		return false;
	}else{
		jQuery('.firstname_wc').html('');
	}
	if(customer_lastname == ''){
		jQuery('.lastname_wc').html("Please Enter Last Name").addClass("error-msg");
		return false;
	}else{
		jQuery('.lastname_wc').html('');
	}
	if(email == ''){
		jQuery('.email_wc').html("Please Enter Email").addClass("error-msg");
		return false;
	}else{
		jQuery('.email_wc').html('');
	}
	if(password == ''){
		jQuery('.password_wc').html("Please Enter Password").addClass("error-msg");
		return false;
	}else{
		jQuery('.password_wc').html('');
	}	
	if(user_phone == ''){
		jQuery('.phone_wc').html("Please Enter Phone Number").addClass("error-msg");
		return false;
	}else{
		jQuery('.phone_wc').html('');
	}
	if($("#user_phone").val().length !== 10){
		jQuery('.phone_wc').html("Please Enter 10 Digit Phone Number").addClass("error-msg");
		return false;
	}else{
		jQuery('.phone_wc').html('');
	}
	if(otp_verify_status == '1'){
		jQuery('.phone_wc').html("Please Verify OTP!!").addClass("error-msg");
		return false;
	}else{
		jQuery('.phone_wc').html('');
	}
	if(phoneExists == '1'){
		jQuery('.phone_wc').html("Phone number Already Exists. Try Another One!!").addClass("error-msg");
		return false;
	}else{
		jQuery('.phone_wc').html('');
	}
});
// jQuery(document).ready(function ($) {
//     $('#reg_password').on('input', function () {
//         const password = $(this).val();
// console.log("success");
//         // Wait for WooCommerce to update the strength meter
//         setTimeout(function () {
//             const $strength = $('.woocommerce-password-strength');

//             // Custom validation: at least 8 chars, upper, lower, number, special char
//             const isValid = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{7,}$/.test(password);

//             if (isValid && $strength.hasClass('weak')) {
//                 // Override only if Woo says "weak"
//                 $strength
//                     .removeClass('weak short')
//                     .addClass('medium')
//                     .text('Medium');
//             }
//         }, 100); // small delay to allow Woo update to happen first
//     });
// });


  </script>