327 lines
19 KiB
PHP
327 lines
19 KiB
PHP
<x-app-layout>
|
|
@section('page-title', $pageTitle)
|
|
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="my-0 fw-bold">Daftar Buku</h5>
|
|
<a href="{{ route('admin.buku.create') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle-fill me-2"></i>Tambah Buku
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="nav nav-tabs" id="bukuTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="offline-tab" data-bs-toggle="tab" data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span id="countOffline">{{ $bukuOffline->count() }}</span>)</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane" type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count() }}</span>)</button>
|
|
</li>
|
|
{{-- TAB BARU KHUSUS ARSIP --}}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link text-warning" id="arsip-tab" data-bs-toggle="tab" data-bs-target="#arsip-tab-pane" type="button" role="tab"><i class="bi bi-archive-fill me-1"></i>Diarsipkan (<span id="countArsip">0</span>)</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="bukuTabContent">
|
|
{{-- TAB UNTUK BUKU OFFLINE --}}
|
|
<div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
|
|
<div class="table-responsive mt-3">
|
|
<table class="table table-hover align-middle" id="tableOffline">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Cover</th>
|
|
<th>Judul</th>
|
|
<th>Kode Buku</th>
|
|
<th>Penulis</th>
|
|
<th>Stok</th>
|
|
<th>Status</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($bukuOffline as $buku)
|
|
<tr data-tipe="offline">
|
|
<td class="row-number">{{ $loop->iteration }}</td>
|
|
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
|
|
<td class="fw-bold">{{ $buku['judul'] }}</td>
|
|
<td>{{ $buku['kode_buku'] }}</td>
|
|
<td>{{ $buku['penulis'] }}</td>
|
|
<td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td>
|
|
<td>
|
|
@if ($buku['status'] == 'Tersedia')
|
|
<span class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
|
|
@else
|
|
<span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center gap-2 aksi-buttons">
|
|
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
|
|
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
|
|
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
|
|
data-kode_buku="{{ $buku['kode_buku'] }}" data-penulis="{{ $buku['penulis'] }}"
|
|
data-kategori="{{ $buku['kategori'] }}" data-tahun="{{ $buku['tahun'] }}"
|
|
data-status="{{ $buku['status'] }}">
|
|
<i class="bi bi-eye-fill"></i> Detail
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning btn-arsipkan"
|
|
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
|
|
<i class="bi bi-archive-fill"></i> Arsip
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr class="empty-row"><td colspan="8" class="text-center py-4">Tidak ada data buku offline.</td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TAB UNTUK BUKU ONLINE --}}
|
|
<div class="tab-pane fade" id="online-tab-pane" role="tabpanel">
|
|
<div class="table-responsive mt-3">
|
|
<table class="table table-hover align-middle" id="tableOnline">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Cover</th>
|
|
<th>Judul</th>
|
|
<th>Penulis</th>
|
|
<th>File PDF</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($bukuOnline as $buku)
|
|
<tr data-tipe="online">
|
|
<td class="row-number">{{ $loop->iteration }}</td>
|
|
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
|
|
<td class="fw-bold">{{ $buku['judul'] }}</td>
|
|
<td>{{ $buku['penulis'] }}</td>
|
|
<td><span class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span></td>
|
|
<td>
|
|
<div class="d-flex justify-content-center gap-2 aksi-buttons">
|
|
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
|
|
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
|
|
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
|
|
data-penulis="{{ $buku['penulis'] }}" data-kategori="{{ $buku['kategori'] }}"
|
|
data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online">
|
|
<i class="bi bi-eye-fill"></i> Detail
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning btn-arsipkan"
|
|
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
|
|
<i class="bi bi-archive-fill"></i> Arsip
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr class="empty-row"><td colspan="6" class="text-center py-4">Tidak ada data buku online.</td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TAB UNTUK ARSIP --}}
|
|
<div class="tab-pane fade" id="arsip-tab-pane" role="tabpanel">
|
|
<div class="table-responsive mt-3">
|
|
<table class="table table-hover align-middle" id="tableArsip">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Cover</th>
|
|
<th>Judul</th>
|
|
<th>Penulis</th>
|
|
<th>Tipe</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="empty-row-arsip"><td colspan="6" class="text-center py-4 text-muted"><i class="bi bi-inbox fs-4 d-block mb-2"></i>Belum ada buku yang diarsipkan.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- MODAL DETAIL BUKU --}}
|
|
<div class="modal fade" id="detailBukuModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-4 text-center mb-4 mb-md-0">
|
|
<img src="" id="modalCover" class="img-fluid rounded shadow mx-auto d-block" style="max-height: 250px; object-fit: cover;" alt="Cover Buku">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h3 id="modalJudulContent" class="fw-bold text-dark"></h3>
|
|
<p class="text-muted mb-4" id="modalPenulis"></p>
|
|
<table class="table table-sm table-borderless">
|
|
<tr><th width="120px" class="text-black">Kategori</th><td id="modalKategori" class="fw-semibold"></td></tr>
|
|
<tr id="rowKodeBuku"><th class="text-black">Kode Buku</th><td id="modalKode_buku" class="fw-semibold"></td></tr>
|
|
<tr><th class="text-black">Tahun Terbit</th><td id="modalTahun" class="fw-semibold"></td></tr>
|
|
<tr><th class="text-black">Status</th><td><span id="modalStatus" class="badge"></span></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<a href="#" id="modalEditButton" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// LOGIC UNTUK MODAL DETAIL
|
|
const detailBukuModal = document.getElementById('detailBukuModal');
|
|
if (detailBukuModal) {
|
|
detailBukuModal.addEventListener('show.bs.modal', event => {
|
|
const button = event.relatedTarget;
|
|
|
|
const id = button.getAttribute('data-id');
|
|
const cover = button.getAttribute('data-cover');
|
|
const judul = button.getAttribute('data-judul');
|
|
const kode_buku = button.getAttribute('data-kode_buku');
|
|
const penulis = button.getAttribute('data-penulis');
|
|
const kategori = button.getAttribute('data-kategori');
|
|
const tahun = button.getAttribute('data-tahun');
|
|
const status = button.getAttribute('data-status');
|
|
|
|
const editUrl = `{{ url('admin/buku') }}/${id}/edit`;
|
|
|
|
const modalJudul = detailBukuModal.querySelector('#modalJudul');
|
|
const modalCover = detailBukuModal.querySelector('#modalCover');
|
|
const modalKode_buku = detailBukuModal.querySelector('#modalKode_buku');
|
|
const modalJudulContent = detailBukuModal.querySelector('#modalJudulContent');
|
|
const modalPenulis = detailBukuModal.querySelector('#modalPenulis');
|
|
const modalKategori = detailBukuModal.querySelector('#modalKategori');
|
|
const modalTahun = detailBukuModal.querySelector('#modalTahun');
|
|
const modalStatus = detailBukuModal.querySelector('#modalStatus');
|
|
const modalEditButton = detailBukuModal.querySelector('#modalEditButton');
|
|
const rowKodeBuku = detailBukuModal.querySelector('#rowKodeBuku');
|
|
|
|
modalJudul.textContent = judul;
|
|
modalCover.src = cover;
|
|
modalJudulContent.textContent = judul;
|
|
modalPenulis.textContent = `oleh ${penulis}`;
|
|
modalKategori.textContent = `: ${kategori}`;
|
|
modalTahun.textContent = `: ${tahun}`;
|
|
modalStatus.textContent = status;
|
|
modalEditButton.href = editUrl;
|
|
|
|
if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
|
|
rowKodeBuku.style.display = '';
|
|
modalKode_buku.textContent = `: ${kode_buku}`;
|
|
} else {
|
|
rowKodeBuku.style.display = 'none';
|
|
}
|
|
|
|
if (status === 'Tersedia' || status === 'Dapat Dibaca Online') {
|
|
modalStatus.className = 'badge bg-success-subtle text-success-emphasis';
|
|
} else {
|
|
modalStatus.className = 'badge bg-warning-subtle text-warning-emphasis';
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateTableNumbers() {
|
|
let countOffline = 0;
|
|
$('#tableOffline tbody tr').not('.empty-row').each(function(index) {
|
|
$(this).find('.row-number').text(index + 1);
|
|
countOffline++;
|
|
});
|
|
$('#countOffline').text(countOffline);
|
|
|
|
let countOnline = 0;
|
|
$('#tableOnline tbody tr').not('.empty-row').each(function(index) {
|
|
$(this).find('.row-number').text(index + 1);
|
|
countOnline++;
|
|
});
|
|
$('#countOnline').text(countOnline);
|
|
|
|
let countArsip = 0;
|
|
$('#tableArsip tbody tr').not('.empty-row-arsip').each(function(index) {
|
|
$(this).find('.row-number').text(index + 1);
|
|
countArsip++;
|
|
});
|
|
$('#countArsip').text(countArsip);
|
|
|
|
if(countArsip === 0) {
|
|
$('.empty-row-arsip').show();
|
|
} else {
|
|
$('.empty-row-arsip').hide();
|
|
}
|
|
}
|
|
|
|
// LOGIC UNTUK TOMBOL ARSIPKAN
|
|
$(document).on('click', '.btn-arsipkan', function() {
|
|
const judul = $(this).data('judul');
|
|
const row = $(this).closest('tr');
|
|
const coverHtml = row.find('td:eq(1)').html();
|
|
const tipe = row.data('tipe');
|
|
const penulis = tipe === 'offline' ? row.find('td:eq(4)').text() : row.find('td:eq(3)').text();
|
|
|
|
modernSwal.fire({
|
|
title: 'Arsipkan Buku?',
|
|
text: `Apakah Anda yakin ingin mengarsipkan buku "${judul}"?`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Ya, Arsipkan!',
|
|
cancelButtonText: 'Batal',
|
|
confirmButtonColor: '#ffc107',
|
|
cancelButtonColor: '#6c757d'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
modernSwal.fire({
|
|
title: 'Memproses...',
|
|
timer: 800,
|
|
didOpen: () => Swal.showLoading()
|
|
}).then(() => {
|
|
Toast.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
text: `Buku "${judul}" telah dipindahkan ke Arsip.`
|
|
});
|
|
|
|
let badgeTipe = tipe === 'offline' ? '<span class="badge bg-secondary">Offline</span>' : '<span class="badge bg-info">Online</span>';
|
|
let newRow = `
|
|
<tr>
|
|
<td class="row-number"></td>
|
|
<td>${coverHtml}</td>
|
|
<td class="fw-bold text-muted">${judul}</td>
|
|
<td class="text-muted">${penulis}</td>
|
|
<td>${badgeTipe}</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-warning"><i class="bi bi-archive-fill me-1"></i>Diarsipkan</span>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
row.fadeOut('slow', function() {
|
|
$(this).remove();
|
|
$('#tableArsip tbody').append(newRow);
|
|
updateTableNumbers();
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |