@extends('layouts.user.base')

@section('page-title')
    General
@endsection


@php
    $settings = $user->settings;
    $google2fa_is_enabled = $settings->google2fa == \App\Models\UserSetting::USER_SETTING_ON ? true : false;
    $hide_wallet_is_enabled = $settings->hide_wallet == \App\Models\UserSetting::USER_SETTING_ON ? true : false;
    $incognito_mode_is_enabled = $settings->incognito_mode == \App\Models\UserSetting::USER_SETTING_ON ? true : false;
@endphp
@section('content')
    @include('user.settings.layouts.sidebard')

    <div class="col-md-9 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="card card-bg border-0">
            <div class="card-body">
                <div class="mb-3">
                    <div id="google_translate_element"></div>

                    <script>
                        function googleTranslateElementInit() {

                            new google.translate.TranslateElement({

                                pageLanguage: 'en',

                                autoDisplay: 'true',

                                includedLanguages: 'hi,en,bn,id,fr',

                                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL

                            }, 'google_translate_element');

                        }
                    </script>

                    <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script><small class="form-text fst-italic">Change your language setting</small>
                </div>
                <hr>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" @if($incognito_mode_is_enabled) checked @endif onclick="___toggle_toggle_incognito()" type="checkbox" id="formCheck-4">
                        <label class="form-check-label mt-2" for="formCheck-4">Incognito Mode</label>
                    </div>
                            <small class="form-text fst-italic">Turn on incognito mode to hide your transactions.</small>
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" @if($hide_wallet_is_enabled) checked @endif onclick="___toggle_hide_wallet()" type="checkbox" id="formCheck-2">
                        <label class="form-check-label mt-2" for="formCheck-2">Hide Wallet</label>
                    </div>
                    <small class="form-text fst-italic">Turn on hide wallet to obscure your wallet balance and address.</small>
                </div>
                <div class="mb-3" x-data="{ show: @if($google2fa_is_enabled) true @else false @endif }">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="2fa" x-model="show">
                        <label class="form-check-label mt-2" for="2fa">2-Factor Authentication</label>
                    </div>
                    @if($google2fa_is_enabled)
                        <small class="form-text fst-italic">Turn off 2-FA for reduced security</small>
                    @else
                        <small class="form-text fst-italic">Turn on 2-FA for added security</small>
                    @endif
                    <form class="mt-2" action="{{ route('user_google2fa_update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="status" value="{{ $google2fa_is_enabled ? \App\Models\UserSetting::USER_SETTING_OFF : \App\Models\UserSetting::USER_SETTING_ON }}">
                        <div class="row" x-show="show" x-transition="">
                            @if(!$google2fa_is_enabled)
                            <div class="col-6 col-sm-6 col-md-3">
                                <div>{!! $qr_image !!}</div>
                            </div>
                            @endif
                            <div class="col-6 col-sm-6 col-md-9">
                                <label class="form-label" for="otp">OTP</label>
                                <input class="form-control custom-w-50" type="tel" id="otp" placeholder="OTP from Authenticator App" autofocus="" required="" minlength="6" maxlength="6" name="otp">
                                <div class="form-group mt-3">
                                    <button class="btn btn-primary" type="submit">@if($google2fa_is_enabled) Disable @else Enable @endif</button>
                                    {{-- <a class="text-decoration-none alt-btn-3 ms-2" href="#" data-bs-target="#calculator" data-bs-toggle="modal">Disable</a> --}}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')

<script>
    function ___toggle_hide_wallet() {

        $.ajax({
            url: "{{ route('user_toggle_hide_wallet') }}",
            type: "POST",
            data:  {"_token":"{{ csrf_token() }}"},
            success: function (response) {
                console.log(response)
            },
            error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
            }
        });
    };
    function ___toggle_toggle_incognito() {

        $.ajax({
            url: "{{ route('user_toggle_incognito') }}",
            type: "POST",
            data:  {"_token":"{{ csrf_token() }}"},
            success: function (response) {
                console.log(response)
            },
            error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
            }
        });

    };
</script>
@endsection