@extends('pricing.header')

@section('content')
<div class="container">
    <h2>Enter OTP</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('otp.verify') }}">
        @csrf
        <div class="mb-3" style="margin-top: 150px;">
            <div class="container height-100 d-flex justify-content-center align-items-center" id="div_verify_otp">
                <div class="position-relative" style="background: white;border-radius: 10px;">
                    <div class="card-1 p-4 text-center">
                        <h6>Please enter the one time password <br> to verify
                            your account
                        </h6>
                        <div>
                           
                        </div>
                        <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
                            <input class="m-2 text-center form-control rounded" type="text" id="first" maxlength="1"
                                name="one_time_password[]" oninput="moveFocus(this, 'second')" />
                            <input class="m-2 text-center form-control rounded" type="text" id="second" maxlength="1"
                                name="one_time_password[]" oninput="moveFocus(this, 'third')" />
                            <input class="m-2 text-center form-control rounded" type="text" id="third" maxlength="1"
                                name="one_time_password[]" oninput="moveFocus(this, 'fourth')" />
                            <input class="m-2 text-center form-control rounded" type="text" id="fourth" maxlength="1"
                                name="one_time_password[]" />
                        </div>

                     
                        @error('otp')
                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                        @enderror

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Validate</button>
                        </div>
                        <br>

                    </div>

                </div>
            </div>
        </div>
    </form>
</div>

@include('pricing.footer')
@endsection
@section('custom-scripts')
<script>
    setTimeout(function () {

        $(".alert").hide(1000);

    }, 2000);

    function moveFocus(currentInput, nextInputId, prevInputId) {
  
    if (currentInput.value.length == 1) {
        document.getElementById(nextInputId).focus(); 
    }
    else if (currentInput.value.length === 0 && prevInputId) {
        document.getElementById(prevInputId).focus(); 
    }
}

document.querySelectorAll('input').forEach((input, index, inputs) => {
    input.addEventListener('input', () => {
        const nextInputId = inputs[index + 1] ? inputs[index + 1].id : null;
        const prevInputId = inputs[index - 1] ? inputs[index - 1].id : null;
        moveFocus(input, nextInputId, prevInputId);
    });
});

</script>

@endsection