@extends('layouts.app', ['pageSlug' => 'customerlist'])

@section('content')

<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Customer / Lists</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6"><h5>Customer Lists</h5></div>
        @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
        <div class="col-lg-6 text-right"><button type="button" class="btn btn-info customerinfo-btn" data-toggle="modal" data-target="#bulk_update"> Update All IP</button></div>
        @endif
    </div>
    <div id="bulk_update" class="delete-modal modal fade" role="dialog">
        <div class="modal-dialog modal-sm ">
         Modal content
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <div class="delete-icon"></div>
          </div>
          <div class="modal-body">
            <h4 class="modal-heading">Are You Sure ?</h4>
            <p>Do you really want to update customers ip ?</p>
            </div>
          <div class="modal-footer">
            <form class="form-horizontal" role="form" action="{{route('customer.updateinfo')}}" method="POST">
                @csrf
              <button type="reset" class="btn btn-info" data-dismiss="modal">No</button>
              <button type="submit" class="btn btn-danger">Yes</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <br>
    <input class="form-control search_field" type="text" id="search" placeholder="search by username..." style="width:300px;">
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <table style="width:100%; font-size:12px;" id="customer_table" class="table table-striped table-bordered">
                    <thead>
                        <th>#</th>
                        <th>Username</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Mobile Number</th>
                        <th>Package</th>
                        <th>Expiration</th>
                        <th>Ip Address</th>
                        <th>Group</th>
                        <th>Last Logoff</th>
                        <th>Latency</th>
                        <th>Offline Log</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="pageloader" style="display:none;">
  <span><i class="fa fa-2x fa-spin fa-spinner"></i> <b>Processing</b></span>
</div>

<div id="portal-auth-form" title="Change Username and Password for PORTAL">
  <form>
    <fieldset>
        <input type="hidden" name="id" id="id" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        <div class="form-group">
            <label for="username">Username(Radius)</label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        </div>
        <div class="form-group">
            <label for="portal_user">Username(Portal)</label>
            <input type="text" name="portal_user" id="portal_user" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        </div>
        <div class="form-group">
            <label for="portal_pwd">Password(Portal)&nbsp;<i class="fa fa-fw fa-eye" id="show_p"></i></label>
            <input type="password" name="portal_pwd" id="portal_pwd" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="portal_pwd_confirm">Password(Portal)</label>
            <input type="password" name="portal_pwd_confirm" id="portal_pwd_confirm" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="remark">Remark</label>
            <input type="text" name="remark" id="remark" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="collection_status">Status</label>
             <select class="form-control ui-widget-content ui-corner-all" name="collection_status" id="collection_status">
                <option value="">Please Select</option>
                <option value="collected">Collected</option>
                <option value="not-collected">Not Collected</option>
                <option value="none-compliant">None Compliant</option>
                <option value="reconnection">Reconnection</option>
                <option value="unreachable">Unreachable</option>
            </select>
        </div>

        <div class="form-group">
            <label for="package_name">Package Name</label>
             <select class="form-control ui-widget-content ui-corner-all" name="package_name" id="package_name">
                <option value="">Please Select</option>
                @foreach($packages as $package)
                <option value="{{ $package->srvid }}">{{ $package->srvname }}</option>
                @endforeach

            </select>
        </div>


        @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
        <div class="form-group">
            <label for="is_installed">Installation Status</label>
             <select class="form-control ui-widget-content ui-corner-all" name="is_installed" id="is_installed">
                <option value="1">Installed</option>
                <option value="0">Not Installed</option>
            </select>
        </div>
        @endif
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
<div class="please_wait">
    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div id="netModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" style="float:right;">&times;</button>
        <h5 class="modal-title">Internet Status</h5>
        <div class="delete-icon"></div>
      </div>
      <div class="net-modal modal-body">
        <span class="net-text">Issue in getting net status.</span>
      </div>
    </div>
  </div>
</div>
<div id="block-confirm"  title="Unblock User">
    <p>Do you want to unblock this user future payments?</p>
</div>

<div class="please_wait">
    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>


