146 lines
6.8 KiB
PHP
146 lines
6.8 KiB
PHP
@section('page-title', $pageTitle)
|
|
<x-app-layout>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white py-3">
|
|
<h5 class="mb-0 fw-bold">{{ $pageTitle }}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">NO</th>
|
|
<th scope="col">ID PEMINJAMAN</th>
|
|
<th scope="col">JUDUL BUKU</th>
|
|
<th scope="col">TANGGAL PINJAM</th>
|
|
<th scope="col">TANGGAL KEMBALI</th>
|
|
<th scope="col">STATUS</th>
|
|
<th scope="col">AKSI</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php $counter = 1; @endphp
|
|
@forelse ($riwayatOffline as $transaksi)
|
|
@foreach ($transaksi['books'] as $buku)
|
|
<tr>
|
|
<td>{{ $counter++ }}</td>
|
|
<td>{{ $transaksi['id_peminjaman'] }}</td>
|
|
<td>{{ $buku['judul'] }}</td>
|
|
<td>{{ $transaksi['tanggal_pinjam'] }}</td>
|
|
<td>{{ $transaksi['tanggal_kembali'] }}</td>
|
|
<td>
|
|
@if ($transaksi['status'] == 'Dikembalikan')
|
|
<span
|
|
class="badge rounded-pill bg-success">{{ $transaksi['status'] }}</span>
|
|
@else
|
|
<span
|
|
class="badge rounded-pill bg-warning text-dark">{{ $transaksi['status'] }}</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-info btn-sm text-white" data-bs-toggle="modal"
|
|
data-bs-target="#detailModal" data-transaksi-id="{{ $transaksi['id'] }}"
|
|
data-buku-id="{{ $buku['id'] }}">
|
|
Detail
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="text-center">Tidak ada riwayat peminjaman.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- MODAL DETAIL RIWAYAT --}}
|
|
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content border-0 shadow-lg">
|
|
<div class="modal-header bg-light">
|
|
<h5 class="modal-title fw-bold" id="detailModalLabel"><i
|
|
class="bi bi-book-half me-2 text-primary"></i>Detail Riwayat</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-4">
|
|
<div id="modal-content-placeholder" class="text-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const riwayatOfflineData = @json($riwayatOffline);
|
|
const detailModal = document.getElementById('detailModal');
|
|
|
|
detailModal.addEventListener('show.bs.modal', event => {
|
|
const button = event.relatedTarget;
|
|
const transaksiId = button.getAttribute('data-transaksi-id');
|
|
const bukuId = button.getAttribute('data-buku-id');
|
|
const modalBody = detailModal.querySelector('#modal-content-placeholder');
|
|
const modalTitle = detailModal.querySelector('#detailModalLabel');
|
|
|
|
const transaksiItem = riwayatOfflineData.find(item => item.id == transaksiId);
|
|
if (!transaksiItem) return;
|
|
|
|
const buku = transaksiItem.books.find(b => b.id == bukuId);
|
|
if (!buku) return;
|
|
|
|
modalTitle.textContent = `Detail Buku`;
|
|
|
|
const keteranganHtml = buku.keterangan ?
|
|
`
|
|
<tr>
|
|
<td class="fw-bold align-text-top">Keterangan</td>
|
|
<td class="align-text-top">:</td>
|
|
<td class="text-start">${buku.keterangan}</td>
|
|
</tr>
|
|
` : '';
|
|
|
|
const contentHTML = `
|
|
<div class="text-center mb-4">
|
|
<img src="{{ asset('${buku.cover}') }}" alt="Cover ${buku.judul}" class="img-fluid rounded shadow-sm" style="max-width: 150px;">
|
|
</div>
|
|
|
|
<h4 class="fw-bold text-center">${buku.judul}</h4>
|
|
<p class="text-muted text-center">${buku.deskripsi}</p>
|
|
|
|
<hr class="my-4">
|
|
|
|
<table class="table table-borderless table-sm">
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-bold" style="width: 35%;">ID Peminjaman</td>
|
|
<td style="width: 5%;">:</td>
|
|
<td class="text-start">${transaksiItem.id_peminjaman}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Kategori Buku</td>
|
|
<td>:</td>
|
|
<td class="text-start"><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill px-3 py-2">${buku.kategori}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Tahun Terbit</td>
|
|
<td>:</td>
|
|
<td class="text-start">${buku.tahun}</td>
|
|
</tr>
|
|
${keteranganHtml}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
|
|
modalBody.innerHTML = contentHTML;
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|