@extends('layouts.app', ['activePage' => 'log', 'titlePage' => __('Logs')])

@section('content')
  <div class="content">
	<div class="container-fluid">

	
	  
	  
	  <div class="row">
 		<div class="col-xs-12 col-sm-12 col-md-12">
		  <div class="card">
			<div class="card-header card-header-primary">
				<h1 class="m-0">Logs</h1>  
			</div>
			 <div class="card-body">
			 	<table id="logTable" class="table table-striped data-table">
					<thead class="bg-primary text-white">
						<th>Message</th>
						<th>Source</th>
						<th>Target</th>
						<th>Date</th>
					</thead>
						<tbody></tbody>
					<tfoot class="bg-primary text-white">
						<th>Message</th>
						<th>Source</th>
						<th>Target</th>
						<th>Date</th>
					</tfoot>		
				</table> 
			 </div> 
			  
		  </div>
		</div>
	  </div>
	  
	  </div>
  </div>
@endsection

@push('js')
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#logTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "{{route('logsJSON')}}",
		"columns": [
            {
                data: 'message'
            },
            {
                data: 'source'
            },
            {
                data: 'target',
            },
            {
               data: {
                    _: 'created.display',
                    sort: 'created.timestamp',
                },
			},
		],
		
		"deferRender": true,
		 "order": [[ 3, "desc" ]],
		"columnDefs": [
		{ "width": "50%", "targets": 0 }
		]
    } );
} );
</script>
@endpush