@extends('backend.layouts.master')

@section('title', 'User List')

@section('styles')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" integrity="sha256-F+DaKAClQut87heMIC6oThARMuWne8+WzxIDT7jXuPA=" crossorigin="anonymous" />

@endsection

@section('scripts')

<!-- START Delete Confirmation -->
<script>
$('button[name="deleteButton"]').on('click', function(e){
	var $form=$(this).closest('form');
	e.preventDefault();
	$('#deleteModal').modal({ backdrop: 'static', keyboard: false })
		.one('click', '#deleteConfirm', function (e) {
			$form.trigger('submit');
		});
});
</script>
<!-- START Delete Confirmation -->

<!-- START DataTables -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js" integrity="sha256-t5ZQTZsbQi8NxszC10CseKjJ5QeMw5NINtOXQrESGSU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js" integrity="sha256-hJ44ymhBmRPJKIaKRf3DSX5uiFEZ9xB/qx8cNbJvIMU=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$('#dataTable').dataTable({
		"order": [[1, 'asc']],
		"columnDefs": [ { "targets": [5], "orderable": false } ],
		"pageLength": 50
	});
</script>
<!-- END Datatables -->

@endsection

@section('content')

	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{ route('backend.index') }}">Backend</a></li>
		<li class="breadcrumb-item"><a href="{{ route('backend.user.index') }}">User</a></li>
		<li class="breadcrumb-item active">List</li>
	</ol>

	<h1>Users</h1>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-plus"></i> Invite User</div>
		<div class="card-body">
			<form method="post" action="{{ route('backend.user.store') }}">

				{{ csrf_field() }}

				<div class="form-row">

					<div class="col-md-8">
						<div class="form-row">
							<div class="form-group col-md-6">
								<label for="name">Username</label>
								<input type="text" class="form-control {{ $errors->first('name', 'is-invalid') }}" id="name" name="name" value="{{ old('name') }}" required autofocus>
								<div class="invalid-feedback">{{ $errors->first('name') }}</div>
							</div>
							<div class="form-group col-md-6">
								<label for="email">E-Mail Address</label>
								<input type="text" class="form-control {{ $errors->first('email', 'is-invalid') }}" id="email" name="email" value="{{ old('email') }}" required>
								<div class="invalid-feedback">{{ $errors->first('email') }}</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group col-md-12">
							<label for="name"">Role(s)</label>
							<select class="form-control {{ $errors->first('role_id', 'is-invalid') }}" id="role_id[]" name="role_id[]" rows="2" multiple>

								@foreach(\App\Models\User\Role::all() as $role)

									<option value="{{ $role->id }}">{{ $role->name }}</option>

								@endforeach

							</select>
							<div class="invalid-feedback">{{ $errors->first('role_id') }}</div>
						</div>
					</div>
				</div>
				<div class="form-row">

					<div class="form-group col-md-4">
						<button type="submit" class="btn btn-primary">Invite User</button> <button type="reset" class="btn btn-default">Reset Form</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-table"></i> User Table</div>
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-hover" id="dataTable" cellspacing="0">
					<thead>
						<tr>
							<th>ID</th>
							<th>Username</th>
							<th>Email</th>
							<th>Status</th>
							<th>Created</th>
							<th width="110" class="text-right">Actions</span></th>
						</tr>
					</thead>
					<tbody>

						@foreach($users as $user)

							<tr>
								<td>{{ $user->id }}</td>
								<td><a href="{{ route('backend.user.show', $user->id) }}">{{ $user->name }}</a></td>
								<td><a href="mailto:{{ $user->email }}">{{ $user->email }}</a></td>
								<td class="text-center">

									@if($user->status_id == '1') <button type="button" class="btn btn-sm btn-outline-warning">Pending</button> @endif
									@if($user->status_id == '2') <button type="button" class="btn btn-sm btn-outline-warning">Invited</button> @endif
									@if($user->status_id == '3') <button type="button" class="btn btn-sm btn-outline-success">Activated</button> @endif
									@if($user->status_id == '4') <button type="button" class="btn btn-sm btn-outline-danger">Monitered</button> @endif
									@if($user->status_id == '5') <button type="button" class="btn btn-sm btn-outline-danger">Banned</button> @endif

								</td>
								<td>{{ $user->created_at->diffForHumans() }}</td>
								<td class="text-right">
									<form method="post" id="deleteForm" action="{{ route('backend.user.destroy', $user->id) }}">
										<a class="btn btn-sm btn-success" title="Show" href="{{ route('backend.user.show', $user->id) }}"><i class="fa fa-eye" aria-hidden="true"></i></a> 
										<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.user.edit', $user->id) }}"><i class="fa fa-edit" aria-hidden="true"></i></a> 
									
										{!! csrf_field() !!} 
										{!! method_field('delete') !!}

										<button class="btn btn-sm btn-danger" title="Delete" id="deleteButton" name="deleteButton" type="submit"><i class="fa fa-trash"></i></button>
									</form>
								</td>
							</tr>

						@endforeach

					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- START Delete Confirmation Modal -->
	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					Please confirm you would like to delete the selected resourse.
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-danger" id="deleteConfirm">Delete</button>
				</div>
			</div>
		</div>
	</div>
	<!-- END Delete Confirmation Modal -->

@endsection