@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<div class="row">
				<div class="col-12">
					<div class="page-title-box">
						<h4 class="page-title">App Users</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{route('dashboard')}}">Dashboard</a>
							</li>
							<li class="breadcrumb-item active">
								App Users List
							</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- end page title -->

			<div class="row">
				<div class="col-9">
					<div class="card">
						<div class="card-body">
							<div class="row pt-1 pb-3">
								<div class="col-8">
									<div class="page-title-box">

										<p class="page-title pt-3" style="line-height: 0">
											<i class=" mdi mdi-account-outline"></i> App User List
										</p>
									</div>
								</div>
								<div class="col-4 text-right">
									<!--
									<a href="{{route('addAdminUser')}}" role="button" class="btn btn-danger waves-effect waves-light">
										<i class="fa fa-user-plus"></i> Create New User
									</a>
									-->
								</div>
							</div>
							<div class="table-responsive">
								<table class="table mb-0 table-bordered " >
									<thead class="thead-dark">
										<tr>
											<th width="150" class="text-center">Image</th>
											<th>Name</th>
											<th>Email</th>
											<th>Phone</th>
											<th>Blocked</th>
											<th class="text-center">Action</th>
										</tr>
									</thead>
									<tbody>
										@if(count($users)==0)
											<tr class='table-secondary'>
												<td colspan="6" class="text-center">
													<i class="fa fa-info-circle"></i>
													No Data Available
												</td>
											</tr>
										@endif
										@foreach($users as $user)
										<tr>
											<td class="text-center">
												@if(empty($user->photo))
													<span class="fa-stack fa-2x" style="vertical-align: top;">
													  <i class="far fa-circle fa-stack-2x"></i>
													  <i class="fas fa-user fa-stack-1x"></i>
													</span>
												@else
													<img src="{{$user->photo}}" class="rounded-circle" width="50" height="50">
												@endif
											</td>
											<td>{{$user->name}}</td>
											<td>{{$user->email}}</td>
											<td>{{$user->country_code}} {{$user->phone}} </td>
											<td>{{$user->enabled=="Yes"?"No":"Yes"}}</td>
											<td style="width:170px;">
												<a href="{{route('appUserProfle',$user->id)}}" class="btn btn-sm btn-info waves-effect waves-light" data-toggle="tooltip" title="View Profile">
													<i class="fa fa-eye"></i>
												</a>
												<a href="{{route('editAppUser',$user->id)}}" class="btn btn-sm btn-warning waves-effect waves-light" data-toggle="tooltip" title="Edit User">
													<i class="fa fa-edit"></i>
												</a>
												<form style="display:inline-block;" class="deleteUserForm" action="{{route('deleteAppUser')}}" method="post">
													@csrf
													@method('DELETE')
													<input type="hidden" name="id" value="{{$user->id}}">
													<button type="submit" class="btn btn-sm btn-danger waves-effect waves-light" data-toggle="tooltip" title="Delete User">
														<i class="fa fa-trash"></i>
													</button>
												</form>
											</td>
										</tr>
										@endforeach
										
									</tbody>
								</table>
							</div>
							<div class="pt-3">
															{{$users->links()}}
														</div>

						</div>
						<!-- end card-body-->
					</div>
					<!-- end card-->
				</div>
				<!-- end col -->

				<div class="col-3">
					<div class="card">
						<div class="card-body">
							<div class="row">
								<div class="col-8">
									<div class="page-title-box">
										<p class="page-title pt-3" style="line-height: 0">
											<i class="mdi mdi-filter"></i> Filter
										</p>
									</div>
								</div>
							</div>

							<div class="row mt-4">
								
									<div class="col-12">
										<form class="" action="{{route('appUsersList')}}" method="get">
										@csrf
										<div class="form-group mb-3">
											<label for="example-select">Filter By</label>
											<select class="form-control" name="ftype" required>
												<option value=""></option>
												<option <br />
<b>Warning</b>:  Undefined variable $ftype in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/users/appUsersList.blade.php</b> on line <b>144</b><br />
 value="email">Email</option>
												<option <br />
<b>Warning</b>:  Undefined variable $ftype in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/users/appUsersList.blade.php</b> on line <b>145</b><br />
 value="phone">Phone</option>
												<option <br />
<b>Warning</b>:  Undefined variable $ftype in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/users/appUsersList.blade.php</b> on line <b>146</b><br />
 value="name">Name</option>
											</select>
										</div>
	
										<div class="form-group mb-3">
											<label for="example-select">Filter value</label>
											<input type="text" name="stext" value="{{$stext}}" class="form-control" required>
										</div>
										
	
										<button type="submit" class="btn btn-danger btn-rounded waves-effect waves-light">
											<span class="btn-label"><i class="mdi mdi-filter"></i></span>Apply
										</button>
										</form>
									</div>
								
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<!-- container -->

	</div>
	<!-- content -->

</div>
<script>
	$(function(){
		$(document).on('submit','.deleteUserForm',function(e){
			e.preventDefault();
			Swal.fire({
			  title: 'Are you sure?',
			  text: "to delete this user!",
			  //icon: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#d33',
			  cancelButtonColor: '#888',
			  confirmButtonText: 'Yes, delete it!'
			}).then((result) => {
			  if (result.value) {
			  	e.currentTarget.submit();
			  	 let timerInterval
					Swal.fire({
					  //icon: 'info',
					  title: 'Deleting',
					  html: '<b style="visibility:hidden;"></b>',
					  timer: 90000,
					  //timerProgressBar: true,
					  onBeforeOpen: () => {
					    Swal.showLoading()
					    timerInterval = setInterval(() => {
					      const content = Swal.getContent()
					      if (content) {
					        const b = content.querySelector('b')
					        if (b) {
					          b.textContent = Swal.getTimerLeft()
					        }
					      }
					    }, 100)
					  },
					  onClose: () => {
					    clearInterval(timerInterval)
					  }
					}).then((result) => {
					  /* Read more about handling dismissals below */
					  
					})
			  	
			  }
			});
			
			
		});
	});
</script>
@endsection