@extends('layouts.auth')

@section('title')
     Verify 2FA Authentication
@endsection

@section('content')

<div class="px-24 my-auto mt-16 mx-auto" style="max-width: 600px">
    <div>
        <div class="mx-auto mt-5 mb-3 text-center rounded-full">
        <a href="{{ url('/') }}"><img src="{{ asset('images/logo-dark.png') }}" style="height: 40px;" alt="" class="mx-auto mb-6"></a>
        </div>
    </div>

    <div class="text-center">
        <h5 class="text-lg font-bold text-gray-600 dark:text-gray-100 montserrat">Two Factor <span class="text-orange-500">Verification</span></h5>
    </div>

    <div class="relative w-full px-4 py-3 mx-auto my-5 text-yellow-800 bg-yellow-100 border border-t-4 border-yellow-400 border-yellow-500 rounded rounded-t-none alert alert-warning" role="alert">
        <small class="block sm:inline">
            To verify your identity, we've sent a 2FA code to <b>{{ auth()->user()->email }}</b>.  Check your inbox and enter the code below to proceed.
        </small>
    </div>
    
    <x-alert/>

    <form class="form-horizontal max-w-[400px] mx-auto" role="form" method="POST" action="{{ route('2fa.verify') }}">
        @csrf
        <div class="mb-4">
            <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">Enter Verification Token</label>
            <input type="text" name="token" id="token" autocomplete="off" value="{{ old('token') }}" autofocus class="w-full px-2 py-2 border-gray-100 rounded placeholder:text-sm dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-gray-100 dark:placeholder:text-zinc-100/60" id="token" placeholder="Enter Token">
            @if ($errors->has('token'))
                <span class="text-red-600 invalid-feedback" role="alert">
                    <small>{{ $errors->first('token') }}</small>
                </span>
            @endif
        </div>

        <div class="mb-3">
            <button class="w-full p-3 text-white bg-orange-500 border-transparent shadow-md btn w-100 waves-effect waves-light shadow-violet-200 dark:shadow-zinc-600" 
             type="submit">Confirm</button>
        </div>
    </form>
    
    <form class="mx-auto" method="POST" action="{{ route('2fa.resend-token') }}">
        @csrf
        <div class="mb-3">
            <button class="w-full p-3 text-orange-500 border-transparent" 
             type="submit">Resend Code</button>
        </div>
    </form>

</div>

@endsection