{{-- Include the header layout --}}
@include('User::layouts.header')
<section id="login" class="m-auto">
    <div class="container-fluid h-100">
        <div class="d-flex loginHeight justify-content-center align-items-center">
            <div>
                <div class="text-center">
                    <a href="#">
                        <img src="{{ asset('assets/Images/ff_logo.png') }}" width="90px" alt="">
                    </a>
                </div>
                @if (session('error'))
                    <div id="errorMessage" class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                    <script>
                        setTimeout(function() {
                            var errorMessage = document.getElementById('errorMessage');
                            errorMessage.style.opacity = '0';
                            errorMessage.style.transition = 'opacity 1s ease-in-out';
                            setTimeout(function() {
                                errorMessage.style.display = 'none';
                            }, 1000);
                        }, 5000);
                    </script>
                @endif
                <div class="bg-white shadow-sm rounded mt-4 py-4 px-md-4 px-3 loginFormWrap">
                    <div class="text-center">
                        {{-- <h5 class="text-center">Fairfirst B2B Connect</h5> --}}
                    </div>
                    <form method="POST" action="{{ route('2fa.verify') }}">
                        @csrf

                        <div class="form-group mb-3">
                            <label for="otp">{{ __('OTP') }}</label>
                            <input id="otp" type="text" class="form-control @error('otp') is-invalid @enderror"
                                name="otp" required autofocus>

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

                        <button type="submit" class="btn btnBrand1 w-100" style="color: #fff;">Verify</button>
                    </form>
                    <div class="mt-3 text-center">
                        <a href="{{ route('2fa.resend') }}">Resend Code</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- Include the footer layout --}}
@include('User::layouts.footer')