clrghouz/resources/views/system/addedit.blade.php

@php
	use App\Models\Setup;
@endphp

@extends('layouts.app')

@section('htmlheader_title')
	@if($o->exists) Update @else Add @endif System
@endsection

@section('content')
	@if ($o->exists)
		<h1>{{ $o->name }}</h1>
	@endif

	<div class="accordion accordion-flush" id="accordion_homepage">

		@if ($o->exists)
			<!-- System -->
			<div class="accordion-item">
				<h3 class="accordion-header" id="system" data-bs-toggle="collapse" data-bs-target="#collapse_system" aria-expanded="true" aria-controls="collapse_system">System</h3>

				<div id="collapse_system" class="accordion-collapse collapse {{ ! session()->has('add_address') ? 'show' : '' }}" aria-labelledby="system" data-bs-parent="#accordion_homepage">
					<div class="accordion-body">
						@endif
						<form class="row g-0 needs-validation" method="post" novalidate>
							@csrf

							<div class="row">
								<div class="col-12">
									<div class="greyframe titledbox shadow0xb0">
										<h2 class="cap">@if($o->exists) Update @else Add @endif System</h2>

										<div class="row">
											<div class="col-4">
												<label for="name" class="form-label">Name</label>
												<div class="input-group has-validation">
													<span class="input-group-text"><i class="bi bi-tag-fill"></i></span>
													<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Name" name="name" value="{{ old('name',$o->name) }}" required @cannot('admin',$o)disabled @endcannot autofocus>
													<span class="invalid-feedback" role="alert">
														@error('name')
															{{ $message }}
														@else
															A name is required.
														@enderror
													</span>
												</div>
											</div>

											<div class="col-2">
												<label for="active" class="form-label">Active</label>
												<div class="input-group">
													<div class="btn-group" role="group">
														<input type="radio" class="btn-check" name="active" id="active_yes" value="1" required @cannot('admin',$o)disabled @endcannot @if(old('active',$o->active))checked @endif>
														<label class="btn btn-outline-success" for="active_yes">Yes</label>

														<input type="radio" class="btn-check btn-danger" name="active" id="active_no" value="0" required @cannot('admin',$o)disabled @endcannot @if(! old('active',$o->active))checked @endif>
														<label class="btn btn-outline-danger" for="active_no">No</label>
													</div>
												</div>
											</div>

											<div class="col-3">
												<label for="zt_id" class="form-label">ZeroTier ID</label>
												<div class="input-group has-validation">
													<span class="input-group-text"><i class="bi bi-shield-lock-fill"></i></span>
													<input type="text" class="form-control @error('zt_id') is-invalid @enderror" id="zt_id" placeholder="ZeroTier" name="zt_id" value="{{ old('zt_id',$o->zt_id) }}" @cannot('admin',$o)disabled @endcannot>
													<span class="invalid-feedback" role="alert">
														@error('zt_id')
															{{ $message }}
														@enderror
													</span>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-4">
												<label for="sysop" class="form-label">Sysop</label>
												<div class="input-group has-validation">
													<span class="input-group-text"><i class="bi bi-globe"></i></span>
													<input type="text" class="form-control @error('sysop') is-invalid @enderror" id="sysop" placeholder="Sysop" name="sysop" value="{{ old('sysop',$o->sysop) }}" required @cannot('admin',$o)disabled @endcannot autocomplete="name">
													<span class="invalid-feedback" role="alert">
														@error('sysop')
															{{ $message }}
														@else
															A Sysop's name is required.
														@enderror
													</span>
												</div>
											</div>

											<div class="col-8">
												<label for="location" class="form-label">Location</label>
												<div class="input-group has-validation">
													<span class="input-group-text"><i class="bi bi-globe"></i></span>
													<input type="text" class="form-control @error('location') is-invalid @enderror" id="location" placeholder="Location" name="location" value="{{ old('location',$o->location) }}" required @cannot('admin',$o)disabled @endcannot>
													<span class="invalid-feedback" role="alert">
														@error('location')
															{{ $message }}
														@else
															System location is required.
														@enderror
													</span>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<h4>Mailer Details</h4>

												<div class="pt-0 row">
													<div class="col-4">
														<label for="method" class="form-label">Connection Method</label>
														<div class="input-group">
															<span class="input-group-text"><i class="bi bi-wifi"></i></span>
															<select class="form-select @error('method') is-invalid @enderror" id="mailer_type" name="mailer_type" @cannot('admin',$o)disabled @endcannot>
																<option></option>
																<option value="{{ Setup::O_BINKP }}" @if(old('mailer_type',$o->mailer_type) == Setup::O_BINKP)selected @endif)}}>BINKP</option>
																<option value="{{ Setup::O_EMSI }}" @if(old('mailer_type',$o->mailer_type) == Setup::O_EMSI)selected @endif)}}>EMSI</option>
															</select>
														</div>
													</div>

													<div class="col-8">
														<label for="address" class="form-label">Address</label>
														<div class="input-group has-validation">
															<span class="input-group-text"><i class="bi bi-globe"></i></span>
															<input type="text" class="w-75 form-control @error('mailer_address') is-invalid @enderror" id="mailer_address" placeholder="FQDN" name="mailer_address" value="{{ old('mailer_address',$o->mailer_address) }}" @cannot('admin',$o)disabled @endcannot>
															<input type="text" class="form-control @error('mailer_port') is-invalid @enderror" id="mailer_port" placeholder="Port" name="mailer_port" value="{{ old('mailer_port',$o->mailer_port) }}" @cannot('admin',$o)disabled @endcannot>
															<span class="invalid-feedback" role="alert">
																@error('mailer_address')
																	{{ $message }}
																@enderror
																@error('mailer_port')
																	{{ $message }}
																@enderror
															</span>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<h4>BBS Details</h4>

												<div class="pt-0 row">
													<div class="col-4">
														<label for="method" class="form-label">Connection Method</label>
														<div class="input-group">
															<span class="input-group-text"><i class="bi bi-wifi"></i></span>
															<select class="form-select @error('method') is-invalid @enderror" id="method" name="method" @cannot('admin',$o)disabled @endcannot>
																<option></option>
																<option value="23" @if(old('method',$o->method) == 23)selected @endif)}}>Telnet</option>
																<option value="22" @if(old('method',$o->method) == 22)selected @endif)}}>SSH</option>
																<option value="519" @if(old('method',$o->method) == 519)selected @endif)}}>Rlogin</option>
															</select>
														</div>
													</div>

													<div class="col-8">
														<label for="address" class="form-label">Address</label>
														<div class="input-group has-validation">
															<span class="input-group-text"><i class="bi bi-globe"></i></span>
															<input type="text" class="w-75 form-control @error('address') is-invalid @enderror" id="address" placeholder="FQDN" name="address" value="{{ old('address',$o->address) }}" @cannot('admin',$o)disabled @endcannot>
															<input type="text" class="form-control @error('port') is-invalid @enderror" id="port" placeholder="Port" name="port" value="{{ old('port',$o->port) }}" @cannot('admin',$o)disabled @endcannot>
															<span class="invalid-feedback" role="alert">
																@error('address')
																	{{ $message }}
																@enderror
																@error('port')
																	{{ $message }}
																@enderror
															</span>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<label for="notes" class="form-label">Notes</label>
												<textarea class="form-control" rows=3 name="notes" placeholder="Notes..." @cannot('admin',$o)disabled @endcannot>{{ old('notes',$o->notes) }}</textarea>
											</div>
										</div>

										<div class="row">
											<div class="col-12">
												<a href="{{ url('ftn/system') }}" class="btn btn-danger">Cancel</a>
												@can('admin',$o)
													<button type="submit" name="submit" class="btn btn-success mr-0 float-end">@if ($o->exists)Save @else Add @endif</button>
												@endcan
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
						@if ($o->exists)
					</div>
				</div>
			</div>
		@endif

		@if($o->exists)
			<!-- Authentication -->
			<div class="accordion-item">
				<h3 class="accordion-header" id="authentication" data-bs-toggle="collapse" data-bs-target="#collapse_auth" aria-expanded="false" aria-controls="collapse_auth">System Authentication</h3>

				<div id="collapse_auth" class="accordion-collapse collapse" aria-labelledby="authentication" data-bs-parent="#accordion_homepage">
					<div class="accordion-body">
						TBA
					</div>
				</div>
			</div>

			<!-- Addresses -->
			<div class="accordion-item">
				<h3 class="accordion-header" id="addresses" data-bs-toggle="collapse" data-bs-target="#collapse_addresses" aria-expanded="false" aria-controls="collapse_addresses">System AKAs</h3>

				<div id="collapse_addresses" class="accordion-collapse collapse {{ session()->has('add_address') ? 'show' : '' }}" aria-labelledby="addresses" data-bs-parent="#accordion_homepage">
					<div class="accordion-body">
						<p>FidoNet addresses are constructed in the format <strong class="highlight">zone</strong>:<strong class="highlight">net</strong>/<strong class="highlight">node</strong>.<strong class="highlight">point</strong><span>@</span><strong class="highlight">domain</strong>.</p>

						<div class="accordion accordion-flush" id="accordion_ftnaddress">
							<h4 class="accordion-header" id="ftnaddress" data-bs-toggle="collapse" data-bs-target="#collapse_ftnaddresses" aria-expanded="false" aria-controls="collapse_addresses">Fidonet Addressing</h4>

							<div id="collapse_ftnaddresses" class="accordion-collapse collapse" aria-labelledby="ftnaddress" data-bs-parent="#accordion_ftnaddress">
								<div class="accordion-body">
									<p>FidoNet system are also assigned some roles, and in some cases, those roles have a particular address format:</p>
									<table class="table monotable">
									<thead>
									<tr>
										<th>Role</th>
										<th>Address Format</th>
									</tr>
									</thead>

									<tbody>
									<tr>
										<td>Zone <small>(optional)</small></td>
										<td>
											<strong class="highlight">ZONE</strong>:0/0.0, where the net, node and point values are zero. Zones normally have 1 or more Regions and/or Hosts.<br><br>
											<small>(Systems that do not configure other systems with a zone, assume that that other system is in the same zone as the system being configured.)</small>
										</td>
									</tr>
									<tr>
										<td>Region <small>(optional)</small></td>
										<td>
											zone:<strong class="highlight">REGION</strong>/0.0, where the zone indicates which zone the region is in. The node and point values are zero. Regions normally have 1 or more Hosts.<br><br>
											<small>Fidonet software normally doesnt configure the region address per-se. It is used by the mailer to receive packets destined to it by routing, in transition to the final destination. The region number must be unique with a zone.</small>
										</td>
									</tr>
									<tr>
										<td>Host <small>(mandatory)</small></td>
										<td>
											zone:<strong class="highlight">HOST</strong>/0.0, where the zone indicates which zone the host is in. The node and point values are zero. The Host system is normally configured with an additional address, where the NET address is the same and the NODE number that is greater than zero. Hosts may may zero or more Hubs and 1 or more Nodes.<br><br>
											<small>The host number must be unique within a zone, which implies that it cannot be the same as a region, if regions are used.</small>
										</td>
									</tr>
									<tr>
										<td>Hub <small>(optional)</small></td>
										<td>
											zone:net/<strong class="highlight">NODE</strong>.0, where the zone/net indicates which zone/net the hub is in. The system(s) in the nodelist below a Hub are fed from that hub from a routing perspective.<br><br>
											<small>The node is unique within the net and point is zero.</small>
										</td>
									</tr>
									<tr>
										<td>Node <small>(required)</small></td>
										<td>
											zone:net/<strong class="highlight">NODE</strong>.0, where the zone/net indicates which zone/net the node is in.<br><br>
											<small>The node is unique within the net and point is zero.</small>
										</td>
									</tr>
									</tbody>
								</table>
								</div>
							</div>
						</div>

						@if($o->addresses->count())
							<p>This system has the following addresses assigned to it:</p>

							<table class="table monotable">
								<thead>
								<tr>
									<th>Address</th>
									<th>Active</th>
									<th colspan="2">Role</th>
								</tr>
								</thead>

								<tbody>
								@foreach ($o->addresses->sortBy(['region_id','host_id']) as $oo)
									<tr>
										<td>{{ $oo->ftn }}</td>
										<td>{{ $oo->active ? 'YES' : 'NO' }}</td>
										<td>{{ $oo->role }}</td>
										<td style="width: 70px;">
											@can('admin',$oo)
												<a href="{{ url('ftn/system/susaddress',[$oo->id]) }}" title="@if($oo->active)Pause @else Activate @endif Address" class="suspend"><i class="bi @if($oo->active)bi-pause-circle-fill @else bi-play-circle-fill @endif"></i></a>
												{{--
												<a href="{{ url('ftn/system/modaddress',[$oo->id]) }}" title="Modify Address" class="modify"><i class="bi bi-pen-fill"></i></a>
												<a href="{{ url('ftn/system/movaddress',[$oo->id]) }}" title="Move Address to another System" class="move"><i class="bi bi-arrow-right-square-fill"></i></a>
												--}}
												<a href="{{ url('ftn/system/deladdress',[$oo->id]) }}" title="Delete Address" class="delete"><i class="bi bi-trash-fill"></i></a>
											@endcan
										</td>
									</tr>
								@endforeach
								</tbody>
							</table>
						@endif

						@can('admin',$o)
							<form class="row g-0 needs-validation" method="post" action="{{ url('ftn/system/addaddress',$o->id) }}" novalidate>
								<input type="hidden" id="action" name="action" value="">
								@csrf

								<div class="row pt-0">
									<div class="col-12">
										<div class="greyframe titledbox shadow0xb0">
											<h2 class="cap">Assign New address</h2>

											<div class="row">
												<!-- Select Zone -->
												<div class="col-3">
													<label for="zone_id" class="form-label">Zone</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-hash"></i></span>
														<select class="form-select @error('zone_id') is-invalid @enderror" id="zone_id" name="zone_id" required>
															<option></option>
															@foreach(\App\Models\Zone::active()->domainZoneOrder()->with(['domain'])->get() as $zo)
																<option value="{{ $zo->id }}">{{ $zo->zone_id }} <small>({{ $zo->domain->name }})</small></option>
															@endforeach
														</select>
														<span class="invalid-feedback" role="alert">
															@error('zone_id')
																{{ $message }}
															@else
																Please select the Zone for the node's address.
															@enderror
														</span>
													</div>
												</div>

												<!-- Select Region -->
												<div class="col-3 d-none" id="region-select">
													<label for="region_id" class="form-label">Region</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-geo"></i></span>
														<select class="form-select @error('region_id') is-invalid @enderror" id="region_id" name="region_id" required>
														</select>
														<span class="invalid-feedback" role="alert">
															@error('region_id')
																{{ $message }}
															@else
																Please make a choice.
															@enderror
														</span>
													</div>
												</div>

												<!-- Select Host -->
												<div class="col-3 d-none" id="host-select">
													<label for="host_id" class="form-label">Host</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-diagram-3-fill"></i></span>
														<select class="form-select @error('host_id') is-invalid @enderror" id="host_id" name="host_id">
														</select>
														<span class="invalid-feedback" role="alert">
															@error('host_id')
																{{ $message }}
															@enderror
														</span>
													</div>
												</div>

												<!-- Select Hub -->
												<div class="col-3 d-none" id="hub-select">
													<label for="hub_id" class="form-label">Hub</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-diagram-2-fill"></i></span>
														<select class="form-select @error('hub_id') is-invalid @enderror" id="hub_id" name="hub_id">

														</select>
														<span class="invalid-feedback" role="alert">
															@error('hub_id')
																{{ $message }}
															@enderror
														</span>
													</div>
												</div>
											</div>

											<div class="row">
												<!-- Node/Point address -->
												<div class="col-3 d-none" id="node-address">
													<label for="node_id" class="form-label">Node/Point Address</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-hash"></i></span>
														<input type="text" style="width: 35%;" class="form-control @error('node_id') is-invalid @enderror" id="node_id" placeholder="Node" name="node_id" value="{{ old('node_id',$o->node_id) }}" @cannot('admin',$o)disabled @endcannot>
														<span class="input-group-text ml-1 mr-1 p-0">.</span>
														<input type="text" class="form-control @error('point_id') is-invalid @enderror" id="point_id" placeholder="0" name="point_id" value="{{ old('point_id',$o->point_id) ?: 0 }}" @cannot('admin',$o)disabled @endcannot style="padding-left: 0;">
														<span class="invalid-feedback" role="alert">
															@error('node_id')
																{{ $message }}
															@enderror
															@error('point_id')
																{{ $message }}
															@enderror
														</span>
													</div>
												</div>

												<!-- Region Address -->
												<div class="pl-0 col-3 d-none" id="region-address"	>
													<label for="region" class="form-label">Region Address</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-hash"></i></span>
														<input type="text" style="width: 35%;" class="form-control @error('region_id_new') is-invalid @enderror" id="region_id_new" placeholder="Region #" name="region_id_new" value="{{ old('region_id_new') }}" @cannot('admin',$o)disabled @endcannot>
														<span class="input-group-text">/0.0</span>
														<span class="invalid-feedback" role="alert">
															@error('region_id_new')
																{{ $message }}
															@else
																The region number is required.
															@enderror
														</span>
													</div>
												</div>

												<!-- Host Address -->
												<div class="pl-0 col-3 d-none" id="host-address">
													<label for="host" class="form-label">Host Address</label>
													<div class="input-group has-validation">
														<span class="input-group-text"><i class="bi bi-hash"></i></span>
														<input type="text" class="form-control @error('host_id_new') is-invalid @enderror" id="host_id_new" placeholder="Host #" name="host_id_new" value="{{ old('host_id_new') }}" @cannot('admin',$o)disabled @endcannot>
														<span class="input-group-text ml-1 mr-1 p-0">/</span>
														<input type="text" class="form-control @error('node_id_new') is-invalid @enderror" id="node_id_new" placeholder="Node #" name="node_id_new" value="{{ old('node_id_new') }}" @cannot('admin',$o)disabled @endcannot>
														<span class="input-group-text">.0</span>
														<span class="invalid-feedback" role="alert">
															@error('host_id_new')
																{{ $message }}
															@else
																The host address is required.
															@enderror
															@error('node_id_new')
																{{ $message }}
															@else
																The node address is required.
															@enderror
														</span>
													</div>
												</div>

												<!-- Hub Checkbox -->
												<div class="col-2 d-none" id="hub-checkbox">
													<label for="hub" class="form-label">Hub</label>
													<div class="input-group">
														<div class="btn-group" role="group">
															<input type="radio" class="btn-check" name="hub" id="hub_yes" value="1" required @cannot('admin',$o)disabled @endcannot @if(old('hub',$o->hub))checked @endif>
															<label class="btn btn-outline-success" for="hub_yes">Yes</label>

															<input type="radio" class="btn-check btn-danger" name="hub" id="hub_no" value="0" required @cannot('admin',$o)disabled @endcannot @if(! old('hub',$o->hub))checked @endif>
															<label class="btn btn-outline-danger" for="hub_no">No</label>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-2">
													<a href="{{ url('ftn/system') }}" class="btn btn-danger">Cancel</a>
												</div>

												<span class="col-6 mt-auto mx-auto text-center align-bottom">
													@if($errors->count())
														<span class="pl-5 btn btn-sm btn-danger" role="alert">
															There were errors with the submission.
														</span>
													@endif
												</span>

												@can('admin',$o)
													<div class="col-2">
														<button type="submit" name="submit" class="btn btn-success mr-0 float-end">Add</button>
													</div>
												@endcan
											</div>
										</div>
									</div>
								</div>
							</form>
						@else
							This system does not currently belong to any Fido networks. You'll need to ask an admin to assign addresses.
						@endcan
					</div>
				</div>
			</div>
		@endif
	</div>

	@include('widgets.modal_delete')