@endsection
@push('head')
    <style>
        .ui-dialog{
            /* top:500px !important;    */
        }
        .dttable1{
            /* display: block;
            overflow: scroll; */
        }
    </style>






    <style>
        .simple_popup{
            position: absolute;
            top: -1200000px;
            left: 15%;
            background-color: #d1d1d1;
            min-width: 400px;
            width: fit-content;
            height: fit-content;
            padding: 4px;
            border-radius: 5px;
            box-shadow: 1px 1px 32px black;
        }

        .simple_popup .head{
            height: 50px;
            background-color: white;
            font-size: 20px;
            font-weight: 600;
            padding: 10px;
        }

        .simple_popup .content{
            padding: 2px;
            background-color: white;
            margin-top: 4px;
            min-height: 100px;
            max-height: 500px;
            overflow: hidden;
            overflow-y: scroll;
        }

        .simple_popup .fa-times{
            float:right;
            color:black;
        }

        .suggest_payments {
            cursor:pointer;
        }
















        /*CSS LOADER BELOW*/
        .lds-roller {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }
        .lds-roller div {
            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            transform-origin: 40px 40px;
        }
        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #6cacff;
            margin: -4px 0 0 -4px;
        }
        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }
        .lds-roller div:nth-child(1):after {
            top: 63px;
            left: 63px;
        }
        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }
        .lds-roller div:nth-child(2):after {
            top: 68px;
            left: 56px;
        }
        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }
        .lds-roller div:nth-child(3):after {
            top: 71px;
            left: 48px;
        }
        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }
        .lds-roller div:nth-child(4):after {
            top: 72px;
            left: 40px;
        }
        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }
        .lds-roller div:nth-child(5):after {
            top: 71px;
            left: 32px;
        }
        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }
        .lds-roller div:nth-child(6):after {
            top: 68px;
            left: 24px;
        }
        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }
        .lds-roller div:nth-child(7):after {
            top: 63px;
            left: 17px;
        }
        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }
        .lds-roller div:nth-child(8):after {
            top: 56px;
            left: 12px;
        }
        @keyframes lds-roller {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }


        .please_wait{
            position: absolute;
            width: 350px;
            height: 162px;
            background-color: #e6e6e6;
            top: -441%;
            left: -452%;
            border-radius: 10px;
            text-align: center;
            padding: 39px;
            box-shadow: 1px 1px 163px #5a5a5a;
        }




    </style>


    @push('js')
        <script>
            var dialog;

            $(document).on('click', '.connect-btn', function(){
                location.href=$(this).data('link');
            });

            $(document).on('click', '.refresh-btn', function(){
                var url = $(this).data('link')
                axios.get(url).then((res)=>{
                    console.log(res);
                    toastr.success('success');
                    location.reload();
                })
            });

            $(document).on('click', '.edit-btn', function(){
                var portaluser = $(this).data('portaluser');
                dialog.find('input#portal_user').val(portaluser);
                var username = $(this).data('username');
                dialog.find('input#username').val(username);
                dialog.find('input#id').val(username);
                var p = $(this).data('p');
                dialog.find('input#portal_pwd').val(p);
                dialog.find('input#portal_pwd_confirm').val(p);
                var remark = $(this).data('remark');
                dialog.find('input#remark').val(remark);
                var collection = $(this).data('collection');
                dialog.find('#collection_status').val(collection);
                var install = $(this).data('install');
                dialog.find('#is_installed').val(install);
                dialog.dialog( "open" );


                var package_name = $(this).data('package_name');
                dialog.find('#package_name').val(package_name);

            });

            // $('.block-btn').click(function(){
            //     var result1 = confirm( "Do you want to block this user future payments?" );
            //     if (result1) {
            //         location.href = route;
            //     }
            //     else{

            //     }
            // });

            $(document).on('mousedown', 'i#show_p', function(){
                dialog.find('input#portal_pwd').attr('type', 'text');
                dialog.find('input#portal_pwd_confirm').attr('type', 'text');
            });

            $(document).on('mouseup', 'i#show_p', function(){
                dialog.find('input#portal_pwd').attr('type', 'password');
                dialog.find('input#portal_pwd_confirm').attr('type', 'password');
            });

            $('.unblock-btn').on("click", function(e){
                e.preventDefault();
                var user = $(this).data('username');
                dialog1 = $( "#block-confirm" ).dialog({
                    autoOpen: true,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Unblock": function() {
                            window.location.href="{{route('customer.blockuser',['','',''])}}"+"/"+user+'/0/0';
                        },
                        "Block Again": function() {
                            window.location.href="{{route('customer.blockuser',['','',''])}}"+"/"+user+'/0/1';
                        },
                        Cancel: function() {
                            dialog1.dialog( "close" );
                        }
                    },
                    close: function() {
                    }
                });
            });


            function confirmDelete(route) {
                var result = confirm( "Do you want to delete this?" );
                // if (result) {
                //     location.href = route;
                // }
            }

            $(document).ready(function(){
                $('#custom_table').dataTable({
                    stateSave: true
                });
            });



            dialog = $( "#portal-auth-form" ).dialog({
                autoOpen: false,
                height: 450,
                width: 350,
                modal: true,
                buttons: {
                    "Update": save,
                    Cancel: function() {
                        dialog.dialog( "close" );
                    }
                },
                close: function() {
                }
            });

            function save() {

                var id = dialog.find('input#id').val();
                var portaluser = dialog.find('input#portal_user').val();
                var portalpwd = dialog.find('input#portal_pwd').val();
                var portalpwdconfirm = dialog.find('input#portal_pwd_confirm').val();
                var collection_status = dialog.find('#collection_status').val();
                var remark = dialog.find('input#remark').val();
                var install = dialog.find('#is_installed').val();


                var package_name = dialog.find('#package_name').val();


                // console.log(install);
                if (portalpwd != portalpwdconfirm) {
                    $.alert('Password is not confiremd');
                } else {
                    if (portalpwd == '') {
                        $.alert('Password must be typed');
                    } else {

                        var username = dialog.find('input#username').val();
                        var data = {
                            id: id,
                            username: username,
                            portal_user: portaluser,
                            portal_pwd: portalpwd,
                            collection_status: collection_status,
                            package_name : package_name,
                            remark: remark,
                            is_installed: install,
                        }

                        var username = $(this).data('username');
                        axios.post('{{route('customer.portal.save.auth')}}', data).then((res) => {
                            toastr.success('Successfully updated');
                            dialog.dialog( "close" );
                            location.reload();
                        })
                    }
                }
            }

        </script>

