@extends('layouts.frontend.master')
@push('styles')
<style>
    .title-text {
        color: #203F5B !important;
        font-size: 34px;
        font-weight: 600;
        font-style: normal;
        text-decoration: none;
        line-height: 44px;
        letter-spacing: 0px;
    }
    .paragraph-text {
        color: #000000;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 1.9px;
    }
</style>
@endpush
@section('page-div-start')
<div id='login-page'>
    @endsection
    @section("content")
    <div class="col content ">
        <div class="login-section">
            <div class="row justify-content-center  no-gutters mt-5">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="bg-white rounded shadow-lg">
                        <div>
                            @if (in_array('login', Auth::user()->fa_setting) && in_array('login', Auth::user()->fa3_setting))
                            <h2 class="title-text pt-5">{{__('OTP Authentication & Google Authenticator 2FA')}}</h2>
                            <p class="mb-2">{{__('Input the 6-digit code from your email address and Google Authenticator
                        2FA')}}</p>
                            @elseif(in_array('login', Auth::user()->fa3_setting))
                            <h2 class="title-text pt-5">{{__('OTP Authentication')}}</h2>
                            <p class="mb-2">{{__('Input the 6-digit code from your email address') }}</p>
                            @else
                            <h2 class="title-text pt-5">{{__('Google Authenticator 2FA') }}</h2>
                            <p class="mb-2">{{__('Input the 6-digit code from your Google Authenticator app') }}</p>
                            @endif
                            <div class="p-4">
                                <form method="POST"  action="{{ url('validate/2fa') }}">
                                    @csrf
                                    @if (in_array('login', Auth::user()->fa_setting) && in_array('login',
                                    Auth::user()->fa3_setting))
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <input type="text" name="code" id="code" class="form-control code pl-15 bg-transparent @error('code') border-danger @enderror" placeholder="Google Authentication Code" required autofocus>
                                        </div>
                                        @error('code')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <input type="text" name="otp" id="code" class="form-control code pl-15 bg-transparent @error('otp') border-danger @enderror" placeholder="OTP" required>
                                        </div>
                                        <div class="text-primary">{{__('OTP send to your email address')}}</div>
                                        @error('otp')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @elseif(in_array('login', Auth::user()->fa3_setting))
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <input type="text" name="otp" id="code"  class="code form-control  pl-15 bg-transparent @error('otp') border-danger @enderror" placeholder="OTP" required>
                                        </div>
                                        <div class="text-primary">{{__('OTP send to your email address')}}</div>
                                        @error('otp')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @else
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <input type="text" name="code" id="code"  class="code form-control  pl-15 bg-transparent @error('code') border-danger @enderror" placeholder="Google Authentication Code" required autofocus>
                                        </div>
                                        @error('code')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @endif
                                    <div class="row">
                                        <!-- /.col -->
                                        <div class="col-12 text-center">
                                            <button type="submit" id="msform" class="btn btn-success mt-10">{{__('Authenticate') }}</button>
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endsection
            @section('page-div-end')
        </div>
        @endsection
        @push('scripts')
        <script>
            $(document).ready(function() {
                $('body').on('keyup paste', '.code', function(e) {
                    var txtvalue = $(this).val();
                    if (/^[0-9]*$/.test(txtvalue) == false) {
                        $(this).val('');
                    }
                    var code = $('#code').val();
                    if (code.length == 6) {
                        $("#msform").trigger('click');
                    }
                });
            });
        </script>
        @endpush