@extends('auth.auth_layout')

@section('content')

     @include('auth.page_title', ['pageTitleMessage'=>'Enter OTP to login'])
        <div class="card">
            <div class="card-body">
              
<p class="text-muted text-center">
    {{ Auth::user()->email }}<br/>
    An OTP has been sent to your SMS or email</p>
<form action="{{ route('auth.verify_otp') }}" method="POST" id="otpForm">
    @csrf
    <div class="form-group">
        <label for="otp">Enter OTP</label>
        <div class="d-flex justify-content-center">
            <!-- OTP Input Boxes -->
            @for($i = 1; $i <= 6; $i++)
                <input type="text" 
                       name="otp{{$i}}" 
                       maxlength="1" 
                       pattern="\d*" 
                       class="form-control otp-input mx-1 text-center" 
                       style="width: 50px;" 
                       required>
            @endfor
        </div>
        @error('otp')
            <small class="text-danger">{{ $message }}</small>
        @enderror
    </div>
    <!-- Hidden input to store concatenated OTP -->
    <input type="hidden" name="otp" id="otp">
    <button type="submit" class="btn btn-primary mt-3">Verify OTP</button>
</form>

<br/>

<p><a href="{{ route('auth.resend_otp') }}">Click here to Resend OTP</a></p>

@include('whatsapp',['message'=>'Contact admin below if you still cant receive OTP after resending'])

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const otpInputs = document.querySelectorAll('.otp-input');
        const otpField = document.getElementById('otp');
        const otpForm = document.getElementById('otpForm');

        otpInputs.forEach((input, index) => {
            // Move to next input on keypress
            input.addEventListener('input', function () {
                if (input.value.length === 1 && index < otpInputs.length - 1) {
                    otpInputs[index + 1].focus();
                }
            });

            // Handle backspace to move to the previous input
            input.addEventListener('keydown', function (event) {
                if (event.key === 'Backspace' && input.value === '' && index > 0) {
                    otpInputs[index - 1].focus();
                }
            });
        });

        // Concatenate all input values into the hidden field on form submission
        otpForm.addEventListener('submit', function () {
            otpField.value = Array.from(otpInputs)
                                   .map(input => input.value)
                                   .join('');
        });
    });
</script>

     

          
        </div>


        @endsection