@if(($x=\App\Models\Domain::active()
	->select('domains.*')
	->join('zones',['zones.domain_id'=>'domains.id'])
	->whereIn('zone_id',$o->sessions->pluck('zone_id'))
	->get())->count())

	<form class="row g-0 needs-validation" method="post" action="{{ url('ftn/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="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="domain_id" name="domain_id" required>
									<option></option>
									@foreach($x as $do)
										<option value="{{ $do->id }}" @if(old('domain_id') == $do->id)selected @endif>{{ $do->id }} <small>({{ $do->name }})</small></option>
									@endforeach
								</select>
								<span class="invalid-feedback" role="alert">
									@error('domain_id')
										{{ $message }}
									@enderror
								</span>
							</div>
						</div>

						<div class="offset-2 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>

					<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() {

			$('#domain_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: {domain_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);
						//eval(document.getElementById('echoarea-javascript').innerHTML);
					},
					error: function(e) {
						icon.removeClass('spinner-grow spinner-grow-sm');

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