@extends('app')
@section('content')
    <div class="otp-container px-lg-5 py-4">
        <div class="justify-content-between d-md-flex d-block align-items-center text-center text-md-start">
            <a class="logo-img" href="{{ '/' }}"></a>
            <h4 class="text-brown fw-bold text-md-end py-3 py-lg-0">Future of Fundraising</h4>
        </div>
        <div class="d-flex justify-content-center align-items-center mt-4 card-div p-0 m-0">
            <div class="p-lg-3 form-container">
                <div class="signin-form shadow p-3 p-lg-4 m-2 m-lg-4 rounded-5 mb-5">
                    <div class="text-blue text-center pt-xl-3">
                        <h4 class="fw-bold pb-1 pt-3">Verification</h4>
                    </div>
                    <div class="p-2 p-lg-4 px-3 px-xl-5">
                        <div class="">
                            <p class="text-center px-3 px-xl-5">A verification code has been sent to the provided email address and phone number. Please use the code to verify your account.
                            </p>
                            <form action="" class="text-center">
                                <div class="my-4">
                                    <div id="otp-inputs">
                                        <input type="text" maxlength="1" class="otp-input" id="forgotOtp-1">
                                        <input type="text" maxlength="1" class="otp-input" id="forgotOtp-2">
                                        <input type="text" maxlength="1" class="otp-input" id="forgotOtp-3">
                                        <input type="text" maxlength="1" class="otp-input" id="forgotOtp-4">
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button class="bg-blue border p-2 px-5 rounded-3 text-white fw-bold"
                                        id="otp-verify-button">
                                        <span id="verify-text">Verify</span>
                                        <span id="verify-otp-spinner" class="spinner-border spinner-border-sm d-none"
                                            role="status" aria-hidden="true"></span>
                                    </button>
                                </div>

                                <p class="text-center mt-4 verify-countdown" id="">Didn't get the code? <span
                                        id="resendButton" class="resend-button text-secondary" disabled>Resend Code</span>
                                    <span class="timer" id="timer"> in 00:00</span></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @vite(['resources/js/forgot_password/otpverification.js'])
    @vite(['resources/js/login.js'])
@endsection