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

@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 pull-left float-left">Customers</h1>  
			</div>
			<div class="card-body">
				@if($customers && count($customers)>0)
				 <table class="dataTable responsive table table-striped">
					 <thead class="bg-primary text-white">
				 		<tr>
						 	<th>ID</th>
							<th>Name</th>
							<th>Email</th>
							<th>Created At</th>
							<th>Actions</th>
						 </tr>
					 </thead>
				 @foreach($customers as $customer)
				 	<tr>
				 		<td>{{$customer->id ?? ''}}</td>
						<td>{{$customer->First_Name ?? ''}} {{$customer->Last_Name ?? ''}}</td>
						<td>{{$customer->Email ?? ''}}</td>
						
						<td>
						@php
							$dt = \DateTime::createFromFormat('U',strtotime($customer->created_at),new \DateTimeZone('Europe/London'));
							echo $dt->format('d/m/Y');
						@endphp
						</td>
						<td>
							<a class="btn btn-info btn-sm" href="{{route('customer.show',['customer'=>$customer->id])}}">View</a>
						</td>
				 	</tr>
				 @endforeach
					 <tfoot class="bg-primary text-white">
				 		<tr>
						 	<th>ID</th>
							<th>Name</th>
							<th>Email</th>
							<th>Created At</th>
							<th>Actions</th>
						 </tr>
					 </tfoot>
					 </table>
				@else
				 <div class="alert alert-danger">
				 	Failed to load the customers.
				 </div>
				@endif
			 </div>
		  </div>
		</div>
	  </div>
	  
	  </div>
  </div>

<!-- Modal -->
<div class="modal fade" id="DeleteUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete User?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
		  <h4>Are you sure you want to delete this user?</h4>
        <form action="" method="POST" id="deleteUserForm">
		  	@csrf
			@method('DELETE');
			<button type="button" class="btn btn-info" data-dismiss="modal">No</button>
			<button type="submit" class="btn-danger btn">Yes</button>
		  </form>
      </div>
    </div>
  </div>
</div>

@endsection

@push('js')
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.dataTable').DataTable();
	$('.delete-user').click(function(){
		var id=$(this).attr('data-id');
		$('#deleteUserForm').attr('action','user/'+id+'');
	});
} );
</script>
@endpush