155 lines
8.6 KiB
PHP
155 lines
8.6 KiB
PHP
@extends('layouts.user-koleksi')
|
|
|
|
@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">
|
|
|
|
<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;">
|
|
|
|
<div class="max-w-6xl mx-auto">
|
|
|
|
|
|
|
|
<!-- MAIN LAYOUT: SPLIT GRID 2 KOLOM -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
|
|
|
<!-- KOLOM KIRI: VISUAL COVER & STATUS (4 Kolom) -->
|
|
<div class="lg:col-span-4 bg-white border border-orange-100 rounded-xl p-6 shadow-sm flex flex-col items-center">
|
|
<div class="w-full max-w-[220px] aspect-[3/4] rounded-xl overflow-hidden shadow-md border border-slate-200 bg-slate-50 relative group">
|
|
@if ($koleksi->image)
|
|
<img
|
|
src="{{ asset('storage/' . $koleksi->image) }}"
|
|
alt="{{ $koleksi->title }}"
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
>
|
|
@else
|
|
<div class="w-full h-full flex flex-col items-center justify-center gap-2 text-slate-300">
|
|
<i class="bi bi-journal-bookmark text-5xl text-orange-200"></i>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-orange-400">No Cover Available</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Indikator Status Sirkulasi Dokumen -->
|
|
<div class="mt-6 w-full pt-4 border-t border-slate-100">
|
|
<div class="text-center">
|
|
<span class="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status peminjaman</span>
|
|
@if ($koleksi->borrowTransactions->whereIn('status', ['menunggu','disetujui','dipinjam','pengembalian_menunggu'])->count() > 0)
|
|
<span class="inline-flex items-center justify-center gap-1.5 w-full bg-rose-50 border border-rose-200 text-rose-700 font-bold text-xs uppercase tracking-widest px-4 py-2.5 rounded-lg shadow-inner">
|
|
<span class="h-2 w-2 rounded-full bg-rose-500 animate-pulse"></span>
|
|
Sedang Dipinjam
|
|
</span>
|
|
@else
|
|
<span class="inline-flex items-center justify-center gap-1.5 w-full bg-emerald-50 border border-emerald-200 text-emerald-700 font-bold text-xs uppercase tracking-widest px-4 py-2.5 rounded-lg shadow-inner">
|
|
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
|
Tersedia
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KOLOM KANAN: DOKUMENTASI & METADATA TEKNIS (8 Kolom) -->
|
|
<div class="lg:col-span-8 bg-white border border-orange-100 rounded-xl p-6 md:p-8 shadow-sm">
|
|
|
|
<!-- Identifikasi Dokumen Utama -->
|
|
<div class="mb-6">
|
|
<span class="inline-block px-2 py-0.5 rounded bg-orange-100 text-orange-800 text-[10px] font-mono font-bold uppercase tracking-wider mb-2">
|
|
Detail Buku Koleksi
|
|
</span>
|
|
<h2 class="text-lg md:text-xl font-extrabold text-slate-900 tracking-tight leading-snug uppercase">
|
|
{{ $koleksi->title ?? 'Untitled Document' }}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="border-b border-orange-100 mb-6"></div>
|
|
|
|
<!-- Sub-Bab Lembar Spesifikasi -->
|
|
<div class="flex items-center gap-2 text-orange-600 font-bold text-xs uppercase tracking-wider mb-3">
|
|
<i class="bi bi-file-earmark-text-fill"></i> Lembar Spesifikasi Koleksi Resmi
|
|
</div>
|
|
|
|
<!-- Tabel Data Administratif Pemerintah -->
|
|
<div class="border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
|
<table class="w-full text-xs text-left text-slate-700 table-fixed sm:table-auto">
|
|
<tbody>
|
|
<!-- Baris Pengarang -->
|
|
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50/60 transition-colors">
|
|
<td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 w-1/3 sm:w-1/4 border-r border-slate-200">
|
|
Pengarang
|
|
</td>
|
|
<td class="py-3 px-4 font-semibold text-slate-800">
|
|
{{ $koleksi->sor ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
<!-- Baris Tahun Terbit -->
|
|
<tr class="border-b border-slate-200 bg-slate-50/30 hover:bg-slate-50/60 transition-colors">
|
|
<td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
|
|
Tahun Publikasi
|
|
</td>
|
|
<td class="py-3 px-4 text-slate-800 font-mono">
|
|
{{ $koleksi->publish_year ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
<!-- Baris Kode Eksemplar -->
|
|
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50/60 transition-colors">
|
|
<td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
|
|
Kode Eksemplar
|
|
</td>
|
|
<td class="py-3 px-4 text-slate-800 font-mono font-bold tracking-wide">
|
|
{{ $koleksi->kode_eksemplar ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
<!-- Baris Nomor Klasifikasi -->
|
|
<tr class="bg-slate-50/30 hover:bg-slate-50/60 transition-colors">
|
|
<td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
|
|
Kode Klasifikasi
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2 py-0.5 bg-slate-200 text-slate-800 font-mono font-semibold rounded text-[11px] border border-slate-300/60 shadow-sm">
|
|
{{ $koleksi->classification ?? '-' }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Catatan Kaki Legalitas Aplikasi -->
|
|
<div class="mt-6 p-3 bg-slate-50 border border-slate-200 rounded-lg flex items-start gap-2.5">
|
|
<i class="bi bi-info-circle-fill text-orange-500 text-xs shrink-0 mt-0.5"></i>
|
|
<p class="text-[10px] text-slate-400 font-medium leading-relaxed">
|
|
Data spesifikasi di atas merupakan pencatatan inventarisasi resmi milik Perpustakaan Pustaka Nawasena Bakorwil III Malang. Segala bentuk perubahan data wajib melalui approval administrator sistem informasi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* PENYEMBUNYIAN SCROLLBAR AGRESIF UNTUK SELURUH ELEMEN */
|
|
*::-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 dengan mouse/sentuhan, tetapi batangnya hilang */
|
|
}
|
|
</style>
|
|
@endsection
|
|
|