@extends('backend.layouts.user_auth_layout')
@section('title', 'Reset Password')
@section('content')
<div class="login-box">
  <div class="login-logo">
    <p><b>{{ __('Reset Password') }}</p>
    	<p class="login-box-msg"></p>
  </div>
  <div class="card">
    <div class="card-body login-card-body">
     
      <form action="" id="forgot_passord_form" method="post">
        @csrf
        <div class="input-group mb-3 mobile_entry_field">
           <input id="mobile" type="text" onkeypress="return isNumberKey(event)"  onchange="validatePhone(this.value)" maxlength="10" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile') }}" placeholder="Enter registered mobile number" autocomplete="off" autofocus>
                                    
	        <div class="input-group-append">
	            <div class="input-group-text">
	              <span class="fas fa-phone"></span>
	          	</div>
	       	</div>
	       	<br>
        </div>
        <span class="text-danger not_exist_error"></span>
        <div class="input-group mb-3 otp_entry_field">
           <input id="userinput_otp" type="text" maxlength="6" class="form-control" name="userinput_otp" value="{{ old('userinput_otp') }}" placeholder="Enter OTP" autocomplete="off" autofocus style="border-right: 1px solid #66666670;">                      
        </div>
        <span class="text-danger otp_mismatched"></span>
        <div class="row">
          <div class="col-4">
            <button type="submit" id="send_otp_btn" class="btn btn-success btn-block">SEND OTP</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	var APP_URL = {!! json_encode(url('/')) !!}
	function isNumberKey(evt) {
	    var charCode = (evt.which) ? evt.which : event.keyCode;
	    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
	        return false;
	    }else if(charCode==46){
	    	return false;
	    } else {
	        return true;
	    }      
	}
	function validatePhone(mobile_no)
	{

	    if(mobile_no=='')
	    {
	    	$('.not_exist_error').text('');
	    	$('#send_otp_btn').prop('disabled', false);
	    }
	    else
	    {
	    	 $.ajax({
		        type: "POST",
		        url: APP_URL+'/validate-phone',
		        data: {mobile_no:mobile_no, "_token": "{{ csrf_token() }}"},
		        success: function( resp_data )
		        {	

		            if (resp_data.error!='') 
		            {
		            	$('.not_exist_error').text(resp_data.error);
		            	$('#send_otp_btn').prop('disabled', true);
		            }
		            else
		            {
		            	$('.not_exist_error').text('');
		            	$('#send_otp_btn').prop('disabled', false);
		            }
		        }
	    	});
	    }
	   
	}
</script>

<script type="text/javascript">
	$(document).ready(function(){
		var APP_URL = {!! json_encode(url('/')) !!}
		console.log(APP_URL);

		// Send OTP
	 	$('#send_otp_btn').click(function(e){
		 	e.preventDefault();
		 	var user_mobile=$('#mobile').val();
		 	if (user_mobile=='') {
		 		$('.not_exist_error').text('This field is required!');
		 		return false;
		 	}
		 	var user_input_otp=$('#userinput_otp').val();
		 	$.ajax({
		        type: "POST",
		        url: APP_URL+'/send_otp',
		        data: {user_mobile:user_mobile,user_input_otp:user_input_otp, "_token": "{{ csrf_token() }}"},
		        success: function( data )
		        {
		            if (data.error=='') 
		            {
		            	
		            	if(data.msg['status']=='verified') {
		            		window.location.href='/reset-password/'+data.msg['user_id'];
		            	}
		            	if(data.msg['status']=='failed')
		            	{
		            		$('.otp_mismatched').text('OTP Missmatch!');
		            	}
		            	if(data.msg['status']=='sent')
		            	{
		            		$('#mobile').prop('readonly', 'readonly');
			            	$('.otp_entry_field').show();
			            	$('#send_otp_btn').text('VERIFY');
			            	$('.login-box-msg').html('<h4 class="text-success"><strong>OTP Send Successfully!</strong></h4>')
		            	}
		            }
		        }
		    });
	 	});

	});
</script>
@endsection