@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>
    <div class="row">
        <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>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>
        @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 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>  

@endsection

@push('js')
<script>

    $(function () {
      "use strict";
    //   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'},
              {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 : 'monthly_latency', name : 'monthly_latency'},
              {data : 'minlog', name : 'minlog'},
              {data : 'status', name : 'status'},
              {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);
    
    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);
        });
    });
});
</script>
    
@endpush