496 lines
15 KiB
PHP
496 lines
15 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Konfirmasi Peminjaman | Pustaka Nawasena</title>
|
|
<link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--lib-navy: #0f172a;
|
|
--lib-gold: #b45309;
|
|
--lib-success: #10b981;
|
|
}
|
|
|
|
* { box-sizing: border-box; user-select: none; }
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url("{{ asset('images/utama.jpg') }}");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
.top-bar {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 4px solid var(--lib-gold);
|
|
padding: 0.5rem 3rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 90px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo-frame {
|
|
background: white;
|
|
border: 2px solid #e2e8f0;
|
|
padding: 6px 16px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.img-container { height: 45px; display: flex; align-items: center; }
|
|
.img-container img { height: 100%; width: auto; object-fit: contain; }
|
|
|
|
.main-content {
|
|
flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem 2rem;
|
|
}
|
|
|
|
.kiosk-card {
|
|
background: white;
|
|
width: 95%;
|
|
max-width: 1000px;
|
|
height: 65vh;
|
|
min-height: 500px;
|
|
border-radius: 2.5rem;
|
|
display: grid;
|
|
grid-template-columns: 0.8fr 1.2fr;
|
|
overflow: hidden;
|
|
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6);
|
|
animation: cardPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes cardPop {
|
|
from { opacity: 0; transform: scale(0.9) translateY(30px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
|
|
.visual-side {
|
|
background: var(--lib-navy);
|
|
padding: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-blob {
|
|
width: 100px; height: 100px;
|
|
background: rgba(16, 185, 129, 0.2);
|
|
border: 2px solid var(--lib-success);
|
|
border-radius: 40% 60% 70% 30% / 40% 50% 60% 70%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 2rem;
|
|
animation: blobby 10s infinite linear;
|
|
}
|
|
|
|
@keyframes blobby {
|
|
0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 70%; }
|
|
50% { border-radius: 60% 40% 30% 70% / 50% 60% 70% 40%; }
|
|
100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 70%; }
|
|
}
|
|
|
|
.data-side {
|
|
padding: 3rem 3.5rem;
|
|
display: flex; flex-direction: column; background: white;
|
|
}
|
|
|
|
.info-row {
|
|
margin-bottom: 1.25rem;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 10px; font-weight: 800; text-transform: uppercase;
|
|
letter-spacing: 0.15em; color: var(--lib-gold); margin-bottom: 4px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 1.25rem; font-weight: 700; color: var(--lib-navy); line-height: 1.2;
|
|
}
|
|
|
|
.note-box {
|
|
background: #fffbeb; border: 1px solid #fef3c7;
|
|
padding: 1rem; border-radius: 1rem;
|
|
display: flex; gap: 12px; margin-top: auto; margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.btn-action {
|
|
height: 55px; border-radius: 1rem; font-weight: 800;
|
|
text-transform: uppercase; letter-spacing: 0.1em;
|
|
transition: all 0.3s ease; display: flex; align-items: center;
|
|
justify-content: center; cursor: pointer; width: 100%; font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-confirm { background: var(--lib-success); color: white; border: none; }
|
|
.btn-confirm:hover { background: #059669; transform: translateY(-2px); }
|
|
|
|
.btn-cancel { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
|
|
.btn-cancel:hover { background: #fee2e2; color: #ef4444; }
|
|
|
|
.btn-hint {
|
|
font-size: 8px; color: #94a3b8; margin-top: 6px;
|
|
text-align: center; text-transform: uppercase; letter-spacing: 0.05em;
|
|
}
|
|
|
|
.lib-footer {
|
|
background: rgba(0, 0, 0, 0.9); color: rgba(255,255,255,0.4);
|
|
padding: 1.5rem 0.8rem 2.5rem; text-align: center; font-size: 0.7rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="top-bar">
|
|
<div class="logo-frame">
|
|
<div class="img-container"><img src="{{ asset('images/kartu.png') }}" alt="Logo"></div>
|
|
<div class="w-[1px] h-8 bg-slate-200"></div>
|
|
<div class="img-container"><img src="{{ asset('images/bakorwil.png') }}" alt="Logo"></div>
|
|
<div class="ml-2 pr-2">
|
|
<h1 class="text-slate-800 font-extrabold text-xl leading-none tracking-tighter uppercase">NAWASENA</h1>
|
|
<p class="text-orange-700 text-[9px] font-bold uppercase tracking-[0.2em] mt-1">Smart Library System</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<div id="clock" class="text-4xl font-black text-slate-800 tracking-tighter leading-none">00:00</div>
|
|
<div id="date" class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-2">Memuat...</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
<div class="kiosk-card">
|
|
<div class="visual-side">
|
|
<div class="success-blob">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-black mb-2 uppercase tracking-tight">Finalisasi<br>Peminjaman</h2>
|
|
<div class="w-12 h-1 bg-emerald-500 rounded-full mb-6"></div>
|
|
<p class="text-[11px] text-slate-400 leading-relaxed px-8 italic">
|
|
"Identitas valid. Silakan konfirmasi data peminjaman di sebelah kanan."
|
|
</p>
|
|
</div>
|
|
|
|
<div class="data-side">
|
|
<div id="data-container" class="flex-1">
|
|
</div>
|
|
|
|
<div class="note-box">
|
|
<div class="text-lg">⚠️</div>
|
|
<div class="text-[10px] text-amber-700 leading-relaxed font-medium">
|
|
Wajib membawa <strong>Kartu Identitas</strong> saat pengambilan fisik dan pastikan buku dikembalikan tepat waktu.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<div class="flex-1">
|
|
<!-- Pastikan onclick memanggil batalkan() -->
|
|
<button id="btn-batal" onclick="batalkan()" class="btn-action btn-cancel cursor-pointer">
|
|
✕ Batalkan
|
|
</button>
|
|
<p class="btn-hint">Hapus semua sesi</p>
|
|
</div>
|
|
<div class="flex-[1.5]">
|
|
<button id="btn-final" onclick="selesai()" class="btn-action btn-confirm">Selesaikan Transaksi ➔</button>
|
|
<p class="btn-hint font-bold text-emerald-600">Simpan ke database</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="lib-footer">
|
|
BAKORWIL III MALANG • SMART TERMINAL V4.2.0 • 2026
|
|
</footer>
|
|
<script>
|
|
// ===============================
|
|
// 1. CLOCK
|
|
// ===============================
|
|
function updateDateTime() {
|
|
|
|
const now = new Date();
|
|
|
|
document.getElementById('clock').textContent =
|
|
now.toLocaleTimeString('id-ID', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
|
|
document.getElementById('date').textContent =
|
|
now.toLocaleDateString('id-ID', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
|
|
setInterval(updateDateTime, 1000);
|
|
|
|
// ===============================
|
|
// 2. RENDER DATA
|
|
// ===============================
|
|
function renderConfirmation() {
|
|
|
|
const userData =
|
|
JSON.parse(localStorage.getItem('last_borrower') || '{}');
|
|
|
|
const bookData =
|
|
JSON.parse(localStorage.getItem('trx_buku') || '{}');
|
|
|
|
const backupData =
|
|
JSON.parse(localStorage.getItem('trx') || '{}');
|
|
|
|
const namaPeminjam =
|
|
userData.nama ||
|
|
backupData.nama_peminjam ||
|
|
"Nama Tidak Terdeteksi";
|
|
|
|
const judulBuku =
|
|
bookData.judul ||
|
|
backupData.judul ||
|
|
"Judul Tidak Terdeteksi";
|
|
|
|
const barcodeBuku =
|
|
bookData.barcode ||
|
|
backupData.barcode ||
|
|
"-";
|
|
|
|
const container =
|
|
document.getElementById('data-container');
|
|
|
|
if (container) {
|
|
|
|
container.innerHTML = `
|
|
<div class="space-y-4">
|
|
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
Nama Peminjam
|
|
</div>
|
|
|
|
<div class="info-value text-emerald-600 font-bold">
|
|
${namaPeminjam}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
Judul Koleksi
|
|
</div>
|
|
|
|
<div class="info-value font-medium">
|
|
${judulBuku}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
ID Barcode
|
|
</div>
|
|
|
|
<div class="info-value text-slate-500">
|
|
${barcodeBuku}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// ===============================
|
|
// 3. BATAL TRANSAKSI
|
|
// ===============================
|
|
async function batalkan() {
|
|
|
|
const btnBatal =
|
|
document.getElementById('btn-batal');
|
|
|
|
const btnFinal =
|
|
document.getElementById('btn-final');
|
|
|
|
if (!confirm(
|
|
"Apakah Anda yakin ingin membatalkan transaksi ini?"
|
|
)) return;
|
|
|
|
btnBatal.disabled = true;
|
|
btnFinal.disabled = true;
|
|
|
|
btnBatal.innerHTML =
|
|
"⏳ MEMBATALKAN...";
|
|
|
|
try {
|
|
|
|
await fetch('/api/esp/batalkan-transaksi');
|
|
|
|
localStorage.removeItem('last_borrower');
|
|
localStorage.removeItem('trx_buku');
|
|
localStorage.removeItem('trx');
|
|
|
|
window.location.href =
|
|
"/transaksi/scan-barcode";
|
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
window.location.href =
|
|
"/transaksi/scan-barcode";
|
|
}
|
|
}
|
|
|
|
// ===============================
|
|
// 4. SIMPAN / PINJAM
|
|
// ===============================
|
|
async function selesai() {
|
|
|
|
const btn =
|
|
document.getElementById('btn-final');
|
|
|
|
const btnBatal =
|
|
document.getElementById('btn-batal');
|
|
|
|
btn.disabled = true;
|
|
|
|
if (btnBatal) {
|
|
btnBatal.disabled = true;
|
|
}
|
|
|
|
btn.innerHTML =
|
|
"⏳ MEMPROSES...";
|
|
|
|
try {
|
|
|
|
const response =
|
|
await fetch('/api/esp/konfirmasi-pinjam');
|
|
|
|
const result =
|
|
await response.json();
|
|
|
|
console.log(result);
|
|
|
|
/*
|
|
==========================================
|
|
QUEUE SUCCESS
|
|
==========================================
|
|
*/
|
|
|
|
if (
|
|
result.status === 'queued' ||
|
|
result.status === 'diproses' ||
|
|
result.status === 'berhasil_pinjam'
|
|
) {
|
|
|
|
const user =
|
|
JSON.parse(
|
|
localStorage.getItem('last_borrower') || '{}'
|
|
);
|
|
|
|
const book =
|
|
JSON.parse(
|
|
localStorage.getItem('trx_buku') || '{}'
|
|
);
|
|
|
|
const payloadStruk = {
|
|
|
|
nama:
|
|
user.nama || "Anggota",
|
|
|
|
judul:
|
|
book.judul || "Buku",
|
|
|
|
tanggal:
|
|
new Date().toLocaleDateString('id-ID')
|
|
};
|
|
|
|
localStorage.setItem(
|
|
'nawasena_hasil_akhir',
|
|
JSON.stringify(payloadStruk)
|
|
);
|
|
|
|
localStorage.setItem(
|
|
'nawasena_status',
|
|
'processing'
|
|
);
|
|
|
|
// redirect
|
|
window.location.href =
|
|
"/transaksi/peminjaman-berhasil";
|
|
|
|
return;
|
|
}
|
|
|
|
/*
|
|
==========================================
|
|
ERROR
|
|
==========================================
|
|
*/
|
|
|
|
alert(
|
|
"Gagal menyimpan: " +
|
|
(result.message || "Terjadi kesalahan")
|
|
);
|
|
|
|
btn.disabled = false;
|
|
|
|
if (btnBatal) {
|
|
btnBatal.disabled = false;
|
|
}
|
|
|
|
btn.innerHTML = "LANJUTKAN";
|
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
alert(
|
|
"Terjadi masalah koneksi ke server."
|
|
);
|
|
|
|
btn.disabled = false;
|
|
|
|
if (btnBatal) {
|
|
btnBatal.disabled = false;
|
|
}
|
|
|
|
btn.innerHTML = "LANJUTKAN";
|
|
}
|
|
}
|
|
|
|
// ===============================
|
|
// INIT
|
|
// ===============================
|
|
window.onload = () => {
|
|
|
|
updateDateTime();
|
|
|
|
renderConfirmation();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|