@extends('layouts/blankLayout')

@section('title', 'Login Basic - Pages')

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
@endsection

@section('content')
<div class="container-xxl">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner">
      <!-- Register -->
      <div class="card">
        <div class="card-body">
          <!-- Logo -->
          <div class="app-brand justify-content-center">
            <a href="{{url('/')}}" class="app-brand-link gap-2">
              <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
              <span class="app-brand-text demo text-body fw-bold">{{config('variables.templateName')}}</span>
            </a>
          </div>
          <!-- /Logo -->

            <h4 class="mb-2">Finish to recover your password</h4>

            @if ( \Session::has('error'))
              <div class="alert alert-danger alert-dismissible" role="alert">
                {{\Session::get('error')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                </button>
              </div>
            @endif
            <style>
              .verification-input {
                padding: unset;
                margin: 0 5px;
                text-align: center;
                font-size: 3rem;
              }
              #verificationForm{
                display: flex;
              }
            </style>

            <p class="mb-4">Please enter the code that we sent to your email!</p>

            <form class="mb-3" action="{{url('/code-match/'.$hash)}}" method="POST">
              @csrf
              <div class="mb-3">
                <label for="email" class="form-label">Code</label>
                <div id="verificationForm">
                  <input type="text" name="digit1" class="form-control verification-input" maxlength="1" size="1" next-id="digit2" id="digit1">
                  <input type="text" name="digit2" class="form-control verification-input" maxlength="1" size="1" back-id="digit1" next-id="digit3" id="digit2">
                  <input type="text" name="digit3" class="form-control verification-input" maxlength="1" size="1" back-id="digit2" next-id="digit4" id="digit3">
                  <input type="text" name="digit4" class="form-control verification-input" maxlength="1" size="1" back-id="digit3" next-id="digit5" id="digit4">
                  <input type="text" name="digit5" class="form-control verification-input" maxlength="1" size="1" back-id="digit4" next-id="digit6" id="digit5">
                  <input type="text" name="digit6" class="form-control verification-input" maxlength="1" size="1" back-id="digit5" id="digit6">
                </div>
              </div>
              <div class="mb-3">
                <input class="btn btn-primary d-grid w-100" type="submit" value="Send">
              </div>
            </form>
            <script>
              const KEY_LEFT_ARROW = 37;
              const KEY_RIGHT_ARROW = 39;
              const KEY_BACKSPACE = 8;

              $(".verification-input").on('keyup', function(e){
                  let input = $(this);
                  let nextInput = input.next('.verification-input');
                  let prevInput = input.prev('.verification-input');

                  let num = input.val();
                  if(!$.isNumeric(num)){
                      input.val('');
                  }

                  console.log(e.keyCode);
                  if(e.keyCode === KEY_LEFT_ARROW || e.keyCode === KEY_BACKSPACE){
                      if(prevInput.length){
                          prevInput.focus().select();
                      } else {
                          input.blur(); // Blur the input if it's the first one
                      }
                  } else if(e.keyCode === KEY_RIGHT_ARROW){
                      if(nextInput.length){
                          nextInput.focus().select();
                      } else {
                          input.blur(); // Blur the input if it's the last one
                      }
                  } else if((e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)){
                      if(input.val().length >= input.attr("maxLength")){
                          if(nextInput.length){
                              nextInput.focus().select();
                          } else {
                              input.blur(); // Blur the input if it's the last one
                          }
                      }
                  } else if( (e.keyCode < 96 && e.keyCode > 105) ){
                  if(e.keyCode < 48 && e.keyCode > 57){return false;}
                  }
              });
            </script>

        </div>
      </div>
    </div>
    <!-- /Register -->
  </div>
</div>
</div>
@endsection