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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>IP Log</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6"><h5>IP Log</h5></div>
        <div class="col-lg-6 text-right"><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#bulk_delete"><i class="fa fa-trash"></i> Delete Selected</button></div>
    </div>
    <div id="bulk_delete" 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 text-center">
            <h4 class="modal-heading">Are You Sure ?</h4>
            <p>Do you really want to delete these records? This process cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <form class="form-horizontal" role="form" action="{{route('customer.remove.ip')}}" method="POST" id = "bulk_delete_form">
                @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 id="running_log">
        <table id="custom_table1" class="table table-striped table-bordered">
            <thead>
                <th>        
                <div class="inline" style="display:inline-block;">
                  <input id="checkboxAll" type="checkbox" class="custom-checkbox filled-in" name="checked[]" value="all">
                  <label for="checkboxAll"></label>
                </div>#</th>
                <th>ID</th>
                <th>Username</th>
                <th>Remark</th>
                <th>Status</th>
                <th>Time</th>
                <th>Action</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<div id="edit-form" title="Change IP and Group">
    <form action="{{route('customer.update.ip')}}" method="POST">
    @csrf
    <fieldset>
        <input type="hidden" name="id" id="id" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        <input type="hidden" name="username" id="username" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        <div class="form-group">
            <label for="portal_user">IP Address</label>
            <input type="text" name="ip_address" id="ip_address" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" required>
        </div>
        <div class="form-group">
            <label for="group">Group</label>
            <input type="text" name="group" id="group" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" required>
        </div>
        <button type="submit" class="btn btn-info">Submit</button>
    </fieldset>
  </form>
</div>
@endsection

@push('js')
    <script>
        $(function() {
            var url = $(location).attr('href');
            var table2 = $('#custom_table1').DataTable({
              processing: true,
              serverSide: true,
              stateSave: true,
              pageLength: 50,
              searchable: true,
              ajax: url,
              language: {
                searchPlaceholder: "Search..."
              },
              columns: [
                  {data: 'id', name: 'id', searchable : false, orderable : false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
                  {data : 'username', name : 'ip_logs.username'},
                  {data : 'remark', name : 'ip_logs.remark'},
                  {data : 'status', name : 'ip_logs.status'},
                  {data : 'time', name : 'ip_logs.created_at'},
                  {data : 'action', name : 'action'},
              ],
              dom : 'lBfrtip',
              buttons : [
                'csv','excel','pdf','print','copy'
              ],
              order : [[0,'DESC']]
           });
           $('body').on('click','.edit-btn',function(){
                var username = $(this).data('username');
                dialog.find('input#username').val(username);
                var id = $(this).data('id');
                dialog.find('input#id').val(id);
                dialog.dialog( "open" );
            });
            dialog = $( "#edit-form" ).dialog({
              autoOpen: false,
              height: 250,
              width: 350,
              modal: true,
              close: function() {
              }
            });
        });
    </script>
@endpush