@extends('layouts.master-auth')

@section('title', 'Code verification')

@section('content')

    @include('layouts/loader')
    <div class="auth-main">
      <div class="auth-wrapper v2">
        <div class="auth-sidecontent">
          <img src="/build/images/authentication/img-auth-sideimg.jpg" alt="images" class="img-fluid img-auth-side" />
        </div>
        <div class="auth-form">
          <div class="card my-5">
            <div class="card-body">
              <div class="mb-4">
                <a href="#"><img src="/build/images/logo-dark.svg" class="mb-4 img-fluid" alt="img" /></a>
                <h3 class="mb-2"><b>Enter Verification Code</b></h3>
                <p class="text-muted mb-4">We send you on mail.</p>
                <p class="">We`ve send you code on jone. ****@company.com</p>
              </div>
              <div class="row my-4 text-center">
                <div class="col">
                  <input type="number" class="form-control text-center code-input" placeholder="0" />
                </div>
                <div class="col">
                  <input type="number" class="form-control text-center code-input" placeholder="0" />
                </div>
                <div class="col">
                  <input type="number" class="form-control text-center code-input" placeholder="0" />
                </div>
                <div class="col">
                  <input type="number" class="form-control text-center code-input" placeholder="0" />
                </div>
              </div>
              <div class="d-grid mt-4">
                <button type="button" class="btn btn-primary">Continue</button>
              </div>
              <div class="d-flex justify-content-start align-items-end mt-3">
                <p class="mb-0">Did not receive the email?</p>
                <a href="#" class="link-primary ms-2">Resend code</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [ Main Content ] end -->
@endsection
@section('scripts')
    <script>
      const inputElements = [...document.querySelectorAll('input.code-input')];

      inputElements.forEach((ele, index) => {
        ele.addEventListener('keydown', (e) => {
          // if the keycode is backspace & the current field is empty
          // focus the input before the current. Then the event happens
          // which will clear the "before" input box.
          if (e.keyCode === 8 && e.target.value === '') inputElements[Math.max(0, index - 1)].focus();
        });
        ele.addEventListener('input', (e) => {
          // take the first character of the input
          // this actually breaks if you input an emoji like 👨‍👩‍👧‍👦....
          // but I'm willing to overlook insane security code practices.
          const [first, ...rest] = e.target.value;
          e.target.value = first ?? ''; // first will be undefined when backspace was entered, so set the input to ""
          const lastInputBox = index === inputElements.length - 1;
          const didInsertContent = first !== undefined;
          if (didInsertContent && !lastInputBox) {
            // continue to input the rest of the string
            inputElements[index + 1].focus();
            inputElements[index + 1].value = rest.join('');
            inputElements[index + 1].dispatchEvent(new Event('input'));
          }
        });
      });
    </script>
@endsection