@include('admin.Master.header')

<main class="page-content">
	<div class="row">
		<div class="col">
			<div class="card rounded-4">
				<div class="card-body col-md-12">
					<div class="d-sm-flex">
						<select onchange="sortedCityFunction(this.value, '{{ $country }}')" class="form-control w-12">
							<option value="asc">Country : (A to Z)</option>
							<option value="desc">Country : (Z to A)</option>
							{{-- <option value="l2h">Count : low to high</option>
							<option value="h2l">Count : high to low</option> --}}
							<option value="1">Latest</option>
						</select>
						{{-- <div class="ms-auto">
							<div class="btn-group">
								<a href="{{ route('admin.exportCountryPdf', $country) }}" class="btn btn-primary border-0" title="Export as PDF"><i
									   class='bx bxs-printer m-0'></i></a>
								<a href="{{ route('admin.exportCountryExcel', $country) }}" class="btn btn-primary border-0 mx-1" data-toggle="tooltip"
								   title="Export as Excel"><i class="fadeIn animated bx bxs-receipt"></i></a>
							</div>
						</div> --}}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row row-cols-auto" id="formDetails">
		@foreach ($cityWiseCounts as $item)
		@php
			$randomColor = '#' . substr(md5(mt_rand(90, 110)), 0, 8);
		@endphp
		<div class="col-lg-2 col-md-4 col-6">
			<div class="card rounded-4" style="background-color: {{ $randomColor }};">
				@if(auth()->user()->can('city-list'))
					<a href="{{ route('admin.city', [$country, $item->city]) }}">
				@else
					<div>
				@endif
				<div class="card-body" style="height: 80px">
					<div class="d-flex align-items-center">
						<div>
							<h4 class="mb-0 font-13 text-black fs-6" style="font-weight: 900;font-size: 13px!important">
								<span>{{ $item->city }}</span>
							</h4>
							<p class="mb-0 text-black" style="font-weight: 800;font-size: 12px!important">{{ $item->total_attCount }}</p>
						</div>
					</div>
				</div>
				@if(auth()->user()->can('city-list'))
					</a>
				@else
					</div>
				@endif
			</div>
		</div>
		@endforeach
	</div>
</main>
<script>
	function sortedCityFunction(value, country) {
		var selectedCountry = country;
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		$.ajax({
			url: "/admin/sortedCityFunction",
			type: 'post',
			data: {
				country: selectedCountry,
				value: value,
			},
			dataType: "json",
			success: function(response) {
				var SITEURL = "{{URL('/')}}";
				var cityWiseCounts = response.cityWiseCounts;
				let cardHtml = '';
				cityWiseCounts.forEach(function(item) {
					cardHtml += `
					<div class="col-lg-2 col-md-4 col-6">
						<div class="card rounded-4" style="background-color: ${getRandomColor()};">
							@if(auth()->user()->can('city-list'))
								<a href="${SITEURL}/admin/country/${item.country}/city/${item.city}">
							@else
								<div>
							@endif
								<div class="card-body" style="height: 80px">
									<div class="d-flex align-items-center">
										<div>
											<h4 class="mb-0 font-13 text-black fs-6" style="font-weight: 900;font-size: 13px!important"><span>${item.city}</span></h4>
											<p class="mb-0 text-black" style="font-weight: 800;font-size: 12px!important"></p>
										</div>
									</div>
								</div>
							@if(auth()->user()->can('city-list'))
								</a>
							@else
								</div>
							@endif
						</div>
					</div>
					`;
				});
				$('#formDetails').html(cardHtml);
			}
		});
	}
	function getRandomColor() {
		let letters = '0123456789ABCDEF';
		let color = '#';
		for (let i = 0; i < 8; i++) {
			color +=letters[Math.floor(Math.random() * 16)];
		}
		return color;
	}
</script>
@include('admin.Master.footer')