@extends('layouts.master-blank')

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

@section('content')
<section id="featured-services" class="featured-services">
    @php $setting = App\Models\SiteConfiguration::where('key','2fa')->first();@endphp
    @if($setting->value == 'on')
    <div class="row">
        <div class="text-center" style="display: {{ Auth::user()->google_auth_key ? 'none':'block' }}">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="mt-4 px-0 pb-0">
                        <h4 id="heading"> {{ __('Enable google authenticator')}}</h4>

                        <form id="msform" action="{{ url('2fa') }}" method="post" onsubmit="googleVaildation(event,'msform')">
                            @csrf
                            <input type="hidden" name="google_auth_key" id="google_auth_key" value={{$key ?? '' }}>
                            <!-- progressbar -->
                            <ul id="progressbar">
                                <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-12 col-12">
                                                    <h3 class="text-center">{{ __('Download And Install The')}} <br />{{ __('Authenticator App')}} </h3>
                                                    <br>
                                                    <p class="text-center binance_auth p-10">{{ __('Google Authenticator')}}</p>
                                                    <div class=" row">
                                                        <div class="col-sm-6">
                                                            <a href="https://apps.apple.com/in/app/google-authenticator/id388497605">
                                                                <img src="{{ url('backend/images/app-store.png')}}">
                                                                <p class="main_heading">{{ __('App Store')}}</p>
                                                            </a>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">
                                                                <img src="{{ url('backend/images/apk.png')}}">
                                                                <p class="main_heading">{{ __('Android APK')}}</p>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="text-right"> <img src="{{ url('backend/images/qrcodeios2.png')}}"></div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="text-right"> <img src="{{ url('backend/images/qrcodeapk.png')}}"></div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <p class="text-left mt-3 text-lg"><b>{{ __('Scan to download')}}</b>
                                                                <br>{{ __('iOS and Android')}}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <br>
                                                    <a href="#">
                                                        <p class="text-center">{{ __('How To Set Up Google Authenticator')}}</p>
                                                    </a>
                                                </div>
                                            </div>
                                        </div> <input type="button" name="next" class="next action-button download_next_btn max-width-65" value="Next" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <div class="row">
                                                <div class="col-sm-2"></div>
                                                <div class="col-sm-8 text-center text-lg">
                                                    <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>

                                                </div>
                                                <div class="col-sm-2"></div>
                                            </div>
                                        </div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /><input type="button" name="next" class="next action-button" value="Next" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <div class="row">
                                                <div class="col-sm-2"></div>
                                                <div class="col-sm-8 text-lg">
                                                    <h3 class="fs-title text-center main_heading">{{ __('Save This Backup Key In Secure Location')}}</h3>

                                                    <div class="text-center"><b>{{$key ?? ''}}</b></div>
                                                    <div class="text-center">
                                                        <p>{{ __('This key allows you to restore your authenticator if you lose access to your phone.')}}</p>
                                                        <p>{{ __('Without it, resetting Google Authenticator may take at least 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" /> <input type="button" name="next" class="next action-button" value="Next" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <div class="row">
                                                <div class="col-sm-2"></div>
                                                <div class="col-sm-8 text-lg">
                                                    <h3 class="fs-title text-center main_heading">{{ __('Enable Authenticator By Verifying Your Account')}}</h3>
                                                    <div class="row text-center">
                                                        <div class="">
                                                            <div style="text-align: left;">
                                                                <div class="relative z-0 w-full mb-0 group">
                                                                    <input class="form-control 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" type="text" name="google_auth_key_comfirm" id="google_auth_key_comfirm" placeholder="">
                                                                    <label for="google_auth_key_comfirm" class="fieldlabels ml-2 p-2 py-0 peer-focus:font-medium absolute 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>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <div style="text-align: left;">
                                                                <div class="relative z-0 w-full mb-0 group">
                                                                    <input type="text" name="code" id="code" class="code form-control 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" placeholder="">
                                                                    <label class="fieldlabels ml-2 p-2 py-0 peer-focus:font-medium absolute 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">Authenticator Code</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p class="digit_code">{{ __('Enter the 6-Digit Code from Your Authenticator App')}}</p>

                                                </div>
                                                <div class="col-sm-2"></div>
                                            </div> <br><br>
                                        </div>
                                        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                                        <input type="submit" name="next" class=" action-button" value="Submit" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <div class="row">
                                                <div class="col-sm-2"></div>
                                                <div class="col-sm-8 text-lg text-center">
                                                    <div class="text-center"> <img src="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> <br><br>
                                            <div class="justify-content-center d-flex">
                                                <input type="button" name="next" class="next action-button authenticator_enabled_btn max-width-200" value="Back to Security" />
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <section id="featured-services" class="featured-services" style="display: {{ !Auth::user()->google_auth_key ? 'none':'block' }}">
            <div class="container aos-init aos-animate" data-aos="fade-up">
                <fieldset>
                    <div class="form-card">

                        <div class="row">
                            <div class="col-lg-3 col-md-2 col-0"></div>
                            <div class="col-lg-6 col-md-8 col-12">
                                <div class="card ">


                                    <div class="fs-title text-center main_heading">
                                        <h3 id="title-heading">{{__('Require Authentication Code for') }}</h3>
                                    </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 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>
                                                @if(isset(auth()->user()->roles[0]->name) && auth()->user()->roles[0]->name == 'support-manager')


                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1" type="checkbox" value="clear" id="clear" name="fa_setting[]" {{is_array(Auth::user()->fa_setting) &&
                                            in_array('clear',Auth::user()->fa_setting) ? 'checked' : ''}}>
                                                    {{__('For clear') }}
                                                </li>

                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1" type="checkbox" value="export" id="export" name="fa_setting[]" {{is_array(Auth::user()->fa_setting) &&
                                            in_array('export',Auth::user()->fa_setting) ? 'checked' : ''}}>
                                                    {{__('For export') }}
                                                </li>

                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1" type="checkbox" value="import" id="import" name="fa_setting[]" {{is_array(Auth::user()->fa_setting) &&
                                            in_array('import',Auth::user()->fa_setting) ? 'checked' : ''}}>
                                                    {{__('For import') }}
                                                </li>

                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1" type="checkbox" value="switch" id="switch" name="fa_setting[]" {{is_array(Auth::user()->fa_setting) &&
                                            in_array('switch',Auth::user()->fa_setting) ? 'checked' : ''}}>
                                                    {{__('For switch') }}
                                                </li>

                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1" type="checkbox" value="change" id="change" name="fa_setting[]" {{is_array(Auth::user()->fa_setting) &&
                                            in_array('change',Auth::user()->fa_setting) ? 'checked' : ''}}>
                                                    {{__('For change email') }}
                                                </li>
                                                @endif


                                            </ul>
                                            <input type="text" class="number form-control mt-2" name="code" id="verify" placeholder="Google Authenticator Code" style="display:none">

                                            <div class="mt-3 ">
                                                <button class="btn btn-success" type="button" onclick="displayVerify('2fasetting')" id="verify-btn">{{__('Confirm') }}</button>
                                                <button class="btn btn-success 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="fs-title text-center main_heading">
                                            <h3 id="title-heading"> {{__('Cancel Google 2FA') }} </h3>
                                        </div>
                                        <div class="card-body p-4">
                                            <p class="form-check-label font-bold" for="login">
                                                {{__('Do you want to Cancel the Google 2FA? Please press below Cancel button') }}

                                            </p>

                                            <input type="hidden" name="resetauth" value="0" id="resetauth" />
                                            <input type="text" class="number2 form-control mt-2" name="code" id="verify-txt" placeholder="Please Google Authenticator Code" style="display:none;width:320px">
                                            <br>
                                            <div>
                                                <button class="btn btn-secondary" type="button" onclick="$('#resetauth').val(1);displayVerify('2fasettingcancel')" id="verify-btn">{{__('Cancel') }}</button>
                                                <button class="btn btn-success verify-submit" type="submit" style="display:none" disabled> {{__('Confirm') }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>


                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </section>
    </div>
    @else
    <div class="card" style="display:grid;place-items:center;">
        <img class="" src="{{ asset('backend/images/disable.png') }}" height="90" width="90">
        <h4 class="mt-4" style="color:#7236B8;text-align:center;">{{__('Disabled Access')}}</h4>
        <p class="text-center" style="font-size:18px;">{{__('2FA functionality is disabled by the Administrator.') }}</p>
    </div>
    @endif

</section>

@endsection


@push('scripts')
<script>
    var readOnlyMode = "{{ readOnlyMode() ?? '' }}";
</script>

<script src="{{ asset('backend/js/pages-js/google2fa.js') }}"></script>
<script>
    function googleVaildation(event, fid) {
        var googleAuthKey = $('#google_auth_key').val();
        var googleAuthKeyComfirm = $('#google_auth_key_comfirm').val();
        event.preventDefault();
        if (googleAuthKeyComfirm) {
            if (googleAuthKey != googleAuthKeyComfirm) {
                swalMsg("Backup key not match.",'error');
                return false;
            }
        } else {
            swalMsg("Please enter backup key.",'error');
            return false;
        }


        var form = $("#" + fid);

        var formData = $("#" + fid)[0];
        // Create an FormData object
        var fd = new FormData(formData);
        $("#preloader").show();
        $.ajax({
            url: form.attr("action"),
            type: "POST",
            data: fd,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            processData: false,
            contentType: false,
            success: function(data, textStatus, jqXHR) {
                swalMsg(data.msg,"success");
                if (data.status) {
                    window.location.reload();
                }
            },
            error: function (data) {
                swalMsg(data.responseJSON.msg,"success");
                $("#preloader").hide();
            }

        });
    }
    $(document).ready(function() {

        $('body').on('keyup paste', '.number', function(e) {
            var txtvalue = $(this).val();

            if (/^[0-9]*$/.test(txtvalue) == false) {
                $(this).val('');
            }
            var code = $('#verify').val();
            if (code.length == 6) {
                $("#2fasetting").trigger('submit');
            }
        });
        $('body').on('keypress', '.number', function(e) {
            var regex = new RegExp("^[0-9]*$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            var code = $('#verify').val();
            if (code.length > 5) {
                event.preventDefault();
                return false;
            }

        });

        $('body').on('keyup paste', '.number2', function(e) {
            var txtvalue = $(this).val();

            if (/^[0-9]*$/.test(txtvalue) == false) {
                $(this).val('');
            }
            var code = $('#verify-txt').val();
            if (code.length == 6) {
                $("#2fasettingcancel").trigger('submit');
            }
        });
        $('body').on('keypress', '.number2', function(e) {
            var regex = new RegExp("^[0-9]*$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            var code = $('#verify-txt').val();

            if (code.length > 5) {
                event.preventDefault();
                return false;
            }

        });
        $('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('submit');
            }
        });
        $('body').on('keypress', '.code', function(e) {
            var regex = new RegExp("^[0-9]*$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            var code = $('#code').val();
            if (code.length > 5) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>
@endpush