@extends('layout.appHomeNew')

@section('content')
<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center services">
                <h4 class="title">
                    Security
                </h4>
                <p>Hello, {{@ $user->name}}</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</section>

<section class="section bg-lightWhite">
    <div class="container">
        <div class="row justify-content-md-center bg-offWhite pad-rad">
            @if($user->g2f_status == 0)
            <div class="col col-lg-10 mt-3">
                <h2 class="mb-4">Two factor Authentication</h2>
                <div class="row">
                    <div class="col-sm-1">
                        <h4 class="steps">1</h4>
                    </div>

                    <div class="col-sm-11">
                        <p> To enable 2FA, you'll need to have a 2FA auth app installed on your phone or tablet(examples include Google Authenticator, Duo Mobile, and Authy). </p>
                    </div>
                </div>

                <hr class="split">

                <div class="row">
                    <div class="col-sm-1">
                        <h4 class="steps">2</h4>
                    </div>
                    <div class="col-sm-11">

                        <!-- QR Code Block -->
                        <div id="qrcode-BTC" class="qrcode-container img-thumbnail" data-width="180" data-height="180" data-text="{{@$image}}" title="{{@$image}}">
                        </div>
                        <!-- End QR Code Block -->

                        <p class="clearfix">Generate a code from your newly-activated 2FA app to confirm that you're all set up.</p>

                        <div class="input-group col-sm-12 cpyInput">
                            <div class="input-group-addon">
                                <span>Key:</span>
                            </div>
                            <div class="form-control form-control-static btc_deposit_address selectable" id="deposit_address"> {{@$secret}}</div>
                            <div class="input-group-addon cursor" id="deposit_address_data" title="Click to Copy" onclick="copyToClipboard('.btc_deposit_address')">
                                <i class="far fa-copy"></i>
                            </div>
                            <!-- <div class="input-group-addon">
                                                        <a id="new_address" href="#"> New Address</a>
                                                    </div> -->
                        </div>

                        <br>Scan QR code.

                    </div>
                </div>

                <hr class="split">

                <div class="row">
                    <div class="col-sm-1">
                        <h4 class="steps">3</h4>
                    </div>
                    <div class="col-sm-11">
                        <div class="form-group">
                            <label for="sendamt">Enter Google 2FA Code</label>
                            <input type="text" class="form-control" id="sendamt" placeholder="Enter the generated 2FA passcode" maxlength="6" onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;">
                        </div>
                        <div class="enabl2fa" style="text-align: center;">
                            <button type="submit" class="btn btn-secondary" onclick="myfuncgoogleotp();">Enable</button>
                            <p style="display: none;" id="otp_msg"></p>
                        </div>
                    </div>
                </div>
            </div>
            @else
            <div class="col col-lg-10 mt-3">
                <h2 class="mb-4">Disable factor Authentication</h2>
                <form method="GET" action="{{ route('disableTwoFactor') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col mb-4">
                            <label for="sendamt" class="form-label">Enter Google 2FA Code</label>
                            <input type="text" class="form-control" id="otp" aria-describedby="" placeholder="Enter 6 digits 2FA Code" name="otp" maxlength="6" onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <button class="uBtn bg-green br-green text-white me-0 ms-0 me-">Disable 2FA</button>
                        </div>
                    </div>
                </form>
            </div>
            @endif
        </div>
    </div>
</section>

@endsection

@section('scripts-new')

<script type="text/javascript" src="{{asset('js/jquery.qrcode.js')}}"></script>
<script type="text/javascript" src="{{asset('js/qrcode.js')}}"></script>
<script type="text/javascript">
    var image = '{{ @$image}}';
    $('#qrcode-BTC').html('<img src="' + image + '" class="img-fluid">');

    var btc_address = $('#qrcode-BTC').data('text');
    $('#qrcode-BTC').qrcode(btc_address);

    var eth_address = $('#qrcode-ETH').data('text');
    $('#qrcode-ETH').qrcode(eth_address);


    var alert = $(".alert-container");
    alert.hide();

    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
        alert.slideDown();
        window.setTimeout(function() {
            alert.slideUp();
        }, 2500);
    }

    function myfuncgoogleotp() {
        $(".alert-danger").hide();
        $(".alert-success").hide();

        var otp = $('#sendamt').val();
        if (otp == "") {
            $(".alert-danger").html("Please enter valid 6 digits OTP.");
            $(".alert-danger").show().delay(5000).fadeOut();
        }

        $.ajax({
            url: "{{url('/g2fotpcheckenablenew')}}",
            type: "POST",
            data: {
                "_token": '{{ csrf_token() }}',
                'totp': otp
            }
        }).done(function(response) {

            if (response.status == 1) {
                $(".alert-success").html(response.message);
                $(".alert-success").show().delay(5000).fadeOut();
                // location.reload();

                $('.enabl2fa').hide();
                // $(".alert-success").html(response.message);
                setTimeout(function() {
                    location.reload();
                }, 3000);

            } else {
                $(".alert-danger").html(response.message);
                $(".alert-danger").show().delay(5000).fadeOut();
            }


        }).fail(function(key, status) {
            // $('.alert-danger').show();
            // $('.alert-danger').append('<p>'+status+'</p>');
        });

    }
</script>
@endsection