@extends('layouts.admin')
@section('title') Manage Users @endsection
@section('content')
<div class="bg-white card-box p0 border-20">
    <div class="table-responsive pt-25 pb-25 pe-4 ps-4">
        <table id="dataTable" class="table property-list-table">
            <thead>
			  <tr>
			    <th>#</th>
			    <th>Ful Name</th>
			    <th>Email</th>
			    <th>Contact Number</th>
			    {{-- <th>Type</th> --}}
			    <th>Status</th>
			    <th>Actions</th>
			  </tr>
			</thead>
			<tbody>
				@if(count($users) > 0)
										@foreach($users as $user)
					<tr>
					<td>{{ $i++ }}</td>
					<td>{{ $user->name }}</td>
					<td>{{ $user->email }}</td>
					<td>{{ $user->phone }}</td>
					{{-- <td>
						@if($user->role == 'owner')
							<div class="badge btn-bg text-white">Owner</div>
						@elseif($user->role == 'agent')
							<div class="badge btn-bg text-white">Agent</div>
						@elseif($user->role == 'renter')
							<div class="badge btn-bg text-white">Renter</div>
						@endif
					</td> --}}
					<td>
						@if(empty($user->status))
							<div class="badge bg-success text-white">Active</div>
						@elseif($user->status == 'ban')
							<div class="badge bg-danger text-white">Blocked</div>
						@endif
					</td>
					<td>
						<div class="action-dots float-end">
                            <button class="action-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                              <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#passModal-{{ $user->id }}"><i class="fa-regular fa-key"></i> Change Password</a></li>
                              @if($user->status == 'ban')
				               <li> <a class="dropdown-item " href="{{ route('admin.unban-user',$user->id) }}"><i class="fa-regular fa-ban"></i> Unblock User</a></li>
				              @else
								<li><a class="dropdown-item " href="{{ route('admin.ban-user',$user->id) }}"><i class="fa-regular fa-ban"></i> Block User</a></li>
			                  @endif
                            </ul>
                        </div>
					</td>
					</tr>
					@endforeach
				@else
				<tr>
					<td></td>
					<td></td>
					<td>No User found</td>
					<td></td>
					<td></td>
				</tr>
				@endif
			</tbody>
        </table>
        <!-- /.table property-list-table -->
    </div>                    
</div>
@endsection
@section('script')
@if(count($users) > 0)
@foreach($users as $user)
<div class="modal fade" id="passModal-{{ $user->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-centered">
        <div class="container">
            <div class="remove-account-popup text-center modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <center>
	                <div class="p-2 rounded-circle btn-bg" style="width:70px; height:70px;">
	                	<i class="fa-regular fa-fingerprint fa-3x text-white"></i>
	                </div>
                </center>
                <br>
                <form method="post" action="{{ route('admin.change-user-password') }}">
		      		@csrf
		      		<input type="hidden" name="user" value="{{ $user->id }}">
		      		<div class="row justify-content-center">
		      			<div class="col-2">
		      				<label>New Password:</label>
		      			</div>
		      			<div class="col-6">
		      				<input type="password" class="form-control" name="password" required><br>
		      			</div>
		      		</div>
	                <div class="button-group d-inline-flex justify-content-center align-items-center pt-15">
	                	<button type="submit" class="btn btn-one"><i class="fa-regular fa-key"></i> Update Password</button>
	                    <button type="button" class="btn-close fw-500 ms-3" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
	                </div>
                </form>
            </div>
            <!-- /.remove-account-popup -->
        </div>
    </div>
</div>
@endforeach
@endif
<script type="text/javascript">
	$('#dataTable').DataTable({
      dom: "<'row'<'col-md-4 col-sm-12'f><'col-md-5 col-sm-12 text-center'B><'col-md-3 col-sm-12'l>>" +
           "<'row'<'col-12'tr>>" +
           "<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
      autoWidth: true,
      responsive: true,
      buttons: [
        { extend: 'copy', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'excel', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'csv', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'pdf', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'print', className: 'btn btn-sm btn-primary btn-bg' }
      ],
      lengthMenu: [
        [20, 30, 40,50,100, -1],
        [20, 30, 40,50,100, "All"]
      ],
      columnDefs: [
        { orderable: false, targets: 6 },
      ]
    });
</script>
@endsection