@extends('layouts.auth')
@section('title', 'Two-step verification')
@section('content')
  <a class="back" href="{{ route('login') }}"><i data-icon="arrow-left"></i>Back to sign in</a>
  <span class="ic-box" style="width:52px;height:52px;margin-bottom:18px"><i data-icon="shield"></i></span>
  <h1>Enter your code</h1>
  <p>We sent a 6-digit code to <strong>{{ $destination }}</strong>. It expires in 10 minutes.</p>
  <form id="otp" method="POST" action="{{ route('two-factor.verify') }}" style="margin-top:26px">
    @csrf
    <div class="code-inputs" id="code">
      @for ($i = 0; $i < 6; $i++)<input class="input" name="code[]" inputmode="numeric" maxlength="1" aria-label="Digit {{ $i + 1 }}">@endfor
    </div>
    <span class="help {{ $errors->any() ? '' : 'hidden' }}" id="otp-err" style="color:var(--red)">{{ $errors->first() ?: 'Enter all 6 digits of the code.' }}</span>
    <label class="check"><input type="checkbox" name="trust" value="1" checked> Don't ask again on this device for 30 days</label>
    <button class="btn btn-primary btn-lg btn-block" type="submit">Verify and sign in</button>
  </form>
  <form id="resend" method="POST" action="{{ route('two-factor.resend') }}">@csrf</form>
  <p class="small muted" style="margin-top:18px">Didn't get it? <a href="#" onclick="document.getElementById('resend').submit();return false">Send a new code</a> or <a href="#" data-toast="Backup codes are not set up in this demo" data-toast-icon="lock" onclick="return false">use a backup code</a>.</p>
  @if ($code)
  <div class="demo-note"><strong>Demo:</strong> no SMS is sent. Your code is <strong>{{ $code }}</strong> and it has been filled in for you. Click Verify.</div>
  @endif
@endsection
@push('scripts')
<script>
var boxes = [].slice.call(document.querySelectorAll("#code input"));
@if ($code) "{{ $code }}".split("").forEach(function(d,i){ boxes[i].value = d; }); @endif
boxes.forEach(function(b,i){
  b.addEventListener("input", function(){ b.value = b.value.replace(/\D/g,"").slice(-1); if (b.value && boxes[i+1]) boxes[i+1].focus(); });
  b.addEventListener("keydown", function(e){ if (e.key === "Backspace" && !b.value && boxes[i-1]) boxes[i-1].focus(); });
  b.addEventListener("paste", function(e){ var t = (e.clipboardData.getData("text")||"").replace(/\D/g,"").slice(0,6); if(!t) return; e.preventDefault(); t.split("").forEach(function(d,j){ if(boxes[j]) boxes[j].value = d; }); });
});
document.getElementById("otp").addEventListener("submit", function(e){
  var ok = boxes.every(function(b){ return b.value; });
  var err = document.getElementById("otp-err");
  if (!ok) { e.preventDefault(); err.textContent = "Enter all 6 digits of the code."; err.classList.remove("hidden"); }
});
</script>
@endpush