@extends('layouts.app')

@section('htmlheader_title')
	Register System
@endsection

@section('content')
	<form class="row g-0 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-pc"></i></span>
									<input type="text" style="z-index: 0" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="BBS Name" name="name" value="{{ old('name') }}" required autofocus>
									<span id="search-icon" style="width: 0;"><i style="border-radius: 50%;" class="spinner-border spinner-border-sm text-dark d-none"></i></span>
									<div id="system_search_results"></div>
									<span class="invalid-feedback" role="alert">
										@error('name')
											{{ $message }}
										@else
											BBS Name is required.
										@enderror
									</span>
								</div>
							</div>
						</div>

						@if (old('submit') !== 'create')
							<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>
						@endif
					</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')
	<style>
		input#name + span {
			left: -1.5em;
			top: 0.5em;
			position:relative
		}
		div#system_search_results ul {
			color:#eeeeee;
			background-color:#292929;
			font-size: .85rem;
			padding: 0 5px 0 5px;
			z-index: 99;
			top: -0.5em;
			left: 31em !important;
		}
		div#system_search_results ul li.dropdown-header {
			display: block;
			color: #fff !important;
		}
		div#system_search_results ul li,
		div#system_search_results ul li a {
			display: block;
			color: #aaa !important;
			margin: 0 !important;
			border: 0 !important;
			width: inherit;
			text-indent: 0 !important;
			padding-left: 0 !important;
		}
		div#system_search_results ul li:hover {
			padding-left: 0;
			text-indent: 0;
		}
		div#system_search_results ul li:before {
			content:""!important
		}
	</style>
@append
@section('page-scripts')
	<script>
		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);
		}

		function getform(icon) {
			$.ajax({
				url : '{{ url('user/system/register') }}',
				type : 'POST',
				data : { system_id: system_id,name: $('#name').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() {
			$('input[id=name]').typeahead({
				autoSelect: false,
				scrollHeight: 10,
				theme: 'bootstrap5',
				delay: 500,
				minLength: 3,
				items: {{ $search_limit ?? 5 }},
				fitToElement: false,
				selectOnBlur: false,
				appendTo: "#system_search_results",
				source: function (query,process) {
					systemsearch('{{ url('systems/orphan') }}',query,process);
				},

				matcher: function () { return true; },

				// Disable sorting and just return the items (items should by the ajax method)
				sorter: function(items) {
					return items;
				},

				updater: function (item) {
					system_id = item.id;
					return item.name;
				},
			})
				.on('keyup keypress', function(event) {
					var key = event.keyCode || event.which;
					if (key === 13) {
						event.preventDefault();
						return false;
					}
				});

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

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

				getform(icon);
			})
		});

		var c=0;
		var systemsearch = _.debounce(function(url,query,process,icon){
			icon = $('#search-icon').find('i');

			$.ajax({
				url : url,
				type : 'GET',
				data : 'term=' + query,
				dataType : 'JSON',
				async : true,
				cache : false,
				beforeSend : function() {
					if (c++ === 0) {
						icon.removeClass('d-none');
					}
				},
				success : function(data) {
					// if json is null, means no match, won't do again.
					if(data==null || (data.length===0)) return;

					process(data);
				},
				complete : function() {
					if (--c === 0) {
						icon.addClass('d-none');
					}
				}
			})
		}, 500);
	</script>
@append