@push('style')
<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>
<style>
    * {
        margin: 0;
        padding: 0
    }

    html {
        height: 100%
    }

    #v-pills-tabContent>p {
        color: grey
    }

    #heading {
        /* text-transform: uppercase; */
        color: #A5A08F;
        font-weight: 800;
    }

    #title-heading {
        color: #203F5B;
    }

    #msform {
        text-align: center;
        position: relative;
        margin-top: 20px
    }

    #msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
        position: relative
    }

    .form-card {
        text-align: left;
        /* margin-top: 3.5rem; */
    }

    #msform fieldset:not(:first-of-type) {
        display: none
    }

    .max-width-65 {
        max-width: 65% !important;
    }

    #msform input,
    #msform textarea {
        padding: 8px 15px 8px 15px;
        border: 1px solid #ccc;
        border-radius: 0px;
        margin-bottom: 25px;
        margin-top: 2px;
        width: 100%;
        box-sizing: border-box;
        font-family: montserrat;
        color: #2C3E50;
        background-color: #ECEFF1;
        font-size: 16px;
        letter-spacing: 1px
    }

    #msform input:focus,
    #msform textarea:focus {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 1px solid #673AB7;
        outline-width: 0
    }

    #msform .action-button {
        width: 140px;
        background: #203F5B;
        font-weight: bold;
        color: #ffffff;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 0px 10px 5px;
    }

    .download_next_btn,
    .authenticator_enabled_btn {
        width: 65% !important;
    }

    #msform .action-button:hover,
    #msform .action-button:focus {
        background-color: #203F5B;
    }

    #msform .action-button-previous {
        width: 140px;
        background: #dcdcdc;
        font-weight: bold;
        color: #000000;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px 10px 0px;
    }

    #msform .action-button-previous:hover,
    #msform .action-button-previous:focus {
        background-color: #000000;
        color: #fff;
    }

    .card {
        z-index: 0;
        border: none;
        position: relative;
        box-shadow: 0px 5px 5px 0px rgb(19 23 38 / 5%);
        font-family: 'Montserrat', sans-serif;
    }

    .fs-title {
        font-size: 25px;
        color: #673AB7;
        margin-bottom: 15px;
        font-weight: normal;
        text-align: left;
    }

    .purple-text {
        color: #673AB7;
        font-weight: normal
    }

    .steps {
        font-size: 25px;
        color: gray;
        margin-bottom: 10px;
        font-weight: normal;
        text-align: right
    }

    .fieldlabels {
        color: gray;
        text-align: left
    }

    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        color: lightgrey;
        padding-left: 0;
    }

    #progressbar .active {
        color: #000000;
    }

    #progressbar li {
        list-style-type: none;
        font-size: 15px;
        width: 20%;
        float: left;
        position: relative;
        font-weight: 400
    }

    #progressbar #account:before {
        font-family: FontAwesome;
        content: "1";
    }

    #progressbar #personal:before {
        font-family: FontAwesome;
        content: "2";
    }

    #progressbar #payment:before {
        font-family: FontAwesome;
        content: "3";
    }

    #progressbar #confirm:before {
        font-family: FontAwesome;
        content: "4";
    }

    #progressbar #complete:before {
        font-family: FontAwesome;
        content: "5";
    }

    #progressbar li:before {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px
    }

    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1
    }

    #progressbar li.active:before,
    #progressbar li.active:after {
        background: #203F5B;
    }

    .progress {
        height: 20px
    }

    .progress-bar {
        background-color: #203F5B;
    }

    .fit-image {
        width: 100%;
        object-fit: cover
    }

    .max-width-200 {
        max-width: 200px !important;
    }

    .binance_auth {
        background-color: #DCDCDC;
        padding: 10px 10px 10px 10px;
    }

    .main_heading {
        color: #000000;
    }

    .digit_code {
        margin-top: -25px;
        font-size: 12px;
    }

    .security_text {
        color: #203F5B;
    }

    .get-code {
        margin-top: 2px;
        color: #203F5B;
        border: 1px solid #ccc !important;
        border-left: none !important;
    }

    .get-code:hover {
        background: unset !important;
        color: #203F5B !important;
    }

    .getcodeinput {
        background-color: transparent !important;
        border: 1px solid #ccc !important;
        border-right: none !important;
        width: auto !important;
    }

    .list-group-item {
        padding: 0.5rem 2rem;
    }

    .form-check-input:checked {
        background-color: #203F5B !important;
        border-color: #203F5B !important;
    }

    .card {
        margin: 30px 0 10px !important;
    }

    .card-header {
        font-size: 20px;
        font-weight: 500;
        font-family: "Roboto", sans-serif;
        color: #512c92;
        text-align: center;
    }

    .nav-tabs {
        border-bottom: none
    }

    .faForm {
        padding: 10px 0 0;
    }

    @media(min-width:992px) {
        .fa_card {
            padding: 0 10px;
        }

        .right-divider {
            border-right: 1px solid #d2cfc6;
        }
    }

    @media(max-width:991px) {
        .right-divider {
            padding-bottom: 2rem;
        }
    }
</style>
@endpush
@php $settings = App\Models\AdminSettings::where('key','2fa')->first(); @endphp
<div class="faForm">
    @if($settings && $settings->value == 1)
    <div class="text-center" style="display: {{ Auth::user()->google_auth_key ? 'none':'block' }}">
        <h3 id="heading"> Enable Google Authenticator</h3>
        <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-md-1">
                </div>
                <div class="col-md-10">
                    <fieldset>
                        <div class="form-card">
                            <div class="row text-center">
                                <div class="col-lg-1 col-1">
                                </div>
                                <div class="col-lg-10 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('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('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('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-left 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-1 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>Your Backup key will allow you to recover your
                                            Authenticator should you lose your phone.</p>
                                        <p>Without this key, you will need to contact support to
                                            reset Google Authenticator and it will 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">
                                    <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;">
                                                <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 style="text-align: 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-md-2">
                </div>
            </div>
        </form>
    </div>
    @else
    <div style="display:grid;place-items:center;">
        <img class="" src="{{ asset('frontend/images/disable.png') }}" height="90" width="90">
        <h4 class="mt-4" style="color:#203f5b;text-align:center;">{{__('Disabled Access')}}</h4>
        <p class="text-center" style="font-size:18px;">{{__('2FA functionality is disabled by the Administrator.') }}
        </p>
    </div>
    @endif
    @if($settings && $settings->value == 1)
    <section id="featured-services" class="featured-services"
        style="display: {{ !Auth::user()->google_auth_key ? 'none':'block' }}">
        <div class="aos-init aos-animate" data-aos="fade-up">
            <fieldset>
                <div class="form-card">
                    <div class="row">
                        <div class="col-lg-6 right-divider">
                            <div class="fa_card">
                                <div class="fs-title main_heading">
                                    <h3 id="title-heading">{{__('Require Google Authentication Code for') }}
                                    </h3>
                                </div>
                                <div class="">
                                    <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="number form-control mt-2" name="code" id="verify"
                                            placeholder="Please 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>
                        <div class="col-lg-6">
                            <div class="c-card fa_card mt-2 mt-md-0"
                                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 main_heading">
                                        <h3 id="title-heading"> {{__('Cancel Google 2FA') }} </h3>
                                    </div>
                                    <div class="">
                                        <p class="form-check-label" 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;">
                                        <br>
                                        <div>
                                            <button class="btn btn-info" 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>
    @endif
</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