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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Customer / Monitor / Report</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6">
            Customer Monitor Report
        </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.monitor.report.delete')}}" 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 class="row">
        <div class="col-lg-12">
            <div class="p-3">                
                <table id="custom_table" 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>#</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Detail</th>
                        <th>Timestamp</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(function() {
        var url = $(location).attr('href');
        var table2 = $('#custom_table').DataTable({
          processing: true,
          serverSide: true,
          deferRender: true,
          pageLength: 50,
          ajax: url,
          language: {
            searchPlaceholder: "Search Customer ..."
          },
          columns: [
              {data: 'id', name: 'id', searchable : false, orderable : false},
              {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
              {data : 'username', name : 'monitor_reports.username'},
              {data : 'detail', name : 'monitor_reports.detail'},
              {data : 'time', name : 'monitor_reports.created_at'},
          ],
          dom : 'lBfrtip',
          buttons : [
            'csv','excel','pdf','print','copy'
          ],
          order : [[0,'DESC']]
       });
        $(".select2").select2();
    });
    </script>
@endpush