250 lines
11 KiB
PHP
250 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<!-- CDNs for icons, TomSelect and sweetalert -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<style>
|
|
/* TomSelect Custom Styling matching dashboard */
|
|
.ts-control {
|
|
border: 1px solid #d1d5db !important;
|
|
background-color: #ffffff !important;
|
|
border-radius: 0.5rem !important;
|
|
padding: 0.75rem 1rem !important;
|
|
font-size: 0.875rem !important;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
.ts-control.focus {
|
|
border-color: #3b82f6 !important;
|
|
box-shadow: 0 0 0 1px #3b82f6 !important;
|
|
}
|
|
.ts-control input {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
|
<div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
|
|
<div class="p-6 bg-blue-50 border-b border-blue-100">
|
|
<h1 class="text-2xl font-extrabold text-blue-900">Formulir Peminjaman Aset</h1>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
|
|
<p class="font-bold">Validasi Gagal</p>
|
|
<ul class="list-disc ml-5">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('admin.peminjaman.store') }}" method="POST" class="p-6 space-y-6" id="form-peminjaman">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Pilih Anggota / Member</label>
|
|
<select name="id_anggota"
|
|
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">-- Pilih Member --</option>
|
|
@foreach ($anggota as $a)
|
|
<option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
|
|
{{ $a->nama }} ({{ $a->no_identitas }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Pilih Buku Utama (Pindai Barcode / Cari Judul)</label>
|
|
<select name="id_buku" id="select-buku-peminjaman" required>
|
|
<option value="">-- Pilih Buku Pertama --</option>
|
|
@foreach ($buku as $b)
|
|
<option value="{{ $b->id_buku }}" data-bibid="{{ $b->bibid }}" {{ old('id_buku') == $b->id_buku ? 'selected' : '' }}>
|
|
{{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Pilih Buku Kedua (Opsional)</label>
|
|
<select name="id_buku_2" id="select-buku-peminjaman-2">
|
|
<option value="">-- Pilih Buku Kedua (Kosongkan jika hanya 1) --</option>
|
|
@foreach ($buku as $b)
|
|
<option value="{{ $b->id_buku }}" data-bibid="{{ $b->bibid }}" {{ old('id_buku_2') == $b->id_buku ? 'selected' : '' }}>
|
|
{{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Pinjam</label>
|
|
<input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}"
|
|
min="2000-01-01" max="2100-12-31"
|
|
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Kembali (Tenggat)</label>
|
|
<input type="date" name="tanggal_kembali"
|
|
value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}"
|
|
min="2000-01-01" max="2100-12-31"
|
|
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-6 border-t border-gray-100 flex justify-between items-center">
|
|
<a href="{{ route('admin.peminjaman.index') }}"
|
|
class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">Batal</a>
|
|
<button type="submit" id="btn-submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
|
|
Eksekusi Transaksi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('form-peminjaman').addEventListener('submit', function() {
|
|
const btn = document.getElementById('btn-submit');
|
|
btn.disabled = true;
|
|
btn.innerHTML = 'Memproses...';
|
|
btn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
});
|
|
|
|
let scanBuffer = "";
|
|
let lastKeyTime = Date.now();
|
|
|
|
// Global barcode scan detection
|
|
document.addEventListener('keypress', function(e) {
|
|
const target = e.target;
|
|
|
|
if (target.tagName === 'INPUT' && target.type !== 'submit' && target.type !== 'button' && target.type !== 'checkbox' && target.type !== 'radio') {
|
|
if (!target.classList.contains('ts-control') && !target.closest('.ts-wrapper')) {
|
|
return;
|
|
}
|
|
}
|
|
if (target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
|
|
return;
|
|
}
|
|
|
|
const currentTime = Date.now();
|
|
|
|
if (currentTime - lastKeyTime > 100) {
|
|
scanBuffer = "";
|
|
}
|
|
|
|
lastKeyTime = currentTime;
|
|
|
|
if (e.key === 'Enter') {
|
|
if (scanBuffer.length >= 2) {
|
|
e.preventDefault();
|
|
const cleanCode = scanBuffer.trim();
|
|
handleGlobalScan(cleanCode);
|
|
scanBuffer = "";
|
|
}
|
|
} else {
|
|
if (e.key.length === 1) {
|
|
scanBuffer += e.key;
|
|
}
|
|
}
|
|
});
|
|
|
|
function handleGlobalScan(bibid) {
|
|
const select1 = document.getElementById('select-buku-peminjaman');
|
|
const select2 = document.getElementById('select-buku-peminjaman-2');
|
|
|
|
if (!select1) return;
|
|
|
|
function findVal(selectEl) {
|
|
const options = selectEl.options;
|
|
for (let i = 0; i < options.length; i++) {
|
|
if (options[i].getAttribute('data-bibid') === bibid) {
|
|
return { value: options[i].value, text: options[i].text };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const item = findVal(select1);
|
|
if (!item) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Buku Tidak Ditemukan',
|
|
text: 'Kode buku "' + bibid + '" tidak terdaftar atau tidak tersedia.',
|
|
timer: 2000,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
return;
|
|
}
|
|
|
|
let targetSelect = null;
|
|
if (select1.tomselect && !select1.tomselect.getValue()) {
|
|
targetSelect = select1;
|
|
} else if (select2 && select2.tomselect && !select2.tomselect.getValue()) {
|
|
targetSelect = select2;
|
|
} else {
|
|
targetSelect = select1;
|
|
}
|
|
|
|
if (targetSelect && targetSelect.tomselect) {
|
|
const otherSelect = (targetSelect === select1) ? select2 : select1;
|
|
if (otherSelect && otherSelect.tomselect && otherSelect.tomselect.getValue() === item.value) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Buku Sudah Dipilih',
|
|
text: 'Buku ini sudah dipilih pada slot lainnya.',
|
|
timer: 2000,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
return;
|
|
}
|
|
|
|
targetSelect.tomselect.setValue(item.value);
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Buku Berhasil Dipilih',
|
|
text: item.text,
|
|
timer: 1500,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize TomSelect for books
|
|
const ts1 = new TomSelect('#select-buku-peminjaman', { maxOptions: null });
|
|
const ts2 = new TomSelect('#select-buku-peminjaman-2', { maxOptions: null });
|
|
|
|
// Focus on first book dropdown
|
|
setTimeout(() => {
|
|
ts1.focus();
|
|
}, 100);
|
|
|
|
// Prevent Enter key from submitting form on text/select inputs
|
|
const forms = document.querySelectorAll('form');
|
|
forms.forEach(form => {
|
|
form.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' && e.target.tagName !== 'BUTTON' && e.target.type !== 'submit') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|