@extends('auth.layout')

@section('title', 'OTP')

@section('content')
    <div class="auth-page-content overflow-hidden pt-lg-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-5">
                    <div class="card overflow-hidden">
                        <div class="row g-0">
                            <div class="col-lg-12">
                                <div class="p-lg-5 p-4">
                                    <div>
                                        <h5 class="text-primary">Welcome Back !</h5>
                                        <p class="text-muted">Sign in to continue</p>
                                    </div>

                                    <div class="mt-4">
                                        <form method="POST" action="{{ route('2fa.submit') }}">
                                            @csrf
                                            <div class="row">
                                                <div class="col-3">
                                                    <div class="">
                                                        <label for="digit1-input" class="visually-hidden">Dight 1</label>
                                                        <input type="text" name="digit1"
                                                            class="form-control form-control-lg bg-light border-light text-center"
                                                            onkeyup="moveToNext(this, 2)" maxlength="1" id="digit1-input">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-3">
                                                    <div class="">
                                                        <label for="digit2-input" class="visually-hidden">Dight 2</label>
                                                        <input type="text" name="digit2"
                                                            class="form-control form-control-lg bg-light border-light text-center"
                                                            onkeyup="moveToNext(this, 3)" maxlength="1" id="digit2-input">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-3">
                                                    <div class="">
                                                        <label for="digit3-input" class="visually-hidden">Dight 3</label>
                                                        <input type="text" name="digit3"
                                                            class="form-control form-control-lg bg-light border-light text-center"
                                                            onkeyup="moveToNext(this, 4)" maxlength="1" id="digit3-input">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-3">
                                                    <div class="">
                                                        <label for="digit4-input" class="visually-hidden">Dight 4</label>
                                                        <input type="text" name="digit4"
                                                            class="form-control form-control-lg bg-light border-light text-center"
                                                            onkeyup="moveToNext(this, 4)" maxlength="1" id="digit4-input">
                                                    </div>
                                                </div><!-- end col -->
                                            </div>

                                            <div class=" text-center">
                                                @error('otp')
                                                    <span class="text-danger" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>

                                            <div class="mt-3">
                                                <button type="submit" class="btn btn-success w-100">Continue</button>
                                            </div>


                                        </form>
                                    </div>

                                    <div class="mt-2 text-center">
                                        <p class="mb-0"> <a href="{{ route('logout') }}"
                                                onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();"
                                                class="fw-semibold text-primary text-decoration-underline">
                                                Back</a> </p>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>

                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->

            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </div>
@endsection