103 lines
5.2 KiB
PHP
103 lines
5.2 KiB
PHP
<x-app-layout>
|
|
<!-- Header Halaman -->
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">Katalog Buku</h1>
|
|
</div>
|
|
|
|
<!-- Filter & Pencarian -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<form action="{{ route('katalog') }}" method="GET">
|
|
<div class="row g-3 align-items-center">
|
|
<div class="col-md-4">
|
|
<input type="text" name="search" class="form-control"
|
|
placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="kategori" class="form-select">
|
|
<option value="">Semua Kategori</option>
|
|
@foreach ($filterOptions['kategori'] as $kategori)
|
|
<option value="{{ $kategori }}"
|
|
{{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="tahun" class="form-select">
|
|
<option value="">Semua Tahun</option>
|
|
@foreach ($filterOptions['tahun'] as $tahun)
|
|
<option value="{{ $tahun }}"
|
|
{{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select name="penulis" class="form-select">
|
|
<option value="">Semua Penulis</option>
|
|
@foreach ($filterOptions['penulis'] as $penulis)
|
|
<option value="{{ $penulis }}"
|
|
{{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 d-grid">
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daftar Buku -->
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
|
|
@forelse ($semuaBuku as $buku)
|
|
<div class="col">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
|
|
style="height: 310px;" alt="Cover {{ $buku['judul'] }}">
|
|
|
|
<div class="card-body d-flex flex-column p-3">
|
|
<div class="flex-grow-1">
|
|
<div class="mb-2">
|
|
<span class="badge fw-normal bg-light text-dark border me-1">{{ $buku['kategori'] }}</span>
|
|
<span
|
|
class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
|
|
</div>
|
|
<h5 class="card-title fw-bold ">{{ $buku['judul'] }}</h5>
|
|
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
|
|
</div>
|
|
|
|
|
|
<div class="d-grid mt-auto">
|
|
@if ($buku['status'] == 'Dipinjam')
|
|
<button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i>
|
|
Tidak Tersedia</button>
|
|
@else
|
|
@if ($buku['tipe_akses'] == 'online')
|
|
<button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca
|
|
Online</button>
|
|
@else
|
|
<button class="btn btn-outline-primary btn-sm"><i
|
|
class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="alert alert-warning text-center">
|
|
<h4 class="alert-heading">Tidak Ada Hasil</h4>
|
|
<p>Tidak ada buku yang cocok dengan kriteria filter Anda. Coba reset atau ubah filter.</p>
|
|
<hr>
|
|
<a href="{{ route('katalog.index') }}" class="btn btn-primary">Reset Filter</a>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</x-app-layout>
|