@extends('layouts.auth')

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

@section('content')

<div class="px-24 my-auto mt-16">
    <div class="text-center">
        <p class="font-bold text-gray-500 dark:text-gray-100">Verify <span style="color: #3c12d4">Authentication</span></p>
    </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">
            The device you're logging in with and the device holding the google authenticator app must have the same date and time.
        </small>
    </div>

    <form class="form-horizontal max-w-[400px]" role="form" method="POST" action="{{config('2fa-config.verify_2fa_post') }}">
        {{ csrf_field() }}
        <div class="mb-4">
            <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">Security Code</label>
            <input type="text" name="totp_token" id="totp_token" autocomplete="off" value="{{ old('totp_token') }}" autofocus class="w-full 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="emaiol" placeholder="Enter Your Email">
            @if ($errors->has('totp_token'))
                <span class="text-red-600 invalid-feedback" role="alert">
                    <small>{{ $errors->first('totp_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>

</div>

<!-- 
<div class="container">
    <div class="row d-flex justify-content-center">
        <div class="col-md-4">
            <div class="panel panel-success">
                <div class="text-center panel-heading"><img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Security_Approved.png" width="20"/>
                    <strong>Verify Two Factor Authentication</strong>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{config('2fa-config.verify_2fa_post') }}">
                        {{ csrf_field() }}
                        {{-- <div class="alert alert-warning">Download the <strong>Google Authenticator</strong> App on your phone from the Play Store or the App Store.</div><br/> --}}
                        <div class="form-group{{ $errors->has('totp_token') ? ' has-error' : '' }} text-center">
                            <label for="totp_token" class="control-label">Security Code</label>
                            <div class="pincode-input-container">
                                <input id="totp_token" autocomplete="off" type="text"
                                class="form-control @if($errors->first('totp_token')) is-invalid @endif" name="totp_token" value="{{ old('totp_token') }}" autofocus>

                                @if ($errors->has('totp_token'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('totp_token') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="text-center">
                                <button type="submit" class="btn btn-success">
                                    Confirm
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> -->
@endsection