<?php $this->load->view('top');
$adminRes = get_site_email(); ?>
  <div class="clearfix"></div>
  <section class="banner_category" style="background-image: url('<?php echo theme_url();?>images/listing-banner.jpg');">
    <div class="container">
     
      <h1 class="banner_title">Login</h1>
    </div>
  </section>
	<div class="page_breadcrumbs">
		<div class="container">
			<ul>
      <li><a href="<?=site_url();?>" title="Home">Home</a>
            </li>
            <li>Login</li>
			</ul>
		</div>
	</div>
<!-- New code start from here  -->

<div class="clearfix"></div>
  <div class="container">
    <div class="row justify-content-md-center innerRegter registerform-style">      
      <div class="col p-4 p-lg-5 login-form">
        <div class="col-lg-4 col-md-4">
          <div class="panel-lite">
          <div class="thumbur">
          <i class="fa fa-user"></i>
          </div>
     <h4 id="heading">OTP LOGIN</h4>
          <?php echo validation_message(); ?>
                 <?php echo error_message(); ?>
             
           <form action="<?=site_url();?>users/loginotp" method="post" id="otpform">
               <div class="step_1">
                    <p id="status_response"></p>
          <div class="form-group">
          
              
          <input class="form-control" name="mobile" id="mobile" type="tel" maxlength="10" minlength="10" autocomplete="off" placeholder="Enter Mobile Number">
              
          </div>
        <button  type="submit" class="login_btn_1" id="submitotp">Send OTP</button>
        </div>
               <div class="step_2">   
        <div class="form-group">
<!--          <label>Mobile</label>--> 
            <br>
                 <p class="text-center" id="status_response_1"></p>
              <br>
          <input class="form-control" name="mobile_number" id="mobile_number" type="hidden" required=""  autocomplete="off">
            
          </div>
          <div class="form-group">
                <div class="divOuter_otp">
                <div class="divInner_otp">
                    <input class="chk_otp" name="otp" type="text"  autocomplete="new-password" id="otp"  maxlength="6" minlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
              </div>
          </div>
                   </div>
        <button  class="login_btn_1" id="loginotp">LOGIN</button>
                   
         
               </div>

          <div class="creadential text-center">
               <a href="#" id="resendotp_login">RESEND OTP</a>
               
               <p class="label-m">Don't have an account?</p>
               <a class="btn btn-outline-100" href="<?=base_url('register');?>">SignUp</a>
          </div>
          </form>
          </div>
          </div>

      
      </div>  
    </div>
  </div>
  <div class="clearfix"></div>
<style>
    .step_2{display: none}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js" ></script>
<script>
   
    $('#submitotp').click(function(e) {
        e.preventDefault();
        var mobile = $('#mobile').val();
        if(mobile=="")
            {
                $('#status_response').html("Please Enter Mobile Number");
            }
            else{
            $.ajax({
            url: "<?=site_url();?>users/sendotp",
            data: {mobile: mobile},
            type: "POST",
            success: function(data) {
                if (data == 'success') {
                    $('#status_response_1').html("Please Type the Verification Code sent to <?=$this->session->userdata('mobnumber');?>");
                    $('#mobile_number').val(mobile);
                    $('#heading').html("Verification Code");
                    $("#mobile_number").prop('disabled', true); 
                     $('.step_2').show();
                     $('.step_1').hide();
                } else {
                     $('.step_1').show();
                    $('#status_response').html('<div class="alert alert-danger" role="alert"><strong> Invalid! Mobile Number<button type="button" class="close" data-bs-dismiss="alert" aria-hidden="true"><i class="fa fa-remove"></i></button></div>');
                }
            }

        });
            };
    });
    
     $('#resendotp_login').click(function(e) {
        e.preventDefault();
        var mobile = $('#mobile').val();
        if(mobile!="")
            {
            $.ajax({
            url: "<?=site_url();?>users/sendotp",
            data: {mobile: mobile},
            type: "POST",
            success: function(data) {
                if (data == 'success') {
                    $('#status_response_1').html("Please Type the Resend Verification Code sent to <?=$this->session->userdata('mobnumber');?>");
                    $('#mobile_number').val(mobile);
                     $('#heading').html("Verification Code");
                     $('.step_2').show();
                     $('.step_1').hide();
                } else {
                     $('.step_1').show();
                    $('#status_response').html('<div class="alert alert-danger" role="alert"><strong> Invalid! Mobile Number<button type="button" class="close" data-bs-dismiss="alert" aria-hidden="true"><i class="fa fa-remove"></i></button></div>');
                }
            }

        });
            };
    });
    
    
    
</script>
<?php $this->load->view('bottom'); ?>