<script>
    $(document).ready(function(){
        $.URL = "{{url("/")}}";

        class loader_class{

            show(){
                $(document).find('.please_wait').css('left', '43%');
                $(document).find('.please_wait').css('top', '40%');
            }

            hide(){
                $(document).find('.please_wait').css('left', '-440%');
                $(document).find('.please_wait').css('top', '-440%');
            }
        }


        $.LOADER = new loader_class();

    });
</script>


<script>

    $(function () {
      "use strict";
        $.fn.dataTable.ext.errMode = 'none';

        //   if(sessionStorage.getItem("updateip") == '1'){
    //     $('.customerinfo-btn').prop('disabled',true);
    //   }
    //   var url = $(location).attr('href');
    //   let dtdata = {
    //       processing: true,
    //       serverSide: true,
    //       stateSave: true,
    //       pageLength: 25,
    //       lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "100"]],
    //       ajax: url,
    //       language: {
    //         searchPlaceholder: "Search Customers..."
    //       },
    //       columns: [
    //           {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false,orderable : false},
    //           {data : 'username', name : 'rm_users.username'},
    //           {data : 'firstname', name : 'rm_users.firstname',searchable : false},
    //           {data : 'lastname', name : 'rm_users.lastname',searchable : false},
    //           {data : 'mobile', name : 'rm_users.mobile',searchable : false},
    //           {data : 'package', name : 'rm_services.srvname',searchable : false},
    //           {data : 'expiration', name : 'rm_users.expiration',searchable : false},
    //           {data : 'ip_address', name : 'rm_users.ip_address',searchable : false},
    //           {data : 'group', name : 'rm_users.group',searchable : false},
    //           {data : 'lastlogoff', name : 'lastlogoff',searchable : false, orderable : false},
    //           {data : 'monthly_latency', name : 'monthly_latency'},
    //           {data : 'minlog', name : 'minlog',searchable : false},
    //           {data : 'status', name : 'status',searchable : false},
    //           {data : 'action', name : 'action', searchable : false, orderable : false}
    //       ],
    //       dom : 'lBfrtip',
    //       buttons : [
    //         'csv','excel','pdf','print','colvis'
    //       ],
    //       order : [[0,'ASC']]
    //   };
    // if(window.location.href.indexOf("type") <= -1) {
    //     dtdata.deferLoading = 0;
    // }
    // var table = $('#customer_table').DataTable(dtdata);
        class loader_class{

            show(){
                $(document).find('.please_wait').css('left', '43%');
                $(document).find('.please_wait').css('top', '40%');
            }

            hide(){
                $(document).find('.please_wait').css('left', '-440%');
                $(document).find('.please_wait').css('top', '-440%');
            }
        }


        var loader = new loader_class();












    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////sam

        var typingTimer;
        var delay = 1000; // Delay in milliseconds (adjust as needed)


        $('.search_field').on('keyup', function() {

            clearTimeout(typingTimer); // Clear the previous timer
            typingTimer = setTimeout(checkStopTyping, delay);
        });

        $('.search_field').on('paste', function(event) {
            var pastedText = event.originalEvent.clipboardData.getData('text');
            load_table(pastedText);
        });

        // Function to execute when typing has stopped
        function checkStopTyping() {
            console.log('User has stopped typing!');
            var keyword = $('.search_field').val().toLowerCase();

            load_table(keyword);
        }


        @if(request()->has('type'))
            load_table('');
        @endif

        function load_table(keyword){
            var type_url = '';
            @if(request()->has('type'))
                type_url = "&type={{request()->type}}";
            @endif
            loader.show();
            $.ajax({
                url: "{{url('/')}}"+'/admin/customer/list?username='+keyword+type_url,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Handle the response data here
                    // console.log(response);
                    // var response_json = JSON.parse(response);

                    var tableBody = $('#customer_table tbody');

                    table_body_html(response.data,tableBody);

                    loader.hide();

                },
                error: function(xhr, status, error) {
                    // Handle any errors that occur during the request
                    loader.hide();
                    console.error(error);
                }
            });

        }


        //method below gets the table body html out of json data
        function table_body_html(jsonData,tableBody){
            var num = 0;
            $('#customer_table').DataTable().clear().destroy();
            tableBody.html('');
            $.each(jsonData, function(index, row) {
                num++;
                var tableRow = $('<tr></tr>');
                tableRow.append('<td>' + num + '</td>'); // ID
                // console.log((row.old_expiration.replace(' ', 'T')).toISOString().slice(0, 10));
                tableRow.append('<td>' + row.username + '</td>');// customer
                tableRow.append('<td>' + row.firstname + '</td>');
                tableRow.append('<td>' + row.lastname + '</td>');
                tableRow.append('<td>' + row.mobile + '</td>');
                tableRow.append('<td>' + row.package + '</td>');
                tableRow.append('<td>' + row.expiration + '</td>');
                tableRow.append('<td>' + row.ip_address + '</td>');
                tableRow.append('<td>' + row.group + '</td>');
                tableRow.append('<td>' + row.lastlogoff + '</td>');
                tableRow.append('<td>' + row.monthly_latency + '</td>');
                tableRow.append('<td>' + row.minlog + '</td>');
                tableRow.append('<td>' + row.status + '</td>');
                tableRow.append('<td>' + row.action + '</td>');
                tableBody.append(tableRow);
            });


            $('#customer_table').DataTable({
                "paging": true,
                "searching": false
            });
        }



    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////





















    // var searchval = $('.dataTables_filter input').val();
    // if (searchval.length>0)  table.search(searchval).draw();

    let pusher1 = new Pusher(`a02a6b2f633c31f75dc7`, {
        cluster: `us2`,
        forceTLS: true,
        encrypted: false
    });

    let channel1 = pusher1.subscribe('uploading-files-channal');

    channel1.bind('uploadingFiles', (data) => {
        console.log(data);
    });


    $('body').on('click','.netstatus-btn', function(){
        var url = $(this).data('link');
        $('#pageloader').show();
        axios.get(url).then((res)=>{
            console.log(res);
            $('#netModal .net-text').html(res.data);
            $("#netModal ").modal('show');
           $('#pageloader').hide();
        }).catch(error => {
         console.log(error.response);
           $('#pageloader').hide();
      })
    });
    $( "#bulk_update" ).submit(function( event ) {
        event.preventDefault();
        $( "#bulk_update" ).modal('hide');
        $('.customerinfo-btn').prop('disabled',true);
        sessionStorage.setItem("updateip", "1");
        var url = $(this).attr('action');
        $.ajax({
            type: "get",
            url: url,
            success: function(responseData, textStatus, jqXHR) {
                toastr.info('IP updation completed');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        }).done(function(){
            $('.customerinfo-btn').prop('disabled',false);
        });
    });




























    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

            $(document).on('click', '.user_offline_report .close', function(){
                $(this).closest('.user_offline_report').remove();
            });

            $.fetch_api_result = function(obj){
                $.ajax({
                    url:obj.url,
                    type:obj.type,
                    headers:{

                    },
                    data:obj.data,
                    success:function(data){
                        // $(document).find('.json_outputs').append('<pre>'+JSON.stringify(data, undefined,2)+'</pre>');
                        obj.exec_on_success(data);
                    },
                    error:function(jqXhr, textStatus, errorMessage){

                    }
                });
            }

            $.USERNAME = '';

            $(document).on('click', '.user_net_status_detail', function(){

              var username = $(this).attr('username');
              $.USERNAME = username;
              $.LOADER.show();
                $.fetch_api_result({
                    url:"{{url('/')}}/api/offline_log/categories",
                    type:"POST",
                    data:{
                        username:username
                    },
                    exec_on_success:function(data){
                        var obj = JSON.parse(data);
                        $.LOADER.hide();
                        if(obj.status){
                            var html = offline_log_detail_popup(obj.data);
                            $(document).find('body').append(html);
                        }else{
                            alert(obj.message);
                        }

                    }
                });

            });









            function offline_log_detail_popup(obj){
                var resultString ='<div class="user_offline_report">'+"\n";
                resultString+='<div style="width:100%; height:70px;padding: 14px;">'+"\n";
                resultString+='        <span style="font-size:28px;">Offline data logs</span>'+"\n";
                resultString+='        <button class="btn btn-danger btn-sm close" style="width: 39px;height: 34px;float:right;background-color: red;">X</button>'+"\n";
                resultString+='    </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-signal    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['signal_issue']+'</span><span class="    detail_text  ">Sector Latency Issue</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="signal_issue" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-times-circle    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['unregistered_ip']+'</span><span class="    detail_text  ">No IP Address</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="unregistered_ip" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-user-times    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['offline']+'</span><span class="    detail_text  ">Signal/Plug Issue</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="offline" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-times-circle-o icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['no_ethernet']+'</span><span class="    detail_text  ">No Ethernet Link</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="no_ethernet" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-cog    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['technical_issue']+'</span><span class="    detail_text  ">Technical Issue</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="technical_issue" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";




                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-plug    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['no_pptc_connection']+'</span><span class="    detail_text  ">No PPTP Client Connection</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="no_pptc_connection" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-wifi    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['off_hotspot']+'</span><span class="    detail_text  ">Hotpost Offline</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="off_hotspot" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+='            <div class="box">'+"\n";
                resultString+='                <div class="part_one"><i class="fa fa-exclamation    icon"  aria-hidden="true" style="position: relative; font-size: 63px; left: 14px; top: 11px;"> </i><span class="    number_text  ">'+obj['account_expired']+'</span><span class="    detail_text  ">Account Expiry</span></div>'+"\n";
                resultString+='                <div class="part_two"><span class="    part_two_view  " category_name="account_expired" >View</span><i class="fa fa-arrow-circle-right    go"  aria-hidden="true" style="position: relative; display: inline-block; float: right; color: rgb(0, 85, 223);"> </i></div>'+"\n";
                resultString+='            </div>'+"\n";

                resultString+=''+"\n";
                resultString+=''+"\n";

                resultString+=''+"\n";
                resultString+='        </div>'+"\n";

                return resultString;

            }










/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


            var ALL_DAY_LOGS = '';
            $(document).on('click','.part_two_view', function(){
                var category = $(this).attr('category_name');
                $.LOADER.show();
                $.fetch_api_result({
                    url:"{{url('/')}}/api/offline_log/list_by_category",
                    type:"POST",
                    data:{
                        username:$.USERNAME,
                        category:category
                    },
                    exec_on_success:function(data){
                        var obj = JSON.parse(data);
                        $.LOADER.hide();
                        if(obj.status){
                            var html = offline_logs_html(obj.data);
                            $(document).find('body').append(html);
                            ALL_DAY_LOGS = SEARCH_TABLE_BY_DATE.all_day_logs();

                            $(document).find('.offline_data_logs table tbody').html(SEARCH_TABLE_BY_DATE.current_month_logs());
                            SEARCH_TABLE_BY_DATE.serialize_table();
                        }else{
                            alert(obj.message);
                        }

                    }
                });

            });

            $(document).on('click', '.offline_data_logs ._close', function(){
                $(this).closest('.offline_data_logs').remove();
            });












            function offline_logs_html(obj){
                var resultString ='<div class="offline_data_logs">'+"\n";
                resultString+='            <div class="top_bar">'+"\n";
                resultString+='                <div class="_close"><span class="   ">X</span></div><span class="    bar_text">Offline logs</span>'+"\n";
                resultString+='            </div>'+"\n";
                resultString+='<button class="btn btn-sm btn-primary all_day_logs">All</button>' +
                    '<button class="btn btn-sm btn-primary current_day_logs">Today</button>' +
                    '<button class="btn btn-sm btn-primary this_week_logs">Past 7 days</button>' +
                    '<button class="btn btn-sm btn-primary this_month">This Month</button>' +
                    '<button class="btn btn-sm btn-primary this_month_logs">Pas 30 days</button>      ' +
                    '      <div class="logs">'+"\n";
                var num = 1;
                resultString+='          <table class="table">      <thead ><tr>'+"\n";
                resultString+='                    <td ><b>#</b></td>'+"\n";
                resultString+='                    <td ><b>Reason</b></td>'+"\n";
                resultString+='                    <td ><b>Date From</b></td>'+"\n";

                resultString+='                    <td ><b>Date To</b></td>'+"\n";
                resultString+='                    <td ><b>Mins</b></td>'+"\n";
                resultString+='                </tr></thead><tbody>'+"\n";



                var current_day = new Date();
                var thirty_days_earlier = COMPARE_DATE.sub_days(current_day, 30);

                for(var i=0;i<obj.length;i++){

                    // resultString+='                    <td >'+obj[i].date_from+'</td>'+"\n";

                    if(COMPARE_DATE.between_dates(thirty_days_earlier, current_day, obj[i].date_from)){
                        resultString+='                <tr >'+"\n";
                        resultString+='                    <td >'+num+'</td>'+"\n";
                        resultString+='                    <td >'+obj[i].reason+'</td>'+"\n";
                        resultString+='                    <td >'+obj[i].date_from+'</td>'+"\n";
                        if(obj[i].date_to){
                            resultString+='                    <td >'+obj[i].date_to+'</td>'+"\n";
                        }else{
                            resultString+='                    <td >'+'</td>'+"\n";
                        }
                        resultString+='                    <td >'+parseInt(obj[i].mins/60)+' hr : '+(obj[i].mins%60)+' min </td>'+"\n";
                        resultString+='                </tr>'+"\n";
                        num++;
                    }



                }


                resultString+='            </tbody></table></div>'+"\n";
                resultString+='        </div>'+"\n";


                return resultString;
            }

            $(document).on('click', '.all_day_logs', function(){
                $(document).find('.offline_data_logs table tbody').html(ALL_DAY_LOGS);
            });

            $(document).on('click', '.current_day_logs', function(){
                $(document).find('.offline_data_logs table tbody').html(SEARCH_TABLE_BY_DATE.current_day_logs());
                SEARCH_TABLE_BY_DATE.serialize_table();
            });

            $(document).on('click', '.this_week_logs', function(){
                $(document).find('.offline_data_logs table tbody').html(SEARCH_TABLE_BY_DATE.current_week_logs());
                SEARCH_TABLE_BY_DATE.serialize_table();
            });

            $(document).on('click', '.this_month_logs', function(){
                $(document).find('.offline_data_logs table tbody').html(SEARCH_TABLE_BY_DATE.current_month_logs());
                SEARCH_TABLE_BY_DATE.serialize_table();
            });

            $(document).on('click', '.this_month', function(){
                $(document).find('.offline_data_logs table tbody').html(SEARCH_TABLE_BY_DATE.current_month_logs_real());
                SEARCH_TABLE_BY_DATE.serialize_table();
            });



            class search_table_by_date{

                all_day_logs(){
                    var rows_html = '';
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        rows_html+= '<tr>'+$(this).html()+'</tr>';
                    });

                    return rows_html;
                }

                serialize_table(){
                    var num = 1;
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        var current_date = $(this).find('td').eq(0).html(num);
                        num++;
                    });
                }

                current_day_logs(){
                    var rows_html = '';
                    $(document).find('.offline_data_logs table tbody').html(ALL_DAY_LOGS);
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        var current_date = $(this).find('td').eq(2).html();

                        var day_start = COMPARE_DATE.start_of_day();
                        // console.log(day_start, current_date, COMPARE_DATE.date_diff(day_start, current_date));
                        if(COMPARE_DATE.date_diff(day_start, current_date)<0){
                            rows_html+= '<tr>'+$(this).html()+'</tr>';
                        }
                    });

                    return rows_html;
                }




                current_week_logs(){
                    var rows_html = '';
                    $(document).find('.offline_data_logs table tbody').html(ALL_DAY_LOGS);
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        var current_date = $(this).find('td').eq(2).html();

                        var current_day = new Date();
                        var seven_day_earlier = COMPARE_DATE.sub_days(current_day, 7);
                        // console.log(seven_day_earlier, current_day, current_date);
                        if(COMPARE_DATE.between_dates(seven_day_earlier, current_day, current_date)){
                            rows_html+= '<tr>'+$(this).html()+'</tr>';
                        }
                    });

                    return rows_html;
                }




                current_month_logs(){
                    var rows_html = '';
                    $(document).find('.offline_data_logs table tbody').html(ALL_DAY_LOGS);
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        var current_date = $(this).find('td').eq(2).html();

                        var current_day = new Date();
                        var thirty_days_earlier = COMPARE_DATE.sub_days(current_day, 30);

                        if(COMPARE_DATE.between_dates(thirty_days_earlier, current_day, current_date)){
                            rows_html+= '<tr>'+$(this).html()+'</tr>';
                        }
                    });

                    return rows_html;
                }


                current_month_logs_real(){
                    var rows_html = '';
                    $(document).find('.offline_data_logs table tbody').html(ALL_DAY_LOGS);
                    $(document).find('.offline_data_logs table tbody tr').each(function(){
                        var current_date = $(this).find('td').eq(2).html();

                        var current_day = new Date();
                        // var thirty_days_earlier = COMPARE_DATE.sub_days(current_day, 30);
                        var this_month_first_day = new Date(current_day.getFullYear(), current_day.getMonth(), 1,0,0,0);

                        if(COMPARE_DATE.between_dates(this_month_first_day, current_day, current_date)){
                            rows_html+= '<tr>'+$(this).html()+'</tr>';
                        }
                    });

                    return rows_html;
                }



            }


            var SEARCH_TABLE_BY_DATE = new search_table_by_date();

            class compare_date{

                first_day_of_week(d){
                    const date = new Date(d);
                    const day = date.getDay();
                    const diff = date.getDate() - day;

                    return new Date(date.setDate(diff));
                }

                first_day_of_month(d){
                    var date_parts = d.split(' ');

                    var day_parts = date_parts[0].split('-');

                    var month = day_parts[1];
                    var year = day_parts[0];

                    return new Date(year, month, 1, 0, 0, 0);
                }

                start_of_day(){
                    var date = new Date();
                    // console.log(date.getFullYear(), date.getMonth(), date.getDay());
                    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                }

                between_dates(start_date, end_date, user_date){

                    if(this.date_diff(start_date, user_date)<0 && this.date_diff(end_date, user_date)>0){
                        return true;
                    }else{
                        return false;
                    }
                }

                sub_days(user_day, days_to_subtract){
                    user_day = this.check_and_convert(user_day);
                    var current_date = new Date();
                    const priorDate = current_date.setDate(user_day.getDate() - days_to_subtract);
                    return priorDate;
                }

                add_days(user_day, days_to_add) {
                    user_day = this.check_and_convert(user_day);
                    var current_date = new Date();
                    const day_ahead = current_date.setDate(user_day.getDate() - days_to_add);
                    return day_ahead;
                }

                date_diff(system_day, user_day){
                    system_day = this.check_and_convert(system_day);
                    user_day = this.check_and_convert(user_day);
                    if(system_day && user_day){
                        console.log(system_day, user_day, (system_day.getTime() - user_day.getTime()));
                        return system_day.getTime() - user_day.getTime();
                    }else{
                        console.log('error in day provided');
                        console.log(system_day, user_day);
                        return false;
                    }
                }

                is_date(date){
                    if (date instanceof Date && !isNaN(date)) {
                        return true;
                    }else{
                        return false;
                    }
                }

                check_and_convert(date){

                    if(this.is_date(date)){
                        return date;
                    }else{
                        if(Number.isInteger(date)){
                            return new Date(date);
                        }else if(this.is_valid_date_string(date)){
                            return this.database_date_to_js_date(date);
                        }
                    }

                    return false;
                }

                is_valid_date_string(date_string){
                    var date_parts = date_string.split(' ');

                    var day_parts = date_parts[0].split('-');
                    var time_parts = date_parts[1].split(':');

                    if(date_parts.length==2 && day_parts.length==3 && time_parts.length==3){
                        return true;
                    }else{
                        return false;
                    }
                }

                database_date_to_js_date(database_date){
                    var date_parts = database_date.split(' ');

                    var day_parts = date_parts[0].split('-');
                    var time_parts = date_parts[1].split(':');

                    var day = day_parts[2];
                    var month = day_parts[1];
                    var year = day_parts[0];

                    var hour = time_parts[0];
                    var minutes = time_parts[1];
                    var seconds = time_parts[2];

                    return new Date(year, parseFloat(month)-1, day, hour, minutes, seconds);
                }

            }


            var COMPARE_DATE = new compare_date();

            function date_is_between(start_date, end_date, user_date){

            }























