288 lines
20 KiB
PHP
288 lines
20 KiB
PHP
@extends('layouts.user')
|
|
|
|
@section('full', true)
|
|
|
|
@section('content')
|
|
<!-- Tailwind, AlpineJS & Icon CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
|
|
<!-- Google Fonts: Inter Standar Dokumentasi Kedinasan Modern -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- PERBAIKAN SINTAKS x-data: Menggunakan objek mentah mentah tanpa intervensi kurung kurawal Blade -->
|
|
<div class="min-h-screen bg-[#FCF9F5] py-6 sm:py-8 px-4 sm:px-6 lg:px-8 font-sans text-slate-900" style="font-family: 'Inter', sans-serif;"
|
|
x-data="{
|
|
currentDate: '',
|
|
currentTime: '',
|
|
updateTime() {
|
|
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
const now = new Date();
|
|
this.currentDate = now.toLocaleDateString('id-ID', options);
|
|
this.currentTime = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) + ' WIB';
|
|
}
|
|
}"
|
|
x-init="updateTime(); setInterval(() => updateTime(), 1000)">
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<!-- SUB-HEADER INFORMASI & JAM DIGITAL (TEMA ORANGE NAWASENA) -->
|
|
<div class="bg-white border-t-4 border-orange-500 border-x border-b border-orange-100 rounded-xl p-4 sm:p-6 shadow-sm mb-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<div class="space-y-1 w-full md:w-auto">
|
|
<nav class="flex flex-wrap items-center gap-1.5 text-[11px] font-bold text-orange-400 uppercase tracking-wider">
|
|
<span class="text-slate-400">Layanan Elektronik</span>
|
|
<i class="bi bi-chevron-right text-[9px] text-slate-300"></i>
|
|
<span class="text-orange-600">Katalog Pustaka</span>
|
|
</nav>
|
|
<h1 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
Pustaka <span class="text-orange-500 font-bold">Nawasena</span>
|
|
</h1>
|
|
<!-- SUB-BAB UNIT KERJA RESMI -->
|
|
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-orange-500/10 border border-orange-500/20 rounded-md text-orange-800 font-bold uppercase tracking-wider text-[10px] mt-1 shadow-sm">
|
|
<i class="bi bi-geo-alt-fill text-orange-500"></i> Bakorwil III Malang
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget Waktu & Statistik -->
|
|
<div class="w-full md:w-auto flex flex-col sm:flex-row items-stretch sm:items-center gap-3 self-stretch md:self-auto">
|
|
<!-- Live Jam & Tanggal -->
|
|
<div class="bg-orange-50/50 border border-orange-100 rounded-lg px-4 py-2.5 flex items-center gap-3 flex-1 sm:flex-none">
|
|
<i class="bi bi-calendar3 text-orange-500 text-sm hidden sm:block"></i>
|
|
<div class="leading-tight">
|
|
<div class="text-[10px] font-bold text-orange-400 uppercase tracking-wider"></div>
|
|
<div class="text-xs font-semibold text-slate-700">
|
|
<!-- AlpineJS text injection -->
|
|
<span x-text="currentDate"></span> — <span x-text="currentTime" class="font-mono text-orange-600 font-bold"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Counter Jumlah Data -->
|
|
<div class="bg-orange-500 border border-orange-600 rounded-lg px-4 py-2.5 flex flex-col justify-center text-center sm:text-left min-w-[120px] shadow-sm shadow-orange-500/20">
|
|
<div class="text-[10px] font-bold text-orange-100 uppercase tracking-wider">Total Koleksi</div>
|
|
<div class="text-lg font-black text-white tracking-tight">
|
|
{{ $koleksi->total() }} <span class="text-[11px] font-medium text-orange-200 uppercase tracking-normal">Item</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAIN LAYOUT -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
<!-- KIRI: DAFTAR DATA & PANEL CARI -->
|
|
<main class="lg:col-span-8 order-1">
|
|
|
|
<!-- Search Panel Komprehensif -->
|
|
<div class="bg-white border border-orange-100 rounded-xl p-4 shadow-sm mb-6">
|
|
<form method="GET" action="{{ route('user.koleksi') }}" class="flex flex-col sm:flex-row items-stretch gap-3">
|
|
<div class="flex items-center flex-1 bg-orange-50/30 border border-orange-100 rounded-lg px-3 py-2.5 focus-within:bg-white focus-within:ring-2 focus-within:ring-orange-500/10 focus-within:border-orange-500 transition-all">
|
|
<i class="bi bi-search text-orange-400 mr-2.5 text-sm"></i>
|
|
<input type="text" name="search" value="{{ request('search') }}"
|
|
class="w-full bg-transparent border-none focus:ring-0 text-slate-800 placeholder-slate-400 text-xs font-medium outline-none"
|
|
placeholder="Masukkan Judul Buku, Penulis, atau No. ISBN...">
|
|
</div>
|
|
<button type="submit" class="px-5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold tracking-wide transition-all rounded-lg shadow-sm shadow-orange-500/10 flex items-center justify-center gap-2 shrink-0">
|
|
<i class="bi bi-filter-circle"></i> Cari Koleksi
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Grid Data List -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
|
|
@forelse($koleksi as $item)
|
|
<div class="group bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-orange-300 transition-all duration-200 flex flex-col justify-between">
|
|
|
|
<!-- Header Card Status -->
|
|
<div class="bg-slate-50 border-b border-slate-100 px-4 py-2 flex items-center justify-between text-[11px]">
|
|
<span class="font-mono font-medium text-slate-500 bg-slate-200/60 px-1.5 py-0.5 rounded text-[10px]">{{ $item->kode_eksemplar }}</span>
|
|
|
|
@php $status = $item->isBorrowed() ? 'Dipinjam' : 'Tersedia'; @endphp
|
|
<span class="inline-flex items-center gap-1 font-bold uppercase tracking-wider text-[9px] {{ $status === 'Dipinjam' ? 'text-rose-700 bg-rose-50 px-2 py-0.5 rounded' : 'text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded' }}">
|
|
<span class="h-1 w-1 rounded-full {{ $status === 'Dipinjam' ? 'bg-rose-500' : 'bg-emerald-500' }}"></span>
|
|
{{ $status }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Konten Data -->
|
|
<div class="p-4 flex gap-4 items-start flex-1">
|
|
<div class="w-16 h-24 sm:w-20 sm:h-28 shrink-0 bg-slate-100 border border-slate-200 rounded overflow-hidden shadow-sm flex-none">
|
|
@if ($item->image)
|
|
<img src="{{ asset('storage/' . $item->image) }}" class="w-full h-full object-cover" alt="Cover">
|
|
@else
|
|
<div class="w-full h-full flex flex-col items-center justify-center gap-1 bg-orange-50/50 text-orange-200">
|
|
<i class="bi bi-journal-bookmark text-lg"></i>
|
|
<span class="text-[7px] font-bold uppercase tracking-wider text-orange-400">No Image</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<h2 class="text-xs font-bold text-slate-900 leading-normal mb-1 line-clamp-2 uppercase tracking-tight group-hover:text-orange-600 transition-colors" title="{{ $item->title }}">
|
|
{{ $item->title ?? 'Untitled Document' }}
|
|
</h2>
|
|
<p class="text-[11px] font-semibold text-orange-600 mb-3 truncate"><i class="bi bi-person text-slate-400 mr-1"></i>{{ $item->sor ?? 'Penulis Anonim' }}</p>
|
|
|
|
<div class="space-y-1 text-[11px] border-t border-slate-100 pt-2">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">Tahun Terbit:</span>
|
|
<span class="font-medium text-slate-700">{{ $item->publish_year ?? '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Link Detail -->
|
|
<div class="bg-slate-50 border-t border-slate-100 p-3 text-right mt-auto">
|
|
<a href="{{ route('user.koleksi.show', $item->kode_eksemplar) }}"
|
|
class="w-full inline-flex items-center justify-center gap-1 px-3 py-1.5 text-[11px] font-bold text-slate-700 bg-white border border-slate-200 rounded hover:bg-orange-500 hover:text-white hover:border-orange-500 transition-all shadow-sm">
|
|
Periksa Eksemplar <i class="bi bi-chevron-right text-[9px]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full py-16 text-center border border-dashed border-orange-200 bg-white rounded-xl shadow-sm">
|
|
<i class="bi bi-folder-x text-4xl text-orange-300 block mb-2"></i>
|
|
<p class="text-slate-500 text-xs font-medium">Dokumen atau koleksi referensi tidak ditemukan</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Custom Elegant Pagination (Tema Orange Nawasena) -->
|
|
<div class="mt-8 border-t border-slate-200 pt-4">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
|
|
<div class="text-xs text-slate-500 font-medium order-2 sm:order-1 text-center sm:text-left">
|
|
Menampilkan <span class="font-bold text-slate-800">{{ $koleksi->firstItem() ?? 0 }}</span> - <span class="font-bold text-slate-800">{{ $koleksi->lastItem() ?? 0 }}</span> dari total <span class="font-bold text-slate-800">{{ $koleksi->total() }}</span> Koleksi.
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 order-1 sm:order-2 w-full sm:w-auto justify-center sm:justify-end">
|
|
@if ($koleksi->onFirstPage())
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-slate-100 text-slate-400 text-xs font-bold cursor-not-allowed border border-slate-200/60 select-none">
|
|
<i class="bi bi-chevron-left text-[10px]"></i> Sebelumnya
|
|
</span>
|
|
@else
|
|
<a href="{{ $koleksi->previousPageUrl() }}" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 hover:bg-orange-50 text-xs font-bold transition-all shadow-sm">
|
|
<i class="bi bi-chevron-left text-[10px]"></i> Sebelumnya
|
|
</a>
|
|
@endif
|
|
|
|
<div class="hidden sm:flex items-center gap-1 bg-orange-50/50 p-1 rounded-lg border border-orange-100">
|
|
@foreach ($koleksi->getUrlRange(max(1, $koleksi->currentPage() - 2), min($koleksi->lastPage(), $koleksi->currentPage() + 2)) as $page => $url)
|
|
@if ($page == $koleksi->currentPage())
|
|
<span class="inline-flex items-center justify-center w-7 h-7 bg-orange-500 rounded-md text-xs font-bold text-white shadow-sm">{{ $page }}</span>
|
|
@else
|
|
<a href="{{ $url }}" class="inline-flex items-center justify-center w-7 h-7 rounded-md text-xs font-semibold text-slate-600 hover:bg-white hover:text-orange-500 border border-transparent hover:border-orange-100 transition-all">{{ $page }}</a>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
|
|
@if ($koleksi->hasMorePages())
|
|
<a href="{{ $koleksi->nextPageUrl() }}" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 shadow-sm text-xs font-bold transition-all group">
|
|
Selanjutnya <i class="bi bi-chevron-right text-[10px] text-white/80 transition-transform group-hover:translate-x-0.5"></i>
|
|
</a>
|
|
@else
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-slate-100 text-slate-400 text-xs font-bold cursor-not-allowed border border-slate-200/60 select-none">
|
|
Selanjutnya <i class="bi bi-chevron-right text-[10px]"></i>
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- KANAN: SIDEBAR FILTER -->
|
|
<aside class="lg:col-span-4 bg-white border border-orange-100 rounded-xl shadow-sm overflow-hidden order-2 h-fit lg:sticky lg:top-6">
|
|
<div class="bg-orange-50/80 border-b border-orange-100 px-4 py-3">
|
|
<h3 class="text-orange-900 text-xs font-bold uppercase tracking-wider flex items-center gap-2">
|
|
<i class="bi bi-funnel-fill text-orange-500"></i> Penyaringan Informasi
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="p-4 sm:p-5">
|
|
<form action="{{ route('user.koleksi') }}" method="GET" class="space-y-5">
|
|
<input type="hidden" name="search" value="{{ request('search') }}">
|
|
|
|
<!-- Tipe Koleksi -->
|
|
<div class="space-y-2">
|
|
<label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Format Media</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-2">
|
|
@foreach(['buku' => 'Buku Fisik', 'digital' => 'Digital (E-Book)', 'majalah' => 'Jurnal'] as $key => $label)
|
|
<label class="flex items-center cursor-pointer group bg-orange-50/20 border border-slate-200 px-3 py-2 rounded transition-colors hover:border-orange-200">
|
|
<input type="radio" name="tipe" value="{{ $key }}" {{ request('tipe') == $key ? 'checked' : '' }}
|
|
class="w-3.5 h-3.5 text-orange-500 border-slate-300 focus:ring-orange-500/20 focus:text-orange-500 checked:bg-orange-500">
|
|
<span class="ml-2.5 text-xs font-medium text-slate-700 group-hover:text-orange-600 truncate">{{ $label }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rentang Tahun -->
|
|
<div class="space-y-2">
|
|
<label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Tahun Publikasi</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="number" name="tahun_min" placeholder="Mulai" value="{{ request('tahun_min') }}"
|
|
class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white rounded outline-none text-xs font-medium transition-all">
|
|
<span class="text-slate-300 text-xs font-bold">-</span>
|
|
<input type="number" name="tahun_max" placeholder="Akhir" value="{{ request('tahun_max') }}"
|
|
class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white rounded outline-none text-xs font-medium transition-all">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Ketersediaan -->
|
|
<div class="space-y-2">
|
|
<label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Status Ketersediaan</label>
|
|
<div class="relative">
|
|
<select name="status" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white outline-none text-xs font-medium rounded appearance-none cursor-pointer text-slate-700">
|
|
<option value="">Semua Status</option>
|
|
<option value="tersedia" {{ request('status') == 'tersedia' ? 'selected' : '' }}>Tersedia di Rak</option>
|
|
<option value="dipinjam" {{ request('status') == 'dipinjam' ? 'selected' : '' }}>Sedang Dipinjam</option>
|
|
</select>
|
|
<i class="bi bi-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 pointer-events-none"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons Action -->
|
|
<div class="pt-2 space-y-2">
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded text-xs font-bold tracking-wide transition-all shadow-sm shadow-orange-500/10">
|
|
Terapkan Penyaringan
|
|
</button>
|
|
<a href="{{ route('user.koleksi') }}" class="block text-center text-xs font-semibold text-slate-400 hover:text-orange-500 transition-colors py-1">
|
|
Bersihkan Parameter
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* MENYEMBUNYIKAN SCROLLBAR PADA LEVEL GLOBAL (AGRESIF) */
|
|
*::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
* {
|
|
-ms-overflow-style: none !important; /* IE & Edge */
|
|
scrollbar-width: none !important; /* Firefox */
|
|
}
|
|
|
|
html, body {
|
|
overflow-y: auto; /* Halaman tetap bisa digulirkan menggunakan mouse/gesture tanpa memunculkan bilah visual */
|
|
}
|
|
|
|
/* Hide arrow spinner input number */
|
|
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|