<div class="row">
    <div class="col-lg-12 col-md-8 col-12">
        @if (getSiteSettings('2fa'))
            <div class="card" style="display: {{ Auth::user()->google_auth_key ? 'none' : 'block' }}">
                <div class=" card-header py-3 bg-white">
                    {{ __('Enabled 2FA With Google Authenticator') }}
                </div>
                <div class="card-body p-4">
                    <form action="{{ url('2fa') }}" onsubmit="google2Fa(event,'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">
                                        <div class="row text-center">

                                            <div class="col-lg-2 col-1">
                                            </div>
                                            <div class="col-lg-8 col-10 pt-24">
                                                <h3 class="text-center">
                                                    {{ __('Download And Install The Authenticator App') }}
                                                </h3>
                                                <br>

                                                <div class=" row">
                                                    <div class="col-sm-6">
                                                        <img src="{{ asset('frontend/images/apple-app-store.png') }}">

                                                        <p class="main_heading">{{ __('App Store') }}</p>

                                                    </div>
                                                    <div class="col-sm-6">
                                                        <img src="{{ asset('images/google-play-store.png') }}">
                                                        <p class="main_heading">{{ __('Android APK') }}</p>

                                                    </div>
                                                </div>
                                                <div class="row">

                                                    <div class="col-sm-12 text-primary">

                                                        <p class="text-left mt-3"><b>{{ __('Scan to download') }}</b>
                                                            {{ __('iOS and Android') }}
                                                        </p>
                                                    </div>
                                                </div>
                                                <br>
                                            </div>
                                        </div>
                                    </div> <input type="button" name="next"
                                        class="next action-button download_next_btn" value="Next"
                                        style="background-color: #203f5b !important;" />
                                    <br>

                                </fieldset>
                                <fieldset>
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-8  text-center pt-24">

                                                <h3 class="fs-title text-center main_heading">
                                                    {{ __('Scan This QR Code In The Authenticator App') }}</h3>
                                                <div class="text-center">
                                                    {!! QrCode::size(200)->style('round')->eyeColor(2, 202, 53, 93, 0, 0, 0)->eyeColor(1, 202, 53, 93, 0, 0, 0)->eyeColor(0, 202, 53, 93, 0, 0, 0)->gradient(202, 53, 93, 142, 46, 168, 'radial')->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> <input type="button" name="previous"
                                        class="previous action-button-previous btn-primary" value="Previous"
                                        style="background-color: #203f5b !important;" /><input type="button"
                                        name="next" class="next action-button" value="Next"
                                        style="background-color: #203f5b !important;" />
                                    <br>
                                </fieldset>
                                <fieldset>
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-8 pt-24">
                                                <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 will allow you to recover your Authenticator should you lose your phone. Otherwise, resetting Google Authenticator will take atleast 7 days.') }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-sm-2"></div>

                                        </div>
                                    </div><input type="button" name="previous" class="previous action-button-previous"
                                        value="Previous" style="background-color: #203f5b !important;" />
                                    <input type="button" name="next" class="next action-button" value="Next"
                                        style="background-color: #203f5b !important;" />
                                </fieldset>
                                <fieldset>
                                    <div class="form-card">
                                        <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">
                                                    <div class="input-group mb-3">

                                                        <div style="text-align: left; width:100%"><label
                                                                class="fieldlabels">{{ __('Enter Backup Key') }}</label>
                                                            <input type="text" name="key" placeholder=""
                                                                id="backupkey">
                                                        </div>
                                                        <div style="text-align: left;"><label
                                                                class="fieldlabels">{{ __('Enter The 6-Digit Code Sent From Google Authenticator') }}</label>
                                                            <input type="number" name="code" placeholder=""
                                                                id="init-code" onkeyup="initAutoFA(event,'google2fa')"
                                                                maxlength="6">
                                                        </div>

                                                    </div>

                                                </div>

                                            </div>
                                            <div class="col-sm-2"></div>

                                        </div> <br><br>

                                    </div> <input type="button" name="previous"
                                        class="previous action-button-previous" value="Previous"
                                        style="background-color: #203f5b !important;" />
                                    <input type="button" onclick="google2Fa(event,'google2fa')"
                                        class="action-button form-submit" value="Submit"
                                        style="background-color: #203f5b !important;" />
                                </fieldset>
                                <fieldset>
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-8 pt-24 text-center">
                                                <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> <br><br>

                                        <div class="justify-content-center d-flex">
                                            <input type="button" name="next"
                                                class="next action-button authenticator_enabled_btn"
                                                value="Back to Security" />
                                        </div>

                                    </div>
                                </fieldset>
                            </div>

                        </div>
                    </form>
                </div>

            </div>
            <div class="card " style="display: {{ !Auth::user()->google_auth_key ? 'none' : 'block' }}">

                <div class="card-header py-3 bg-white">
                    {{ __('Require Authentication Code for') }}
                </div>
                <div class="card-body p-4">
                    <form action="{{ url('2fa') }}" method="post" onsubmit="google2Fa(event,'2fasetting')"
                        id="2fasetting">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <input type="hidden" name="fa_setting[]">
                                <input class="form-check-input me-1" type="checkbox" value="login" id="login"
                                    name="fa_setting[]"
                                    {{ is_array(Auth::user()->fa_setting) && in_array('login', Auth::user()->fa_setting) ? 'checked' : '' }}>
                                {{ __('For Login') }}
                            </li>

                        </ul>
                        <input type="number" class="form-control mt-2" name="code" id="verify-txt"
                            placeholder="Please Google Authenticator Code" minlength="6" maxlength="6"
                            style="display:none" onkeyup="otpVerify('2fasetting')">

                        <div class="mt-3 ">

                            <button class="btn btn-primary" type="button" onclick="displayVerify('2fasetting')"
                                id="verify-btn">{{ __('Confirm') }}</button>
                            <button class="btn btn-primary verify-submit" type="submit" style="display:none"
                                disabled>
                                {{ __('Change Setting') }}</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card c-card mt-2" style="display: {{ !Auth::user()->google_auth_key ? 'none' : 'block' }}">
                <form action="{{ url('2fa') }}" method="post" onsubmit="google2Fa(event,'2fasettingcancel')"
                    id="2fasettingcancel">
                    <div class="card-header py-3 bg-white">
                        {{ __('Cancel Google 2FA') }}
                    </div>
                    <div class="card-body p-4">
                        <label class="form-check-label" for="login">
                            {{ __('Do you want to Cancel the Google 2FA? Please press below "Cancel" button') }}

                        </label>
                        <br>
                        <input type="hidden" name="resetauth" value="0" id="resetauth" />
                        <input type="number" class="form-control mt-2" name="code" id="verify-txt"
                            placeholder="Please Google Authenticator Code" minlength="6" maxlength="6"
                            style="display:none;width:320px" onkeyup="otpVerify('2fasettingcancel')">
                        <br>
                        <div>
                            <button class="btn btn-danger" type="button"
                                onclick="$('#resetauth').val(1);displayVerify('2fasettingcancel')"
                                id="verify-btn">{{ __('Cancel') }}</button>
                            <button class="btn btn-primary verify-submit" type="submit" style="display:none"
                                disabled>
                                {{ __('Confirm') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @else
            <div style="display:grid;place-items:center;">
                <img class="mt-1" src="{{ asset('frontend/images/disable.png') }}" height="90" width="90">
                <h4 style="color:#203f5b;text-align:center;margin-top:1rem;">{{ __('Disabled Access') }}</h4>
                <p class="text-center" style="font-size:18px;">
                    {{ __('2FA functionality is disabled by the Administrator.') }}</p>
            </div>
        @endif

    </div>
</div>
