@extends('layouts.app')

@section('css')
<style type="text/css">
  .otp-modal .otp-box{ text-align: center; padding: 20px 0; }
.otp-modal .otp-box .otp-input  { display: flex; align-items: center; justify-content: center; margin: 20px 0; }
.otp-modal .otp-box .otp-input .form-control{ padding: 0; margin: 0 8px; border: 0; border-bottom: 1px solid #008080; border-radius: 0; text-align: center; color: #008080; font-weight: 600; font-size: 17px; }
.otp-modal .otp-box .resend { margin: 15px 0 30px; }
.otp-modal .otp-box .countdown { color: #a5a5a5;  margin: 15px 0 0; display: inline-block; width: 100%; }
</style>
@endsection

@section('content')


<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <div class="row flexbox-container">
                <div class="col-xl-8 col-11 d-flex justify-content-center">
                    <div class="card bg-authentication rounded-0 mb-0">
                        <div class="row m-0">
                            <div class="col-lg-6 d-lg-block d-none text-center align-self-center px-1 py-0">
                                <img src="{{asset('images/login.png')}}" alt="branding logo" >
                            </div>
                            <div class="col-lg-6 col-12 p-0">
                              <div class="card rounded-0 mb-0 px-2">
                                <div class="card-header pb-1"><h4 class="mb-0">{{ __('Reset Password') }}</h4></div> 
                                <div class="card-content">
                                  <div class="card-body">
                                      @if (session('status'))
                                          <div class="alert alert-success" role="alert">
                                              {{ session('status') }}
                                          </div>
                                      @endif

                                      <form id="sendOTPForm" method="post" enctype="multipart/form-data">
                                          @csrf 

                                          <p class="">{{ __('E-Mail Address') }}</p>

                                          <fieldset class="form-label-group position-relative has-icon-left">
                                              <input placeholder="email" id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>
                                              <div class="form-control-position">
                                                  <i class="feather icon-mail"></i>
                                              </div> 
                                          </fieldset> 
                                          @error('email')
                                              <span class="invalid-feedback" role="alert">
                                                  <strong>{{ $message }}</strong>
                                              </span>
                                          @enderror
                                               
                                           

                                          <div class="form-group row mb-0 pt-2">
                                              <div class="col-md-8 offset-md-4">
                                                  <button type="button" id="send_otp" class="btn btn-primary w-100">
                                                      {{trans('admin.send_otp') }}
                                                  </button>
                                              </div>
                                          </div>
                                      </form>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- OTP Modal -->
<div class="modal fade otp-modal" id="verify_otp_modal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form method="post" enctype="multipart/form-data">
          <div class="otp-box">
              <h3>Verification</h3>
              <p>We've Sent You A Verification Code On Your Provided Email. Please Verify Email.</p>
              <div class="otp-input">
                <input type="text" id="otp_code1" name="otp_code1"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)" maxlength="1" class="form-control">
                <input type="text" id="otp_code2" name="otp_code2"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)" maxlength="1" class="form-control">
                <input type="text" id="otp_code3" name="otp_code3"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)" maxlength="1" class="form-control">
                <input type="text" id="otp_code4" name="otp_code4"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)" maxlength="1" class="form-control">
                 <input type="text" id="otp_code5" name="otp_code5"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(5, event)" onfocus="onFocusEvent(5)" maxlength="1" class="form-control">
                  <input type="text" id="otp_code6" name="otp_code6"  onkeypress="javascript:return isNumber(event)" onkeyup="onKeyUpEvent(6, event)" onfocus="onFocusEvent(6)" maxlength="1" class="form-control">
              </div>
              <div class="countdown">
                 <div class="countdown__time clr-primary font-family-semibold"></div>
              </div>
             <!--  <div class="resend" id="resend_div"><p class="text-muted">Did not receive a code <a href="javascript:void(0);" >Resend</a></p></div> -->
              <input type="hidden" name="hdn_email" id="hdn_email">
                <div class="form-group row mb-0">
                  <div class="col-md-6 offset-md-3">
                    <button type="button" id="verify_otp" class="btn btn-primary">
                      {{ trans('common.done')}}
                    </button>
                  </div>
                </div>
          </div>
      </div>
    </form>
    </div>
  </div>
