afiq.hamzah
148 lines
6.3 KiB
PHP
148 lines
6.3 KiB
PHP
@extends('layouts.app')
|
|
|
|
@push('additional_styles')
|
|
<link href="{{ asset('css/slimselect.css') }}" rel="stylesheet">
|
|
<style>
|
|
div.ss-main {
|
|
min-height: 46.2px
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
|
|
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
|
|
<main>
|
|
|
|
<div class="pt-6 px-4">
|
|
|
|
<div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 xl:p-8 w-1/2 2xl:col-span-1">
|
|
|
|
<h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800">
|
|
KEMASKINI POSKOD {{ $postcode['poskod'] }}
|
|
</h2>
|
|
|
|
<form id="kemaskini_poskod_form" action="{{ route('poskod.update', $postcode['poskod']) }}"
|
|
method="post">
|
|
@csrf
|
|
@method('PUT')
|
|
<input type="hidden" name="recno" value="{{ $postcode['recno'] }}">
|
|
<div class="grid grid-cols-2">
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
poskod
|
|
</label>
|
|
<input
|
|
class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
|
name="poskod" maxlength="5" minlength="5" pattern="[0-9]+"
|
|
value="{{ $postcode['poskod'] }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2">
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
daerah
|
|
</label>
|
|
<select id="selectable-daerah" class="ss-main" style="min-height: 46.2px; "
|
|
name="koddaerah">
|
|
<option value="ola">Sila Pilih Daerah...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2">
|
|
<div class="w-full px-3 mb-4">
|
|
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
negeri
|
|
</label>
|
|
<select id="selectable-negeri" class="ss-main" style="min-height: 46.2px; "
|
|
name="kodnegeri">
|
|
<option value="">Sila Pilih Negeri...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
class="bg-blue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
|
type="submit">
|
|
Kemaskini
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@include('layouts.footer')
|
|
@endsection
|
|
|
|
|
|
@push('additional_scripts')
|
|
<script src="{{ asset('js/slimselect.min.js') }}"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let postcode = {!! json_encode($postcode) !!}
|
|
let all_daerah = {!! json_encode($all_daerah) !!}
|
|
let all_negeri = {!! json_encode($all_negeri) !!}
|
|
|
|
let all_daerah_choices = all_daerah.map(x => {
|
|
return {
|
|
'text': x.namadaerah,
|
|
'value': x.koddaerah,
|
|
'data': {
|
|
'kodnegeri': x.kodnegeri,
|
|
},
|
|
}
|
|
});
|
|
|
|
let all_negeri_choices = all_negeri.map(x => {
|
|
return {
|
|
'text': x.negeri,
|
|
'value': x.kodnegeri,
|
|
}
|
|
});
|
|
|
|
let slimSelect_negeri = new SlimSelect({
|
|
select: '#selectable-negeri',
|
|
data: all_negeri_choices,
|
|
settings: {
|
|
disabled: true,
|
|
},
|
|
});
|
|
|
|
let slimSelect_daerah = new SlimSelect({
|
|
select: '#selectable-daerah',
|
|
data: all_daerah_choices,
|
|
events: {
|
|
afterChange: (newVal) => {
|
|
slimSelect_negeri.setSelected(newVal[0].data.kodnegeri);
|
|
}
|
|
}
|
|
});
|
|
|
|
document.querySelector('#kemaskini_poskod_form button[type="submit"]').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
slimSelect_negeri.enable()
|
|
|
|
let poskod_no_error = document.querySelector('#kemaskini_poskod_form')
|
|
.querySelector('input[name="poskod"]')
|
|
.checkValidity();
|
|
|
|
if (!poskod_no_error) {
|
|
document.querySelector('#kemaskini_poskod_form').reportValidity();
|
|
return;
|
|
}
|
|
|
|
document.querySelector('#kemaskini_poskod_form').submit()
|
|
|
|
});
|
|
|
|
// initially select default value
|
|
slimSelect_daerah.setSelected(postcode.koddaerah);
|
|
slimSelect_negeri.setSelected(postcode.negeri.kodnegeri);
|
|
|
|
});
|
|
</script>
|
|
@endpush
|