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

<form class="needs-validation" method="post" action="{{ url('system/filearea',$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">
						<x-form.select id="filearea_domain_id" name="domain_id" icon="bi-hash" label="Network" :options="$o->sessions->map(fn($item)=>['id'=>$item->domain_id,'value'=>sprintf('%s (%s)',$item->zone_id,$item->domain->name)])"/>
					</div>

					<!-- Select Address -->
					<div class="col-3">
						<div class="d-none" id="filearea_address-select">
							<x-form.select id="filearea_address_id" name="address_id" icon="bi-hash" label="Address"/>
						</div>
					</div>

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

							<tbody>
							@foreach ($o->fileareas()->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="filearea-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() {
			$('#filearea_domain_id').on('change',function() {
				console.log('closing filearea-select');
				if (! $('#filearea-select').hasClass('d-none'))
					$('#filearea-select').addClass('d-none');

				if (! $(this).val()) {
					$('#filearea-summary').removeClass('d-none');
					$('#filearea_address-select').addClass('d-none');

					return;

				} else {
					$('#filearea_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');
						$('#filearea_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
				})
			});

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

				if ($('#filearea-select').hasClass('d-none')) {
					$('#filearea-select').removeClass('d-none');
					$('#filearea-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');
						$('#filearea-select').empty().append(data);
						$('#fileareas').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/filearea',[$o->id]) }}',
					cache: false
				})
			});
		});
	</script>
@append