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

178 lines
4.6 KiB
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('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