@push('styles')
<script src="{{asset('frontend/js/bootstrap-v5.1.3/bootstrap.bundle.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('frontend/css/fontawesome-5.15.1/css/all.min.css')}}" />
<script src="{{asset('frontend/js/jquery-v3.6.0/jquery.min.js')}}"></script>
<link rel="stylesheet" href="{{ asset('backend/css/2fa.css') }}">
@endpush
@php $settings = getSiteSettings('2fa'); @endphp
<div class="row">
    <div class="col-lg-12 col-md-8 col-12">
        <div class="card" style="display: {{ Auth::user()->google_auth_key ? 'none':'block' }}">
            @if($settings == 1 )
            <div class=" card-header py-3 bg-white" id="heading">
                {{__('Enabled 2FA With Google Authenticator') }}
            </div>
            <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-2">
                    </div>
                    <div class="col-sm-8">
                        <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">
                                        <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" class="display-inherit">
                                                <a
                                                    href="https://apps.apple.com/in/app/google-authenticator/id388497605">
                                                    <img src="{{ url('images/app_store.png')}}">
                                                    <p class="main_heading">App Store</p>
                                                </a>
                                            </div>
                                            <div class="col-sm-6 display-inherit direction-rtl">
                                                <a
                                                    href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">
                                                    <img src="{{ url('images/apk.png')}}">
                                                    <p class="main_heading">Android APK</p>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="text-left"> <img src="{{ url('images/qrcodeios2.png')}}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="text-right"> <img src="{{ url('images/qrcodeapk.png')}}">
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <p class="text-center mt-3"><b>Scan to Download</b>
                                                    <br>iOS and Android
                                                </p>
                                            </div>
                                        </div>
                                        <br>
                                        <p class="text-center">How to set up Google Authenticator</p>
                                    </div>
                                    <div class="col-lg-2 col-1">
                                    </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">
                                        <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">
                                        <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 will allow you to recover your Authenticator should you lose
                                                your phone. Otherwise, resetting Google Authenticatorwill 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" /> <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">
                                        <h3 class="fs-title text-center main_heading">Enable Authenticator by verifying
                                            your account</h3>
                                        <div class="row text-center">
                                            <div class="form-gr">
                                                <div class="text-left">
                                                    <label class="fieldlabels">Enter Backup Key</label>
                                                    <input type="text" name="google_auth_key_comfirm"
                                                        id="google_auth_key_comfirm">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="text-left">
                                                    <label class="fieldlabels">Authenticator Code</label>
                                                    <input type="text" name="code" id="code" class="code"
                                                        placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                        <p class="digit_code">Enter the 6-digit code sent from Google Authenticator</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-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 class="col-sm-2">
                    </div>
                </div>
            </form>
            @else
            <div class="card py-4" class="fa-display">
                <img class="mt-3" src="{{ asset('backend/images/disable.png') }}" height="90" width="90">
                <h3 class="mt-4 text-center" class="fa-font-color">{{__('Disabled Access')}}</h3>
                <p class="text-center" class="fa-font">{{__('2FA functionality is disabled by the Administrator.') }}
                </p>
            </div>
            @endif
        </div>
        @if($settings == 1)
        <div class="card " style="display: {{ !Auth::user()->google_auth_key ? 'none':'block' }}">
            <div class="card-header py-3 bg-white">
                {{__('Require Google 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 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="text" class="form-control mt-2 number" name="code" id="verify"
                        placeholder="Please Google Authenticator Code" minlength="6" maxlength="6" 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="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="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-danger" 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>
        @endif
    </div>
</div>
@push('scripts')
<script src="{{ asset('frontend/js/google2fa.js') }}"></script>
<script>
    function googleVaildation(event, fid) {
        var google_auth_key = $('#google_auth_key').val();
        var google_auth_key_comfirm = $('#google_auth_key_comfirm').val();
        event.preventDefault();
        if (google_auth_key_comfirm) {
            if (google_auth_key != google_auth_key_comfirm) {
                swalMsg("success", "Backup key not match");
                return false;
            }
        } else {
            swalMsg("success", "Please enter backup key");
            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("success", data.msg);
                if (data.status) {
                    window.location.reload();
                }
            },
        });
    }
    $(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;
            }
        });
        var current_fs, next_fs, previous_fs; //fieldsets
        var opacity;
        var current = 1;
        var steps = $("fieldset").length;
        setProgressBar(current);
        $(".next").click(function() {
            current_fs = $(this).parent();
            next_fs = $(this).parent().next();
            //Add Class Active
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function(now) {
                    // for making fielset appear animation
                    opacity = 1 - now;
                    current_fs.css({
                        'display': 'none',
                        'position': 'relative'
                    });
                    next_fs.css({
                        'opacity': opacity
                    });
                },
                duration: 500
            });
            setProgressBar(++current);
        });
        $(".previous").click(function() {
            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();
            //Remove class active
            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function(now) {
                    // for making fielset appear animation
                    opacity = 1 - now;
                    current_fs.css({
                        'display': 'none',
                        'position': 'relative'
                    });
                    previous_fs.css({
                        'opacity': opacity
                    });
                },
                duration: 500
            });
            setProgressBar(--current);
        });
        function setProgressBar(curStep) {
            var percent = parseFloat(100 / steps) * curStep;
            percent = percent.toFixed();
            $(".progress-bar")
                .css("width", percent + "%")
        }
        // $(".submit").click(function() {
        //     return false;
        // })
    });
</script>
@endpush