@extends('layouts.auth.base')

@section('content')
<div class="container-fluid bg">
    <div class="row min-vh-100">
        <div class="col-md-8 col-lg-8 col-xl-9 mobile-hidden my-auto ps-5 ps-md-5 ps-sm-3">
            <div><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="17%">
                <h1 class="text-white mt-5">Investment <span class="underline"><span style="color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) ;">Excellence</span></span></h1>
            </div>
        </div>
        <div class="col-md-4 col-lg-4 col-xl-3 d-xxl-flex px-sm-5 my-sm-auto my-auto px-4 px-md-4 px-lg-3">
            <div class="desktop-hidden mb-4 text-center"><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="20%"></div>
            <div class="w-100 auth-card px-4 py-5">
                <form method="POST" action="{{ route('verification.verify') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="otp">Email OTP</label>
                        <input class="form-control py-2 px-3" type="text" id="otp" value="{{ old('otp') }}" name="otp" autofocus="" autocomplete="on" inputmode="otp" required="">
                    </div>
                    <div class="mb-3">
                        <small>Enter the verification code that was sent to your email.<br></small>
                    </div>
                    <div class="mb-3">
                        <button class="btn btn-primary py-2 px-3" type="submit">Verify Email</button>
                    </div>
                </form>
                <hr><small>Verification code not received?&nbsp;&nbsp;<a href="{{ route('verification.resend') }}">Resend</a><br></small>
            </div>
        </div>
    </div>
</div>
@endsection