@extends('app')

@section('page_title')
    Admin Users
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
    <style>
        /*.buttons-reset{*/
            /*margin-left: 8px;*/
        /*}*/

        /*.create_btn{*/
        /*    position: relative;*/
        /*    bottom: -35px;*/
        /*}*/
    </style>
@endpush

@section('page_content')
    <div class="page-content container">
        <div class="row">
            <div class="col-md-12 ">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <div class="panel-title" style="margin-bottom: 20px;">
                            <i>Manage User Accounts</i>
                            <span class="float-right" style="float: right"><button class="btn btn-primary" id="create_btn">create</button> </span>
                        </div>

                        @if(session('error'))
                            <div class="alert alert-danger">
                                <ul>
                                    <li>{{ session('error') }}</li>
                                </ul>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ session('success') }}</li>
                                </ul>
                            </div>
                        @endif

                    </div>


                    <div class="panel-body table table-responsive">
                            <div class="table table-responsive overflow-scroll">
                                {!! $dataTable->table([],true) !!}
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ elixir('js/datatables.js') }}"></script>
    <script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="{{asset('JS_OTP/dist/jsOTP.min.js')}}"></script>
    {!! $dataTable->scripts() !!}

<script>
    $(document).ready( function () {
        const secret   = "23TplPdS46Juzcyx",
                totp     = new jsOTP.totp();

        // OTP to reset user password
        $("#dynamicusers-table").on('click','#reset_pass_btn', function(e){

            var user_id = $(this).attr('href')
            e.preventDefault();

            let otp_dest = '{{route('dynamic.users.sendOTP',['text','source', 'otp'])}}';
            let system =  totp.getOtp(secret);
            let message = "Hello, " +
                "Your sub-user registration OTP is " + system;
            let route = otp_dest.replace('text',message).replace('source','DEYWURO').replace('otp',system);
            $.get(route,function (data) {
                if(data.code === 0 )
                {
                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                    verifyOtp(system,userOtp,'reset_password',user_id);
                }
                else{
                    alert('Request for OTP failed kindly Try again or check your internet connection');
                }
            });
        })

        // OTP to lock user
        $("#dynamicusers-table").on('click','#lock_btn', function(e){

            var lock_id = $(this).attr('href')
            e.preventDefault();

            let otp_dest = '{{route('dynamic.users.sendOTP',['text','source', 'otp'])}}';
            let system =  totp.getOtp(secret);
            let message = "Hello, " +
                "Your sub-user registration OTP is " + system;
            let route = otp_dest.replace('text',message).replace('source','DEYWURO').replace('otp',system);
            $.get(route,function (data) {
                if(data.code === 0 )
                {
                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                    verifyOtp(system,userOtp,'lock',lock_id);
                }
                else{
                    alert('Request for OTP failed kindly Try again or check your internet connection');
                }
            });
        })


        // OTP to delete user
        $("#dynamicusers-table").on('click','#delete_btn', function(e){

            var delete_id = $(this).attr('href')
            e.preventDefault();

            let otp_dest = '{{route('dynamic.users.sendOTP',['text','source', 'otp'])}}';
            let system =  totp.getOtp(secret);
            let message = "Hello, " +
                "Your sub-user registration OTP is " + system;
            let route = otp_dest.replace('text',message).replace('source','DEYWURO').replace('otp',system);
            $.get(route,function (data) {
                if(data.code === 0 )
                {
                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                    verifyOtp(system,userOtp,'delete',delete_id);
                }
                else{
                    alert('Request for OTP failed kindly Try again or check your internet connection');
                }
            });
        })

        // OTP to edit user
        $("#dynamicusers-table").on('click','#edit_btn', function(e){

            var edit_id = $(this).attr('href')
            e.preventDefault();

            let otp_dest = '{{route('dynamic.users.sendOTP',['text','source', 'otp'])}}';
            let system =  totp.getOtp(secret);
            let message = "Hello, " +
                "Your sub-user registration OTP is " + system;
            let route = otp_dest.replace('text',message).replace('source','DEYWURO').replace('otp',system);
            $.get(route,function (data) {
                if(data.code === 0 )
                {
                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                    verifyOtp(system,userOtp,'edit',edit_id);
                }
                else{
                    alert('Request for OTP failed kindly Try again or check your internet connection');
                }
            });
        })

        // OTP to create user
        $('#create_btn').on('click', function (e){
            e.preventDefault();

            let otp_dest = '{{route('dynamic.users.sendOTP',['text','source', 'otp'])}}';
            let system =  totp.getOtp(secret);
            let message = "Hello, " +
                "Your sub-user registration OTP is " + system;
            let route = otp_dest.replace('text',message).replace('source','DEYWURO').replace('otp',system);
            $.get(route,function (data) {
                if(data.code === 0 )
                {
                    let userOtp = prompt('An OTP has been sent to the Admin\'s account. \nEnter OTP received Via SMS');
                    verifyOtp(system,userOtp,'create', '');
                }
                else{
                    alert('Request for OTP failed kindly Try again or check your internet connection');
                }
            });
        })

        function verifyOtp(system,userOtp,type,id) {
            if(system === userOtp){

                $.ajax({
                    url : "{{route('verify.user.otp')}}",
                    data: {
                        otp : userOtp,
                        type : type,
                    },
                    method: 'POST',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    data_type: 'json'
                }).done(function (data){
                    console.log(data.status)

                    if(data.status === 'success') {
                        if (data.type === 'create') {
                            window.location.replace("{{ route('dynamic.users.create',['otp']) }}".replace('otp', userOtp))
                        } else if (data.type === 'edit') {
                            window.location.replace("{{ route('dynamic.users.edit',['id','otp']) }}".replace('id', id).replace('otp', userOtp))
                        }else if (data.type === 'delete') {
                            window.location.replace("{{ route('dynamic.users.delete',['id','otp']) }}".replace('id', id).replace('otp', userOtp))
                        } else if (data.type === 'lock') {
                            window.location.replace("{{ route('dynamic.users.lock',['id','otp']) }}".replace('id', id).replace('otp', userOtp))
                        } else if (data.type === 'reset_password') {
                            window.location.replace("{{ route('dynamic.users.sendResetLink',['id','otp']) }}".replace('id', id).replace('otp', userOtp))
                        }
                        else {

                        }
                    }

                })
                // submit.show() && otpBtn.hide() && $('#ticker').hide() &&  mobile.attr('readonly',true)
            }else{
                (userOtp === '' || userOtp === null ? null : verifyOtp(system,prompt('Wrong OTP! Try again. \nEnter OTP received Via SMS')));
            }


        }
    })
</script>


    <script>
        $( document ).ready(function() {
            $('#dataTableBuilder')
                .on('preXhr.dt', function ( e, settings, data ) {
                    data.status = $('#status').val();
                    data.type = $('#type').val();
                    data.from_date= $('#from_date').val();
                    data.to_date= $('#to_date').val();
                });

            $('#submit').click(function (e) {
                e.preventDefault();
                $('#dataTableBuilder').DataTable().ajax.reload();

            })

            const table = $('#dataTableBuilder');
            table.removeAttr("style").css({'width': '120%', 'max-width': ''});

        });

    </script>
@endpush