@extends('layouts.auth')
@section('content')
<section class="vh-100">
   <div class="container-fluid h-100">
      <div class="row h-100">
         <div class="col-md-8 d-flex align-items-center justify-content-center">
            <img src="{{ asset('front/image/login.jpg') }}" alt="image" style="width:80%;">
         </div>
         <div class="col-md-4 log-in-bg user-auth-right-bg">
            <div class="login-page p-3 h-100 d-flex flex-column justify-content-center align-items-center">
               <a href="/" class=" d-inline-block mb-4">
               <img src="{{ asset('front/image/small-logo.png') }}" class="" alt="image">
               </a>
               <form class="d-block w-100" action="{{ url('verifyEmail') }}" method="post" id="verifyOtpForm">
                @csrf
                <input type="hidden" class="UserId" name="user_id" value="{{$user_id}}">
                <h3>Verify Your Email Address</h3>
                 <div class="row text-center">
                                    <h6>We've sent a verification code to the email <b>{{$user->email}}</b></h6>
                            <div class="col-lg-12">
                               <h6>Enter 4 digit code below</h6></br>
                                <div class="form-group v1">
                                    <div class="form-group v1 otp-group">
                                    <input id="otpBox1" class="numberonly" name="otp1" type="text" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)">
                                    <input id="otpBox2" class="numberonly" name="otp2" type="text" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)">
                                    <input id="otpBox3" class="numberonly" name="otp3" type="text" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)">
                                    <input id="otpBox4" class="numberonly" name="otp4" type="text" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)">
                                    </div>
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-code"></p>  
                                </div>
                            </div>
                            <div class="col-lg-12 text-center">                                    
                                <button type="submit" id="verifyOtpBtn" class="default-btn border-0 mb-4">Verify</button>
                               <p class="mt-30">Didn't receive the code? <a href="javascript:;" id="resendEmail" class="default-color">Resend email</a></p> 
                            </div>
                        </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>


<script>
   $(function(){
     //
     $('#verifyOtpBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class=""></i> Verifying...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

    //
    $('#resendEmail').on('click', function() {

        var user_id = $('.UserId').val();
       $.ajax({
            type:"post" ,
            url: "{{route('resendEmail')}}",
            data: {"user_id":user_id,"_token":"{{ csrf_token() }}"},        
            success: function (response) {
                console.log(response);
                $('.is-invalid').removeClass('is-invalid');
                if(response.success==false  ) {
                }
                if(response.success==true  ) {
                toastr.success("We've sent a verification code to the email"); 
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                alert("Error: " + errorThrown);
            }
        });
        return false;
    });

   //
    $(document).on('submit', 'form#verifyOtpForm', function (event) {
    event.preventDefault();
    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
    $('#verifyOtpBtn').attr('disabled',true);

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");

     $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {

             console.log(response);
             if(response.success==true  ) {
                var user_type = response.user_type;
                var is_completed = response.is_completed;

                 //notify
                toastr.success("You have successfully registered");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {

                    if(user_type == 'admin' && is_completed == 0){
                      window.location = "{{ url('/')}}"+"/business-information";
                    }
                    else{
                      window.location = "{{ url('/')}}"+"/"+user_type+"/home";
                    }
                     //window.location.reload();
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('#verifyOtpBtn').attr('disabled',false);
                 var loadingText = 'Submit';
                 $('#verifyOtpBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }
                if( response.error_type == 'something_wrong' )
                {
                    toastr.error("Sorry, something went wrong. Please try again later.");
                     window.setTimeout(function() {
                    window.location.reload();
                    $("#verifyOtpForm").trigger('reset');
                    }, 4000);
                }
                if( response.error_type == 'empty_otp' )
                {
                    var otp_error = "Code is required.";                                                                
                    $("#error-code").html("");
                    $("#error-code").html(otp_error);                
                }
                if( response.error_type == 'wrong_otp' )
                {
                    var otp_error = "Invalid code.";
                    $("#verifyOtpForm").trigger('reset');                                                                
                    $("#error-code").html("");
                    $("#error-code").html(otp_error);                
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

    //
    function getOtpBoxElement(index) {
    return document.getElementById('otpBox' + index);
    }
    function onKeyUpEvent(index, event) {
    const eventCode = event.which || event.keyCode;
    if (getOtpBoxElement(index).value.length === 1) {
      if (index !== 4) {
        getOtpBoxElement(index+ 1).focus();
      } else {
        getOtpBoxElement(index).blur();
        // Submit code
        console.log('submit code ');
      }
    }
    if (eventCode === 8 && index !== 1) {
      getOtpBoxElement(index - 1).focus();
    }
    }
    function onFocusEvent(index) {
    for (item = 1; item < index; item++) {
      const currentElement = getOtpBoxElement(item);
      if (!currentElement.value) {
          currentElement.focus();
          break;
      }
    }
    } 

</script>
@endsection