clrghouz/resources/views/user/link.blade.php

@extends('layouts.app')
@section('htmlheader_title')
	Link
@endsection

@section('content')
	<form class="row g-0 needs-validation" method="post" novalidate>
		@csrf

		<input type="hidden" id="address_id" name="address_id">

		<div class="row">
			<div class="col-12">
				<div class="greyframe titledbox shadow0xb0">
					<h2 class="cap">Enter your Link code</h2>

					<!-- ADDRESS -->
					<div class="row" style="z-index: 2;">
						<div class="col-4">
							<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="form-control @error('address_id') is-invalid @enderror" id="address" placeholder="Address" name="address" value="{{ old('address') }}" required autofocus autocomplete="off">
								<span id="search-icon" style="z-index: 4;width: 0;"><i style="border-radius: 50%;" class="spinner-border spinner-border-sm text-dark d-none"></i></span>
								<div id="address_search_results"></div>
								<span class="invalid-feedback" role="alert">
									@error('address_id')
										{{ $message }}
									@else
										A address is required.
									@enderror
								</span>
							</div>
						</div>
					</div>

					<!-- CODE -->
					<div class="row">
						<div class="col-4">
							<label for="code" class="form-label">Code</label>
							<div class="input-group has-validation">
								<span class="input-group-text"><i class="bi bi-fingerprint"></i></span>
								<input type="text" class="form-control @error('code') is-invalid @enderror" id="code" placeholder="Code" name="code" value="{{ old('code') }}" required>
								<span class="invalid-feedback" role="alert">
									@error('code')
										{{ $message }}
									@else
										A code is required.
									@enderror
								</span>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-12">
							<a href="{{ url('home') }}" class="btn btn-danger">Cancel</a>
							<button type="submit" name="submit" class="btn btn-success float-end">Validate</button>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
	</form>
@endsection

@section('page-css')
	<style>
		input#address + span {
			left: -1.5em;
			top: 0.5em;
			position:relative
		}
		div#address_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#address_search_results ul li.dropdown-header {
			display: block;
			color: #fff !important;
		}
		div#address_search_results ul li,
		div#address_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#address_search_results ul li:hover {
			padding-left: 0;
			text-indent: 0;
		}
		div#address_search_results ul li:before {
			content:""!important
		}
	</style>
@append
@section('page-scripts')
	<script type="text/javascript">

		var address_id;
		var addresssearch = _.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);

		$(document).ready(function() {
			$('input[id=address]').typeahead({
				autoSelect: false,
				scrollHeight: 10,
				theme: 'bootstrap5',
				delay: 500,
				minLength: 3,
				items: {{ $search_limit ?? 5 }},
				fitToElement: false,
				selectOnBlur: false,
				appendTo: "#address_search_results",
				source: function (query,process) {
					addresssearch('{{ url('api/addresses/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) {
					console.log(item);
					$('#address_id').val(item.id);
					console.log($('#address_id'));
					return item.name;
				},
			})
				.on('keyup keypress', function(event) {
					var key = event.keyCode || event.which;
					if (key === 13) {
						event.preventDefault();
						return false;
					}
				});
		});
	</script>
@endsection