@extends('admin.layout.main')
@section('main-container')
<style>
	.single-banner {
		background: url('../../frontend/images/new/tranationhistery.png');
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: cover !important;
		padding: 100px 0px !important;
		position: relative !important;
		z-index: 1;
	}
	#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	z-index: 9999; /* Ensure it's above other content */
}

#loader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000; /* Ensure it's above the overlay */
}
</style>
<style>
	.single-banner {
    	background: url('../../frontend/images/new/tranationhistery.png');
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: cover !important;
		padding: 100px 0px !important;
		position: relative !important;
		z-index: 1;
	}
</style>
<section class="single-banner dashboard-banner">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="single-content">
					<h2>{{ $PageHeading }}</h2>
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="#">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">{{ $PageHeading }}</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
</section>
<div id="overlay" style="display: none"></div>
<div id="loader" style="display: none">
	<!-- Add your spinner HTML here -->
	<div class="spinner-border" role="status">
		<span class="sr-only">Loading...</span>
	</div>
</div>
<section class="inner-section compare-part">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="table-scroll">
					<table class="table-list">
						<thead class="table-head">
							<tr>
								<th scope="col">Sr.</th>
								<th scope="col">User Info</th>
								
								<th scope="col">Balance</th>
								<th scope="col">Last Action</th>
								<th scope="col">Acount Status</th>
								<th scope="col">Action</th>
							</tr>
						</thead>
						<tbody class="table-body">
						@foreach ($Business as $index => $data)
							<tr>
								<td class="table-number">
									<h6>{{ $index + 1 }}</h6>
								</td>
								
								<td class="table-price">
									<h5>
										 Name: {{ $data->name }} <br>
										 Email: <span style="text-transform:lowercase;">{{ $data->email }}</span><br>
										 Phone #: {{ $data->phone }}
									</h5>
								</td>
								
								<td class="table-price">
									<h5> 
										@if($data->balance > 0)
											${{ $data->balance }}
										@endif
									</h5>
								</td>
								<td class="table-price">
									<h5> 
										Last Login Date: {{ $data->last_login_at }}	<br>
										Login Count: {{ $data->login_counts }}								
									</h5>
								</td>
								<td class="table-status">
									@if($data->account_approved == 1)
										<h6 class="btn btn-primary status-btn" data-id="{{ $data->id }}">Active</h6>
									@endif
									@if($data->account_approved == 0)
										<h6 class="btn btn-danger status-btn" data-id="{{ $data->id }}">Not Active</h6>
									@endif
								</td>
								{{-- <td class="table-status">
									@if($data->account_approved == 1)
									<h6 class="btn btn-primary">Active</h6>
									@endif
									@if($data->account_approved == 0)
									<h6 class="btn btn-danger">Not Active</h6>
									@endif
								</td> --}}
								<td class="table-action">
									<!-- <a href="ad-details-left.html" title="View Details" class="icon fas fa-eye"></a><button type="button" title="Ad Bookmark" class="icon wish fas fa-heart"></button> -->
									<a href="{{ route('AddBalance', ['id' => $data->id]) }}" class="btn btn-primary">Add Balance</a>
								</td>
							</tr>
						@endforeach
							
						</tbody>
					</table>
				</div>
				<!-- <div class="compare-btn center-50"><a href="#" class="btn btn-inline"><i class="fas fa-eye"></i><span>show more list</span></a></div> -->
			</div>
		</div>
	</div>
</section>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.status-btn').click(function() {
            var id = $(this).data('id');
			$('#overlay').show();
            $('#loader').show();
            $.ajax({
                url: '{{ route("UserStatusUpdate") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id: id
                },
                success: function(response) {
                    console.log(response);
					$('#overlay').hide();
                    $('#loader').hide();
                    // Update the status text based on response
                    if (response.new_status == 1) {
                        $('.status-btn[data-id="'+id+'"]').removeClass('btn-danger').addClass('btn-primary').text('Active');
                    } else {
                        $('.status-btn[data-id="'+id+'"]').removeClass('btn-primary').addClass('btn-danger').text('Not Active');
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    });
</script>