@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">Users</h1>  
				<a class="m-0 btn btn-white inverse pull-right float-right" href="{{route('user.create')}}">
					Add New <i class="fa fa-plus fa-fw"></i>
				</a>
			</div>
			<div class="card-body">
				 <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>
				@if($users && count($users)>0)
				 @foreach($users as $user)
				 	<tr>
				 		<td>{{$user->id ?? ''}}</td>
						<td>{{$user->name ?? ''}}</td>
						<td>{{$user->email ?? ''}}</td>
						
						<td>
						@php
							$dt = \DateTime::createFromFormat('U',strtotime($user->created_at),new \DateTimeZone('Europe/London'));
							echo $dt->format('d/m/Y');
						@endphp
						</td>
						<td>
							<a class="btn btn-info btn-sm" href="{{route('user.edit',['user'=>$user->id])}}">Edit</a>
							<button class="delete-user btn btn-danger btn-sm" data-id="{{$user->id}}" data-toggle="modal" data-target="#DeleteUserModal">Remove User</button></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 users.
				 </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