/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//EXPLAINATORY POPUPS FOR TECHNICAL LINES

    var user_no_registered_message = 'Send Message to Mr Frank.';
    var user_ip_not_registered = 'Send message to Mr Frank and then update customer with this message (Good day, we will update you shortly and have escaleted your issue to management.)';


    var no_ethernet_link_on_client_side = 'This error means that the internet link from the antenna outside into the clients router has a conncetion issue. Ask client to remove cable from the port and reconnect back and test. Under winbox u will see that there is no "R" to the left of the ether1. No "R" means no ethernet connection. If problem is still there ask client to move it to next port of the same colour and test again. If issue is still there then its best to send the technicians attend client and then update client with this message (Good day, our Technicians will come and attend issue)';

    var user_internet_connection_has_signal_issue = 'Send technicians to attend issue and message customer (Good day, our Technicians will come and attend issue)';

    var ping_test = 'If net ping is 100% loss it means where the clients internet is connecting to is down. Send Mr Frank with the error message and update client with this message (Good day, it seems that the line that is supplying u with internet is down, we will update u once ur issue is resolved)';

    var ppt_issue = 'It means where the clients internet is connecting to is down so system is meant to try and connect him to a temp line so its best u wait 10 min and check again. If still same message Send Mr Frank with the error message and update client with this message (Good day, it seems that the line that is supplying u with internet is down, we will update u once ur issue is resolved)';

    var internet_system_offline = 'In this case pls check the offline logs under customer list or if in aluchat check the view button. If client is receiving this message more than once on that particular day best u send the technicians to check clients signal. First try and ask client to check plugs or even try and remove both adaptors and put back and test again after 5 min. If issue still there then update Client with this message after thorough checking and send the technicians (Good day, our Technicians will come and attend issue)';



    @if(isset($net_status_messages['user_no_registered_message']))
        user_no_registered_message = "{{$net_status_messages['user_no_registered_message']}}";
    @endif
        @if(isset($net_status_messages['user_ip_not_registered']))
        user_ip_not_registered = "{{$net_status_messages['user_ip_not_registered']}}";
    @endif
        @if(isset($net_status_messages['no_ethernet_link_on_client_side']))
        no_ethernet_link_on_client_side = "{{$net_status_messages['no_ethernet_link_on_client_side']}}";
    @endif
        @if(isset($net_status_messages['user_internet_connection_has_signal_issue']))
        user_internet_connection_has_signal_issue = "{{$net_status_messages['user_internet_connection_has_signal_issue']}}";
    @endif
        @if(isset($net_status_messages['ping_test']))
        ping_test = "{{$net_status_messages['ping_test']}}";
    @endif
        @if(isset($net_status_messages['ppt_issue']))
        ppt_issue = "{{$net_status_messages['ppt_issue']}}";
    @endif
        @if(isset($net_status_messages['internet_system_offline']))
        internet_system_offline = "{{$net_status_messages['internet_system_offline']}}";
    @endif




    $(document).on('click', '.user_not_registered', function(){
        alert(user_no_registered_message);
    });

    $(document).on('click', '.user_ip_not_registered', function(){
        alert(user_ip_not_registered);
    });

    $(document).on('click', '.no_ethernet_link_on_client_side', function(){
        alert(no_ethernet_link_on_client_side);
    });

    $(document).on('click', '.user_internet_connection_has_signal_issue', function(){
        alert(user_internet_connection_has_signal_issue);
    });

    $(document).on('click', '.ping_test', function(){
        alert(ping_test);
    });

    $(document).on('click', '.internet_system_offline', function(){
        alert(internet_system_offline);
    });

    $(document).on('click', '.ppt_issue', function(){
        alert(ppt_issue);
    });







});
</script>

@endpush