@endsection

@section('page-scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			// Disable enter for form submission.
			$('input').on('keydown', function(event) {
				var x = event.which;
				if (x === 13) {
					event.preventDefault();
				}
			});
			 */

			$('#zone_id').on('change',function() {
				$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
				$('#region_id').prop('disabled',true);
				$('#region_id').children().remove();

				if (! $('#region-address').hasClass('d-none'))
					$('#region-address').addClass('d-none');

				if (! $('#host-address').hasClass('d-none'))
					$('#host-address').addClass('d-none');

				if (! $('#host-select').hasClass('d-none'))
					$('#host-select').addClass('d-none');

				if (! $('#hub-select').hasClass('d-none'))
					$('#hub-select').addClass('d-none')

				if (! $('#hub-checkbox').hasClass('d-none'))
					$('#hub-checkbox').addClass('d-none');

				if (! $('#node-address').hasClass('d-none'))
					$('#node-address').addClass('d-none');

				$.get('{{ url('api/regions') }}'+'/'+this.value,function(data) {
					$('#region_id').append('<option value=""></option>');
					$('#region_id').append('<option value="0">No Region</option>');
					$('#region_id').append('<option value="new">New Region</option>');

					data.forEach(function(item) {
						$('#region_id').append('<option value="'+item.id+'">'+item.value+'</option>');
					});

					$('#region_id').prop('disabled',false);
					$('#region_id').show();
				});

				$('#region-select').removeClass('d-none');
				$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
			});

			$('#region_id').on('change',function() {
				switch(this.value) {
					case '':
						if (! $('#region-address').hasClass('d-none'))
							$('#region-address').addClass('d-none');

						if (! $('#host-select').hasClass('d-none'))
							$('#host-select').addClass('d-none');

						if (! $('#host-address').hasClass('d-none'))
							$('#host-address').addClass('d-none');

						if (! $('#hub-select').hasClass('d-none'))
							$('#hub-select').addClass('d-none');

						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');

						if (! $('#node-address').hasClass('d-none'))
							$('#node-address').addClass('d-none');
						break;

					case 'new':
						if (! $('#host-select').hasClass('d-none'))
							$('#host-select').addClass('d-none');

						if (! $('#host-address').hasClass('d-none'))
							$('#host-address').addClass('d-none');

						if ($('#region-address').hasClass('d-none'))
							$('#region-address').removeClass('d-none');

						if (! $('#hub-select').hasClass('d-none'))
							$('#hub-select').addClass('d-none');

						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');

						if (! $('#node-address').hasClass('d-none'))
							$('#node-address').addClass('d-none');

						$('#action').val('region');
						break;

					case '0':
					default:
						// Find Hosts
						if ($('#host-select').hasClass('d-none'))
							$('#host-select').removeClass('d-none');

						if (! $('#region-address').hasClass('d-none'))
							$('#region-address').addClass('d-none');

						if (! $('#hub-select').hasClass('d-none'))
							$('#hub-select').addClass('d-none');

						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');

						if (! $('#host-address').hasClass('d-none'))
							$('#host-address').addClass('d-none');

						if (! $('#node-address').hasClass('d-none'))
							$('#node-address').addClass('d-none');

						$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
						$('#host_id').prop('disabled',true);
						$('#host_id').children().remove();
						var that = this;

						$.get('{{ url('api/hosts') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
							$('#host_id').append('<option value=""></option>');
							if (that.value !== '0')
								$('#host_id').append('<option value="0">No Host</option>');
							$('#host_id').append('<option value="new">New Host</option>');

							data.forEach(function(item) {
								$('#host_id').append('<option value="'+item.id+'">'+item.value+'</option>');
							});

							$('#host_id').prop('disabled',false);
							$('#host_id').show();
						});

						$('#host-select').removeClass('d-none');
						$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
				}
			});

			$('#host_id').on('change',function() {
				switch(this.value) {
					case '':
						if (! $('#host-address').hasClass('d-none'))
							$('#host-address').addClass('d-none');

						if (! $('#hub-select').hasClass('d-none'))
							$('#hub-select').addClass('d-none');

						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');

						if (! $('#node-address').hasClass('d-none'))
							$('#node-address').addClass('d-none');
						break;

					case 'new':
						if ($('#host-address').hasClass('d-none'))
							$('#host-address').removeClass('d-none');

						if (! $('#hub-select').hasClass('d-none'))
							$('#hub-select').addClass('d-none');

						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');

						if (! $('#node-address').hasClass('d-none'))
							$('#node-address').addClass('d-none');

						$('#action').val('host');
						break;

					case '0':
					default:
						if (! $('#host-address').hasClass('d-none'))
							$('#host-address').addClass('d-none');

						if ($('#hub-select').hasClass('d-none'))
							$('#hub-select').removeClass('d-none');

						if ($('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').removeClass('d-none');

						if ($('#node-address').hasClass('d-none'))
							$('#node-address').removeClass('d-none');

						$(this).parent().find('i').addClass('spinner-grow spinner-grow-sm');
						$('#hub_id').prop('disabled',true);
						$('#hub_id').children().remove();

						$.get('{{ url('api/hubs') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
							$('#hub_id').append('<option value="">No Hub</option>');

							data.forEach(function(item) {
								$('#hub_id').append('<option value="'+item.id+'">'+item.value+'</option>');
							});

							$('#hub_id').prop('disabled',false);
							$('#hub_id').show();
						});

						$('#hub-select').removeClass('d-none');
						$(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm');
						$('#action').val('node');
				}
			});

			$('#hub_id').on('change',function() {
				switch(this.value) {
					case '':
						if ($('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').removeClass('d-none');
						break;

					default:
						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');
				}
			});

			$('#point_id').on('change',function() {
				switch(this.value) {
					case '0':
						if ($('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').removeClass('d-none');
						break;

					default:
						if (! $('#hub-checkbox').hasClass('d-none'))
							$('#hub-checkbox').addClass('d-none');
				}
			});
		});
	</script>
@append