@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')

<section>
  <nav>
    <ul>
      <li class="btn">
          <a href="#">
            <i class="md-ripples uil uil-bars" data-pushbar-target="left"></i>
          </a>
      </li>
       <li class="logo">Qucik & Perfect</li>

    </ul>
  </nav>
</section>

<section>
  
<div class="container d-flex justify-content-center align-items-center">
  <div class="card text-center">
   <div class="card-header p-5">
     <img src="all_restaurants_assets/img/mobile.png">
     <h5 class="mb-2">OTP VERIFICATION</h5>
     <div>
       <small>code has been send to ******1258</small>
     </div>
   </div>
   <div class="input-container d-flex flex-row justify-content-center mt-2">
     <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
     <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
     <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
     <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
     <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
   </div>
   <div>
     <small>
       didn't get the otp
     <a href="#" class="text-decoration-none">Resend</a>
     </small>
   </div>
   <div class="mt-3 mb-5">
     <button class="btn btn-success px-4 verify-btn">verify</button>
   </div>
  </div>
 </div>
</section>

@include('public_area.layouts.footer_include')

<script>
	const codes = document.querySelectorAll('.code')
	codes[0].focus()

	codes.forEach((code, idx) => {
	    code.addEventListener('keydown', (e) => {
	        if(e.key >= 0 && e.key <=9) {
	            codes[idx].value = ''
	            setTimeout(() => codes[idx + 1].focus(), 10)
	        } else if(e.key === 'Backspace') {
	            setTimeout(() => codes[idx - 1].focus(), 10)
	        }
	    })
	})
</script>