@extends('layouts.master')

@section('title', (__('2FA Authenticator')))

@push('styles')
<link rel="stylesheet" href="{{asset('backend/css/2fastart.css')}}">
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12 m-auto">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12 m-auto">
                            <p class="text-center w-100">
                                <span class="h3 fw-bold">{{ __('Set Up 2FA With An Authenticator App For Full Feature access') }}</span>
                            </p>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12 m-auto">
                            <div class="row justify-content-center twoFaSection">
                                <div class="col-12 text-center mb-2">
                                    <div class=" px-0 pb-0 mb-3">
                                        <form action="{{ url('login2fa/store/'.basicEncrypt($user->id).'') }}" onsubmit="saveGoogle2FaChanges('google2fa')" id="google2fa">
                                            <input type="hidden" id="google_auth_key" name="google_auth_key" value={{$key ?? '' }}>
                                            <ul id="progressbar" class="ps-0">
                                                <li class="active" id="account"><strong>{{__('Download App')}}</strong></li>
                                                <li id="personal"><strong>{{__('Scan QR code')}}</strong></li>
                                                <li id="payment"><strong>{{__('Backup Key')}}</strong></li>
                                                <li id="confirm"><strong>{{__('Enable Google Authenticator')}}</strong></li>
                                                <li id="complete"><strong>{{__('Complete')}}</strong></li>
                                            </ul>
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <fieldset>
                                                        <div class="form-card px-md-0">
                                                            <div class="row text-center">
                                                                <div class="col-2"></div>
                                                                <div class="col-lg-8 col-10 m-auto text-lg">
                                                                    <h3 class="text-center">{{__('Download And Install The ')}}<br />{{__('Authenticator App')}}</h3>
                                                                    <br>
                                                                    <div class=" row">
                                                                        <div class="col-sm-6">
                                                                            <img src="{{ asset('/backend/images/qrcodeios2.png')}}" class="m-auto">
                                                                            <p class="main_heading">{{__('App Store')}}</p>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <img src="{{ asset('/backend/images/qrcodeapk.png')}}" class="m-auto">
                                                                            <p class="main_heading">{{__('Android APK')}}</p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-sm-12 text-primary">
                                                                            <p class="text-center mt-3 text-lg"><b>{{__('Scan to download')}}</b>
                                                                                {{__('iOS and Android')}}
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-2"></div>
                                                            </div>
                                                        </div>

                                                        <button name="next" class="next action-button btn btn-primary mt-0" type="button">{!! renderIconHtml('next') !!} Next</button>
                                                    </fieldset>
                                                    <fieldset>
                                                        <div class="form-card px-3 px-md-0">
                                                            <div class="row">
                                                                <div class="col-sm-2"></div>
                                                                <div class="col-sm-8  text-center pt-24 text-lg">
                                                                    <h3 class="fs-title text-center main_heading">{{__('Scan This QR Code In The Authenticator App')}}</h3>
                                                                    <div class="text-center d-flex justify-content-around"> {!! QrCode::size(200)->style('round')->generate($qr ?? '') !!}</div><br>
                                                                    <p class="text-primary">{{__('If you are unable to scan the QR code,Please enter this code manually into the  app')}}</p>
                                                                    <p class="text-primary"><strong>{{$key ?? ''}}</strong></p>
                                                                </div>
                                                                <div class="col-sm-2"></div>
                                                            </div>
                                                        </div>
                                                        <button name="previous" class="previous btn btn-primary action-button-previous btn-primary mt-0 me-1" type="button">{!! renderIconHtml('previous') !!} Previous</button>
                                                        <button name="next" class="next action-button btn btn-primary mt-0" type="button">{!! renderIconHtml('next') !!} Next</button>
                                                    </fieldset>
                                                    <fieldset>
                                                        <div class="form-card px-3 px-md-0">
                                                            <div class="row">
                                                                <div class="col-sm-2"></div>
                                                                <div class="col-sm-8 pt-24 text-lg">
                                                                    <h3 class="fs-title text-center main_heading">{{__('Save This Backup Key In Secure Location')}}</h3>
                                                                    <p class="text-primary text-center"> <strong> {{$key ?? ''}} </strong></p>
                                                                    <div class="text-center text-primary">
                                                                                                                                                           <p>{{ __('This key allows you to restore your authenticator if you lose access to your phone. Without it, resetting Google Authenticator may take at least 7 days.') }}
     </div>
                                                                </div>
                                                                <div class="col-sm-2"></div>
                                                            </div>
                                                        </div>
                                                       
                                                        <button name="previous" class="previous btn btn-primary action-button-previous btn-primary mt-0 me-1" type="button">{!! renderIconHtml('previous') !!} Previous</button>
                                                        <button name="next" class="next action-button btn btn-primary mt-0" type="button">{!! renderIconHtml('next') !!} Next</button>
                                                    </fieldset>
                                                    <fieldset>
                                                        <div class="form-card px-3 px-md-0">
                                                            <div class="row">
                                                                <div class="col-sm-2"></div>
                                                                <div class="col-sm-8 pt-24">
                                                                    <h3 class="fs-title text-center main_heading">{{__('Enable Authenticator By Verifying Your Account')}}</h3>
                                                                    <div class="row text-center auth-input-div-max-width m-auto " style="max-width: 420px !important;">
                                                                        <div class="form-group col-md-12">
                                                                            <div class="relative z-0 w-full group">
                                                                                <input type="text"
                                                                                       class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 "
                                                                                       name="key" placeholder=""
                                                                                       id="backupkey">
                                                                                <label for="backupkey"
                                                                                       class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Backup Key') }}</label>
                                                                                <p class="key_error error text-start p-0 m-0"></p>
                                                                            </div>
                                                                        </div>

                                                                        <div class="form-group col-md-12">
                                                                            <div class="relative z-0 w-full group">
                                                                                <div class="">
                                                                                    <p class="mb-1 text-start">{{ __('Enter the 6-Digit Code from Your Authenticator App') }} <span class="text-danger">*</span></p>
                                                                                    <div class="flex mb-2 rtl:space-x-reverse justify-content-between otp-input-group">
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-next="enable-2fa-2" id="enable-2fa-1" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-prev="enable-2fa-1" data-focus-input-next="enable-2fa-3" id="enable-2fa-2" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-prev="enable-2fa-2" data-focus-input-next="enable-2fa-4" id="enable-2fa-3" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-prev="enable-2fa-3" data-focus-input-next="enable-2fa-5" id="enable-2fa-4" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-prev="enable-2fa-4" data-focus-input-next="enable-2fa-6" id="enable-2fa-5" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                        <div>
                                                                                            <input type="text" inputmode="numeric" name="code[]" maxlength="1" data-focus-input-init data-focus-input-prev="enable-2fa-5" id="enable-2fa-6" placeholder="0" class="twoFaCodeInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                                                                        </div>
                                                                                    </div>
                                                                                    <p class="float-end authLoader p-0 m-0" style="display: none"><i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;{{ __('loading') }}...</p>
                                                                                    <p class="code_error error text-start p-0 m-0"></p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-2"></div>
                                                            </div>
                                                        </div>
                                                        
                                                        <button name="previous" class="previous btn btn-primary action-button-previous btn-primary mt-0 me-1" type="button">{!! renderIconHtml('previous') !!} Previous</button>
                                                        <button name="next" onclick="saveGoogle2FaChanges('google2fa')" class="action-button form-submit btn btn-primary mt-0 submitBtn" type="button">{!! renderIconHtml('next') !!} Next</button>
                                                    </fieldset>
                                                    <fieldset id="step-5">
                                                        <div class="form-card px-3 px-md-0">
                                                            <div class="row">
                                                                <div class="col-sm-2"></div>
                                                                <div class="col-sm-8 pt-24 text-center">
                                                                    {{--<div class="text-center"> <img src="backend/images/authenticator_enabled.png"></div>
                                                                    <br>--}}
                                                                    <h3 class="fs-title text-center main_heading">{{__('Authenticator Enabled')}}</h3>
                                                                    <p>{{__('You have successfully enabled authenticator to protect your account')}}</p>
                                                                </div>
                                                                <div class="col-sm-2"></div>
                                                            </div>
                                                            <div class="justify-content-center d-flex">
                                                                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Back To Dashboard</a>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <script src="{{asset('backend/js/pages-js/google2fa.js')}}"></script>
@endpush