@extends('admin.layouts.master')
@section('content')

    <div class="breadcrumbs">
		<div class="col-sm-4">
			<div class="page-header float-left">
				<div class="page-title">
					<h1>Users</h1>
				</div>
			</div>
		</div>

		<div class="col-sm-8">
			<div class="page-header float-right">
				<div class="page-title">
					<span class="pull-right" style="margin-top:5px;margin-bottom:-10px;">
						<form action="" method="POST">
							<input type="text" class="form-control" name="qry" placeholder="Search...">
						</form>
					</span>
				</div>
			</div>
		</div>
    </div>

	<br>
	<div class="content mt-3">
		<div class="col-md-12">
			<div class="card">
				<div class="card-body">
					<table class="table table-striped">
						<thead>
							<tr>
								<th width="5%">ID</th>
								<th width="15%">Username</th>
								<th width="20%">Email</th>
								<th width="15%">Email verified</th>
								<th width="15%">Document verified</th>
								<th width="15%">Mobile verified</th>
								<th width="15%">Status</th>
							</tr>
						</thead>
						<tbody>
							@foreach($users as $user)
							<tr>
								<td>{{$user->id}}</td>
								<td>{{$user->username}}</td>
								<td>{{$user->email}}</td>
								<td>{{$user->email_verified}}</td>
								<td>{{$user->document_verified}}</td>
								<td>{{$user->mobile_verified}}</td>
								<td>
									<select name="status" class="status-select" id="status" data-merchant-id="{{ $user->id }}">
										<option value="{{ $user->status }}">{{$user->status == 'Active' ? 'Active' : 'Not Active' }}</option>
										<option value="Active"  {{ $user->status == 'Active' ? 'selected' : '' }}>Active</option>
										<option value="Not Active" {{ $user->status == 'Not Active' ? 'selected' : '' }}>Not Active</option>
									</select>	
								</td>
							</tr>
							@endforeach
						</tbody>
					</table>			
				</div>
			</div>
		</div>
	</div>


	<script>
		$(document).ready(function() {
			$('.status-select').change(function() {
				var userId = $(this).data('merchant-id');
				var status = $(this).val();

				$.ajax({
					url: '{{ route("user.updateStatus") }}', // Route for updating status
					type: 'POST',
					data: {
						id: userId,
						status: status,
						_token: '{{ csrf_token() }}' // Include CSRF token
					},
					success: function(response) {
						if (response.success) {
							toastr.success('Status updated successfully!');
						} else {
							toastr.error(response.message || 'Failed to update status.');
						}
					},
					error: function(xhr) {
						console.error(xhr.responseText);
						toastr.error('An error occurred while updating status.');
					}
				});
			});
		});
	</script>


@endsection