@extends('layouts.app')

@section('title', 'Verify OTP')

@section('content')



    <div class="py-20 bg-[#38247b] w-full h-screen">
        <div class="container relative z-50 max-w-screen-lg mx-auto">
            <div class="relative grid grid-cols-1 -space-x-1 md:grid-cols-2 border-2 border-white">
                <div>
                    <img class="object-contain hidden md:block w-full h-[40rem] rounded-l-3xl"
                        src="{{ asset('assets/MAIN MATERIALS/TARA_NA_PO_ULIT_badge.png') }}" alt="">
                </div>
                <div class="relative bg-white">
                    <div class="relative flex flex-col items-center justify-between w-full h-full p-4 md:p-12">
                        <div class="space-y-14">
                            <h1 class="text-4xl text-center poppins-regular">OTP Verification</h1>
                            <p class="font-semibold text-center poppins-regular">Enter the 4 Digit Code sent to your email
                            </p>
                            <form action="{{ route('otp.verify') }}" method="POST" class="flex flex-col space-y-4">
                                @csrf
                                <div class="grid grid-cols-4 gap-2 md:gap-8">
                                    <input type="text" name="otp1"
                                        class="border-b-4 border-b-yellow-500 poppins-regular text-center border-t-transparent border-x-transparent bg-[#8e72eb7c] w-full h-full p-6"
                                        maxlength="1" required>
                                    <input type="text" name="otp2"
                                        class="border-b-4 border-b-yellow-500 poppins-regular text-center border-t-transparent border-x-transparent bg-[#8e72eb7c] w-full h-full p-6"
                                        maxlength="1" required>
                                    <input type="text" name="otp3"
                                        class="border-b-4 border-b-yellow-500 poppins-regular text-center border-t-transparent border-x-transparent bg-[#8e72eb7c] w-full h-full p-6"
                                        maxlength="1" required>
                                    <input type="text" name="otp4"
                                        class="border-b-4 border-b-yellow-500 poppins-regular text-center border-t-transparent border-x-transparent bg-[#8e72eb7c] w-full h-full p-6"
                                        maxlength="1" required>
                                </div>
                                @error('otp')
                                    <div class="text-center text-red-500">{{ $message }}</div>
                                @enderror
                                {{-- <p class="font-semibold text-center">Resend Code</p> --}}
                                <div class="flex flex-col items-center mt-8 space-y-12">
                                    <button type="submit"
                                        class="bg-[#38247b] rounded-lg px-20 py-2 text-white border-2 border-white poppins-regular">VERIFY</button>
                                    <a href="{{ url('/login') }}" class="text-center">
                                        <p class="text-[#38247b] underline font-semibold">Already Have an Account?</p>
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection