264 lines
8.6 KiB
PHP
264 lines
8.6 KiB
PHP
@extends('layouts.applications')
|
|
|
|
@section('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ asset('css/member/member.css') }}">
|
|
@endsection
|
|
|
|
|
|
@section('content')
|
|
|
|
<div class="entry-container">
|
|
|
|
{{-- <img src="{{ asset('images/parkq-systems.png') }}"
|
|
alt="Logo parkq-systems"
|
|
class="img-fluid logo-img"> --}}
|
|
|
|
<div id="form-input">
|
|
<h2 class="entry-label"> Input No Polisi </h2>
|
|
<form id="formNopol" method="GET">
|
|
@csrf
|
|
<input type="text" id="nopol" name="no_pol" class="nopol-input" placeholder="B1234ABC" autocomplete="off">
|
|
<button type="submit" class="btn-submit"> Cari </button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- FORM MEMBER AKTIF --}}
|
|
<div id="form-active" class="status-card active-card" style="display:none;">
|
|
<div class="status-header">
|
|
<h3 class="entry-label">Member Aktif</h3>
|
|
</div>
|
|
|
|
<div class="member-info">
|
|
|
|
<div class="info-row">
|
|
<span class="label">Nama</span>
|
|
<span id="act-nama" class="value"></span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">No Polisi</span>
|
|
<span id="act-nopol" class="value"></span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Periode</span>
|
|
<small id="act-periode" class="value"></small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="active-warning">
|
|
Member masih aktif
|
|
</div>
|
|
|
|
<p class="text-info">silahkan pilih produk di bawah ini :</p>
|
|
<div class="select-input">
|
|
<select id="produkSelect" class="form-control form-select">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn-submit">
|
|
OPEN GATE
|
|
</button>
|
|
</div>
|
|
|
|
{{-- FORM MEMBER EXPIRED --}}
|
|
<div id="form-expired" class="status-card expired-card" style="display:none;">
|
|
|
|
<div class="status-header">
|
|
{{-- <span class="status-badge">EXPIRED</span> --}}
|
|
<h3 class="entry-label">Member Tidak Aktif</h3>
|
|
</div>
|
|
|
|
<div class="member-info">
|
|
|
|
<div class="info-row">
|
|
<span class="label">Nama</span>
|
|
<span id="exp-nama" class="value"></span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">No Polisi</span>
|
|
<span id="exp-nopol" class="value"></span>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="label">Periode</span>
|
|
<small id="exp-periode" class="value"></small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="status-warning">
|
|
Masa berlaku member telah berakhir.
|
|
</div>
|
|
<hr>
|
|
|
|
<div class="select-input">
|
|
<select id="produkSelect" class="form-control form-select">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<button class="btn-submit btn-renew">
|
|
PERPANJANG MEMBER
|
|
</button>
|
|
|
|
</div>
|
|
|
|
{{-- FORM NON MEMBER --}}
|
|
<div id="form-nonmember" style="display:none;">
|
|
<h3 class="entry-label">Bukan Member</h3>
|
|
|
|
<button class="btn-submit">
|
|
BUAT TIKET PARKIR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function(){
|
|
|
|
let input = document.getElementById("nopol");
|
|
let form = document.getElementById("formNopol");
|
|
const produk = @json($produk);
|
|
|
|
/* autofocus */
|
|
input.focus();
|
|
|
|
/* uppercase otomatis */
|
|
input.addEventListener("input", function(){
|
|
this.value = this.value.toUpperCase();
|
|
});
|
|
|
|
function submitNopol(){
|
|
|
|
let nopol = input.value.trim();
|
|
|
|
if(!nopol) return;
|
|
|
|
fetch("/api/member/" + encodeURIComponent(nopol))
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
/* sembunyikan semua form */
|
|
document.getElementById("form-input").style.display="none";
|
|
document.getElementById("form-active").style.display="none";
|
|
document.getElementById("form-expired").style.display="none";
|
|
document.getElementById("form-nonmember").style.display="none";
|
|
|
|
/* aktif */
|
|
if(data.status === "active"){
|
|
|
|
let jenisMobil = data.data.jenis_mobil;
|
|
let jLangganan = data.data.unit_kerja;
|
|
|
|
console.log(data);
|
|
document.getElementById("form-active").style.display="block";
|
|
document.getElementById("act-nama").innerText = data.data.nama;
|
|
document.getElementById("act-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
|
|
document.getElementById("act-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
|
|
// data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
|
|
renderProduk(jLangganan, jenisMobil);
|
|
|
|
}
|
|
|
|
/* expired */
|
|
else if(data.status === "expired"){
|
|
|
|
let jenisMobil = data.data.jenis_mobil;
|
|
let jLangganan = data.data.unit_kerja;
|
|
|
|
console.log(data);
|
|
document.getElementById("form-expired").style.display="block";
|
|
document.getElementById("exp-nama").innerText = data.data.nama;
|
|
document.getElementById("exp-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
|
|
document.getElementById("exp-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
|
|
// data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
|
|
|
|
// fetch("/memberin/" + encodeURIComponent(jLangganan))
|
|
// .then(res => res.json())
|
|
// .then(data => {
|
|
// console.log(res);
|
|
// });
|
|
console.log(produk);
|
|
renderProduk(jLangganan, jenisMobil);
|
|
|
|
}
|
|
|
|
/* bukan member */
|
|
else{
|
|
|
|
document.getElementById("form-nonmember").style.display="block";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function renderProduk(stasiunId, jenisMobil){
|
|
|
|
console.log(stasiunId);
|
|
console.log(jenisMobil);
|
|
let select = document.getElementById("produkSelect");
|
|
|
|
select.innerHTML = '<option value="">Pilih Produk</option>';
|
|
|
|
let filtered = produk.filter(p =>
|
|
p.stasiunkerja_id == stasiunId &&
|
|
p.id_mobil == jenisMobil
|
|
);
|
|
|
|
filtered.forEach(p => {
|
|
|
|
let option = document.createElement("option");
|
|
|
|
option.value = p.id_mobil;
|
|
option.textContent = p.jenis_langganan + " - Rp " + p.tarif;
|
|
|
|
select.appendChild(option);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function formatTanggal(tgl){
|
|
|
|
let parts = tgl.split('-');
|
|
|
|
return parts[2] + '-' + parts[1] + '-' + parts[0];
|
|
|
|
}
|
|
// input.addEventListener("keydown", function(e){
|
|
|
|
// if(e.key === "Enter"){
|
|
|
|
// e.preventDefault();
|
|
// submitNopol();
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
/* tombol submit */
|
|
form.addEventListener("submit", function(e){
|
|
|
|
e.preventDefault();
|
|
submitNopol();
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endsection |