220 lines
11 KiB
PHP
220 lines
11 KiB
PHP
@extends('layouts.user')
|
||
@section('full', true)
|
||
@section('content')
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pencarian Koleksi Buku - Pustaka Nawasena</title>
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<style>
|
||
body {
|
||
background: linear-gradient(to bottom, #fff8f0 0%, #ffffff 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.search-btn-bg {
|
||
background-color: #f59e0b;
|
||
}
|
||
|
||
.search-btn-bg:hover {
|
||
background-color: #d97706;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="flex flex-col items-center justify-start">
|
||
|
||
<div class="w-full max-w-[1440px] px-4 md:px-8 py-6">
|
||
|
||
<div class="bg-white w-full p-5 md:p-8 rounded-2xl shadow-lg mb-8 border border-gray-100">
|
||
<form method="GET" action="{{ route('user.koleksi') }}" class="space-y-5">
|
||
<h2 class="text-lg md:text-xl font-bold text-gray-800 border-b pb-3">
|
||
🔍 Kriteria Pencarian
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<select name="kategori" class="p-3 border border-gray-300 rounded-lg text-sm shadow-sm">
|
||
<option value="">Mencari seluruh database</option>
|
||
<option value="judul" {{ request('kategori') == 'judul' ? 'selected' : '' }}>Judul</option>
|
||
<option value="pengarang" {{ request('kategori') == 'pengarang' ? 'selected' : '' }}>Pengarang</option>
|
||
<option value="isbn" {{ request('kategori') == 'isbn' ? 'selected' : '' }}>ISBN / Kode Eksemplar</option>
|
||
</select>
|
||
|
||
<select class="p-3 border border-gray-300 rounded-lg text-sm shadow-sm">
|
||
<option>Isi konten</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="flex flex-col sm:flex-row items-center gap-3">
|
||
<input type="text" name="search" value="{{ request('search') }}"
|
||
placeholder="Masukkan istilah pencarian Anda..."
|
||
class="w-full sm:flex-1 p-3 border border-gray-300 rounded-lg text-sm focus:ring-amber-500 focus:border-amber-500 transition">
|
||
<button
|
||
class="search-btn-bg w-full sm:w-auto px-5 py-3 rounded-lg text-white font-semibold text-sm shadow-md hover:shadow-lg transition">
|
||
<i class="bi bi-search mr-1"></i> CARI
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||
|
||
<div class="lg:col-span-3 bg-white p-5 rounded-2xl shadow-md border border-gray-100">
|
||
<h2 class="text-sm md:text-base font-medium text-gray-600 border-b pb-3 mb-4">
|
||
Hasil pencarian:
|
||
<span class="font-bold text-gray-800">
|
||
Menampilkan {{ $koleksi->firstItem() ?? 0 }}–{{ $koleksi->lastItem() ?? 0 }} dari {{ $koleksi->total() }}
|
||
hasil
|
||
</span>
|
||
</h2>
|
||
|
||
@forelse($koleksi as $item)
|
||
@if($item->kode_eksemplar)
|
||
<a href="{{ route('user.koleksi.show', ['koleksi' => $item->kode_eksemplar]) }}" class="...">
|
||
{{ $item->title }}
|
||
</a>
|
||
|
||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||
<div class="flex items-center gap-4">
|
||
<div
|
||
class="w-16 h-24 rounded-md overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm shrink-0">
|
||
@if ($item->image)
|
||
<img src="{{ asset('storage/' . $item->image) }}" alt="Sampul Buku" class="object-cover w-full h-full">
|
||
@else
|
||
<i class="bi bi-book text-gray-400 text-3xl"></i>
|
||
@endif
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-gray-800 text-sm md:text-base leading-snug hover:text-blue-600 transition">
|
||
{{ $item->title ?? '-' }}
|
||
</h3>
|
||
<p class="text-xs md:text-sm text-gray-500">Pengarang: {{ $item->sor ?? '-' }}</p>
|
||
<p class="text-xs text-gray-400 mt-1">Tahun: {{ $item->publish_year ?? '-' }}</p>
|
||
<p class="text-xs text-gray-400">Kode: {{ $item->kode_eksemplar ?? '-' }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between sm:justify-end gap-3">
|
||
<div class="flex text-yellow-400 text-sm">
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star"></i>
|
||
</div>
|
||
|
||
@php $status = $item->isBorrowed() ? 'Dipinjam' : 'Tersedia'; @endphp
|
||
<span class="px-3 py-1 text-xs font-semibold rounded-full
|
||
{{ $status === 'Dipinjam' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700' }}">
|
||
{{ $status }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@empty
|
||
<div class="text-center text-gray-500 py-12">
|
||
<i class="bi bi-inbox text-4xl text-gray-300 mb-3"></i>
|
||
<p>Tidak ada hasil ditemukan.</p>
|
||
</div>
|
||
@endforelse
|
||
|
||
<div class="pt-6 border-t mt-6">
|
||
{{ $koleksi->appends(request()->except('page'))->links('pagination::tailwind') }}
|
||
</div>
|
||
</div>
|
||
|
||
<div x-data="{ open: false }" class="lg:col-span-1 bg-white p-5 rounded-2xl shadow-md border border-gray-100">
|
||
<div class="flex items-center justify-between border-b pb-3 mb-4">
|
||
<h3 class="text-base md:text-lg font-bold text-gray-800 flex items-center gap-2">
|
||
<i class="bi bi-funnel-fill text-blue-600"></i> Filter Lanjutan
|
||
</h3>
|
||
<button type="button" class="lg:hidden text-blue-600" @click="open = !open">
|
||
<i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<form method="GET" action="{{ route('user.koleksi') }}" class="space-y-4"
|
||
:class="{ 'hidden': !open && window.innerWidth < 1024 }">
|
||
<input type="hidden" name="kategori" value="{{ request('kategori') }}">
|
||
<input type="hidden" name="search" value="{{ request('search') }}">
|
||
|
||
<div>
|
||
<label class="text-gray-600 font-semibold text-sm">Tipe Sumber Daya</label>
|
||
<select name="tipe" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
<option value="">Semua tipe</option>
|
||
<option value="buku" {{ request('tipe') == 'buku' ? 'selected' : '' }}>Buku</option>
|
||
<option value="majalah" {{ request('tipe') == 'majalah' ? 'selected' : '' }}>Majalah</option>
|
||
<option value="skripsi" {{ request('tipe') == 'skripsi' ? 'selected' : '' }}>Skripsi</option>
|
||
<option value="digital" {{ request('tipe') == 'digital' ? 'selected' : '' }}>E-book / Digital</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="text-gray-600 font-semibold text-sm">Subjek</label>
|
||
<select name="subjek" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
<option value="">Semua subjek</option>
|
||
<option value="umum" {{ request('subjek') == 'umum' ? 'selected' : '' }}>Umum</option>
|
||
<option value="sains" {{ request('subjek') == 'sains' ? 'selected' : '' }}>Sains</option>
|
||
<option value="teknologi" {{ request('subjek') == 'teknologi' ? 'selected' : '' }}>Teknologi</option>
|
||
<option value="sosial" {{ request('subjek') == 'sosial' ? 'selected' : '' }}>Ilmu Sosial</option>
|
||
<option value="agama" {{ request('subjek') == 'agama' ? 'selected' : '' }}>Agama</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="text-gray-600 font-semibold text-sm">Tahun Terbit</label>
|
||
<div class="flex gap-2">
|
||
<input type="number" name="tahun_min" placeholder="Dari" value="{{ request('tahun_min') }}"
|
||
class="w-1/2 p-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
<input type="number" name="tahun_max" placeholder="Sampai" value="{{ request('tahun_max') }}"
|
||
class="w-1/2 p-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="text-gray-600 font-semibold text-sm">Lokasi Rak</label>
|
||
<select name="lokasi" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
<option value="">Semua lokasi</option>
|
||
<option value="lantai1" {{ request('lokasi') == 'lantai1' ? 'selected' : '' }}>Rak 1</option>
|
||
<option value="lantai2" {{ request('lokasi') == 'lantai2' ? 'selected' : '' }}>Rak 2</option>
|
||
<option value="lantai3" {{ request('lokasi') == 'lantai' ? 'selected' : '' }}>Rak 3</option>
|
||
<option value="digital" {{ request('lokasi') == 'digital' ? 'selected' : '' }}>Digital</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="text-gray-600 font-semibold text-sm">Status Buku</label>
|
||
<select name="status" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
|
||
<option value="">Semua status</option>
|
||
<option value="tersedia" {{ request('status') == 'tersedia' ? 'selected' : '' }}>Tersedia</option>
|
||
<option value="dipinjam" {{ request('status') == 'dipinjam' ? 'selected' : '' }}>Dipinjam</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="pt-3 space-y-3">
|
||
<button
|
||
class="w-full px-5 py-3 bg-blue-600 text-white rounded-lg text-base font-semibold hover:bg-blue-700 transition">
|
||
Terapkan Filter
|
||
</button>
|
||
<a href="{{ route('user.koleksi') }}"
|
||
class="block text-center w-full px-5 py-3 bg-red-500 text-white rounded-lg text-base font-semibold hover:bg-red-600 transition">
|
||
Reset Filter
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||
</body>
|
||
|
||
</html>
|
||
@endsection |