</div>

@endsection

@section('js')
<script type="text/javascript">
    $(document).ready(function(){
      $(document).on('click','#send_otp',function(e){
          e.preventDefault();
          var form = $('#sendOTPForm')[0];
          var formData  = new FormData($('#sendOTPForm')[0]);
          var url  =  "{{route('send_otp')}}";
         
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          }
          });
          $.ajax({
                  url: url,
                  data: formData,
                  type: "POST",
                  processData : false,
                  contentType : false,
                  dataType : 'json',
                  beforeSend: function(xhr){
                      $('#send_otp').prop('disabled',true);
                      $('#send_otp').text("{{trans('common.sending')}}");
                    },
                  success: function(response) {
                      // console.log(response);
                      if(response.type == "success") {
                         $("#verify_otp_modal").modal("show");
                         $("#hnd_email").val($("#email").val());
                         countdown_timer();

                      } else {
                          toastr.error(response.error);
                          $('#send_otp').prop('disabled',false);
                          $('#send_otp').text("{{trans('admin.send_otp')}}");
                      }
                      
                  }
          });
      })

    $(document).on('click','#verify_otp',function(e){
          var url  =  "{{route('verify_otp')}}";
          var email = $("#email").val();
          var otp = $("#otp_code1").val()+""+$("#otp_code2").val()+""+$("#otp_code3").val()+""+$("#otp_code4").val()+""+$("#otp_code5").val()+""+$("#otp_code6").val();
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          }
          });
        
          if(otp !='') {
            $.ajax({
                    url: url,
                    data: {'otp':otp,'email':email},
                    type: "POST",
                    dataType : 'json',
                    beforeSend: function(xhr){
                        $('#verify_otp').prop('disabled',true);
                        $('#verify_otp').text("{{trans('common.verifying')}}");
                      },
                    success: function(response) {
                        // console.log(response);
                        if(response.status == "200") {
                           //toastr.success(response.success);
                           window.location.href="{{route('reset_password')}}?email="+email;
                        } else {
                            toastr.error(response.error);
                        }
                        $('#verify_otp').prop('disabled',false);
                        $('#verify_otp').text("{{trans('common.done')}}");
                    }
            });
          }else{
            toastr.error("{{trans('admin.enter_otp')}}");
          }
    })  
    // $("#resend_div").css('display','none');
    function countdown_timer(){
        //   Function counts down from 1 minute, display turns orange at 20 seconds and red at 5 seconds.
        var countdownTimer = {
          init: function() {
              this.cacheDom();
              this.render();
          },
          cacheDom: function() {
              this.$el = $('.countdown');
              this.$time = this.$el.find('.countdown__time');
          },
          render: function() {
              var totalTime = 60 * 5,
                  display = this.$time;
              this.startTimer(totalTime, display);
          },
          startTimer: function(duration, display, icon) {
            var timer = duration, minutes, seconds;
            var interval = 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.text(minutes + ':' + seconds);
              if (--timer < 0) {
                clearInterval(interval);
              };
               if(timer <= 0)
              {
                  $("#resend_div").css('display','block');
              };
            }, 1000);
          },
        };
    countdownTimer.init();
    }
      });

</script>
<script type="text/javascript">
        function getOtpCodeElement(index) {
          return document.getElementById('otp_code' + index);
        }
        
       function onKeyUpEvent(index, event) {
          const eventCode = event.which || event.keyCode;
          if (getOtpCodeElement(index).value.length === 1) {
           if (index !== 6) {
            getOtpCodeElement(index+ 1).focus();
           } else {
            getOtpCodeElement(index).blur();
            // Submit code
            console.log('submit code ');
           }
          }
          if (eventCode === 8 && index !== 1) {
           getOtpCodeElement(index - 1).focus();
          }
        }
        function onFocusEvent(index) {
          for (item = 1; item < index; item++) {
           const currentElement = getOtpCodeElement(item);
           if (!currentElement.value) {
              currentElement.focus();
              break;
           }
          }
        }
        function isNumber(evt) {
              var iKeyCode = (evt.which) ? evt.which : evt.keyCode
              if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
                  return false;  
              return true;
        }  
  
</script>
@endsection