clrghouz/resources/views/system/widget/form-echoarea.blade.php

<form class="needs-validation" method="post" action="{{ url('system/echoarea',$o->id) }}" autocomplete="off" 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($o->sessions 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>

@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