@extends('backend.layouts.layout')

@section('title','User')

@section('content')
<div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">
	<div class="kt-portlet kt-portlet--mobile">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<span class="kt-portlet__head-icon">
					<i class="far fa-users"></i>
				</span>
				<h3 class="kt-portlet__head-title">
					User
				</h3>
			</div>
			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<div class="dropdown dropdown-inline">
						<button type="button" class="btn btn-danger btn-icon-sm btn-remove-all-item" data-url="{{route('bulkDeleteUser')}}" data-title="Xóa user">
							<i class="flaticon2-trash"></i>
						</button>
						<button type="button" class="btn btn-brand btn-icon-sm btn-add-item" data-target="#modal_form" data-url="{{route('createUser')}}" data-title="Thêm mới user">
							<i class="flaticon2-plus"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="kt-portlet__body">

			<!--begin: Search Form -->
			<div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
				<div class="row align-items-center">
					<div class="col-xl-10 order-2 order-xl-1">
						<form action="{{ route('listUser') }}" data-pjax>
							<div class="row align-items-center">
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<input type="text" class="form-control" placeholder="Username..." id="generalSearch" name="username" value="{{request('username','')}}">
								</div>
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<div class="kt-form__group kt-form__group--inline">
										<div class="kt-form__control">
											<select class="form-control bootstrap-select" name="status">
												<option value="">--Trạng thái--</option>
												<option value="1" {{request('status') == 1 ? 'selected' : ''}}>Hoạt động</option>
												<option value="2" {{request('status') == 2 ? 'selected' : ''}}>Ngừng hoạt động</option>
											</select>
										</div>
									</div>
								</div>
								<div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
									<button type="submit" class="btn btn-primary"><i class="fal fa-search"></i></button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<!--end: Search Form -->
		</div>
		<div class="kt-portlet__body kt-portlet__body--fit table-lar" id="pjax-container">

			<!--begin: Datatable -->
			<div class="table-responsive" id="pjax-table">
				<table class="table">
					<thead>
						<tr>
							<th><input type="checkbox" id="chk-all" class="icheck"></th>
							<th>Tên</th>
							<th>Username</th>
							<th>Email</th>
							<th>Điện thoại</th>
							<th>Trạng thái</th>
							<th>Vai trò</th>
							<th>Tạo lúc</th>
							<th>Sửa lúc</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						@if(!empty($users->count()))
							@foreach($users as $user)
								<tr data-id="{{$user->id}}">
									<td>
										<input type="checkbox" class="chk-item icheck" value="{{$user->id}}">
									</td>
									<td class="name-user">{{$user->name}}</td>
									<td>{{$user->username}}</td>
									<td>{{$user->email}}</td>
									<td>{{$user->phone}}</td>
									<td><span class="text-{{$user->getStatus($user->status)['icon']}}">{{$user->getStatus($user->status)['label']}}</span></td>
									<td>{{ $user->is_admin ? 'Admin' : 'Manage' }}</td>
									<td>{{date('d/m/Y H:i:s',strtotime($user->created_at))}}</td>
									<td>{{date('d/m/Y H:i:s',strtotime($user->updated_at))}}</td>
									<td>
										<div class="dropdown">
											<button class="btn btn-elevate-hover btn-icon btn-sm btn-icon-md" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												<i class="far fa-ellipsis-h"></i>
											</button>
											<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
												@if(Auth::user()->isAdministrator())
													<a class="dropdown-item permission-item" href="javascript:;" data-url="{{route('permissionUser')}}" data-toggle="kt-tooltip" data-id="{{$user->id}}" title="Phân quyền" data-placement="right" data-skin="dark" data-container="body"><i class="fal fa-id-card-alt"></i> Phân quyền</a>
												@endif
												<a class="dropdown-item edit-item" href="javascript:;" data-url="{{route('updateUser')}}" data-toggle="kt-tooltip" data-id="{{$user->id}}" title="Sửa" data-placement="right" data-skin="dark" data-container="body"><i class="fal fa-edit"></i> Sửa</a>
												<a class="dropdown-item delete-item" href="javascript:;" data-id="{{$user->id}}" data-url="{{route('deleteUser')}}"><i class="fal fa-trash-alt" title="Xóa"></i> Xóa</a>
											</div>
										</div>
									</td>
								</tr>
							@endforeach
						@else
						<tr>
							<td colspan="10" class="text-center empty-table">
								<span>Không có dữ liệu</span>
							</td>
						</tr>
						@endif
					</tbody>
				</table>
			</div>
			<!--end: Datatable -->
			<div class="pagination-block">
				{{$users->links()}}
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				</button>
			</div>
			<div class="modal-body">
				<form class="form-data-mdl" data-url="" method="post">
					{{csrf_field()}}
					<div class="form-group">
						<label for="name" class="form-control-label">Tên</label>
						<input type="text" class="form-control" name="name" id="name" required placeholder="Nhập tên...">
						<div class="block-input-name block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="email" class="form-control-label">Email</label>
						<input type="email" class="form-control" name="email" id="email" required placeholder="Nhập email...">
						<div class="block-input-email block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="phone" class="form-control-label">Điện thoại</label>
						<input type="text" class="form-control" name="phone" id="phone" required placeholder="Nhập điện thoại...">
						<div class="block-input-phone block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="username" class="form-control-label">Username</label>
						<input type="text" class="form-control" name="username" id="username" required placeholder="Nhập username...">
						<div class="block-input-username block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="password" class="form-control-label">Mật khẩu</label>
						<input type="password" class="form-control" name="password" id="password" required placeholder="Nhập mật khẩu...">
						<div class="block-input-password block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="password_confirmation" class="form-control-label">Nhập lại mật khẩu</label>
						<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" required placeholder="Nhập lại mật khẩu...">
						<div class="block-input-password_confirmation block-error text-danger"></div>
					</div>
					<div class="form-group">
						<label for="status" class="form-control-label">Trạng thái</label>
						<select name="status" id="status" class="form-control">
							<option value="1">Hoạt động</option>
							<option value="2">Ngừng hoạt động</option>
						</select>
						<div class="block-input-status block-error text-danger"></div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary btn-save-mdl"><i class="fal fa-save"></i> Lưu lại</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="modal_permission" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				</button>
			</div>
			<div class="modal-body">
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary btn-save-permission" data-url="{{route('permissionUser')}}"><i class="fal fa-save"></i> Cập nhật</button>
			</div>
		</div>
	</div>
</div>
@endsection

@push('scripts')

<script src="{{asset('backend/assets/js/user.js')}}" type="text/javascript"></script>

@endpush