@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-12"><h5>Customer Lists</h5></div>
        <div class="col-md-4">		
            <div class="form-group">											
    			<input type="text" name="search" id="search-main" class="form-control report_date" placeholder="Seach Customers"/ autocomplete="off" value="">
    		</div>
    	</div>
        <div class="col-md-4">
    	    <button type="search" class="search-btn btn btn-primary" value="1" title="Search">Search</button>
    	    <button type="reset" class="search-btn btn btn-primary" value="0" title="reset">Reset</button>
    	</div>
    </div>
    <div class="row tech-table">
        <div class="col-lg-12">
            <div class="p-3">                
                <table style="width:100%;" 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>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="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>  
@endsection

@push('js')
<script>

    $(function () {
      "use strict";
    //   if(sessionStorage.getItem("updateip") == '1'){
    //     $('.customerinfo-btn').prop('disabled',true);
    //   }
      var url = $(location).attr('href');
      var table = $('#customer_table').DataTable({
          processing: true,
          serverSide: true,
          stateSave: true,
          info : false,
          pageLength: 25,
          deferLoading: 0,
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "100"]],
          ajax: url,
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false,orderable : false},
              {data : 'username', name : 'rm_users.username'},
              {data : 'firstname', name : 'rm_users.firstname'},
              {data : 'lastname', name : 'rm_users.lastname'},
              {data : 'mobile', name : 'rm_users.mobile'},
              {data : 'package', name : 'rm_services.srvname'},
              {data : 'expiration', name : 'rm_users.expiration'},
              {data : 'ip_address', name : 'rm_users.ip_address'},
              {data : 'group', name : 'rm_users.group'},
              {data : 'lastlogoff', name : 'lastlogoff',searchable : false, orderable : false},
              {data : 'status', name : 'status'},
              {data : 'action', name : 'action', searchable : false, orderable : false}
          ],
          dom : 'lBrtip',
          buttons : [
            'csv','excel','pdf','print','colvis'
          ],
          order : [[0,'ASC']]
      });
      
      $('.search-btn').on('click', function(e) {
          e.preventDefault();
        if($(this).val() == "0"){
          $("#search-main").val('');
        }
        if ( $("#search-main").val() == '' ) {
            table.search('#@://d+5', false, true).draw();
        } else {
            table.search($("#search-main").val()).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();
      })
    });
</script>
    
@endpush