299 lines
14 KiB
PHP
299 lines
14 KiB
PHP
<x-app-layout>
|
|
@section('page-title', $pageTitle)
|
|
|
|
<div class="d-flex align-items-center mb-4">
|
|
<a href="{{ route('admin.peminjaman.index') }}" class="btn btn-outline-secondary me-3">
|
|
<i class="bi bi-arrow-left"></i>
|
|
</a>
|
|
<h3 class="my-0 fw-bold">Formulir Peminjaman Manual</h3>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.peminjaman.store') }}" method="POST" id="formPeminjaman" autocomplete="off"> @csrf
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<strong>Terjadi kesalahan:</strong>
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
<div class="row g-4">
|
|
|
|
<div class="col-lg-7">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-4">
|
|
|
|
<h5 class="fw-bold mb-3">Data Peminjaman</h5>
|
|
<div class="mb-3">
|
|
<label for="peminjam_id" class="form-label">Pilih Peminjam (Siswa/Guru)</label>
|
|
|
|
<select class="form-control" id="peminjam_id" name="peminjam_id"
|
|
placeholder="Cari nama atau email...">
|
|
<option value="">Pilih...</option>
|
|
@foreach ($groupedUsers as $role => $users)
|
|
<optgroup label="{{ ucfirst($role) }}">
|
|
@foreach ($users as $user)
|
|
{{-- Logic Disable User --}}
|
|
<option value="{{ $user['id'] }}"
|
|
{{ $user['disabled'] ? 'disabled' : '' }}>
|
|
{{ $user['nama_lengkap'] }} {{ $user['status_text'] }}
|
|
</option>
|
|
@endforeach
|
|
</optgroup>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="tanggal_pinjam" class="form-label">Tanggal Pinjam</label>
|
|
<input type="text" class="form-control" id="tanggal_pinjam" name="tanggal_pinjam"
|
|
placeholder="Pilih tanggal pinjam">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="tanggal_kembali" class="form-label">Tenggat Kembali</label>
|
|
<input type="text" class="form-control" id="tanggal_kembali" name="tanggal_kembali"
|
|
placeholder="Pilih tenggat kembali">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="fw-bold m-0">Buku Terpilih</h5>
|
|
<span class="badge bg-primary-soft" id="counterBuku">0 Buku</span>
|
|
</div>
|
|
|
|
<div id="daftarBukuPinjam" class="mb-3">
|
|
<div id="emptyStateBuku" class="text-center text-muted py-4">
|
|
<i class="bi bi-collection fs-1" style="opacity: 0.25;"></i>
|
|
<p class="mb-0 mt-2">Belum ada buku yang dipilih.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hiddenInputs"></div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-save me-1"></i> Simpan Peminjaman
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white py-3">
|
|
<h5 class="fw-bold m-0">Pilih Buku</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
|
|
<input type="text" class="form-control border-start-0" id="searchBuku"
|
|
placeholder="Cari judul atau penulis...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bookSelectionList" style="max-height: 600px; overflow-y: auto;">
|
|
@foreach ($daftarBuku as $buku)
|
|
<div class="book-option p-2" data-book-id="{{ $buku['id'] }}"
|
|
data-book-title="{{ strtolower($buku['judul']) }}"
|
|
data-book-author="{{ strtolower($buku['penulis']) }}"
|
|
data-book-cover="{{ asset($buku['cover']) }}"
|
|
data-book-kategori="{{ $buku['kategori'] }}">
|
|
|
|
<div class="d-flex align-items-center book-item-list"
|
|
onclick="toggleBookSelection(this, {{ $buku['id'] }})"
|
|
style="cursor: pointer;">
|
|
<img src="{{ asset($buku['cover']) }}" alt="Cover" class="rounded me-3"
|
|
style="width: 50px; height: 70px; object-fit: cover;">
|
|
<div class="flex-grow-1">
|
|
<h6 class="fw-bold mb-1 line-clamp-2">{{ $buku['judul'] }}</h6>
|
|
<p class="text-muted small mb-1">{{ $buku['penulis'] }}</p>
|
|
<span class="badge bg-info-soft">{{ $buku['kategori'] }}</span>
|
|
</div>
|
|
<div class="form-check ms-3">
|
|
<input class="form-check-input book-checkbox" type="checkbox"
|
|
value="{{ $buku['id'] }}" id="book-check-{{ $buku['id'] }}"
|
|
style="pointer-events: none;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const tomSelect = new TomSelect("#peminjam_id", {
|
|
create: false,
|
|
sortField: {
|
|
field: "text",
|
|
direction: "asc"
|
|
}
|
|
});
|
|
|
|
const tglPinjam = flatpickr("#tanggal_pinjam", {
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
altFormat: "d/m/Y",
|
|
defaultDate: "today",
|
|
locale: "id",
|
|
onChange: function(selectedDates, dateStr) {
|
|
if (selectedDates.length > 0) {
|
|
tglKembali.set("minDate", new Date(selectedDates[0]).fp_incr(1));
|
|
}
|
|
}
|
|
});
|
|
|
|
const tglKembali = flatpickr("#tanggal_kembali", {
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
altFormat: "d/m/Y",
|
|
defaultDate: new Date().fp_incr(7),
|
|
locale: "id",
|
|
minDate: new Date().fp_incr(1)
|
|
});
|
|
|
|
|
|
// Logika Pemilihan Buku
|
|
const MAX_BOOKS = 2;
|
|
let selectedBookIds = new Set();
|
|
const allBooks = new Map();
|
|
document.querySelectorAll('.book-option').forEach(el => {
|
|
const id = el.dataset.bookId;
|
|
allBooks.set(id, {
|
|
id: id,
|
|
title: el.querySelector('h6').textContent,
|
|
author: el.querySelector('p').textContent,
|
|
cover: el.dataset.bookCover
|
|
});
|
|
});
|
|
|
|
const daftarBukuPinjamEl = document.getElementById('daftarBukuPinjam');
|
|
const hiddenInputsEl = document.getElementById('hiddenInputs');
|
|
const counterBukuEl = document.getElementById('counterBuku');
|
|
const emptyStateBukuEl = document.getElementById('emptyStateBuku');
|
|
|
|
// Fungsi render
|
|
function renderSelectedBooks() {
|
|
daftarBukuPinjamEl.querySelectorAll('.selected-book-item').forEach(el => el.remove());
|
|
hiddenInputsEl.innerHTML = '';
|
|
|
|
if (selectedBookIds.size === 0) {
|
|
emptyStateBukuEl.style.display = 'block';
|
|
} else {
|
|
emptyStateBukuEl.style.display = 'none';
|
|
}
|
|
|
|
selectedBookIds.forEach(id => {
|
|
const book = allBooks.get(String(id));
|
|
if (!book) return;
|
|
|
|
const itemHtml = `
|
|
<div class="selected-book-item book-item d-flex align-items-start p-3 mb-2 rounded" data-selected-id="${id}">
|
|
<img src="${book.cover}" alt="Cover" class="rounded me-3" style="width: 45px; height: 60px; object-fit: cover;">
|
|
<div class="flex-grow-1">
|
|
<h6 class="fw-bold mb-0 line-clamp-1">${book.title}</h6>
|
|
<p class="text-muted small mb-0">${book.author}</p>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-danger remove-book" onclick="removeBook(${id})">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
daftarBukuPinjamEl.insertAdjacentHTML('beforeend', itemHtml);
|
|
|
|
const inputHtml = `<input type="hidden" name="buku_ids[]" value="${id}">`;
|
|
hiddenInputsEl.insertAdjacentHTML('beforeend', inputHtml);
|
|
});
|
|
|
|
counterBukuEl.textContent = `${selectedBookIds.size} Buku`;
|
|
}
|
|
|
|
// Fungsi search
|
|
const searchBukuInput = document.getElementById('searchBuku');
|
|
searchBukuInput.addEventListener('keyup', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
document.querySelectorAll('.book-option').forEach(el => {
|
|
const title = el.dataset.bookTitle;
|
|
const author = el.dataset.bookAuthor;
|
|
if (title.includes(searchTerm) || author.includes(searchTerm)) {
|
|
el.style.display = 'block';
|
|
} else {
|
|
el.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Global function untuk toggle selection
|
|
window.toggleBookSelection = function(itemElement, id) {
|
|
const checkbox = itemElement.querySelector('.book-checkbox');
|
|
const stringId = String(id);
|
|
|
|
if (selectedBookIds.has(stringId)) {
|
|
selectedBookIds.delete(stringId);
|
|
checkbox.checked = false;
|
|
itemElement.style.background = 'transparent';
|
|
} else {
|
|
if (selectedBookIds.size >= MAX_BOOKS) {
|
|
alert(`Maaf, Anda hanya dapat memilih maksimal ${MAX_BOOKS} buku.`);
|
|
return;
|
|
}
|
|
|
|
selectedBookIds.add(stringId);
|
|
checkbox.checked = true;
|
|
itemElement.style.background = 'rgba(var(--bs-primary-rgb), 0.05)';
|
|
}
|
|
renderSelectedBooks();
|
|
}
|
|
|
|
// Global function untuk remove
|
|
window.removeBook = function(id) {
|
|
const stringId = String(id);
|
|
selectedBookIds.delete(stringId);
|
|
|
|
const itemElement = document.querySelector(
|
|
`.book-option[data-book-id="${id}"] .book-item-list`);
|
|
if (itemElement) {
|
|
itemElement.querySelector('.book-checkbox').checked = false;
|
|
itemElement.style.background = 'transparent';
|
|
}
|
|
|
|
renderSelectedBooks();
|
|
}
|
|
|
|
const form = document.getElementById('formPeminjaman');
|
|
form.reset();
|
|
|
|
tomSelect.clear();
|
|
|
|
tglPinjam.setDate("today", false);
|
|
tglKembali.setDate(new Date().fp_incr(7), false);
|
|
|
|
selectedBookIds.clear();
|
|
|
|
document.querySelectorAll('.book-option').forEach(el => {
|
|
el.querySelector('.book-checkbox').checked = false;
|
|
el.querySelector('.book-item-list').style.background = 'transparent';
|
|
});
|
|
|
|
renderSelectedBooks();
|
|
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|