@extends('layouts.app')

@section('htmlheader_title')
	Register System
@endsection

@section('content')
	<form class="needs-validation" method="post" autocomplete="off" novalidate>
		@csrf

		<div class="row">
			<div class="col-12">
				<div class="greyframe titledbox shadow0xb0">
					<h2 class="cap">Register System</h2>

					<div id="create">
						<div class="row">
							<!-- Name -->
							<div class="col-4">
								<label for="system" class="form-label">BBS Name</label>
								<div class="input-group has-validation">
									<span class="input-group-text"><i class="bi bi-laptop-fill"></i></span>
									<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="id" required>
										<option value="">&nbsp;</option>
										@foreach (\App\Models\System::select(['systems.id','systems.name'])
											->active()
											->whereRaw('id NOT IN (SELECT system_id FROM system_user)')
											->cursor() as $oo)
											<option value="{{ $oo->id }}" @if(old('id')===$oo->id)selected @endif>{{ $oo->name }}</option>
										@endforeach
									</select>
									<span class="invalid-feedback" role="alert">
										@error('system_id')
											{{ $message }}
										@else
											BBS Name is required.
										@enderror
									</span>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12 pb-2">
								<button type="button" name="submit" class="btn btn-success">Next</button><span id="next" class="m-2"><i class="spinner-border spinner-border-sm text-light d-none"></i></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>

	<div class="modal fade" id="no-auth" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger">
					<h5 class="modal-title">ERROR: No authorisation</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<p>It appears that you are not allowed to create this entry.</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-css')
	@css('select2')
@append
@section('page-scripts')
	@js('select2')

	<script type='text/javascript'>
		$(document).ready(function() {
			$('#system').select2({
				placeholder: 'See if your BBS exists',
				tags: true,
			});
		});
	</script>

	<script type='text/javascript'>
		var system_id;
		var noauth = new bootstrap.Modal(document.getElementById('no-auth'), {});

		function validation(item,message) {
			var attr = $('input[id='+item+']');
			attr.addClass('is-invalid')
			attr.parent().find('.invalid-feedback').empty().append(message);
		}

		/**
		 * We have selected a BBS from the link/register form, and it's either a new entry or an existing one
		 * @param icon
		 */
		function getform(icon) {
			$.ajax({
				url : '{{ url('user/system/register') }}',
				type : 'POST',
				data : { system_id: system_id,name: $('#system').val(),action: 'register',old: {!! json_encode(old()) !!} },
				dataType : 'json',
				async : true,
				cache : false,
				beforeSend : function() {
					if (icon)
						icon.toggleClass('d-none');
				},
				complete : function(data) {
					switch (data.status) {
						case 200:
							// if json is null, means no match, won't do again.
							if(data.responseText===null || (data.responseText.length===0)) return;
							$('#create').empty().append(data.responseText);

							@if($errors->count())
								@foreach($errors->keys() as $key)
									validation('{{ $key }}','{{ $errors->first($key) }}');
								@endforeach
							@endif

							break;

						case 403:
							if (icon)
								icon.toggleClass('d-none');
							noauth.show();
							break;

						case 419:
							location.reload();
							break;

						case 422:
							validation('name',data.responseJSON.errors.name[0]);

							if (icon)
								icon.toggleClass('d-none');
							break;

						default:
							return false;
					}
				}
			})
		}

		if ({{ old('submit') === 'create' ? 'true' : 'false' }}) {
			getform();
		}

		$(document).ready(function() {
			$('button[name=submit]').on('click',function() {
				icon = $(this).parent().find('i');

				if (! $('#system').val())
					return;

				getform(icon);
			})
		});
	</script>
@append