@extends("website.service-providers.layouts.layout")
@section('title',"My Account")
@section("body")
<!--Banner-->

<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
            </ol>
        </nav>

    </div>
</section>

<section class="dashboard-main">
    <div class="container">

        <div class="row sidebar_row">

            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")

            <div class="main-content">
                <div class="main-content-wrapper my-profile">



                    <div class="profile-account-security d-flex flex-column">
                        <h3 class="font-size-18">Account Security</h3>
                        <div class="account-security-block">
                            <div class="authentication d-flex flex-column">
                                <div class="authentication-header-items d-flex justify-content-between">
                                    <h3 class="font-size-18">Two Way Authentication</h3>
                                    <div class="authentication-switch ">
                                        <form id="twoFaForm" action="{{ route('client.enable.2fa') }}" method="POST">
                                            @csrf
                                            <label class="switch">
                                                <input id="twoFaToggle" type="checkbox" name="twofa_enable" {{ $twoFactor ? 'checked' : '' }} value="{{ $twoFactor ? 'true' : 'false' }}">

                                                <span class="slider round"></span>
                                            </label>

                                    </div>
                                </div>

                                <div class="authentication-body">
                                    <span class="d-flex align-items-start"><img src="{{ asset('webAssets/assets/images/123.png') }}" alt="tip-icon">
                                        <p>Activate Your Two-Factor Authentication: Receive Authentication Codes at
                                            {{ $email }}, {{ $phone }} for any login attempts from unrecognized devices or browsers.
                                        </p>
                                    </span>
                                </div>
                                <!-- <div class="authetication-action-btn">
                                    <button type="submit" class="btn btn-primary w-100">Save</button>
                                </div> -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Add jQuery CDN before this line -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#verifyOTPModal').on('hidden.bs.modal', function() {
            resetOTPInputFields();
        });

        function getOTP() {
            var otp = '';
            $('.otp-input-block input').each(function() {
                otp += $(this).val();
            });
            return otp;
        }


        $('#twoFaToggle').change(function() {
            $('#verifyOTPModal').modal('show');
        });

        function modify2FAAutnetication() {
            var twoFaToggle = document.getElementById("twoFaToggle");
            var twofaEnable = twoFaToggle.checked;
            $.ajax({
                url: '{{ route("client.enable.2fa") }}',
                type: 'POST',
                data: {
                    twofa_enable: twofaEnable,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    $('#verifyOTPModal').modal('hide');
                    toastr.success(response.success.message);
                    resetOTPInputFields();
                },
                error: function(xhr, status, error) {

                    console.error(xhr.responseText);
                }
            });
        }

        function resetOTPInputFields() {
            $('.otp-input-block input').val('');
        }

        $('#verifyOTPModal .btn-primary').off('click').on('click', function() {
            var fData = new FormData();
            fData.append('number', $('#number').text());
            fData.append('otp', getOTP());

            $.ajax({
                url: "{{ route('client.validateOTP') }}",
                method: 'POST',
                data: fData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        if (response.success.status == 200) {
                            /* START */
                            modify2FAAutnetication();
                            /* END */
                        } else if (response.success.status == 401) {
                            toastr.error('Invalid OTP entered');
                        }
                    } else if (response.error) {}
                },
                error: function(xhr, status, error) {
                    toastr.error('There was some problem while verifying OTP');
                }
            });
        });
    });
</script>

@endsection

@section('footerItems')
@endsection