@extends('layouts.app')


@section('styles')
    {{-- Style Here --}}

    @vite(['resources/scss/light/assets/authentication/auth-cover.scss'])
    @vite(['resources/scss/dark/assets/authentication/auth-cover.scss'])
@endsection
@section('content')
<div class="auth-container d-flex justify-content-center align-items-center min-vh-100 bg-black">
    <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-8 col-12">
        <div class="card shadow-lg border-0 bg-dark text-white">
            <div class="card-body p-4">

                <div class="text-center mb-4">
                    <h5 class="text-white">Enter the code for verification</h5>
                </div>

                {{-- OTP Form --}}
                <form method="POST" action="{{ route('verify-opt.submit') }}">
                    @csrf
                    <div class="row justify-content-center">
                        @for ($i = 0; $i < 6; $i++)
                            <div class="col-2 col-sm-2 col-3 mb-3">
                                <input type="text" name="otp[]" maxlength="1"
                                    class="form-control text-center otp-input bg-secondary text-white border-0"
                                    required>
                            </div>
                        @endfor
                    </div>

                    @if ($errors->has('otp_code'))
                        <div class="text-danger text-center mb-3">{{ $errors->first('otp_code') }}</div>
                    @endif

                    <div class="mt-3">
                        <button type="submit" class="btn btn-light w-100 fw-bold">VERIFY</button>
                    </div>
                </form>

                {{-- Resend OTP --}}
                <div class="text-center mt-4">
                    <p class="mb-0 text-white">
                        Didn't receive the code?
                        <form method="POST" action="{{ route('resend-otp') }}" style="display:inline;">
                            @csrf
                            <button type="submit"
                                class="btn btn-link text-decoration-none text-info p-0 m-0 align-baseline">Resend OTP</button>
                        </form>
                    </p>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    {{-- Scripts Here --}}
    @vite(['resources/js/authentication/2-Step-Verification.js'])

    <script>
        const inputs = document.querySelectorAll('.otp-input');

        inputs.forEach((input, index) => {
            input.addEventListener('input', () => {
                // Only move if a number is entered
                if (input.value.length === 1 && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }
            });

            input.addEventListener('keydown', (e) => {
                // Handle backspace to go to previous input
                if (e.key === 'Backspace' && input.value === '' && index > 0) {
                    inputs[index - 1].focus();
                }
            });
        });
    </script>
@endsection