@if(($x=\App\Models\Zone::active()
	->whereIn('id',$o->sessions->pluck('pivot.zone_id'))
	->orderBy('zone_id')
	->with(['domain'])
	->get())->count())

	<form class="needs-validation" method="post" action="{{ url('system/echoarea',$o->id) }}" novalidate>
		@csrf

		<div class="row pt-0">
			<div class="col-12">
				<div class="greyframe titledbox shadow0xb0">
					<div class="row">
						<!-- Select Domain -->
						<div class="col-3">
							<label for="echoarea_domain_id" class="form-label">Network</label>
							<div class="input-group has-validation">
								<span class="input-group-text"><i class="bi bi-hash"></i></span>
								<select class="form-select @error('domain_id') is-invalid @enderror" id="echoarea_domain_id" name="domain_id" required>
									<option></option>
									@foreach($x as $zo)
										<option value="{{ $zo->domain_id }}" @if(old('domain_id') == $zo->domain_id)selected @endif>{{ $zo->zone_id }} <small>({{ $zo->domain->name }})</small></option>
									@endforeach
								</select>
								<span class="invalid-feedback" role="alert">
									@error('domain_id')
										{{ $message }}
									@enderror
								</span>
							</div>
						</div>

						<!-- Select Address -->
						<div class="col-3">
							<div class="d-none" id="echoarea_address-select">
								<label for="echoarea_address_id" class="form-label">Address</label>
								<div class="input-group">
									<span class="input-group-text"><i class="bi bi-hash"></i></span>
									<select class="form-select" id="echoarea_address_id" name="address_id" required>
										<option></option>
									</select>
								</div>
							</div>
						</div>

						<!-- Summary of Addresses -->
						<div class="offset-3 col-3" id="echoarea-summary">
							<table class="table monotable">
								<thead>
								<tr>
									<th>Network</th>
									<th class="text-end">Areas</th>
								</tr>
								</thead>

								<tbody>
								@foreach ($o->echoareas()->with(['domain'])->get()->groupBy('domain_id') as $oo)
									<tr>
										<td>{{ $oo->first()->domain->name }}</td>
										<td class="text-end">{{ $oo->count() }}</td>
									</tr>
								@endforeach
								</tbody>
							</table>
						</div>
					</div>

					@if($errors->count())
						<div class="row">
							<span class="btn btn-sm btn-danger" role="alert" style="text-align: left;">
								There were errors with the submission.
								<ul>
									@foreach ($errors->all() as $error)
										<li>{{ $error }}</li>
									@endforeach
								</ul>
							</span>
						</div>
					@endif

					<div class="row">
						<div class="col-12 d-none" id="echoarea-select"></div>
					</div>
				</div>
			</div>
		</div>
	</form>
@endif

@section('page-scripts')
	<script type="text/javascript" src="{{ asset('plugin/checkboxes/jquery.checkboxes-1.2.2.min.js') }}"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#echoarea_domain_id').on('change',function() {
				if (! $(this).val()) {
					$('#echoarea-summary').removeClass('d-none');
					$('#echoarea_address-select').addClass('d-none');
					return;
				} else {
					$('#echoarea_address-select').removeClass('d-none');
				}

				var item = this;
				icon = $(item).parent().find('i');

				$.ajax({
					type: 'POST',
					data: {domain_id: $(item).val()},
					beforeSend: function() {
						icon.addClass('spinner-grow spinner-grow-sm');
					},
					success: function(data) {
						icon.removeClass('spinner-grow spinner-grow-sm');
						$('#echoarea_address_id')
							.empty()
							.append($('<option>'))
							.append(data.map(function(item) {
								return $('<option>').val(item.id).text(item.value);
							}));
					},
					error: function(e) {
						icon.removeClass('spinner-grow spinner-grow-sm');

						if (e.status != 412)
							alert('That didnt work? Please try again....');
					},
					url: '{{ url('system/api/address',[$o->id]) }}',
					cache: false
				})
			});

			$('#echoarea_address_id').on('change',function() {
				if (! $(this).val()) {
					$('#echoarea-summary').removeClass('d-none');
					$('#echoarea-select').addClass('d-none');
					return;
				}

				if ($('#echoarea-select').hasClass('d-none')) {
					$('#echoarea-select').removeClass('d-none');
					$('#echoarea-summary').addClass('d-none');
				}

				var item = this;
				icon = $(item).parent().find('i');

				$.ajax({
					type: 'GET',
					data: {address_id: $(item).val()},
					beforeSend: function() {
						icon.addClass('spinner-grow spinner-grow-sm');
					},
					success: function(data) {
						icon.removeClass('spinner-grow spinner-grow-sm');
						$('#echoarea-select').empty().append(data);
						$('#echoareas').checkboxes('range',true);
					},
					error: function(e) {
						icon.removeClass('spinner-grow spinner-grow-sm');

						if (e.status != 412)
							alert('That didnt work? Please try again....');
					},
					url: '{{ url('system/echoarea',[$o->id]) }}',
					cache: false
				})
			});
		});
	</script>
@append