@extends('layouts.app', ['activePage' => 'tools', 'titlePage' => __('Compliance 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">
				<div class="float-left pull-left">
				<h1 class="m-0">Compliance</h1>  
				<p class="text-white">Users listed here have  tried to subscribe but are in 'compliance state' - meaning they can only be re-subscribed manually. This feed pulls straight from the system logs. Deleting system logs will also delete entries here.</p>
				</div>
				<a class="m-0 btn btn-white inverse pull-right float-right" href="{{route('tools.complianceLog.export')}}">
					Export to CSV <i class="fa fa-plus fa-fw"></i>
				</a>
			</div>
			<div class="card-body">
				@if(isset($users) && !empty($users))
				 <table class="dataTable responsive table table-striped">
					 <thead class="bg-primary text-white">
				 		<tr>
						 	<th>Email</th>
							<th>Date of Log</th>
							<th>Full Message</th>
						 </tr>
					 </thead>
					<tbody>
					 @foreach($users as $user)
						<tr>
							<td>{{$user[0] ?? ''}}</td>
							<td data-order="{{$user[3]}}" data-sort="{{$user[3]}}">{{$user[2] ?? ''}}</td>
							<td>{{$user[1] ?? ''}}</td>
						</tr>
					@endforeach
					</tbody>
					 <tfoot class="bg-primary text-white">
				 		<tr>
							<th>Email</th>
							<th>Date of Log</th>
							<th>Full Message</th>
						 </tr>
					 </tfoot>
					 </table>
				@else
				 <div class="alert alert-danger">
				 	Failed to load the logs.
				 </div>
				@endif
			 </div>
		  </div>
		</div>
	  </div>
	  
	  </div>
  </div>

@endsection

@push('js')
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.dataTable').DataTable();
} );
</script>
@endpush