From f64ea3a4fa988c6f88c4be54d7821dda1e3890c6 Mon Sep 17 00:00:00 2001
From: Lutfi Hakim <lutfihakim1606@gmail.com>
Date: Thu, 30 Apr 2026 07:51:09 +0700
Subject: [PATCH] Fix: kategori table migration and update admin buku views

---
 .../Controllers/VisitorKatalogController.php  |  68 +-
 ...025_10_13_000000_create_kategori_table.php |  28 +
 database/seeders/BukuTamuSeeder.php           |  10 +
 database/seeders/DatabaseSeeder.php           |  29 +-
 resources/views/admin/buku/edit.blade.php     |  59 +-
 resources/views/admin/buku/index.blade.php    | 380 ++++----
 .../views/admin/peminjaman/create.blade.php   | 144 +--
 .../views/admin/peminjaman/index.blade.php    | 920 ++++++++++--------
 .../views/visitor/katalog/index.blade.php     | 382 ++++----
 .../views/visitor/katalog/show.blade.php      | 765 ++++++++-------
 resources/views/welcome/populer.blade.php     | 175 ++--
 resources/views/welcome/rekomendasi.blade.php | 147 +--
 12 files changed, 1698 insertions(+), 1409 deletions(-)
 create mode 100644 database/migrations/2025_10_13_000000_create_kategori_table.php

diff --git a/app/Http/Controllers/VisitorKatalogController.php b/app/Http/Controllers/VisitorKatalogController.php
index cd07f7c..2343db9 100644
--- a/app/Http/Controllers/VisitorKatalogController.php
+++ b/app/Http/Controllers/VisitorKatalogController.php
@@ -10,12 +10,12 @@ class VisitorKatalogController extends Controller
     public function index(Request $request)
     {
         $originalSearch = $request->input('search');
-        
+
         $bukuPopuler = Buku::withCount('peminjaman')
-                           ->orderBy('peminjaman_count', 'desc')
-                           ->take(5)
-                           ->get();
-                           
+            ->orderBy('peminjaman_count', 'desc')
+            ->take(5)
+            ->get();
+
         if (empty($originalSearch)) {
             $buku = Buku::paginate(12);
             $search = $originalSearch;
@@ -25,19 +25,19 @@ public function index(Request $request)
         // 1. Text Preprocessing (Stopword Removal)
         // Array stopword bahasa Indonesia sederhana
         $stopwords = ['buku', 'tentang', 'yang', 'di', 'ke', 'dari', 'mencari', 'untuk', 'dan', 'ini', 'itu', 'adalah', 'pada', 'dengan', 'sebuah', 'cara'];
-        
+
         // Membersihkan input: mengubah ke lowercase dan membuang karakter non-alphanumeric
         $cleanInput = preg_replace('/[^\p{L}\p{N}\s]/u', '', strtolower($originalSearch));
         $words = explode(' ', $cleanInput);
-        
+
         // Filter stopword
-        $filteredWords = array_filter($words, function($word) use ($stopwords) {
+        $filteredWords = array_filter($words, function ($word) use ($stopwords) {
             return !in_array($word, $stopwords) && trim($word) !== '';
         });
-        
+
         // String hasil preprocessing yang murni siap diproses ke Cosine Similarity
         $processedSearch = implode(' ', $filteredWords);
-        
+
         if (empty($processedSearch)) {
             // Jika setelah dibersihkan query pencarian menjadi kosong (misal pencarian hanya "buku tentang")
             $buku = new \Illuminate\Pagination\LengthAwarePaginator([], 0, 12, 1, ['path' => $request->url(), 'query' => $request->query()]);
@@ -54,7 +54,7 @@ public function index(Request $request)
             // Hitung nilai Cosine Similarity untuk masing-masing atribut berdasarkan kata kunci yang sudah dibersihkan
             $judulSimilarity = $this->calculateSimilarity($processedSearch, $b->judul);
             $pengarangSimilarity = $this->calculateSimilarity($processedSearch, $b->pengarang);
-            
+
             // Gabungkan penerbit, deskripsi, dan kategori sebagai atribut teks tambahan
             $teksTambahan = trim(($b->penerbit ?? '') . ' ' . ($b->deskripsi ?? '') . ' ' . ($b->kategori->nama_kategori ?? ''));
             $tambahanSimilarity = $this->calculateSimilarity($processedSearch, $teksTambahan);
@@ -72,7 +72,7 @@ public function index(Request $request)
         }
 
         // Urutkan berdasarkan similarity_score terbesar (descending)
-        usort($hasil, function($a, $b) {
+        usort($hasil, function ($a, $b) {
             return $b->similarity_score <=> $a->similarity_score;
         });
 
@@ -98,10 +98,10 @@ public function index(Request $request)
     private function calculateSimilarity($query, $text)
     {
         if (empty(trim($text))) return 0;
-        
+
         $queryWords = explode(' ', strtolower(preg_replace('/[^\p{L}\p{N}\s]/u', '', $query)));
         $textWords = explode(' ', strtolower(preg_replace('/[^\p{L}\p{N}\s]/u', '', $text)));
-        
+
         // Frekuensi kata
         $vecA = array_count_values(array_filter($queryWords));
         $vecB = array_count_values(array_filter($textWords));
@@ -124,10 +124,10 @@ private function calculateSimilarity($query, $text)
         if ($normA == 0 || $normB == 0) return 0;
 
         // Standard Cosine Similarity: $dotProduct / (sqrt($normA) * sqrt($normB))
-        // Kelemahannya: Jika judul buku sangat panjang (normB besar), skor akan anjlok (misal < 0.2) 
+        // Kelemahannya: Jika judul buku sangat panjang (normB besar), skor akan anjlok (misal < 0.2)
         // padahal kata pencariannya cocok 100%.
         // Modifikasi menjadi Query Coverage (Pembagi dominan adalah panjang query).
-        return $dotProduct / $normA; 
+        return $dotProduct / $normA;
     }
 
     public function show($id)
@@ -135,15 +135,19 @@ public function show($id)
         $buku = Buku::with(['kategori', 'peminjaman.user'])->findOrFail($id);
         $lokasi = $this->prediksiLokasiRak($buku->nomor_panggil);
         $rekomendasi = $this->getRekomendasi($buku);
-        
+
         return view('visitor.katalog.show', compact('buku', 'lokasi', 'rekomendasi'));
     }
 
     private function getRekomendasi($targetBuku)
     {
-        $semuaBuku = Buku::where('id_buku', '!=', $targetBuku->id_buku)
-                         ->whereNotNull('nomor_panggil')
-                         ->get();
+        $semuaBuku = Buku::where('id', '!=', $targetBuku->id)
+            ->get();
+
+        // Jika nomor_panggil tidak ada, tampilkan rekomendasi berdasarkan buku populer
+        if (empty($targetBuku->nomor_panggil)) {
+            return $semuaBuku->take(4);
+        }
 
         $hasil = [];
         $targetDdc = substr(preg_replace('/[^0-9]/', '', $targetBuku->nomor_panggil), 0, 3);
@@ -153,6 +157,8 @@ private function getRekomendasi($targetBuku)
         }
 
         foreach ($semuaBuku as $b) {
+            if (empty($b->nomor_panggil)) continue;
+
             $pembandingDdc = substr(preg_replace('/[^0-9]/', '', $b->nomor_panggil), 0, 3);
             if (strlen($pembandingDdc) < 3) continue;
 
@@ -173,7 +179,7 @@ private function getRekomendasi($targetBuku)
             }
         }
 
-        usort($hasil, function($a, $b) {
+        usort($hasil, function ($a, $b) {
             return $b->similarity_score <=> $a->similarity_score;
         });
 
@@ -189,23 +195,23 @@ private function prediksiLokasiRak($nomor_panggil)
         $kode_utama = (int) substr(trim($nomor_panggil), 0, 3);
 
         return match (true) {
-            $kode_utama >= 0 && $kode_utama <= 99 => match(true) {
+            $kode_utama >= 0 && $kode_utama <= 99 => match (true) {
                 $kode_utama <= 19 => ['rak' => 'Rak 01', 'area' => 'Karya Umum (Bibliografi)', 'kode_rak' => 'rak_000'],
                 $kode_utama <= 50 => ['rak' => 'Rak 02', 'area' => 'Karya Umum (Ensiklopedia)', 'kode_rak' => 'rak_000'],
                 default => ['rak' => 'Rak 03-05', 'area' => 'Karya Umum Lainnya', 'kode_rak' => 'rak_000'],
             },
-            
-            $kode_utama >= 100 && $kode_utama <= 199 => match(true) {
+
+            $kode_utama >= 100 && $kode_utama <= 199 => match (true) {
                 $kode_utama <= 150 => ['rak' => 'Rak 06-10', 'area' => 'Filsafat', 'kode_rak' => 'rak_100'],
                 default => ['rak' => 'Rak 11-14', 'area' => 'Psikologi', 'kode_rak' => 'rak_100'],
             },
 
-            $kode_utama >= 200 && $kode_utama <= 299 => match(true) {
+            $kode_utama >= 200 && $kode_utama <= 299 => match (true) {
                 $kode_utama == 297 => ['rak' => 'Rak 25-32', 'area' => 'Agama Islam', 'kode_rak' => 'rak_200'],
                 default => ['rak' => 'Rak 15-24', 'area' => 'Agama Umum & Lainnya', 'kode_rak' => 'rak_200'],
             },
 
-            $kode_utama >= 300 && $kode_utama <= 399 => match(true) {
+            $kode_utama >= 300 && $kode_utama <= 399 => match (true) {
                 $kode_utama <= 330 => ['rak' => 'Rak 33-36', 'area' => 'Sosiologi & Ilmu Politik', 'kode_rak' => 'rak_300'],
                 $kode_utama <= 360 => ['rak' => 'Rak 37-40', 'area' => 'Ekonomi & Hukum', 'kode_rak' => 'rak_300'],
                 default => ['rak' => 'Rak 41-44', 'area' => 'Pendidikan & Adat', 'kode_rak' => 'rak_300'],
@@ -215,14 +221,14 @@ private function prediksiLokasiRak($nomor_panggil)
 
             $kode_utama >= 500 && $kode_utama <= 599 => ['rak' => 'Rak 46-48', 'area' => 'Ilmu Murni', 'kode_rak' => 'rak_500'],
 
-            $kode_utama >= 600 && $kode_utama <= 699 => match(true) {
+            $kode_utama >= 600 && $kode_utama <= 699 => match (true) {
                 $kode_utama <= 610 => ['rak' => 'Rak 49-53', 'area' => 'Ilmu Kedokteran', 'kode_rak' => 'rak_600'],
                 $kode_utama <= 630 => ['rak' => 'Rak 54-58', 'area' => 'Ilmu Teknik', 'kode_rak' => 'rak_600'],
                 $kode_utama <= 650 => ['rak' => 'Rak 59-63', 'area' => 'Pertanian', 'kode_rak' => 'rak_600'],
                 default => ['rak' => 'Rak 64-68', 'area' => 'Manajemen & Bisnis', 'kode_rak' => 'rak_600'],
             },
 
-            $kode_utama >= 700 && $kode_utama <= 799 => match(true) {
+            $kode_utama >= 700 && $kode_utama <= 799 => match (true) {
                 $kode_utama <= 739 => ['rak' => 'Rak 71', 'area' => 'Kesenian Murni', 'kode_rak' => 'rak_700'],
                 $kode_utama <= 769 => ['rak' => 'Rak 72', 'area' => 'Seni Rupa & Kriya', 'kode_rak' => 'rak_700'],
                 $kode_utama <= 789 => ['rak' => 'Rak 73', 'area' => 'Fotografi & Musik', 'kode_rak' => 'rak_700'],
@@ -230,8 +236,8 @@ private function prediksiLokasiRak($nomor_panggil)
             },
 
             $kode_utama >= 800 && $kode_utama <= 899 => ['rak' => 'Rak 77-79', 'area' => 'Kesusastraan (Sastra)', 'kode_rak' => 'rak_800'],
-            
-            $kode_utama >= 900 && $kode_utama <= 999 => match(true) {
+
+            $kode_utama >= 900 && $kode_utama <= 999 => match (true) {
                 $kode_utama <= 919 => ['rak' => 'Rak 69, 70', 'area' => 'Geografi & Perjalanan', 'kode_rak' => 'rak_900'],
                 default => ['rak' => 'Rak 80-84', 'area' => 'Sejarah Umum', 'kode_rak' => 'rak_900'],
             },
@@ -239,4 +245,4 @@ private function prediksiLokasiRak($nomor_panggil)
             default => ['rak' => 'Rak 75-76', 'area' => 'Koleksi Terbaru', 'kode_rak' => 'rak_baru'],
         };
     }
-}   
\ No newline at end of file
+}
diff --git a/database/migrations/2025_10_13_000000_create_kategori_table.php b/database/migrations/2025_10_13_000000_create_kategori_table.php
new file mode 100644
index 0000000..01f0c66
--- /dev/null
+++ b/database/migrations/2025_10_13_000000_create_kategori_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('kategori', function (Blueprint $table) {
+            $table->increments('id_kategori');
+            $table->string('nama_kategori');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('kategori');
+    }
+};
diff --git a/database/seeders/BukuTamuSeeder.php b/database/seeders/BukuTamuSeeder.php
index c69d2df..3198957 100644
--- a/database/seeders/BukuTamuSeeder.php
+++ b/database/seeders/BukuTamuSeeder.php
@@ -19,11 +19,21 @@ public function run(): void
             DB::table('buku_tamu')->insert([
                 [
                     'id_user' => $userId,
+                    'nama_tamu' => 'Pengunjung 1',
+                    'email' => 'pengunjung1@example.com',
+                    'no_hp' => '081234567890',
+                    'asal_instansi' => 'Sekolah A',
+                    'status' => 'Aktif',
                     'tujuan_kunjungan' => 'Membaca Buku',
                     'tanggal_kunjungan' => now(),
                 ],
                 [
                     'id_user' => $userId,
+                    'nama_tamu' => 'Pengunjung 2',
+                    'email' => 'pengunjung2@example.com',
+                    'no_hp' => '082345678901',
+                    'asal_instansi' => 'Sekolah B',
+                    'status' => 'Aktif',
                     'tujuan_kunjungan' => 'Meminjam Buku',
                     'tanggal_kunjungan' => now()->subDay(),
                 ],
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 5b251bf..11e4d08 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -16,20 +16,24 @@ class DatabaseSeeder extends Seeder
     public function run(): void
     {
         // Admin user
-        User::create([
-            'name' => 'Admin',
-            'email' => 'admin@perpustakaan.com',
-            'password' => Hash::make('password'),
-            'role' => 'admin',
-        ]);
+        User::updateOrCreate(
+            ['email' => 'admin@perpustakaan.com'],
+            [
+                'name' => 'Admin',
+                'password' => Hash::make('password'),
+                'role' => 'admin',
+            ]
+        );
 
         // Regular user
-        User::create([
-            'name' => 'User Test',
-            'email' => 'user@perpustakaan.com',
-            'password' => Hash::make('password'),
-            'role' => 'user',
-        ]);
+        User::updateOrCreate(
+            ['email' => 'user@perpustakaan.com'],
+            [
+                'name' => 'User Test',
+                'password' => Hash::make('password'),
+                'role' => 'user',
+            ]
+        );
 
         // Sample buku
         Buku::create([
@@ -67,4 +71,3 @@ public function run(): void
         ]);
     }
 }
-
diff --git a/resources/views/admin/buku/edit.blade.php b/resources/views/admin/buku/edit.blade.php
index 8638194..b154686 100644
--- a/resources/views/admin/buku/edit.blade.php
+++ b/resources/views/admin/buku/edit.blade.php
@@ -8,31 +8,35 @@
     <x-card class="max-w-4xl mx-auto">
 
         @if ($errors->any())
-        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
-            <p class="font-bold">Validasi Gagal</p>
-            <ul class="list-disc ml-5">
-                @foreach ($errors->all() as $error)
-                    <li>{{ $error }}</li>
-                @endforeach
-            </ul>
-        </div>
+            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
+                <p class="font-bold">Validasi Gagal</p>
+                <ul class="list-disc ml-5">
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
         @endif
 
-        <form action="{{ route('admin.buku.update', $buku->id_buku) }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
+        <form action="{{ route('admin.buku.update', $buku->id) }}" method="POST" enctype="multipart/form-data"
+            class="p-6 space-y-6">
             @csrf
             @method('PUT')
-            
+
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                     <x-input-label for="bibid" value="BIBID" />
-                    <x-text-input id="bibid" name="bibid" type="text" class="mt-1 block w-full" :value="old('bibid', $buku->bibid)" />
+                    <x-text-input id="bibid" name="bibid" type="text" class="mt-1 block w-full"
+                        :value="old('bibid', $buku->bibid)" />
                 </div>
                 <div>
                     <x-input-label for="id_kategori" value="Kategori" />
-                    <select id="id_kategori" name="id_kategori" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
+                    <select id="id_kategori" name="id_kategori"
+                        class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                         <option value="">Pilih Kategori</option>
-                        @foreach($kategori as $kat)
-                            <option value="{{ $kat->id_kategori }}" {{ old('id_kategori', $buku->id_kategori) == $kat->id_kategori ? 'selected' : '' }}>
+                        @foreach ($kategori as $kat)
+                            <option value="{{ $kat->id_kategori }}"
+                                {{ old('id_kategori', $buku->id_kategori) == $kat->id_kategori ? 'selected' : '' }}>
                                 {{ $kat->nama_kategori }}
                             </option>
                         @endforeach
@@ -48,47 +52,56 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                     <x-input-label for="pengarang" value="Pengarang" />
-                    <x-text-input id="pengarang" name="pengarang" type="text" class="mt-1 block w-full" :value="old('pengarang', $buku->pengarang)" />
+                    <x-text-input id="pengarang" name="pengarang" type="text" class="mt-1 block w-full"
+                        :value="old('pengarang', $buku->pengarang)" />
                 </div>
                 <div>
                     <x-input-label for="nomor_panggil" value="Nomor Panggil (DDC)" />
-                    <x-text-input id="nomor_panggil" name="nomor_panggil" type="text" class="mt-1 block w-full" :value="old('nomor_panggil', $buku->nomor_panggil)" />
+                    <x-text-input id="nomor_panggil" name="nomor_panggil" type="text" class="mt-1 block w-full"
+                        :value="old('nomor_panggil', $buku->nomor_panggil)" />
                 </div>
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <div>
                     <x-input-label for="penerbit" value="Penerbit" />
-                    <x-text-input id="penerbit" name="penerbit" type="text" class="mt-1 block w-full" :value="old('penerbit', $buku->penerbit)" />
+                    <x-text-input id="penerbit" name="penerbit" type="text" class="mt-1 block w-full"
+                        :value="old('penerbit', $buku->penerbit)" />
                 </div>
                 <div>
                     <x-input-label for="tahun_terbit" value="Tahun Terbit" />
-                    <x-text-input id="tahun_terbit" name="tahun_terbit" type="number" class="mt-1 block w-full" :value="old('tahun_terbit', $buku->tahun_terbit)" />
+                    <x-text-input id="tahun_terbit" name="tahun_terbit" type="number" class="mt-1 block w-full"
+                        :value="old('tahun_terbit', $buku->tahun_terbit)" />
                 </div>
                 <div>
                     <x-input-label for="edisi" value="Edisi" />
-                    <x-text-input id="edisi" name="edisi" type="text" class="mt-1 block w-full" :value="old('edisi', $buku->edisi)" />
+                    <x-text-input id="edisi" name="edisi" type="text" class="mt-1 block w-full"
+                        :value="old('edisi', $buku->edisi)" />
                 </div>
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                     <x-input-label for="deskripsi_fisik" value="Deskripsi Fisik" />
-                    <x-text-input id="deskripsi_fisik" name="deskripsi_fisik" type="text" class="mt-1 block w-full" :value="old('deskripsi_fisik', $buku->deskripsi_fisik)" />
+                    <x-text-input id="deskripsi_fisik" name="deskripsi_fisik" type="text" class="mt-1 block w-full"
+                        :value="old('deskripsi_fisik', $buku->deskripsi_fisik)" />
                 </div>
                 <div>
                     <x-input-label for="eksemplar" value="Jumlah Eksemplar" />
-                    <x-text-input id="eksemplar" name="eksemplar" type="number" class="mt-1 block w-full" :value="old('eksemplar', $buku->eksemplar)" />
+                    <x-text-input id="eksemplar" name="eksemplar" type="number" class="mt-1 block w-full"
+                        :value="old('eksemplar', $buku->eksemplar)" />
                 </div>
             </div>
 
             <div class="border-t border-gray-100 pt-6">
                 <x-input-label for="cover" value="Unggah Gambar Cover (Opsional)" />
-                <input type="file" id="cover" name="cover" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
+                <input type="file" id="cover" name="cover" accept="image/*"
+                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
             </div>
 
             <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200">
-                <a href="{{ route('admin.buku.index') }}" class="text-gray-600 hover:text-gray-900 font-medium text-sm">Batal</a>
+                <a href="{{ route('admin.buku.index') }}"
+                    class="text-gray-600 hover:text-gray-900 font-medium text-sm">Batal</a>
                 <x-primary-button>
                     Simpan Perubahan
                 </x-primary-button>
diff --git a/resources/views/admin/buku/index.blade.php b/resources/views/admin/buku/index.blade.php
index beca68b..440e26e 100644
--- a/resources/views/admin/buku/index.blade.php
+++ b/resources/views/admin/buku/index.blade.php
@@ -3,208 +3,230 @@
 @section('title', 'Katalog Buku')
 
 @section('content')
-<div x-data="{ isModalBukuOpen: {{ ($errors->any() || request('add') == 'true') ? 'true' : 'false' }} }">
-    <x-page-header title="Portofolio Katalog Buku">
-        <x-slot name="actions">
-            <button @click="isModalBukuOpen = true" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-xl shadow-lg shadow-blue-500/30 transition-all font-semibold flex items-center gap-2 transform hover:scale-105">
-                <i class="fas fa-plus"></i> Tambah Buku Baru
-            </button>
-        </x-slot>
-    </x-page-header>
-
-    <x-alert type="success" :message="session('success')" />
-
-    <div class="mb-6">
-        <form method="GET" action="{{ route('admin.buku.index') }}" class="flex gap-2">
-            <x-text-input 
-                type="text" 
-                name="search" 
-                value="{{ request('search') }}" 
-                placeholder="Cari berdasarkan Judul atau BIBID..." 
-                class="w-full md:w-80"
-            />
-            <x-primary-button>
-                Cari
-            </x-primary-button>
-        </form>
-    </div>
-
-    <x-card>
-        <x-table>
-            <x-slot name="head">
-                <x-th>BIBID</x-th>
-                <x-th>Judul & Pengarang</x-th>
-                <x-th>Kategori</x-th>
-                <x-th>Stok</x-th>
-                <x-th class="text-right">Aksi</x-th>
+    <div x-data="{ isModalBukuOpen: {{ $errors->any() || request('add') == 'true' ? 'true' : 'false' }} }">
+        <x-page-header title="Portofolio Katalog Buku">
+            <x-slot name="actions">
+                <button @click="isModalBukuOpen = true"
+                    class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-xl shadow-lg shadow-blue-500/30 transition-all font-semibold flex items-center gap-2 transform hover:scale-105">
+                    <i class="fas fa-plus"></i> Tambah Buku Baru
+                </button>
             </x-slot>
-            
-            @forelse ($buku as $item)
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">{{ $item->bibid }}</td>
-                    <td class="px-6 py-4">
-                        <div class="text-sm font-bold text-gray-900">{{ $item->judul }}</div>
-                        <div class="text-sm text-gray-500">{{ $item->pengarang }}</div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->kategori->nama_kategori ?? 'Umum' }}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->eksemplar }}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <div class="flex justify-end gap-3">
-                            <a href="{{ route('admin.buku.edit', $item->id_buku) }}" class="text-blue-600 hover:text-blue-900">
-                                Edit
-                            </a>
-                            <form action="{{ route('admin.buku.destroy', $item->id_buku) }}"
-                                  method="POST"
-                                  onsubmit="return confirm('Apakah Anda yakin ingin menghapus aset buku ini?')">
-                                @csrf
-                                @method('DELETE')
-                                <button type="submit" class="text-red-600 hover:text-red-900 font-medium transition duration-150 ease-in-out">
-                                    Hapus
-                                </button>
-                            </form>
-                        </div>
-                    </td>
-                </tr>
-            @empty
-                <tr>
-                    <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
-                        Tidak ada data aset buku ditemukan.
-                    </td>
-                </tr>
-            @endforelse
-        </x-table>
+        </x-page-header>
 
-        <div class="mt-4">
-            {{ $buku->withQueryString()->links() }}
+        <x-alert type="success" :message="session('success')" />
+
+        <div class="mb-6">
+            <form method="GET" action="{{ route('admin.buku.index') }}" class="flex gap-2">
+                <x-text-input type="text" name="search" value="{{ request('search') }}"
+                    placeholder="Cari berdasarkan Judul atau BIBID..." class="w-full md:w-80" />
+                <x-primary-button>
+                    Cari
+                </x-primary-button>
+            </form>
         </div>
-    </x-card>
-    <!-- MODAL TAMBAH BUKU -->
-    <div x-show="isModalBukuOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <!-- Background overlay -->
-            <div x-show="isModalBukuOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalBukuOpen = false"></div>
 
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <x-card>
+            <x-table>
+                <x-slot name="head">
+                    <x-th>BIBID</x-th>
+                    <x-th>Judul & Pengarang</x-th>
+                    <x-th>Kategori</x-th>
+                    <x-th>Stok</x-th>
+                    <x-th class="text-right">Aksi</x-th>
+                </x-slot>
 
-            <!-- Modal panel -->
-            <div x-show="isModalBukuOpen" 
-                 x-transition:enter="ease-out duration-300" 
-                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave="ease-in duration-200" 
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-indigo-500/10 sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-8 border border-gray-100">
-                
-                <div class="flex justify-between items-center mb-6 pl-2">
-                    <div>
-                        <h3 class="text-2xl font-bold text-gray-900" id="modal-title">Tambah Koleksi Buku</h3>
-                        <p class="text-sm text-gray-500 mt-1">Masukkan detail buku baru ke dalam katalog perpustakaan.</p>
-                    </div>
-                    <button @click="isModalBukuOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
-                        <i class="fas fa-times text-lg"></i>
-                    </button>
-                </div>
+                @forelse ($buku as $item)
+                    <tr class="hover:bg-gray-50 transition-colors">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">{{ $item->bibid }}</td>
+                        <td class="px-6 py-4">
+                            <div class="text-sm font-bold text-gray-900">{{ $item->judul }}</div>
+                            <div class="text-sm text-gray-500">{{ $item->pengarang }}</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {{ $item->kategori->nama_kategori ?? 'Umum' }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->eksemplar }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                            <div class="flex justify-end gap-3">
+                                <a href="{{ route('admin.buku.edit', $item->id) }}"
+                                    class="text-blue-600 hover:text-blue-900">
+                                    Edit
+                                </a>
+                                <form action="{{ route('admin.buku.destroy', $item->id) }}" method="POST"
+                                    onsubmit="return confirm('Apakah Anda yakin ingin menghapus aset buku ini?')">
+                                    @csrf
+                                    @method('DELETE')
+                                    <button type="submit"
+                                        class="text-red-600 hover:text-red-900 font-medium transition duration-150 ease-in-out">
+                                        Hapus
+                                    </button>
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
+                            Tidak ada data aset buku ditemukan.
+                        </td>
+                    </tr>
+                @endforelse
+            </x-table>
 
-                @if ($errors->any())
-                <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm" role="alert">
-                    <p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
-                    <ul class="list-disc ml-5 space-y-1">
-                        @foreach ($errors->all() as $error)
-                            <li>{{ $error }}</li>
-                        @endforeach
-                    </ul>
-                </div>
-                @endif
+            <div class="mt-4">
+                {{ $buku->withQueryString()->links() }}
+            </div>
+        </x-card>
+        <!-- MODAL TAMBAH BUKU -->
+        <div x-show="isModalBukuOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
+            aria-labelledby="modal-title" role="dialog" aria-modal="true">
+            <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                <!-- Background overlay -->
+                <div x-show="isModalBukuOpen" x-transition.opacity
+                    class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"
+                    @click="isModalBukuOpen = false"></div>
 
-                <form action="{{ route('admin.buku.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
-                    @csrf
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+                <!-- Modal panel -->
+                <div x-show="isModalBukuOpen" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-indigo-500/10 sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-8 border border-gray-100">
+
+                    <div class="flex justify-between items-center mb-6 pl-2">
                         <div>
-                            <x-input-label for="bibid" value="BIBID" />
-                            <x-text-input id="bibid" name="bibid" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('bibid')" required />
+                            <h3 class="text-2xl font-bold text-gray-900" id="modal-title">Tambah Koleksi Buku</h3>
+                            <p class="text-sm text-gray-500 mt-1">Masukkan detail buku baru ke dalam katalog perpustakaan.
+                            </p>
                         </div>
-                        <div>
-                            <x-input-label for="id_kategori" value="Kategori" />
-                            <select id="id_kategori" name="id_kategori" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
-                                <option value="">Pilih Kategori</option>
-                                @foreach($kategori as $kat)
-                                    <option value="{{ $kat->id_kategori }}" {{ old('id_kategori') == $kat->id_kategori ? 'selected' : '' }}>
-                                        {{ $kat->nama_kategori }}
-                                    </option>
+                        <button @click="isModalBukuOpen = false"
+                            class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
+                            <i class="fas fa-times text-lg"></i>
+                        </button>
+                    </div>
+
+                    @if ($errors->any())
+                        <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm"
+                            role="alert">
+                            <p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
+                            <ul class="list-disc ml-5 space-y-1">
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
                                 @endforeach
-                            </select>
+                            </ul>
                         </div>
-                    </div>
+                    @endif
 
-                    <div>
-                        <x-input-label for="judul" value="Judul Buku" />
-                        <x-text-input id="judul" name="judul" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('judul')" required />
-                    </div>
+                    <form action="{{ route('admin.buku.store') }}" method="POST" enctype="multipart/form-data"
+                        class="space-y-6">
+                        @csrf
 
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <x-input-label for="pengarang" value="Pengarang" />
-                            <x-text-input id="pengarang" name="pengarang" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('pengarang')" required />
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <x-input-label for="bibid" value="BIBID" />
+                                <x-text-input id="bibid" name="bibid" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('bibid')" required />
+                            </div>
+                            <div>
+                                <x-input-label for="id_kategori" value="Kategori" />
+                                <select id="id_kategori" name="id_kategori"
+                                    class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50"
+                                    required>
+                                    <option value="">Pilih Kategori</option>
+                                    @foreach ($kategori as $kat)
+                                        <option value="{{ $kat->id_kategori }}"
+                                            {{ old('id_kategori') == $kat->id_kategori ? 'selected' : '' }}>
+                                            {{ $kat->nama_kategori }}
+                                        </option>
+                                    @endforeach
+                                </select>
+                            </div>
                         </div>
-                        <div>
-                            <x-input-label for="nomor_panggil" value="Nomor Panggil (DDC)" />
-                            <x-text-input id="nomor_panggil" name="nomor_panggil" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('nomor_panggil')" required />
-                        </div>
-                    </div>
 
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                         <div>
-                            <x-input-label for="penerbit" value="Penerbit" />
-                            <x-text-input id="penerbit" name="penerbit" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('penerbit')" />
+                            <x-input-label for="judul" value="Judul Buku" />
+                            <x-text-input id="judul" name="judul" type="text"
+                                class="mt-1 block w-full bg-gray-50/50" :value="old('judul')" required />
                         </div>
-                        <div>
-                            <x-input-label for="tahun_terbit" value="Tahun Terbit" />
-                            <x-text-input id="tahun_terbit" name="tahun_terbit" type="number" class="mt-1 block w-full bg-gray-50/50" :value="old('tahun_terbit')" />
-                        </div>
-                        <div>
-                            <x-input-label for="edisi" value="Edisi" />
-                            <x-text-input id="edisi" name="edisi" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('edisi')" />
-                        </div>
-                    </div>
 
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <x-input-label for="deskripsi_fisik" value="Deskripsi Fisik" />
-                            <x-text-input id="deskripsi_fisik" name="deskripsi_fisik" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('deskripsi_fisik')" />
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <x-input-label for="pengarang" value="Pengarang" />
+                                <x-text-input id="pengarang" name="pengarang" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('pengarang')" required />
+                            </div>
+                            <div>
+                                <x-input-label for="nomor_panggil" value="Nomor Panggil (DDC)" />
+                                <x-text-input id="nomor_panggil" name="nomor_panggil" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('nomor_panggil')" required />
+                            </div>
                         </div>
-                        <div>
-                            <x-input-label for="eksemplar" value="Jumlah Eksemplar" />
-                            <x-text-input id="eksemplar" name="eksemplar" type="number" class="mt-1 block w-full bg-gray-50/50" :value="old('eksemplar')" required />
-                        </div>
-                    </div>
 
-                    <div class="border-t border-gray-100 pt-6">
-                        <x-input-label for="cover" value="Unggah Gambar Cover (Opsional)" class="mb-2" />
-                        <div class="flex items-center justify-center w-full">
-                            <label for="cover" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-indigo-200 rounded-2xl cursor-pointer bg-indigo-50/30 hover:bg-indigo-50 transition-colors">
-                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                                    <i class="fas fa-cloud-upload-alt text-3xl text-indigo-400 mb-2"></i>
-                                    <p class="mb-1 text-sm text-gray-500"><span class="font-semibold text-indigo-600">Klik untuk unggah</span> atau seret file ke sini</p>
-                                    <p class="text-xs text-gray-400">PNG, JPG, JPEG (Maks. 2MB)</p>
-                                </div>
-                                <input id="cover" name="cover" type="file" class="hidden" accept="image/jpeg, image/png, image/jpg" />
-                            </label>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div>
+                                <x-input-label for="penerbit" value="Penerbit" />
+                                <x-text-input id="penerbit" name="penerbit" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('penerbit')" />
+                            </div>
+                            <div>
+                                <x-input-label for="tahun_terbit" value="Tahun Terbit" />
+                                <x-text-input id="tahun_terbit" name="tahun_terbit" type="number"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('tahun_terbit')" />
+                            </div>
+                            <div>
+                                <x-input-label for="edisi" value="Edisi" />
+                                <x-text-input id="edisi" name="edisi" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('edisi')" />
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
-                        <button type="button" @click="isModalBukuOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
-                            Batal
-                        </button>
-                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
-                            <i class="fas fa-save mr-2"></i> Simpan Buku
-                        </button>
-                    </div>
-                </form>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <x-input-label for="deskripsi_fisik" value="Deskripsi Fisik" />
+                                <x-text-input id="deskripsi_fisik" name="deskripsi_fisik" type="text"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('deskripsi_fisik')" />
+                            </div>
+                            <div>
+                                <x-input-label for="eksemplar" value="Jumlah Eksemplar" />
+                                <x-text-input id="eksemplar" name="eksemplar" type="number"
+                                    class="mt-1 block w-full bg-gray-50/50" :value="old('eksemplar')" required />
+                            </div>
+                        </div>
+
+                        <div class="border-t border-gray-100 pt-6">
+                            <x-input-label for="cover" value="Unggah Gambar Cover (Opsional)" class="mb-2" />
+                            <div class="flex items-center justify-center w-full">
+                                <label for="cover"
+                                    class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-indigo-200 rounded-2xl cursor-pointer bg-indigo-50/30 hover:bg-indigo-50 transition-colors">
+                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                        <i class="fas fa-cloud-upload-alt text-3xl text-indigo-400 mb-2"></i>
+                                        <p class="mb-1 text-sm text-gray-500"><span
+                                                class="font-semibold text-indigo-600">Klik untuk unggah</span> atau seret
+                                            file ke sini</p>
+                                        <p class="text-xs text-gray-400">PNG, JPG, JPEG (Maks. 2MB)</p>
+                                    </div>
+                                    <input id="cover" name="cover" type="file" class="hidden"
+                                        accept="image/jpeg, image/png, image/jpg" />
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
+                            <button type="button" @click="isModalBukuOpen = false"
+                                class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
+                                Batal
+                            </button>
+                            <button type="submit"
+                                class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
+                                <i class="fas fa-save mr-2"></i> Simpan Buku
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
     </div>
-</div>
 @endsection
diff --git a/resources/views/admin/peminjaman/create.blade.php b/resources/views/admin/peminjaman/create.blade.php
index 0793d9e..8b680c5 100644
--- a/resources/views/admin/peminjaman/create.blade.php
+++ b/resources/views/admin/peminjaman/create.blade.php
@@ -1,77 +1,85 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container mx-auto px-4 py-8 max-w-2xl">
-    <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
-        <div class="p-6 bg-blue-50 border-b border-blue-100">
-            <h1 class="text-2xl font-extrabold text-blue-900">Formulir Peminjaman Aset</h1>
-        </div>
-
-        @if ($errors->any())
-        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
-            <p class="font-bold">Validasi Gagal</p>
-            <ul class="list-disc ml-5">
-                @foreach ($errors->all() as $error)
-                    <li>{{ $error }}</li>
-                @endforeach
-            </ul>
-        </div>
-        @endif
-
-        <form action="{{ route('admin.peminjaman.store') }}" method="POST" class="p-6 space-y-6" id="form-peminjaman">
-            @csrf
-            
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Anggota / Member</label>
-                <select name="id_anggota" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                    <option value="">-- Pilih Member --</option>
-                    @foreach($anggota as $a)
-                        <option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
-                            {{ $a->nama }} ({{ $a->no_identitas }})
-                        </option>
-                    @endforeach
-                </select>
+    <div class="container mx-auto px-4 py-8 max-w-2xl">
+        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
+            <div class="p-6 bg-blue-50 border-b border-blue-100">
+                <h1 class="text-2xl font-extrabold text-blue-900">Formulir Peminjaman Aset</h1>
             </div>
 
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Aset Buku (Hanya yang tersedia)</label>
-                <select name="id_buku" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                    <option value="">-- Pilih Buku --</option>
-                    @foreach($buku as $b)
-                        <option value="{{ $b->id_buku }}" {{ old('id_buku') == $b->id_buku ? 'selected' : '' }}>
-                            {{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
-                        </option>
-                    @endforeach
-                </select>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Pinjam</label>
-                    <input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
+            @if ($errors->any())
+                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
+                    <p class="font-bold">Validasi Gagal</p>
+                    <ul class="list-disc ml-5">
+                        @foreach ($errors->all() as $error)
+                            <li>{{ $error }}</li>
+                        @endforeach
+                    </ul>
                 </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Kembali (Tenggat)</label>
-                    <input type="date" name="tanggal_kembali" value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                </div>
-            </div>
+            @endif
 
-            <div class="pt-6 border-t border-gray-100 flex justify-between items-center">
-                <a href="{{ route('admin.peminjaman.index') }}" class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">Batal</a>
-                <button type="submit" id="btn-submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
-                    Eksekusi Transaksi
-                </button>
-            </div>
-        </form>
+            <form action="{{ route('admin.peminjaman.store') }}" method="POST" class="p-6 space-y-6" id="form-peminjaman">
+                @csrf
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Anggota / Member</label>
+                    <select name="id_anggota"
+                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                        <option value="">-- Pilih Member --</option>
+                        @foreach ($anggota as $a)
+                            <option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
+                                {{ $a->nama }} ({{ $a->no_identitas }})
+                            </option>
+                        @endforeach
+                    </select>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Pilih Aset Buku (Hanya yang
+                        tersedia)</label>
+                    <select name="id_buku"
+                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                        <option value="">-- Pilih Buku --</option>
+                        @foreach ($buku as $b)
+                            <option value="{{ $b->id }}" {{ old('id_buku') == $b->id ? 'selected' : '' }}>
+                                {{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
+                            </option>
+                        @endforeach
+                    </select>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Pinjam</label>
+                        <input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}"
+                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Kembali (Tenggat)</label>
+                        <input type="date" name="tanggal_kembali"
+                            value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}"
+                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
+                    </div>
+                </div>
+
+                <div class="pt-6 border-t border-gray-100 flex justify-between items-center">
+                    <a href="{{ route('admin.peminjaman.index') }}"
+                        class="text-gray-600 hover:text-gray-900 font-medium transition duration-300">Batal</a>
+                    <button type="submit" id="btn-submit"
+                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
+                        Eksekusi Transaksi
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-</div>
 
-<script>
-    document.getElementById('form-peminjaman').addEventListener('submit', function() {
-        const btn = document.getElementById('btn-submit');
-        btn.disabled = true;
-        btn.innerHTML = 'Memproses...';
-        btn.classList.add('opacity-50', 'cursor-not-allowed');
-    });
-</script>
-@endsection
\ No newline at end of file
+    <script>
+        document.getElementById('form-peminjaman').addEventListener('submit', function() {
+            const btn = document.getElementById('btn-submit');
+            btn.disabled = true;
+            btn.innerHTML = 'Memproses...';
+            btn.classList.add('opacity-50', 'cursor-not-allowed');
+        });
+    </script>
+@endsection
diff --git a/resources/views/admin/peminjaman/index.blade.php b/resources/views/admin/peminjaman/index.blade.php
index b79d960..52589f0 100644
--- a/resources/views/admin/peminjaman/index.blade.php
+++ b/resources/views/admin/peminjaman/index.blade.php
@@ -3,461 +3,523 @@
 @section('title', 'Sirkulasi Peminjaman')
 
 @section('content')
-<div x-data="{ 
-    isModalPeminjamanOpen: {{ ($errors->any() && !old('_method')) ? 'true' : 'false' }},
-    isModalKembaliOpen: false,
-    isModalEditOpen: {{ ($errors->any() && old('_method') == 'PUT') ? 'true' : 'false' }},
-    isModalDeleteOpen: false,
-    deleteId: '',
-    editData: { 
-        id: '{{ old('peminjaman_id_edit') ?? '' }}', 
-        id_anggota: '{{ old('id_anggota') ?? '' }}', 
-        id_buku: '{{ old('id_buku') ?? '' }}', 
-        tanggal_pinjam: '{{ old('tanggal_pinjam') ?? '' }}', 
-        tanggal_kembali: '{{ old('tanggal_kembali') ?? '' }}' 
-    },
-    openEditModal(id, anggotaId, buku, pinjam, kembali) {
-        this.editData = { id: id, id_anggota: anggotaId, id_buku: buku, tanggal_pinjam: pinjam, tanggal_kembali: kembali };
-        this.isModalEditOpen = true;
-    },
-    openDeleteModal(id) {
-        this.deleteId = id;
-        this.isModalDeleteOpen = true;
-    },
-    kembaliData: { id: '', judul: '', tgl_pinjam: '', tgl_tenggat: '', denda: 0 },
-    uangDibayar: '',
-    get kembalian() {
-        if (!this.uangDibayar) return 0;
-        return Math.max(0, this.uangDibayar - this.kembaliData.denda);
-    },
-    openKembaliModal(id, judul, pinjam, tenggat, denda) {
-        this.kembaliData = { id: id, judul: judul, tgl_pinjam: pinjam, tgl_tenggat: tenggat, denda: denda };
-        this.uangDibayar = '';
-        this.isModalKembaliOpen = true;
-    }
-}" x-cloak>
-    <x-page-header title="Sirkulasi Peminjaman Buku">
-        <x-slot name="actions">
-            <div class="flex flex-col sm:flex-row gap-2 items-center">
-                <!-- Search Form -->
-                <form action="{{ route('admin.peminjaman.index') }}" method="GET" class="relative w-full sm:w-auto flex">
-                    <div class="relative flex-grow min-w-[200px]">
-                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                            <i class="fas fa-search text-gray-400"></i>
-                        </div>
-                        <input type="text" name="search" value="{{ $search ?? '' }}" 
-                               class="bg-white border border-gray-200 border-r-0 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-9 px-3 py-2.5 shadow-sm transition-all outline-none" 
-                               placeholder="Cari judul/anggota...">
-                    </div>
-                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm rounded-r-lg font-bold shadow-sm transition-colors border-y border-r border-blue-600 focus:ring-2 focus:ring-blue-300">
-                        Cari
-                    </button>
-                    @if(request('search'))
-                        <a href="{{ route('admin.peminjaman.index') }}" class="ml-2 bg-gray-100 hover:bg-red-50 border border-gray-200 text-gray-500 hover:text-red-500 px-3 flex items-center justify-center rounded-lg shadow-sm transition-colors" title="Reset Pencarian">
-                            <i class="fas fa-times"></i>
-                        </a>
-                    @endif
-                </form>
-
-                <button @click="isModalPeminjamanOpen = true" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-lg border border-transparent shadow-[0_4px_10px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_15px_rgba(37,99,235,0.3)] transition-all font-semibold flex items-center gap-2 transform hover:translate-y-[-1px]">
-                    <i class="fas fa-plus mr-1"></i> Catat Peminjaman Baru
-                </button>
-            </div>
-        </x-slot>
-    </x-page-header>
-
-    <x-alert type="success" :message="session('success')" />
-
-    <x-card>
-        <x-table>
-            <x-slot name="head">
-                <x-th>Anggota</x-th>
-                <x-th>Buku</x-th>
-                <x-th>Durasi Pinjam</x-th>
-                <x-th class="text-center">Status</x-th>
-                <x-th class="text-right">Aksi</x-th>
-            </x-slot>
-            
-            @forelse ($peminjaman as $item)
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td class="px-6 py-4 whitespace-nowrap">
-                        @if($item->anggota)
-                            <div class="text-sm font-bold text-gray-900">{{ $item->anggota->nama }}</div>
-                            <div class="text-xs text-gray-500 mt-0.5">ID: {{ $item->anggota->no_identitas }}</div>
-                            <div class="inline-flex items-center gap-1.5 px-2 py-1 mt-1.5 rounded bg-green-50 text-green-700 text-[11px] font-bold border border-green-200">
-                                <i class="fab fa-whatsapp text-green-600"></i> {{ $item->anggota->no_hp ?? '-' }}
+    <div x-data="{
+        isModalPeminjamanOpen: {{ $errors->any() && !old('_method') ? 'true' : 'false' }},
+        isModalKembaliOpen: false,
+        isModalEditOpen: {{ $errors->any() && old('_method') == 'PUT' ? 'true' : 'false' }},
+        isModalDeleteOpen: false,
+        deleteId: '',
+        editData: {
+            id: '{{ old('peminjaman_id_edit') ?? '' }}',
+            id_anggota: '{{ old('id_anggota') ?? '' }}',
+            id_buku: '{{ old('id_buku') ?? '' }}',
+            tanggal_pinjam: '{{ old('tanggal_pinjam') ?? '' }}',
+            tanggal_kembali: '{{ old('tanggal_kembali') ?? '' }}'
+        },
+        openEditModal(id, anggotaId, buku, pinjam, kembali) {
+            this.editData = { id: id, id_anggota: anggotaId, id_buku: buku, tanggal_pinjam: pinjam, tanggal_kembali: kembali };
+            this.isModalEditOpen = true;
+        },
+        openDeleteModal(id) {
+            this.deleteId = id;
+            this.isModalDeleteOpen = true;
+        },
+        kembaliData: { id: '', judul: '', tgl_pinjam: '', tgl_tenggat: '', denda: 0 },
+        uangDibayar: '',
+        get kembalian() {
+            if (!this.uangDibayar) return 0;
+            return Math.max(0, this.uangDibayar - this.kembaliData.denda);
+        },
+        openKembaliModal(id, judul, pinjam, tenggat, denda) {
+            this.kembaliData = { id: id, judul: judul, tgl_pinjam: pinjam, tgl_tenggat: tenggat, denda: denda };
+            this.uangDibayar = '';
+            this.isModalKembaliOpen = true;
+        }
+    }" x-cloak>
+        <x-page-header title="Sirkulasi Peminjaman Buku">
+            <x-slot name="actions">
+                <div class="flex flex-col sm:flex-row gap-2 items-center">
+                    <!-- Search Form -->
+                    <form action="{{ route('admin.peminjaman.index') }}" method="GET" class="relative w-full sm:w-auto flex">
+                        <div class="relative flex-grow min-w-[200px]">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <i class="fas fa-search text-gray-400"></i>
                             </div>
-                        @else
-                            <div class="text-sm font-bold text-gray-900">{{ $item->user?->name ?? 'Anonim' }}</div>
-                            <div class="text-[10px] text-amber-600 font-bold uppercase italic">Riwayat User Lama</div>
+                            <input type="text" name="search" value="{{ $search ?? '' }}"
+                                class="bg-white border border-gray-200 border-r-0 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-9 px-3 py-2.5 shadow-sm transition-all outline-none"
+                                placeholder="Cari judul/anggota...">
+                        </div>
+                        <button type="submit"
+                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm rounded-r-lg font-bold shadow-sm transition-colors border-y border-r border-blue-600 focus:ring-2 focus:ring-blue-300">
+                            Cari
+                        </button>
+                        @if (request('search'))
+                            <a href="{{ route('admin.peminjaman.index') }}"
+                                class="ml-2 bg-gray-100 hover:bg-red-50 border border-gray-200 text-gray-500 hover:text-red-500 px-3 flex items-center justify-center rounded-lg shadow-sm transition-colors"
+                                title="Reset Pencarian">
+                                <i class="fas fa-times"></i>
+                            </a>
                         @endif
-                    </td>
-                    <td class="px-6 py-4">
-                        <div class="text-sm font-bold text-gray-900 line-clamp-1">{{ $item->buku->judul ?? 'Buku Dihapus' }}</div>
-                        <div class="text-sm text-gray-500">{{ $item->buku->nomor_panggil ?? '-' }}</div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }} - 
-                        {{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-center">
-                        @if($item->status_peminjaman == 'Dipinjam')
-                            @if(\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay()->lt(\Carbon\Carbon::now()->startOfDay()))
-                                @php
-                                    $selisihHari = \Carbon\Carbon::now()->startOfDay()->diffInDays(\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay());
-                                    $estimasiDenda = $selisihHari * 1000;
-                                @endphp
-                                <x-badge color="red"><i class="fas fa-exclamation-triangle mr-1"></i> Terlambat</x-badge>
-                                <div class="text-[10px] text-red-600 mt-1 font-bold animate-pulse">Denda berjalan: Rp {{ number_format($estimasiDenda, 0, ',', '.') }}</div>
+                    </form>
+
+                    <button @click="isModalPeminjamanOpen = true"
+                        class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-lg border border-transparent shadow-[0_4px_10px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_15px_rgba(37,99,235,0.3)] transition-all font-semibold flex items-center gap-2 transform hover:translate-y-[-1px]">
+                        <i class="fas fa-plus mr-1"></i> Catat Peminjaman Baru
+                    </button>
+                </div>
+            </x-slot>
+        </x-page-header>
+
+        <x-alert type="success" :message="session('success')" />
+
+        <x-card>
+            <x-table>
+                <x-slot name="head">
+                    <x-th>Anggota</x-th>
+                    <x-th>Buku</x-th>
+                    <x-th>Durasi Pinjam</x-th>
+                    <x-th class="text-center">Status</x-th>
+                    <x-th class="text-right">Aksi</x-th>
+                </x-slot>
+
+                @forelse ($peminjaman as $item)
+                    <tr class="hover:bg-gray-50 transition-colors">
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            @if ($item->anggota)
+                                <div class="text-sm font-bold text-gray-900">{{ $item->anggota->nama }}</div>
+                                <div class="text-xs text-gray-500 mt-0.5">ID: {{ $item->anggota->no_identitas }}</div>
+                                <div
+                                    class="inline-flex items-center gap-1.5 px-2 py-1 mt-1.5 rounded bg-green-50 text-green-700 text-[11px] font-bold border border-green-200">
+                                    <i class="fab fa-whatsapp text-green-600"></i> {{ $item->anggota->no_hp ?? '-' }}
+                                </div>
                             @else
-                                <x-badge color="yellow">Aktif Dipinjam</x-badge>
+                                <div class="text-sm font-bold text-gray-900">{{ $item->user?->name ?? 'Anonim' }}</div>
+                                <div class="text-[10px] text-amber-600 font-bold uppercase italic">Riwayat User Lama</div>
                             @endif
-                        @else
-                            <x-badge color="green">Selesai</x-badge>
-                            @if($item->denda > 0)
-                                <div class="text-xs text-red-600 font-bold mt-1">Denda: Rp {{ number_format($item->denda, 0, ',', '.') }}</div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="text-sm font-bold text-gray-900 line-clamp-1">
+                                {{ $item->buku->judul ?? 'Buku Dihapus' }}</div>
+                            <div class="text-sm text-gray-500">{{ $item->buku->nomor_panggil ?? '-' }}</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }} -
+                            {{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-center">
+                            @if ($item->status_peminjaman == 'Dipinjam')
+                                @if (\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay()->lt(\Carbon\Carbon::now()->startOfDay()))
+                                    @php
+                                        $selisihHari = \Carbon\Carbon::now()
+                                            ->startOfDay()
+                                            ->diffInDays(\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay());
+                                        $estimasiDenda = $selisihHari * 1000;
+                                    @endphp
+                                    <x-badge color="red"><i class="fas fa-exclamation-triangle mr-1"></i>
+                                        Terlambat</x-badge>
+                                    <div class="text-[10px] text-red-600 mt-1 font-bold animate-pulse">Denda berjalan: Rp
+                                        {{ number_format($estimasiDenda, 0, ',', '.') }}</div>
+                                @else
+                                    <x-badge color="yellow">Aktif Dipinjam</x-badge>
+                                @endif
+                            @else
+                                <x-badge color="green">Selesai</x-badge>
+                                @if ($item->denda > 0)
+                                    <div class="text-xs text-red-600 font-bold mt-1">Denda: Rp
+                                        {{ number_format($item->denda, 0, ',', '.') }}</div>
+                                @endif
                             @endif
-                        @endif
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <div class="flex items-center justify-end gap-2">
-                            @if($item->status_peminjaman == 'Dipinjam')
-                                @php
-                                    $dendaItem = 0;
-                                    $tglTenggat = \Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay();
-                                    $tglSekarang = \Carbon\Carbon::now()->startOfDay();
-                                    if ($tglSekarang->gt($tglTenggat)) {
-                                        $dendaItem = $tglSekarang->diffInDays($tglTenggat) * 1000;
-                                    }
-                                @endphp
-                                <button type="button" 
-                                        @click="openKembaliModal('{{ $item->id_peminjaman }}', '{{ addslashes($item->buku->judul ?? 'Buku Dihapus') }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}', {{ $dendaItem }})" 
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                            <div class="flex items-center justify-end gap-2">
+                                @if ($item->status_peminjaman == 'Dipinjam')
+                                    @php
+                                        $dendaItem = 0;
+                                        $tglTenggat = \Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay();
+                                        $tglSekarang = \Carbon\Carbon::now()->startOfDay();
+                                        if ($tglSekarang->gt($tglTenggat)) {
+                                            $dendaItem = $tglSekarang->diffInDays($tglTenggat) * 1000;
+                                        }
+                                    @endphp
+                                    <button type="button"
+                                        @click="openKembaliModal('{{ $item->id_peminjaman }}', '{{ addslashes($item->buku->judul ?? 'Buku Dihapus') }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}', {{ $dendaItem }})"
                                         class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1.5 rounded text-xs font-bold transition">
-                                    Kembalikan
+                                        Kembalikan
+                                    </button>
+                                @else
+                                    <span
+                                        class="text-green-600 font-bold px-3 py-1.5 text-xs bg-green-50 rounded border border-green-200 flex items-center">Tuntas</span>
+                                @endif
+                                <a href="{{ route('admin.peminjaman.struk', $item->id_peminjaman) }}" target="_blank"
+                                    class="bg-gray-800 text-white hover:bg-gray-900 px-3 py-1.5 rounded text-xs font-bold transition flex items-center">Cetak
+                                    Struk</a>
+                                @if ($item->status_peminjaman == 'Dipinjam')
+                                    <button type="button"
+                                        @click="openEditModal('{{ $item->id_peminjaman }}', '{{ $item->id_anggota ?? $item->id_user }}', '{{ $item->id_buku }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('Y-m-d') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('Y-m-d') }}')"
+                                        class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center"
+                                        title="Edit Transaksi">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                @endif
+                                <button type="button" @click="openDeleteModal('{{ $item->id_peminjaman }}')"
+                                    class="bg-red-100 text-red-700 hover:bg-red-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center"
+                                    title="Hapus Permanen">
+                                    <i class="fas fa-trash-alt"></i>
                                 </button>
-                            @else
-                            <span class="text-green-600 font-bold px-3 py-1.5 text-xs bg-green-50 rounded border border-green-200 flex items-center">Tuntas</span>
-                            @endif
-                            <a href="{{ route('admin.peminjaman.struk', $item->id_peminjaman) }}" target="_blank" class="bg-gray-800 text-white hover:bg-gray-900 px-3 py-1.5 rounded text-xs font-bold transition flex items-center">Cetak Struk</a>
-                            @if($item->status_peminjaman == 'Dipinjam')
-                                <button type="button" @click="openEditModal('{{ $item->id_peminjaman }}', '{{ $item->id_anggota ?? $item->id_user }}', '{{ $item->id_buku }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('Y-m-d') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('Y-m-d') }}')" class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center" title="Edit Transaksi">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                            @endif
-                            <button type="button" @click="openDeleteModal('{{ $item->id_peminjaman }}')" class="bg-red-100 text-red-700 hover:bg-red-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center" title="Hapus Permanen">
-                                <i class="fas fa-trash-alt"></i>
+                            </div>
+                        </td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
+                            Belum ada rekam jejak transaksi.
+                        </td>
+                    </tr>
+                @endforelse
+            </x-table>
+
+            <div class="mt-4">
+                {{ $peminjaman->links() }}
+            </div>
+        </x-card>
+
+        <!-- MODAL TAMBAH PEMINJAMAN -->
+        <div x-show="isModalPeminjamanOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
+            aria-labelledby="modal-title" role="dialog" aria-modal="true">
+            <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                <!-- Background overlay -->
+                <div x-show="isModalPeminjamanOpen" x-transition.opacity
+                    class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"
+                    @click="isModalPeminjamanOpen = false"></div>
+
+                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+                <!-- Modal panel -->
+                <div x-show="isModalPeminjamanOpen" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
+
+                    <div class="flex justify-between items-center mb-6 pl-2">
+                        <div>
+                            <h3 class="text-2xl font-bold text-gray-900" id="modal-title">Formulir Peminjaman Buku</h3>
+                            <p class="text-sm text-gray-500 mt-1">Pilih anggota dan judul buku yang akan dipinjamkan.</p>
+                        </div>
+                        <button @click="isModalPeminjamanOpen = false"
+                            class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
+                            <i class="fas fa-times text-lg"></i>
+                        </button>
+                    </div>
+
+                    @if ($errors->any())
+                        <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm"
+                            role="alert">
+                            <p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
+                            <ul class="list-disc ml-5 space-y-1">
+                                @foreach ($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+
+                    <form action="{{ route('admin.peminjaman.store') }}" method="POST" class="space-y-6">
+                        @csrf
+
+                        <div>
+                            <x-input-label value="Pilih Anggota / Member" />
+                            <select name="id_anggota" x-init="new TomSelect($el, { maxOptions: null })"
+                                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50"
+                                required>
+                                <option value="">-- Pilih Member --</option>
+                                @foreach ($anggota as $a)
+                                    <option value="{{ $a->id }}"
+                                        {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
+                                        {{ $a->nama }} ({{ $a->no_identitas }})
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div>
+                            <x-input-label value="Pilih Buku (Hanya yang tersedia)" />
+                            <select name="id_buku" x-init="new TomSelect($el, { maxOptions: null })"
+                                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50"
+                                required>
+                                <option value="">-- Pilih Buku --</option>
+                                @foreach ($buku as $b)
+                                    <option value="{{ $b->id }}" {{ old('id_buku') == $b->id ? 'selected' : '' }}>
+                                        {{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <x-input-label value="Tanggal Pinjam" />
+                                <x-text-input type="date" name="tanggal_pinjam"
+                                    value="{{ old('tanggal_pinjam', date('Y-m-d')) }}"
+                                    class="mt-1 block w-full bg-gray-50/50" required />
+                            </div>
+                            <div>
+                                <x-input-label value="Tanggal Kembali (Tenggat)" />
+                                <x-text-input type="date" name="tanggal_kembali"
+                                    value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}"
+                                    class="mt-1 block w-full bg-gray-50/50" required />
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
+                            <button type="button" @click="isModalPeminjamanOpen = false"
+                                class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
+                                Batal
+                            </button>
+                            <button type="submit"
+                                class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
+                                <i class="fas fa-check-circle mr-2"></i> Eksekusi Transaksi
                             </button>
                         </div>
-                    </td>
-                </tr>
-            @empty
-                <tr>
-                    <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
-                        Belum ada rekam jejak transaksi.
-                    </td>
-                </tr>
-            @endforelse
-        </x-table>
-
-        <div class="mt-4">
-            {{ $peminjaman->links() }}
-        </div>
-    </x-card>
-
-    <!-- MODAL TAMBAH PEMINJAMAN -->
-    <div x-show="isModalPeminjamanOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <!-- Background overlay -->
-            <div x-show="isModalPeminjamanOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalPeminjamanOpen = false"></div>
-
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-            <!-- Modal panel -->
-            <div x-show="isModalPeminjamanOpen" 
-                 x-transition:enter="ease-out duration-300" 
-                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave="ease-in duration-200" 
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
-                
-                <div class="flex justify-between items-center mb-6 pl-2">
-                    <div>
-                        <h3 class="text-2xl font-bold text-gray-900" id="modal-title">Formulir Peminjaman Buku</h3>
-                        <p class="text-sm text-gray-500 mt-1">Pilih anggota dan judul buku yang akan dipinjamkan.</p>
-                    </div>
-                    <button @click="isModalPeminjamanOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
-                        <i class="fas fa-times text-lg"></i>
-                    </button>
+                    </form>
                 </div>
-
-                @if ($errors->any())
-                <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm" role="alert">
-                    <p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
-                    <ul class="list-disc ml-5 space-y-1">
-                        @foreach ($errors->all() as $error)
-                            <li>{{ $error }}</li>
-                        @endforeach
-                    </ul>
-                </div>
-                @endif
-
-                <form action="{{ route('admin.peminjaman.store') }}" method="POST" class="space-y-6">
-                    @csrf
-                    
-                    <div>
-                        <x-input-label value="Pilih Anggota / Member" />
-                        <select name="id_anggota" x-init="new TomSelect($el, {maxOptions: null})" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
-                            <option value="">-- Pilih Member --</option>
-                            @foreach($anggota as $a)
-                                <option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
-                                    {{ $a->nama }} ({{ $a->no_identitas }})
-                                </option>
-                            @endforeach
-                        </select>
-                    </div>
-
-                    <div>
-                        <x-input-label value="Pilih Buku (Hanya yang tersedia)" />
-                        <select name="id_buku" x-init="new TomSelect($el, {maxOptions: null})" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
-                            <option value="">-- Pilih Buku --</option>
-                            @foreach($buku as $b)
-                                <option value="{{ $b->id_buku }}" {{ old('id_buku') == $b->id_buku ? 'selected' : '' }}>
-                                    {{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
-                                </option>
-                            @endforeach
-                        </select>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <x-input-label value="Tanggal Pinjam" />
-                            <x-text-input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}" class="mt-1 block w-full bg-gray-50/50" required />
-                        </div>
-                        <div>
-                            <x-input-label value="Tanggal Kembali (Tenggat)" />
-                            <x-text-input type="date" name="tanggal_kembali" value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}" class="mt-1 block w-full bg-gray-50/50" required />
-                        </div>
-                    </div>
-
-                    <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
-                        <button type="button" @click="isModalPeminjamanOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
-                            Batal
-                        </button>
-                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
-                            <i class="fas fa-check-circle mr-2"></i> Eksekusi Transaksi
-                        </button>
-                    </div>
-                </form>
             </div>
         </div>
-    </div>
-    <!-- MODAL PENGEMBALIAN & PEMBAYARAN DENDA -->
-    <div x-show="isModalKembaliOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-kembali-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <div x-show="isModalKembaliOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalKembaliOpen = false"></div>
+        <!-- MODAL PENGEMBALIAN & PEMBAYARAN DENDA -->
+        <div x-show="isModalKembaliOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
+            aria-labelledby="modal-kembali-title" role="dialog" aria-modal="true">
+            <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                <div x-show="isModalKembaliOpen" x-transition.opacity
+                    class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"
+                    @click="isModalKembaliOpen = false"></div>
 
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-            <div x-show="isModalKembaliOpen" 
-                 x-transition:enter="ease-out duration-300" 
-                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave="ease-in duration-200" 
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-8 border border-gray-100">
-                
-                <div class="flex justify-between items-center mb-6 pl-2 border-b pb-4">
-                    <div>
-                        <h3 class="text-xl font-bold text-gray-900" id="modal-kembali-title">Detail Pengembalian</h3>
-                        <p class="text-xs text-gray-500 mt-1">Selesaikan transaksi peminjaman buku ini.</p>
-                    </div>
-                    <button @click="isModalKembaliOpen = false" class="w-8 h-8 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
-                        <i class="fas fa-times text-sm"></i>
-                    </button>
-                </div>
+                <div x-show="isModalKembaliOpen" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-8 border border-gray-100">
 
-                <div class="space-y-3 mb-5 bg-gray-50 p-4 rounded-xl border border-gray-100">
-                    <div class="flex justify-between border-b border-gray-200 pb-2">
-                        <span class="text-xs font-semibold text-gray-500">Judul Buku</span>
-                        <span class="text-xs font-bold text-gray-900 text-right" x-text="kembaliData.judul"></span>
+                    <div class="flex justify-between items-center mb-6 pl-2 border-b pb-4">
+                        <div>
+                            <h3 class="text-xl font-bold text-gray-900" id="modal-kembali-title">Detail Pengembalian</h3>
+                            <p class="text-xs text-gray-500 mt-1">Selesaikan transaksi peminjaman buku ini.</p>
+                        </div>
+                        <button @click="isModalKembaliOpen = false"
+                            class="w-8 h-8 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
+                            <i class="fas fa-times text-sm"></i>
+                        </button>
                     </div>
-                    <div class="flex justify-between border-b border-gray-200 pb-2">
-                        <span class="text-xs font-semibold text-gray-500">Tanggal Peminjaman</span>
-                        <span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_pinjam"></span>
-                    </div>
-                    <div class="flex justify-between border-b border-gray-200 pb-2">
-                        <span class="text-xs font-semibold text-gray-500">Tenggat Pengembalian</span>
-                        <span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_tenggat"></span>
-                    </div>
-                    <div class="flex justify-between items-center pt-2">
-                        <span class="text-xs font-bold text-red-600">Total Denda</span>
-                        <span class="text-lg font-black text-red-700" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembaliData.denda)"></span>
-                    </div>
-                </div>
 
-                <template x-if="kembaliData.denda > 0">
-                    <div class="bg-red-50 p-4 rounded-xl border border-red-100 mb-5">
-                        <h4 class="text-xs font-bold text-red-800 mb-2"><i class="fas fa-money-bill-wave mr-1"></i>Pembayaran Denda</h4>
-                        <div class="space-y-3">
-                            <div>
-                                <label class="block text-[10px] font-semibold text-red-700 mb-1 uppercase tracking-wider">Uang yang Dibayar (Rp)</label>
-                                <input type="number" x-model.number="uangDibayar" min="0" class="w-full text-sm border-red-200 focus:border-red-500 focus:ring-red-500 rounded-lg shadow-sm bg-white" placeholder="Nominal uang...">
-                            </div>
-                            <div class="flex justify-between items-center bg-white p-2.5 rounded-lg border border-red-100 shadow-sm">
-                                <span class="text-xs font-bold text-gray-600">Kembalian:</span>
-                                <span class="text-base font-black text-green-600" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembalian)"></span>
-                            </div>
+                    <div class="space-y-3 mb-5 bg-gray-50 p-4 rounded-xl border border-gray-100">
+                        <div class="flex justify-between border-b border-gray-200 pb-2">
+                            <span class="text-xs font-semibold text-gray-500">Judul Buku</span>
+                            <span class="text-xs font-bold text-gray-900 text-right" x-text="kembaliData.judul"></span>
+                        </div>
+                        <div class="flex justify-between border-b border-gray-200 pb-2">
+                            <span class="text-xs font-semibold text-gray-500">Tanggal Peminjaman</span>
+                            <span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_pinjam"></span>
+                        </div>
+                        <div class="flex justify-between border-b border-gray-200 pb-2">
+                            <span class="text-xs font-semibold text-gray-500">Tenggat Pengembalian</span>
+                            <span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_tenggat"></span>
+                        </div>
+                        <div class="flex justify-between items-center pt-2">
+                            <span class="text-xs font-bold text-red-600">Total Denda</span>
+                            <span class="text-lg font-black text-red-700"
+                                x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembaliData.denda)"></span>
                         </div>
                     </div>
-                </template>
-                <template x-if="kembaliData.denda == 0">
-                    <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center font-bold text-xs mb-5 border border-green-100">
-                        <i class="fas fa-check-circle mr-1"></i> Tidak ada denda keterlambatan.
-                    </div>
-                </template>
 
-                <form :action="'/admin/peminjaman/' + kembaliData.id + '/kembali'" method="POST">
-                    @csrf
-                    @method('PUT')
-                    <div class="flex items-center justify-end gap-2 pt-3 border-t border-gray-100">
-                        <button type="button" @click="isModalKembaliOpen = false" class="px-4 py-2 text-xs text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold transition-colors">
-                            Batal
-                        </button>
-                        <button type="submit" 
+                    <template x-if="kembaliData.denda > 0">
+                        <div class="bg-red-50 p-4 rounded-xl border border-red-100 mb-5">
+                            <h4 class="text-xs font-bold text-red-800 mb-2"><i
+                                    class="fas fa-money-bill-wave mr-1"></i>Pembayaran Denda</h4>
+                            <div class="space-y-3">
+                                <div>
+                                    <label
+                                        class="block text-[10px] font-semibold text-red-700 mb-1 uppercase tracking-wider">Uang
+                                        yang Dibayar (Rp)</label>
+                                    <input type="number" x-model.number="uangDibayar" min="0"
+                                        class="w-full text-sm border-red-200 focus:border-red-500 focus:ring-red-500 rounded-lg shadow-sm bg-white"
+                                        placeholder="Nominal uang...">
+                                </div>
+                                <div
+                                    class="flex justify-between items-center bg-white p-2.5 rounded-lg border border-red-100 shadow-sm">
+                                    <span class="text-xs font-bold text-gray-600">Kembalian:</span>
+                                    <span class="text-base font-black text-green-600"
+                                        x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembalian)"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template x-if="kembaliData.denda == 0">
+                        <div
+                            class="bg-green-50 text-green-700 p-3 rounded-lg text-center font-bold text-xs mb-5 border border-green-100">
+                            <i class="fas fa-check-circle mr-1"></i> Tidak ada denda keterlambatan.
+                        </div>
+                    </template>
+
+                    <form :action="'/admin/peminjaman/' + kembaliData.id + '/kembali'" method="POST">
+                        @csrf
+                        @method('PUT')
+                        <div class="flex items-center justify-end gap-2 pt-3 border-t border-gray-100">
+                            <button type="button" @click="isModalKembaliOpen = false"
+                                class="px-4 py-2 text-xs text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold transition-colors">
+                                Batal
+                            </button>
+                            <button type="submit"
                                 class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-xs font-bold shadow-md transition-all"
                                 :disabled="kembaliData.denda > 0 && uangDibayar < kembaliData.denda"
-                                :class="(kembaliData.denda > 0 && uangDibayar < kembaliData.denda) ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'">
-                            <i class="fas fa-save mr-1"></i> Selesaikan Transaksi
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <!-- MODAL EDIT PEMINJAMAN -->
-    <div x-show="isModalEditOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <div x-show="isModalEditOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalEditOpen = false"></div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div x-show="isModalEditOpen" 
-                 x-transition:enter="ease-out duration-300" 
-                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave="ease-in duration-200" 
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
-                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
-                 class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
-                
-                <div class="flex justify-between items-center mb-6 pl-2">
-                    <div>
-                        <h3 class="text-2xl font-bold text-gray-900">Ubah Data Peminjaman</h3>
-                        <p class="text-sm text-gray-500 mt-1">Perbarui informasi transaksi peminjaman.</p>
-                    </div>
-                    <button @click="isModalEditOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
-                        <i class="fas fa-times text-lg"></i>
-                    </button>
-                </div>
-
-                <form :action="'/admin/peminjaman/' + editData.id" method="POST" class="space-y-6">
-                    @csrf
-                    @method('PUT')
-                    <input type="hidden" name="peminjaman_id_edit" :value="editData.id">
-                    
-                    <div>
-                        <x-input-label value="Pilih Anggota / Member" />
-                        <select name="id_anggota" x-model="editData.id_anggota" x-init="let tsA = null; $watch('isModalEditOpen', value => { if(value && !tsA && $el.offsetHeight) setTimeout(() => { try { tsA = new TomSelect($el, {maxOptions: null}); } catch(e){} }, 100) })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
-                            <option value="">-- Pilih Member --</option>
-                            @foreach($anggota as $a)
-                                <option value="{{ $a->id }}">{{ $a->nama }} ({{ $a->no_identitas }})</option>
-                            @endforeach
-                        </select>
-                    </div>
-
-                    <div>
-                        <x-input-label value="Pilih Buku" />
-                        <select name="id_buku" x-model="editData.id_buku" x-init="let tsB = null; $watch('isModalEditOpen', value => { if(value && !tsB && $el.offsetHeight) setTimeout(() => { try { tsB = new TomSelect($el, {maxOptions: null}); } catch(e){} }, 100) })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
-                            <option value="">-- Pilih Buku --</option>
-                            @foreach($buku as $b)
-                                <option value="{{ $b->id_buku }}">{{ $b->bibid }} - {{ $b->judul }}</option>
-                            @endforeach
-                        </select>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <x-input-label value="Tanggal Pinjam" />
-                            <x-text-input type="date" name="tanggal_pinjam" x-model="editData.tanggal_pinjam" class="mt-1 block w-full bg-gray-50/50" required />
-                        </div>
-                        <div>
-                            <x-input-label value="Tanggal Kembali (Tenggat)" />
-                            <x-text-input type="date" name="tanggal_kembali" x-model="editData.tanggal_kembali" class="mt-1 block w-full bg-gray-50/50" required />
-                        </div>
-                    </div>
-
-                    <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
-                        <button type="button" @click="isModalEditOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-xl font-semibold transition-colors">Batal</button>
-                        <button type="submit" class="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg transition-all transform hover:scale-105">
-                            <i class="fas fa-save mr-2"></i> Simpan Perubahan
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <!-- MODAL KONFIRMASI HAPUS PREMIUM -->
-    <div x-show="isModalDeleteOpen" 
-         x-transition:enter="transition ease-out duration-300"
-         x-transition:enter-start="opacity-0"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-200"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0"
-         class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
-        <div class="flex items-center justify-center min-h-screen px-4">
-            <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm" @click="isModalDeleteOpen = false"></div>
-            
-            <div x-show="isModalDeleteOpen" 
-                 x-transition:enter="transition ease-out duration-300 transform"
-                 x-transition:enter-start="opacity-0 scale-95 translate-y-4"
-                 x-transition:enter-end="opacity-100 scale-100 translate-y-0"
-                 class="relative bg-white rounded-[2rem] shadow-2xl max-w-md w-full p-8 overflow-hidden border border-gray-100">
-                
-                <div class="absolute top-0 right-0 p-4">
-                    <button @click="isModalDeleteOpen = false" class="text-gray-400 hover:text-gray-600 transition-colors">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-
-                <div class="text-center">
-                    <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-red-50 mb-6">
-                        <div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center animate-pulse">
-                            <i class="fas fa-trash-alt text-2xl text-red-600"></i>
-                        </div>
-                    </div>
-                    
-                    <h3 class="text-2xl font-black text-gray-900 mb-2">Hapus Transaksi?</h3>
-                    <p class="text-gray-500 mb-8 px-4 leading-relaxed">Data peminjaman ini akan dihapus permanen. Stok buku akan otomatis dikembalikan jika status masih dipinjam.</p>
-
-                    <div class="flex flex-col gap-3">
-                        <form :action="'/admin/peminjaman/' + deleteId" method="POST" class="w-full m-0">
-                            @csrf
-                            @method('DELETE')
-                            <button type="submit" class="w-full py-4 bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white rounded-2xl font-bold shadow-lg shadow-red-500/30 transition-all transform hover:scale-[1.02] active:scale-95">
-                                Ya, Hapus Sekarang
+                                :class="(kembaliData.denda > 0 && uangDibayar < kembaliData.denda) ?
+                                'opacity-50 cursor-not-allowed' : 'hover:scale-105'">
+                                <i class="fas fa-save mr-1"></i> Selesaikan Transaksi
                             </button>
-                        </form>
-                        <button @click="isModalDeleteOpen = false" class="w-full py-4 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-2xl font-bold transition-all">
-                            Batalkan
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- MODAL EDIT PEMINJAMAN -->
+        <div x-show="isModalEditOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
+            aria-labelledby="modal-title" role="dialog" aria-modal="true">
+            <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                <div x-show="isModalEditOpen" x-transition.opacity
+                    class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"
+                    @click="isModalEditOpen = false"></div>
+                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                <div x-show="isModalEditOpen" x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
+
+                    <div class="flex justify-between items-center mb-6 pl-2">
+                        <div>
+                            <h3 class="text-2xl font-bold text-gray-900">Ubah Data Peminjaman</h3>
+                            <p class="text-sm text-gray-500 mt-1">Perbarui informasi transaksi peminjaman.</p>
+                        </div>
+                        <button @click="isModalEditOpen = false"
+                            class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
+                            <i class="fas fa-times text-lg"></i>
                         </button>
                     </div>
+
+                    <form :action="'/admin/peminjaman/' + editData.id" method="POST" class="space-y-6">
+                        @csrf
+                        @method('PUT')
+                        <input type="hidden" name="peminjaman_id_edit" :value="editData.id">
+
+                        <div>
+                            <x-input-label value="Pilih Anggota / Member" />
+                            <select name="id_anggota" x-model="editData.id_anggota" x-init="let tsA = null;
+                            $watch('isModalEditOpen', value => { if (value && !tsA && $el.offsetHeight) setTimeout(() => { try { tsA = new TomSelect($el, { maxOptions: null }); } catch (e) {} }, 100) })"
+                                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50"
+                                required>
+                                <option value="">-- Pilih Member --</option>
+                                @foreach ($anggota as $a)
+                                    <option value="{{ $a->id }}">{{ $a->nama }} ({{ $a->no_identitas }})
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div>
+                            <x-input-label value="Pilih Buku" />
+                            <select name="id_buku" x-model="editData.id_buku" x-init="let tsB = null;
+                            $watch('isModalEditOpen', value => { if (value && !tsB && $el.offsetHeight) setTimeout(() => { try { tsB = new TomSelect($el, { maxOptions: null }); } catch (e) {} }, 100) })"
+                                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50"
+                                required>
+                                <option value="">-- Pilih Buku --</option>
+                                @foreach ($buku as $b)
+                                    <option value="{{ $b->id }}">{{ $b->bibid }} - {{ $b->judul }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <x-input-label value="Tanggal Pinjam" />
+                                <x-text-input type="date" name="tanggal_pinjam" x-model="editData.tanggal_pinjam"
+                                    class="mt-1 block w-full bg-gray-50/50" required />
+                            </div>
+                            <div>
+                                <x-input-label value="Tanggal Kembali (Tenggat)" />
+                                <x-text-input type="date" name="tanggal_kembali" x-model="editData.tanggal_kembali"
+                                    class="mt-1 block w-full bg-gray-50/50" required />
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
+                            <button type="button" @click="isModalEditOpen = false"
+                                class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-xl font-semibold transition-colors">Batal</button>
+                            <button type="submit"
+                                class="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg transition-all transform hover:scale-105">
+                                <i class="fas fa-save mr-2"></i> Simpan Perubahan
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- MODAL KONFIRMASI HAPUS PREMIUM -->
+        <div x-show="isModalDeleteOpen" x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
+            <div class="flex items-center justify-center min-h-screen px-4">
+                <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm" @click="isModalDeleteOpen = false"></div>
+
+                <div x-show="isModalDeleteOpen" x-transition:enter="transition ease-out duration-300 transform"
+                    x-transition:enter-start="opacity-0 scale-95 translate-y-4"
+                    x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+                    class="relative bg-white rounded-[2rem] shadow-2xl max-w-md w-full p-8 overflow-hidden border border-gray-100">
+
+                    <div class="absolute top-0 right-0 p-4">
+                        <button @click="isModalDeleteOpen = false"
+                            class="text-gray-400 hover:text-gray-600 transition-colors">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+
+                    <div class="text-center">
+                        <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-red-50 mb-6">
+                            <div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center animate-pulse">
+                                <i class="fas fa-trash-alt text-2xl text-red-600"></i>
+                            </div>
+                        </div>
+
+                        <h3 class="text-2xl font-black text-gray-900 mb-2">Hapus Transaksi?</h3>
+                        <p class="text-gray-500 mb-8 px-4 leading-relaxed">Data peminjaman ini akan dihapus permanen. Stok
+                            buku akan otomatis dikembalikan jika status masih dipinjam.</p>
+
+                        <div class="flex flex-col gap-3">
+                            <form :action="'/admin/peminjaman/' + deleteId" method="POST" class="w-full m-0">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit"
+                                    class="w-full py-4 bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white rounded-2xl font-bold shadow-lg shadow-red-500/30 transition-all transform hover:scale-[1.02] active:scale-95">
+                                    Ya, Hapus Sekarang
+                                </button>
+                            </form>
+                            <button @click="isModalDeleteOpen = false"
+                                class="w-full py-4 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-2xl font-bold transition-all">
+                                Batalkan
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/visitor/katalog/index.blade.php b/resources/views/visitor/katalog/index.blade.php
index 7e7daa1..26cbc86 100644
--- a/resources/views/visitor/katalog/index.blade.php
+++ b/resources/views/visitor/katalog/index.blade.php
@@ -1,185 +1,221 @@
 @extends('layouts.guest')
 
 @section('content')
-<!-- Hero Section -->
-<div class="relative bg-gradient-to-br from-blue-900 via-indigo-800 to-blue-900 py-16 sm:py-24 overflow-hidden shadow-2xl mb-12">
-    <!-- Decorative background elements -->
-    <div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] mix-blend-overlay"></div>
-    <div class="absolute top-0 right-0 -mr-20 -mt-20 w-72 h-72 rounded-full bg-blue-400 mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
-    <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-72 h-72 rounded-full bg-indigo-300 mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
-
-    <div class="container mx-auto px-4 relative z-10">
-        <div class="text-center max-w-3xl mx-auto">
-            <h1 class="text-4xl sm:text-5xl font-extrabold text-white mb-6 tracking-tight">
-                Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-200">Katalog Perpustakaan</span>
-            </h1>
-            <p class="text-blue-100 text-lg sm:text-xl mb-10 font-light">
-                Temukan ribuan koleksi buku, jurnal, dan referensi akademik untuk menginspirasi perjalanan literasi Anda.
-            </p>
-
-            <!-- Search Bar -->
-            <form action="{{ route('katalog.index') }}" method="GET" class="relative group max-w-2xl mx-auto">
-                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <svg class="h-6 w-6 text-gray-400 group-focus-within:text-blue-500 transition-colors" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
-                </div>
-                <input type="text" name="search" value="{{ $search }}" placeholder="Cari judul buku, pengarang, atau penerbit..." 
-                    class="block w-full pl-12 pr-32 py-4 bg-white/95 backdrop-blur-sm border-0 rounded-2xl shadow-xl focus:ring-4 focus:ring-blue-500/30 text-gray-800 text-lg transition-all placeholder-gray-400">
-                <button type="submit" class="absolute right-2 top-2 bottom-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold px-6 lg:px-8 rounded-xl shadow-md transition-all transform hover:scale-[1.02] active:scale-[0.98]">
-                    Cari
-                </button>
-            </form>
+    <!-- Hero Section -->
+    <div
+        class="relative bg-gradient-to-br from-blue-900 via-indigo-800 to-blue-900 py-16 sm:py-24 overflow-hidden shadow-2xl mb-12">
+        <!-- Decorative background elements -->
+        <div
+            class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] mix-blend-overlay">
+        </div>
+        <div
+            class="absolute top-0 right-0 -mr-20 -mt-20 w-72 h-72 rounded-full bg-blue-400 mix-blend-multiply filter blur-3xl opacity-30 animate-blob">
+        </div>
+        <div
+            class="absolute bottom-0 left-0 -ml-20 -mb-20 w-72 h-72 rounded-full bg-indigo-300 mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000">
         </div>
-    </div>
-</div>
 
-<div class="container mx-auto px-4 pb-16">
-    <!-- Results Info -->
-    @if(isset($search) && $search != '')
-    <div class="mb-8 flex justify-between items-center text-gray-600">
-        <p>Menampilkan hasil pencarian untuk: <span class="font-semibold text-gray-900">"{{ $search }}"</span></p>
-    </div>
-    @endif
-
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
-        @forelse($buku as $item)
-        @php
-            $habis = ($item->eksemplar <= 0);
-        @endphp
-        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full">
-            <!-- Book Cover -->
-            <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
-                @if($item->cover)
-                    <img src="{{ asset('storage/' . $item->cover) }}" alt="{{ $item->judul }}" 
-                        class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
-                @else
-                    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
-                        <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                        <span class="text-xs font-medium">Cover Tidak Tersedia</span>
-                    </div>
-                @endif
-                
-                @if($habis)
-                    <!-- Overlay Dipinjam Semua -->
-                    <div class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
-                        <div class="bg-red-600/90 text-white font-black text-sm md:text-base px-6 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none">
-                            TIDAK TERSEDIA
-                        </div>
-                    </div>
-                @endif
-                
-                <!-- Badge BUKU BARU Dinamis (Buku terbit/masuk dalam 1 tahun terakhir) -->
-                @php
-                    $isBaru = false;
-                    $tahunSekarang = date('Y');
-                    
-                    if (isset($item->tahun_terbit) && intval($item->tahun_terbit) >= ($tahunSekarang - 1)) {
-                        $isBaru = true;
-                    } elseif (isset($item->created_at)) {
-                        $tanggalMasuk = \Carbon\Carbon::parse($item->created_at);
-                        if ($tanggalMasuk->diffInDays(now()) <= 30) {
-                            $isBaru = true;
-                        }
-                    }
-                @endphp
-                
-                @if($isBaru && !$habis)
-                    <div class="absolute top-0 right-0 z-20">
-                        <div class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[9px] sm:text-[10px] font-extrabold px-3 py-1.5 shadow-lg rounded-bl-xl origin-top-right transform">
-                            <i class="fas fa-sparkles mr-1"></i> BUKU BARU
-                        </div>
-                    </div>
-                @endif
-                
-                <!-- Overlay Badges -->
-                <div class="absolute top-2 inset-x-2 flex justify-between items-start z-20">
-                    <span class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
-                        {{ $item->nomor_panggil }}
-                    </span>
-                    @if(isset($item->similarity_score))
-                        <span class="bg-blue-600/90 backdrop-blur-md text-white text-[10px] sm:text-xs font-semibold px-2 py-1 rounded shadow-sm">
-                            {{ $item->similarity_score >= 1 ? 'Exact' : 'Rel: '.number_format($item->similarity_score, 1) }}
-                        </span>
-                    @endif
-                </div>
-            </div>
-
-            <!-- Content -->
-            <div class="p-4 flex-grow flex flex-col">
-                <h2 class="text-sm sm:text-base font-bold text-gray-900 mb-1 line-clamp-2 md:leading-snug {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }}" title="{{ $item->judul }}">
-                    {{ $item->judul }}
-                </h2>
-                <p class="text-blue-600 font-medium text-xs sm:text-sm mb-2 line-clamp-1">
-                    {{ $item->pengarang }}
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="text-center max-w-3xl mx-auto">
+                <h1 class="text-4xl sm:text-5xl font-extrabold text-white mb-6 tracking-tight">
+                    Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-200">Katalog
+                        Perpustakaan</span>
+                </h1>
+                <p class="text-blue-100 text-lg sm:text-xl mb-10 font-light">
+                    Temukan ribuan koleksi buku, jurnal, dan referensi akademik untuk menginspirasi perjalanan literasi
+                    Anda.
                 </p>
-                <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
-                    <div class="flex justify-between items-center text-[10px] sm:text-xs text-gray-500">
-                        <span class="truncate pr-1">{{ $item->penerbit }}</span>
-                        <span class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+
+                <!-- Search Bar -->
+                <form action="{{ route('katalog.index') }}" method="GET" class="relative group max-w-2xl mx-auto">
+                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                        <svg class="h-6 w-6 text-gray-400 group-focus-within:text-blue-500 transition-colors"
+                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                    </div>
+                    <input type="text" name="search" value="{{ $search }}"
+                        placeholder="Cari judul buku, pengarang, atau penerbit..."
+                        class="block w-full pl-12 pr-32 py-4 bg-white/95 backdrop-blur-sm border-0 rounded-2xl shadow-xl focus:ring-4 focus:ring-blue-500/30 text-gray-800 text-lg transition-all placeholder-gray-400">
+                    <button type="submit"
+                        class="absolute right-2 top-2 bottom-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold px-6 lg:px-8 rounded-xl shadow-md transition-all transform hover:scale-[1.02] active:scale-[0.98]">
+                        Cari
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="container mx-auto px-4 pb-16">
+        <!-- Results Info -->
+        @if (isset($search) && $search != '')
+            <div class="mb-8 flex justify-between items-center text-gray-600">
+                <p>Menampilkan hasil pencarian untuk: <span class="font-semibold text-gray-900">"{{ $search }}"</span>
+                </p>
+            </div>
+        @endif
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+            @forelse($buku as $item)
+                @php
+                    $habis = $item->eksemplar <= 0;
+                @endphp
+                <div
+                    class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full">
+                    <!-- Book Cover -->
+                    <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
+                        @if ($item->cover)
+                            <img src="{{ asset('storage/' . $item->cover) }}" alt="{{ $item->judul }}"
+                                class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
+                        @else
+                            <div
+                                class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
+                                <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                                    </path>
+                                </svg>
+                                <span class="text-xs font-medium">Cover Tidak Tersedia</span>
+                            </div>
+                        @endif
+
+                        @if ($habis)
+                            <!-- Overlay Dipinjam Semua -->
+                            <div
+                                class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
+                                <div
+                                    class="bg-red-600/90 text-white font-black text-sm md:text-base px-6 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none">
+                                    TIDAK TERSEDIA
+                                </div>
+                            </div>
+                        @endif
+
+                        <!-- Badge BUKU BARU Dinamis (Buku terbit/masuk dalam 1 tahun terakhir) -->
+                        @php
+                            $isBaru = false;
+                            $tahunSekarang = date('Y');
+
+                            if (isset($item->tahun_terbit) && intval($item->tahun_terbit) >= $tahunSekarang - 1) {
+                                $isBaru = true;
+                            } elseif (isset($item->created_at)) {
+                                $tanggalMasuk = \Carbon\Carbon::parse($item->created_at);
+                                if ($tanggalMasuk->diffInDays(now()) <= 30) {
+                                    $isBaru = true;
+                                }
+                            }
+                        @endphp
+
+                        @if ($isBaru && !$habis)
+                            <div class="absolute top-0 right-0 z-20">
+                                <div
+                                    class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[9px] sm:text-[10px] font-extrabold px-3 py-1.5 shadow-lg rounded-bl-xl origin-top-right transform">
+                                    <i class="fas fa-sparkles mr-1"></i> BUKU BARU
+                                </div>
+                            </div>
+                        @endif
+
+                        <!-- Overlay Badges -->
+                        <div class="absolute top-2 inset-x-2 flex justify-between items-start z-20">
+                            <span
+                                class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
+                                {{ $item->nomor_panggil }}
+                            </span>
+                            @if (isset($item->similarity_score))
+                                <span
+                                    class="bg-blue-600/90 backdrop-blur-md text-white text-[10px] sm:text-xs font-semibold px-2 py-1 rounded shadow-sm">
+                                    {{ $item->similarity_score >= 1 ? 'Exact' : 'Rel: ' . number_format($item->similarity_score, 1) }}
+                                </span>
+                            @endif
+                        </div>
+                    </div>
+
+                    <!-- Content -->
+                    <div class="p-4 flex-grow flex flex-col">
+                        <h2 class="text-sm sm:text-base font-bold text-gray-900 mb-1 line-clamp-2 md:leading-snug {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }}"
+                            title="{{ $item->judul }}">
+                            {{ $item->judul }}
+                        </h2>
+                        <p class="text-blue-600 font-medium text-xs sm:text-sm mb-2 line-clamp-1">
+                            {{ $item->pengarang }}
+                        </p>
+                        <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
+                            <div class="flex justify-between items-center text-[10px] sm:text-xs text-gray-500">
+                                <span class="truncate pr-1">{{ $item->penerbit }}</span>
+                                <span
+                                    class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Action Area -->
+                    <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
+                        @if ($habis)
+                            <button disabled
+                                class="w-full text-center bg-gray-100 text-gray-500 text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
+                                Habis Dipinjam
+                            </button>
+                        @else
+                            <a href="{{ route('katalog.show', $item->id) }}"
+                                class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
+                                Lihat Detail
+                            </a>
+                        @endif
                     </div>
                 </div>
-            </div>
-
-            <!-- Action Area -->
-            <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
-                @if($habis)
-                    <button disabled class="w-full text-center bg-gray-100 text-gray-500 text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
-                        Habis Dipinjam
-                    </button>
-                @else
-                    <a href="{{ route('katalog.show', $item->id_buku) }}" class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
-                        Lihat Detail
-                    </a>
-                @endif
-            </div>
-        </div>
-        @empty
-        <div class="col-span-full py-20 bg-white rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center justify-center text-center px-4">
-            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gray-50 rounded-full flex items-center justify-center mb-6">
-                <svg class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                </svg>
-            </div>
-            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">Tidak Ada Koleksi</h3>
-            <p class="text-gray-500 max-w-md text-sm sm:text-base">Koleksi buku yang Anda cari belum tersedia saat ini. Silakan coba dengan kata kunci lain.</p>
-        </div>
-        @endforelse
-    </div>
-
-    <!-- Pagination -->
-    <div class="mt-12 flex justify-center">
-        {{ $buku->links() }}
-    </div>
-
-    <!-- Widget Buku Terpopuler -->
-    @if(isset($bukuPopuler) && $bukuPopuler->count() > 0)
-    <div class="mt-20 max-w-5xl mx-auto bg-white rounded-[2rem] shadow-sm border border-gray-100 p-6 sm:p-10">
-        <div class="flex items-center gap-3 mb-6 border-b border-gray-100 pb-4">
-            <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-orange-200">
-                <i class="fas fa-fire text-lg"></i>
-            </div>
-            <h3 class="text-2xl font-black text-gray-900 tracking-tight">Top 5 Buku Terpopuler</h3>
-        </div>
-        
-        <ul class="divide-y divide-gray-50">
-            @foreach($bukuPopuler as $top)
-            <li class="py-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 hover:bg-gray-50/80 -mx-4 px-4 rounded-2xl transition-colors group">
-                <div>
-                    <a href="{{ route('katalog.show', $top->id_buku) }}" class="font-bold text-gray-900 text-base md:text-lg group-hover:text-blue-600 transition-colors block mb-1">
-                        {{ $top->judul }}
-                    </a>
-                    <p class="text-sm text-gray-500">{{ $top->pengarang }}</p>
+            @empty
+                <div
+                    class="col-span-full py-20 bg-white rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center justify-center text-center px-4">
+                    <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gray-50 rounded-full flex items-center justify-center mb-6">
+                        <svg class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">Tidak Ada Koleksi</h3>
+                    <p class="text-gray-500 max-w-md text-sm sm:text-base">Koleksi buku yang Anda cari belum tersedia saat
+                        ini. Silakan coba dengan kata kunci lain.</p>
                 </div>
-                <div class="self-start sm:self-auto">
-                    <span class="inline-flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 border border-blue-100 text-xs font-bold px-4 py-2 rounded-full whitespace-nowrap shadow-sm transition-all group-hover:shadow-md">
-                        <i class="fas fa-chart-line text-blue-500"></i> {{ $top->peminjaman_count }} Peminjaman
-                    </span>
+            @endforelse
+        </div>
+
+        <!-- Pagination -->
+        <div class="mt-12 flex justify-center">
+            {{ $buku->links() }}
+        </div>
+
+        <!-- Widget Buku Terpopuler -->
+        @if (isset($bukuPopuler) && $bukuPopuler->count() > 0)
+            <div class="mt-20 max-w-5xl mx-auto bg-white rounded-[2rem] shadow-sm border border-gray-100 p-6 sm:p-10">
+                <div class="flex items-center gap-3 mb-6 border-b border-gray-100 pb-4">
+                    <div
+                        class="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-orange-200">
+                        <i class="fas fa-fire text-lg"></i>
+                    </div>
+                    <h3 class="text-2xl font-black text-gray-900 tracking-tight">Top 5 Buku Terpopuler</h3>
                 </div>
-            </li>
-            @endforeach
-        </ul>
+
+                <ul class="divide-y divide-gray-50">
+                    @foreach ($bukuPopuler as $top)
+                        <li
+                            class="py-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 hover:bg-gray-50/80 -mx-4 px-4 rounded-2xl transition-colors group">
+                            <div>
+                                <a href="{{ route('katalog.show', $top->id) }}"
+                                    class="font-bold text-gray-900 text-base md:text-lg group-hover:text-blue-600 transition-colors block mb-1">
+                                    {{ $top->judul }}
+                                </a>
+                                <p class="text-sm text-gray-500">{{ $top->pengarang }}</p>
+                            </div>
+                            <div class="self-start sm:self-auto">
+                                <span
+                                    class="inline-flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 border border-blue-100 text-xs font-bold px-4 py-2 rounded-full whitespace-nowrap shadow-sm transition-all group-hover:shadow-md">
+                                    <i class="fas fa-chart-line text-blue-500"></i> {{ $top->peminjaman_count }} Peminjaman
+                                </span>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
     </div>
-    @endif
-</div>
 @endsection
diff --git a/resources/views/visitor/katalog/show.blade.php b/resources/views/visitor/katalog/show.blade.php
index 0cd766f..3cd6aef 100644
--- a/resources/views/visitor/katalog/show.blade.php
+++ b/resources/views/visitor/katalog/show.blade.php
@@ -1,247 +1,294 @@
 @extends('layouts.guest')
 
 @push('styles')
-<style>
-    /* ===== Map Pin Visualization ===== */
-    .map-container {
-        position: relative;
-        width: 100%;
-        overflow: hidden;
-        border-radius: 0.75rem;
-        background: #E2E8F0;
-    }
-    .map-container img {
-        display: block;
-        width: 100%;
-        height: auto;
-        opacity: 0.95;
-    }
+    <style>
+        /* ===== Map Pin Visualization ===== */
+        .map-container {
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            border-radius: 0.75rem;
+            background: #E2E8F0;
+        }
 
-    /* Pin Pointer */
-    .map-pin {
-        position: absolute;
-        transform: translate(-50%, -100%);
-        z-index: 30;
-        cursor: pointer;
-        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
-        transition: filter 0.3s ease;
-    }
-    .map-pin:hover {
-        filter: drop-shadow(0 6px 14px rgba(227,38,54,0.5));
-        z-index: 40;
-    }
-    .map-pin.active {
-        animation: pinBounce 1.5s infinite;
-    }
+        .map-container img {
+            display: block;
+            width: 100%;
+            height: auto;
+            opacity: 0.95;
+        }
 
-    /* Pin Icon (red circle + triangle tail) */
-    .map-pin__icon {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .map-pin__circle {
-        width: 32px;
-        height: 32px;
-        background: linear-gradient(135deg, #E32636, #c0392b);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 2.5px solid #fff;
-        box-shadow: 0 2px 8px rgba(227,38,54,0.4);
-    }
-    .map-pin__circle i {
-        color: #fff;
-        font-size: 13px;
-    }
-    .map-pin__tail {
-        width: 0;
-        height: 0;
-        border-left: 7px solid transparent;
-        border-right: 7px solid transparent;
-        border-top: 10px solid #c0392b;
-        margin-top: -2px;
-    }
+        /* Pin Pointer */
+        .map-pin {
+            position: absolute;
+            transform: translate(-50%, -100%);
+            z-index: 30;
+            cursor: pointer;
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
+            transition: filter 0.3s ease;
+        }
 
-    /* Pin Label (tooltip di bawah) */
-    .map-pin__label {
-        position: absolute;
-        top: calc(100% + 6px);
-        left: 50%;
-        transform: translateX(-50%);
-        background: #0B5394;
-        color: #fff;
-        font-size: 9px;
-        font-weight: 800;
-        padding: 3px 8px;
-        border-radius: 4px;
-        white-space: nowrap;
-        box-shadow: 0 2px 6px rgba(11,83,148,0.4);
-        border: 1px solid rgba(96,165,250,0.4);
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-    }
-    .map-pin:hover .map-pin__label,
-    .map-pin.active .map-pin__label {
-        opacity: 1;
-    }
+        .map-pin:hover {
+            filter: drop-shadow(0 6px 14px rgba(227, 38, 54, 0.5));
+            z-index: 40;
+        }
 
-    /* Pulse dot di dasar pin */
-    .map-pin__pulse {
-        position: absolute;
-        bottom: -4px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: rgba(227,38,54,0.35);
-        z-index: -1;
-    }
-    .map-pin.active .map-pin__pulse {
-        animation: pinPulse 2s infinite;
-    }
+        .map-pin.active {
+            animation: pinBounce 1.5s infinite;
+        }
 
-    /* Overlay Not Found */
-    .map-overlay-notfound {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255,255,255,0.85);
-        backdrop-filter: blur(6px);
-        z-index: 50;
-        border-radius: 0.75rem;
-    }
+        /* Pin Icon (red circle + triangle tail) */
+        .map-pin__icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
 
-    @keyframes pinBounce {
-        0%, 100% { transform: translate(-50%, -100%); }
-        50%      { transform: translate(-50%, calc(-100% - 8px)); }
-    }
-    @keyframes pinPulse {
-        0%   { transform: translateX(-50%) scale(1); opacity: 0.6; }
-        100% { transform: translateX(-50%) scale(3.5); opacity: 0; }
-    }
-
-    /* Responsive adjustments */
-    @media (max-width: 640px) {
         .map-pin__circle {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, #E32636, #c0392b);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 2.5px solid #fff;
+            box-shadow: 0 2px 8px rgba(227, 38, 54, 0.4);
         }
+
         .map-pin__circle i {
-            font-size: 10px;
+            color: #fff;
+            font-size: 13px;
         }
+
         .map-pin__tail {
-            border-left-width: 5px;
-            border-right-width: 5px;
-            border-top-width: 7px;
+            width: 0;
+            height: 0;
+            border-left: 7px solid transparent;
+            border-right: 7px solid transparent;
+            border-top: 10px solid #c0392b;
+            margin-top: -2px;
         }
+
+        /* Pin Label (tooltip di bawah) */
         .map-pin__label {
-            font-size: 8px;
-            padding: 2px 6px;
+            position: absolute;
+            top: calc(100% + 6px);
+            left: 50%;
+            transform: translateX(-50%);
+            background: #0B5394;
+            color: #fff;
+            font-size: 9px;
+            font-weight: 800;
+            padding: 3px 8px;
+            border-radius: 4px;
+            white-space: nowrap;
+            box-shadow: 0 2px 6px rgba(11, 83, 148, 0.4);
+            border: 1px solid rgba(96, 165, 250, 0.4);
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s ease;
         }
-    }
-</style>
+
+        .map-pin:hover .map-pin__label,
+        .map-pin.active .map-pin__label {
+            opacity: 1;
+        }
+
+        /* Pulse dot di dasar pin */
+        .map-pin__pulse {
+            position: absolute;
+            bottom: -4px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: rgba(227, 38, 54, 0.35);
+            z-index: -1;
+        }
+
+        .map-pin.active .map-pin__pulse {
+            animation: pinPulse 2s infinite;
+        }
+
+        /* Overlay Not Found */
+        .map-overlay-notfound {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(6px);
+            z-index: 50;
+            border-radius: 0.75rem;
+        }
+
+        @keyframes pinBounce {
+
+            0%,
+            100% {
+                transform: translate(-50%, -100%);
+            }
+
+            50% {
+                transform: translate(-50%, calc(-100% - 8px));
+            }
+        }
+
+        @keyframes pinPulse {
+            0% {
+                transform: translateX(-50%) scale(1);
+                opacity: 0.6;
+            }
+
+            100% {
+                transform: translateX(-50%) scale(3.5);
+                opacity: 0;
+            }
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 640px) {
+            .map-pin__circle {
+                width: 24px;
+                height: 24px;
+            }
+
+            .map-pin__circle i {
+                font-size: 10px;
+            }
+
+            .map-pin__tail {
+                border-left-width: 5px;
+                border-right-width: 5px;
+                border-top-width: 7px;
+            }
+
+            .map-pin__label {
+                font-size: 8px;
+                padding: 2px 6px;
+            }
+        }
+    </style>
 @endpush
 
 @section('content')
-<div class="container mx-auto px-4 py-12 max-w-7xl">
-    <!-- Header: Back button & Search Bar -->
-    <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
-        <a href="{{ route('katalog.index') }}" class="text-gray-500 hover:text-blue-600 font-bold flex items-center transition-colors px-4 py-2 bg-white rounded-full shadow-sm border border-gray-100 hover:shadow-md">
-            <i class="fas fa-arrow-left mr-2"></i> Kembali
-        </a>
+    <div class="container mx-auto px-4 py-12 max-w-7xl">
+        <!-- Header: Back button & Search Bar -->
+        <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
+            <a href="{{ route('katalog.index') }}"
+                class="text-gray-500 hover:text-blue-600 font-bold flex items-center transition-colors px-4 py-2 bg-white rounded-full shadow-sm border border-gray-100 hover:shadow-md">
+                <i class="fas fa-arrow-left mr-2"></i> Kembali
+            </a>
 
-        <!-- Search Bar -->
-        <form action="{{ route('katalog.index') }}" method="GET" class="w-full md:w-80 relative group">
-            <input type="text" name="search" placeholder="Cari Buku..." class="w-full pl-5 pr-14 py-3 bg-white border border-gray-200 rounded-full shadow-sm focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 text-sm font-medium transition-all outline-none">
-            <button type="submit" class="absolute right-1 top-1 bottom-1 w-10 flex items-center justify-center bg-gray-100 text-gray-600 rounded-full hover:bg-blue-600 hover:text-white transition-colors">
-                <i class="fas fa-search"></i>
-            </button>
-        </form>
-    </div>
+            <!-- Search Bar -->
+            <form action="{{ route('katalog.index') }}" method="GET" class="w-full md:w-80 relative group">
+                <input type="text" name="search" placeholder="Cari Buku..."
+                    class="w-full pl-5 pr-14 py-3 bg-white border border-gray-200 rounded-full shadow-sm focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 text-sm font-medium transition-all outline-none">
+                <button type="submit"
+                    class="absolute right-1 top-1 bottom-1 w-10 flex items-center justify-center bg-gray-100 text-gray-600 rounded-full hover:bg-blue-600 hover:text-white transition-colors">
+                    <i class="fas fa-search"></i>
+                </button>
+            </form>
+        </div>
 
-    <!-- Main Content Grid 3 Columns -->
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-10 items-start">
-        
-        <!-- Column 1: Book Cover Card -->
-        <div class="md:col-span-12 lg:col-span-3">
-            <div class="bg-white rounded-3xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.08)] border border-gray-50 p-5 flex flex-col items-center text-center overflow-hidden transition-transform duration-500 hover:-translate-y-2">
-                @if($buku->cover)
-                    <img src="{{ asset('storage/' . $buku->cover) }}" alt="{{ $buku->judul }}" class="w-full aspect-[3/4] object-cover rounded-2xl mb-6 shadow-md border border-gray-100">
-                @else
-                    <div class="w-full aspect-[3/4] bg-gradient-to-br from-indigo-50 to-blue-50 rounded-2xl flex items-center justify-center mb-6 overflow-hidden relative shadow-inner border border-blue-100/50">
-                        <div class="absolute inset-0 opacity-40 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9IiMzYjgyZjYiIGZpbGwtb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==')]"></div>
-                        <div class="relative z-10 flex flex-col items-center justify-center p-6 w-full h-full">
-                            <div class="w-20 h-20 bg-white/80 backdrop-blur rounded-full flex items-center justify-center mb-4 shadow-sm text-blue-400">
-                                 <i class="fas fa-book-open text-3xl"></i>
+        <!-- Main Content Grid 3 Columns -->
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-10 items-start">
+
+            <!-- Column 1: Book Cover Card -->
+            <div class="md:col-span-12 lg:col-span-3">
+                <div
+                    class="bg-white rounded-3xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.08)] border border-gray-50 p-5 flex flex-col items-center text-center overflow-hidden transition-transform duration-500 hover:-translate-y-2">
+                    @if ($buku->cover)
+                        <img src="{{ asset('storage/' . $buku->cover) }}" alt="{{ $buku->judul }}"
+                            class="w-full aspect-[3/4] object-cover rounded-2xl mb-6 shadow-md border border-gray-100">
+                    @else
+                        <div
+                            class="w-full aspect-[3/4] bg-gradient-to-br from-indigo-50 to-blue-50 rounded-2xl flex items-center justify-center mb-6 overflow-hidden relative shadow-inner border border-blue-100/50">
+                            <div
+                                class="absolute inset-0 opacity-40 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9IiMzYjgyZjYiIGZpbGwtb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==')]">
+                            </div>
+                            <div class="relative z-10 flex flex-col items-center justify-center p-6 w-full h-full">
+                                <div
+                                    class="w-20 h-20 bg-white/80 backdrop-blur rounded-full flex items-center justify-center mb-4 shadow-sm text-blue-400">
+                                    <i class="fas fa-book-open text-3xl"></i>
+                                </div>
+                                <h3
+                                    class="text-sm font-black text-blue-900 leading-snug break-words drop-shadow-sm uppercase line-clamp-4">
+                                    {{ $buku->judul }}</h3>
+                                <div class="w-8 h-1 bg-blue-300/50 rounded-full my-3"></div>
+                                <p class="text-[10px] text-blue-700 font-bold uppercase tracking-widest">
+                                    {{ $buku->pengarang }}</p>
                             </div>
-                            <h3 class="text-sm font-black text-blue-900 leading-snug break-words drop-shadow-sm uppercase line-clamp-4">{{ $buku->judul }}</h3>
-                            <div class="w-8 h-1 bg-blue-300/50 rounded-full my-3"></div>
-                            <p class="text-[10px] text-blue-700 font-bold uppercase tracking-widest">{{ $buku->pengarang }}</p>
                         </div>
-                    </div>
-                @endif
-                <h2 class="font-extrabold text-gray-900 uppercase tracking-widest text-xs leading-relaxed px-2 mb-2">{{ $buku->judul }}</h2>
+                    @endif
+                    <h2 class="font-extrabold text-gray-900 uppercase tracking-widest text-xs leading-relaxed px-2 mb-2">
+                        {{ $buku->judul }}</h2>
+                </div>
             </div>
-        </div>
 
-        <!-- Column 2: Details Description -->
-        <div class="md:col-span-12 lg:col-span-5 flex flex-col gap-8 lg:px-4">
-            <div class="text-center lg:text-left">
-                <h2 class="text-3xl font-black text-gray-900 mb-2 tracking-tight">Deskripsi Buku</h2>
-            </div>
-            
-            <div class="space-y-6">
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Kode Buku:</span>
-                    <span class="text-gray-900 font-bold text-sm bg-gray-100 px-3 py-1 rounded w-fit">{{ $buku->nomor_panggil ?? '-' }}</span>
+            <!-- Column 2: Details Description -->
+            <div class="md:col-span-12 lg:col-span-5 flex flex-col gap-8 lg:px-4">
+                <div class="text-center lg:text-left">
+                    <h2 class="text-3xl font-black text-gray-900 mb-2 tracking-tight">Deskripsi Buku</h2>
                 </div>
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Judul Buku:</span>
-                    <span class="text-gray-900 font-bold text-sm">{{ $buku->judul }}</span>
-                </div>
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Nama Penulis:</span>
-                    <span class="text-gray-900 font-bold text-sm">{{ $buku->pengarang }}</span>
-                </div>
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Deskripsi Fisik:</span>
-                    <span class="text-gray-700 font-medium text-sm leading-relaxed">{{ $buku->deskripsi_fisik ?: 'Tidak ada deskripsi fisik.' }}</span>
-                </div>
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Nama Kategori:</span>
-                    <span class="text-blue-600 font-bold text-sm">{{ $buku->kategori->nama_kategori ?? $lokasi['area'] }}</span>
-                </div>
-                <!-- Data Row -->
-                <div class="flex flex-col sm:flex-row gap-2 pb-5">
-                    <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Detail Kategori:</span>
-                    <span class="text-gray-900 font-bold text-sm">{{ $lokasi['area'] }} (Rak {{ $lokasi['rak'] }})</span>
+
+                <div class="space-y-6">
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Kode Buku:</span>
+                        <span
+                            class="text-gray-900 font-bold text-sm bg-gray-100 px-3 py-1 rounded w-fit">{{ $buku->nomor_panggil ?? '-' }}</span>
+                    </div>
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Judul Buku:</span>
+                        <span class="text-gray-900 font-bold text-sm">{{ $buku->judul }}</span>
+                    </div>
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Nama Penulis:</span>
+                        <span class="text-gray-900 font-bold text-sm">{{ $buku->pengarang }}</span>
+                    </div>
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Deskripsi
+                            Fisik:</span>
+                        <span
+                            class="text-gray-700 font-medium text-sm leading-relaxed">{{ $buku->deskripsi_fisik ?: 'Tidak ada deskripsi fisik.' }}</span>
+                    </div>
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 border-b border-gray-100 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Nama
+                            Kategori:</span>
+                        <span
+                            class="text-blue-600 font-bold text-sm">{{ $buku->kategori->nama_kategori ?? $lokasi['area'] }}</span>
+                    </div>
+                    <!-- Data Row -->
+                    <div class="flex flex-col sm:flex-row gap-2 pb-5">
+                        <span class="text-gray-500 font-semibold text-sm w-full sm:w-1/3 flex-shrink-0">Detail
+                            Kategori:</span>
+                        <span class="text-gray-900 font-bold text-sm">{{ $lokasi['area'] }} (Rak
+                            {{ $lokasi['rak'] }})</span>
+                    </div>
                 </div>
             </div>
-        </div>
 
             <div class="w-full lg:w-96 flex-shrink-0 flex flex-col gap-6 mx-auto relative">
-                
+
                 <!-- MAP CONTAINER -->
-                <div class="map-container shadow-sm border-2 border-slate-300 select-none font-sans min-h-[300px]" id="mapContainer">
+                <div class="map-container shadow-sm border-2 border-slate-300 select-none font-sans min-h-[300px]"
+                    id="mapContainer">
                     <!-- Background Image Map -->
                     <img src="{{ asset('img/img 2.png') }}" alt="Denah Perpustakaan" id="mapImage">
 
                     <!-- Pin Container (JavaScript akan merender pin di sini) -->
                     <div id="pinContainer"></div>
 
-                    @if(!$buku->lokasi_x || !$buku->lokasi_y)
+                    @if (!$buku->lokasi_x || !$buku->lokasi_y)
                         <!-- Overlay Not Found -->
                         <div class="map-overlay-notfound">
                             <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-2 animate-pulse"></i>
@@ -252,171 +299,189 @@
                 </div>
 
                 <!-- Detail Mini location box directly below map -->
-                <div class="bg-blue-900 border border-blue-800 rounded-2xl p-5 text-center shadow-lg w-full relative z-20 transform transition hover:scale-[1.02]">
-                    <span class="text-[10px] text-blue-300 font-bold uppercase tracking-widest block mb-2 opacity-80">Informasi Lokasi Fisik</span>
+                <div
+                    class="bg-blue-900 border border-blue-800 rounded-2xl p-5 text-center shadow-lg w-full relative z-20 transform transition hover:scale-[1.02]">
+                    <span
+                        class="text-[10px] text-blue-300 font-bold uppercase tracking-widest block mb-2 opacity-80">Informasi
+                        Lokasi Fisik</span>
                     <span class="text-2xl font-black text-white block mb-1 drop-shadow-sm">{{ $lokasi['rak'] }}</span>
                     <span class="text-sm font-semibold text-blue-200">{{ $lokasi['area'] }}</span>
                 </div>
             </div>
-    </div>
-
-    <!-- Riwayat Peminjaman -->
-    <div class="mt-12 mb-8">
-        <h2 class="text-2xl font-extrabold text-gray-900 mb-6 border-b-2 border-blue-500 inline-block pb-2">Riwayat Peminjaman</h2>
-        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-            @if($buku->peminjaman && $buku->peminjaman->count() > 0)
-                <div class="overflow-x-auto">
-                    <table class="w-full text-left border-collapse">
-                        <thead>
-                            <tr class="bg-gray-50 border-b border-gray-200 text-gray-600 text-sm">
-                                <th class="py-4 px-6 font-semibold">Nama Peminjam</th>
-                                <th class="py-4 px-6 font-semibold">Tanggal Pinjam</th>
-                                <th class="py-4 px-6 font-semibold">Tanggal Kembali</th>
-                                <th class="py-4 px-6 font-semibold">Status</th>
-                            </tr>
-                        </thead>
-                        <tbody class="text-gray-700 text-sm">
-                            @foreach($buku->peminjaman->sortByDesc('tanggal_pinjam') as $history)
-                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
-                                <td class="py-4 px-6 font-medium text-gray-900">
-                                    @php
-                                        $nama = $history->user->name ?? 'Pengguna Tidak Diketahui';
-                                        $disensor = $nama !== 'Pengguna Tidak Diketahui' && strlen($nama) >= 3 
-                                            ? substr($nama, 0, 3) . '***' 
-                                            : ($nama !== 'Pengguna Tidak Diketahui' ? substr($nama, 0, 1) . '***' : $nama);
-                                    @endphp
-                                    {{ $disensor }}
-                                </td>
-                                <td class="py-4 px-6">
-                                    {{ \Carbon\Carbon::parse($history->tanggal_pinjam)->translatedFormat('d F Y') }}
-                                </td>
-                                <td class="py-4 px-6">
-                                    @if($history->status_peminjaman === 'Dikembalikan' && $history->tanggal_dikembalikan)
-                                        <span class="text-green-600 font-medium">
-                                            {{ \Carbon\Carbon::parse($history->tanggal_dikembalikan)->translatedFormat('d F Y') }} (Dikembalikan)
-                                        </span>
-                                    @else
-                                        <span class="text-gray-600">
-                                            Batas: {{ \Carbon\Carbon::parse($history->tanggal_kembali)->translatedFormat('d F Y') }}
-                                        </span>
-                                    @endif
-                                </td>
-                                <td class="py-4 px-6">
-                                    @if($history->status_peminjaman === 'Dipinjam')
-                                        <span class="px-3 py-1 bg-yellow-100 text-yellow-700 font-bold rounded-full text-xs">Sedang Dipinjam</span>
-                                    @elseif($history->status_peminjaman === 'Dikembalikan')
-                                        <span class="px-3 py-1 bg-green-100 text-green-700 font-bold rounded-full text-xs">Selesai</span>
-                                    @else
-                                        <span class="px-3 py-1 bg-gray-100 text-gray-700 font-bold rounded-full text-xs">{{ $history->status_peminjaman }}</span>
-                                    @endif
-                                </td>
-                            </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
-                </div>
-            @else
-                <div class="p-8 text-center flex flex-col items-center justify-center bg-gray-50/50">
-                    <div class="w-16 h-16 bg-blue-50 text-blue-300 rounded-full flex items-center justify-center mb-3">
-                        <i class="fas fa-history text-2xl"></i>
-                    </div>
-                    <p class="text-gray-500 font-medium">Belum ada riwayat peminjaman untuk buku ini.</p>
-                </div>
-            @endif
         </div>
-    </div>
 
-    @if($rekomendasi->count() > 0)
-    <div class="mt-12">
-        <h2 class="text-2xl font-extrabold text-gray-900 mb-6 border-b-2 border-blue-500 inline-block pb-2">Rekomendasi Buku Serupa</h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            @foreach($rekomendasi as $rek)
-            <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition duration-300 flex flex-col overflow-hidden">
-                <div class="p-5 flex-grow">
-                    <div class="flex justify-between items-start mb-2">
-                        <span class="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded">{{ $rek->nomor_panggil }}</span>
-                        <span class="text-xs font-semibold text-green-600">Skor: {{ number_format($rek->similarity_score, 1) }}</span>
+        <!-- Riwayat Peminjaman -->
+        <div class="mt-12 mb-8">
+            <h2 class="text-2xl font-extrabold text-gray-900 mb-6 border-b-2 border-blue-500 inline-block pb-2">Riwayat
+                Peminjaman</h2>
+            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                @if ($buku->peminjaman && $buku->peminjaman->count() > 0)
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="bg-gray-50 border-b border-gray-200 text-gray-600 text-sm">
+                                    <th class="py-4 px-6 font-semibold">Nama Peminjam</th>
+                                    <th class="py-4 px-6 font-semibold">Tanggal Pinjam</th>
+                                    <th class="py-4 px-6 font-semibold">Tanggal Kembali</th>
+                                    <th class="py-4 px-6 font-semibold">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody class="text-gray-700 text-sm">
+                                @foreach ($buku->peminjaman->sortByDesc('tanggal_pinjam') as $history)
+                                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+                                        <td class="py-4 px-6 font-medium text-gray-900">
+                                            @php
+                                                $nama = $history->user->name ?? 'Pengguna Tidak Diketahui';
+                                                $disensor =
+                                                    $nama !== 'Pengguna Tidak Diketahui' && strlen($nama) >= 3
+                                                        ? substr($nama, 0, 3) . '***'
+                                                        : ($nama !== 'Pengguna Tidak Diketahui'
+                                                            ? substr($nama, 0, 1) . '***'
+                                                            : $nama);
+                                            @endphp
+                                            {{ $disensor }}
+                                        </td>
+                                        <td class="py-4 px-6">
+                                            {{ \Carbon\Carbon::parse($history->tanggal_pinjam)->translatedFormat('d F Y') }}
+                                        </td>
+                                        <td class="py-4 px-6">
+                                            @if ($history->status_peminjaman === 'Dikembalikan' && $history->tanggal_dikembalikan)
+                                                <span class="text-green-600 font-medium">
+                                                    {{ \Carbon\Carbon::parse($history->tanggal_dikembalikan)->translatedFormat('d F Y') }}
+                                                    (Dikembalikan)
+                                                </span>
+                                            @else
+                                                <span class="text-gray-600">
+                                                    Batas:
+                                                    {{ \Carbon\Carbon::parse($history->tanggal_kembali)->translatedFormat('d F Y') }}
+                                                </span>
+                                            @endif
+                                        </td>
+                                        <td class="py-4 px-6">
+                                            @if ($history->status_peminjaman === 'Dipinjam')
+                                                <span
+                                                    class="px-3 py-1 bg-yellow-100 text-yellow-700 font-bold rounded-full text-xs">Sedang
+                                                    Dipinjam</span>
+                                            @elseif($history->status_peminjaman === 'Dikembalikan')
+                                                <span
+                                                    class="px-3 py-1 bg-green-100 text-green-700 font-bold rounded-full text-xs">Selesai</span>
+                                            @else
+                                                <span
+                                                    class="px-3 py-1 bg-gray-100 text-gray-700 font-bold rounded-full text-xs">{{ $history->status_peminjaman }}</span>
+                                            @endif
+                                        </td>
+                                    </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
                     </div>
-                    <h3 class="text-lg font-bold text-gray-900 mb-1 line-clamp-2">{{ $rek->judul }}</h3>
-                    <p class="text-sm text-gray-600 line-clamp-1">{{ $rek->pengarang }}</p>
-                </div>
-                <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 mt-auto">
-                    <a href="{{ route('katalog.show', $rek->id_buku) }}" class="text-sm font-semibold text-blue-600 hover:text-blue-800 flex items-center justify-center w-full">
-                        Lihat Detail
-                    </a>
+                @else
+                    <div class="p-8 text-center flex flex-col items-center justify-center bg-gray-50/50">
+                        <div class="w-16 h-16 bg-blue-50 text-blue-300 rounded-full flex items-center justify-center mb-3">
+                            <i class="fas fa-history text-2xl"></i>
+                        </div>
+                        <p class="text-gray-500 font-medium">Belum ada riwayat peminjaman untuk buku ini.</p>
+                    </div>
+                @endif
+            </div>
+        </div>
+
+        @if ($rekomendasi->count() > 0)
+            <div class="mt-12">
+                <h2 class="text-2xl font-extrabold text-gray-900 mb-6 border-b-2 border-blue-500 inline-block pb-2">
+                    Rekomendasi Buku Serupa</h2>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                    @foreach ($rekomendasi as $rek)
+                        <div
+                            class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition duration-300 flex flex-col overflow-hidden">
+                            <div class="p-5 flex-grow">
+                                <div class="flex justify-between items-start mb-2">
+                                    <span
+                                        class="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded">{{ $rek->nomor_panggil }}</span>
+                                    <span class="text-xs font-semibold text-green-600">Skor:
+                                        {{ number_format($rek->similarity_score, 1) }}</span>
+                                </div>
+                                <h3 class="text-lg font-bold text-gray-900 mb-1 line-clamp-2">{{ $rek->judul }}</h3>
+                                <p class="text-sm text-gray-600 line-clamp-1">{{ $rek->pengarang }}</p>
+                            </div>
+                            <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 mt-auto">
+                                <a href="{{ route('katalog.show', $rek->id) }}"
+                                    class="text-sm font-semibold text-blue-600 hover:text-blue-800 flex items-center justify-center w-full">
+                                    Lihat Detail
+                                </a>
+                            </div>
+                        </div>
+                    @endforeach
                 </div>
             </div>
-            @endforeach
-        </div>
+        @endif
     </div>
-    @endif
-</div>
 @endsection
 
 @push('scripts')
-@php
-    $pinDataJson = [
-        'x' => $buku->lokasi_x,
-        'y' => $buku->lokasi_y,
-        'label' => $lokasi['rak'] . ' — ' . $lokasi['area'],
-    ];
-@endphp
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    // Data koordinat dari Laravel
-    const pinData = @json($pinDataJson);
+    @php
+        $pinDataJson = [
+            'x' => $buku->lokasi_x,
+            'y' => $buku->lokasi_y,
+            'label' => $lokasi['rak'] . ' — ' . $lokasi['area'],
+        ];
+    @endphp
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Data koordinat dari Laravel
+            const pinData = @json($pinDataJson);
 
-    const container = document.getElementById('pinContainer');
-    if (!container || !pinData.x || !pinData.y) return;
+            const container = document.getElementById('pinContainer');
+            if (!container || !pinData.x || !pinData.y) return;
 
-    /**
-     * Membuat elemen pin pointer dan menambahkannya ke container.
-     * @param {number} x - Posisi X dalam persentase (0-100)
-     * @param {number} y - Posisi Y dalam persentase (0-100)
-     * @param {string} label - Label teks untuk pin
-     * @param {boolean} isActive - Apakah pin ini aktif (bounce + label visible)
-     */
-    function renderPin(x, y, label, isActive) {
-        // Wrapper pin
-        const pin = document.createElement('div');
-        pin.className = 'map-pin' + (isActive ? ' active' : '');
-        pin.style.left = x + '%';
-        pin.style.top = y + '%';
+            /**
+             * Membuat elemen pin pointer dan menambahkannya ke container.
+             * @param {number} x - Posisi X dalam persentase (0-100)
+             * @param {number} y - Posisi Y dalam persentase (0-100)
+             * @param {string} label - Label teks untuk pin
+             * @param {boolean} isActive - Apakah pin ini aktif (bounce + label visible)
+             */
+            function renderPin(x, y, label, isActive) {
+                // Wrapper pin
+                const pin = document.createElement('div');
+                pin.className = 'map-pin' + (isActive ? ' active' : '');
+                pin.style.left = x + '%';
+                pin.style.top = y + '%';
 
-        // Ikon pin (circle + tail)
-        const icon = document.createElement('div');
-        icon.className = 'map-pin__icon';
+                // Ikon pin (circle + tail)
+                const icon = document.createElement('div');
+                icon.className = 'map-pin__icon';
 
-        const circle = document.createElement('div');
-        circle.className = 'map-pin__circle';
-        circle.innerHTML = '<i class="fas fa-map-marker-alt"></i>';
+                const circle = document.createElement('div');
+                circle.className = 'map-pin__circle';
+                circle.innerHTML = '<i class="fas fa-map-marker-alt"></i>';
 
-        const tail = document.createElement('div');
-        tail.className = 'map-pin__tail';
+                const tail = document.createElement('div');
+                tail.className = 'map-pin__tail';
 
-        icon.appendChild(circle);
-        icon.appendChild(tail);
-        pin.appendChild(icon);
+                icon.appendChild(circle);
+                icon.appendChild(tail);
+                pin.appendChild(icon);
 
-        // Pulse effect
-        const pulse = document.createElement('div');
-        pulse.className = 'map-pin__pulse';
-        pin.appendChild(pulse);
+                // Pulse effect
+                const pulse = document.createElement('div');
+                pulse.className = 'map-pin__pulse';
+                pin.appendChild(pulse);
 
-        // Label tooltip
-        if (label) {
-            const labelEl = document.createElement('span');
-            labelEl.className = 'map-pin__label';
-            labelEl.textContent = label;
-            pin.appendChild(labelEl);
-        }
+                // Label tooltip
+                if (label) {
+                    const labelEl = document.createElement('span');
+                    labelEl.className = 'map-pin__label';
+                    labelEl.textContent = label;
+                    pin.appendChild(labelEl);
+                }
 
-        container.appendChild(pin);
-        return pin;
-    }
+                container.appendChild(pin);
+                return pin;
+            }
 
-    // Render pin utama buku ini
-    renderPin(pinData.x, pinData.y, pinData.label, true);
-});
-</script>
+            // Render pin utama buku ini
+            renderPin(pinData.x, pinData.y, pinData.label, true);
+        });
+    </script>
 @endpush
diff --git a/resources/views/welcome/populer.blade.php b/resources/views/welcome/populer.blade.php
index 93b09b4..0f45754 100644
--- a/resources/views/welcome/populer.blade.php
+++ b/resources/views/welcome/populer.blade.php
@@ -1,97 +1,116 @@
 {{-- BUKU TERPOPULER SECTION --}}
 <section id="populer" class="py-24 bg-gray-50 relative overflow-hidden border-b border-gray-100">
     <div class="max-w-7xl mx-auto px-6 relative z-10">
-        @if(!empty($bukuPopuler) && $bukuPopuler->count())
-        <div>
-            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4 text-center md:text-left">
-                <div class="w-full md:w-auto">
-                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 rounded-full mb-4 mx-auto md:mx-0">
-                        <i class="fas fa-fire text-red-500 text-xs"></i>
-                        <span class="text-xs font-semibold text-blue-800 tracking-wide">Paling Laris</span>
+        @if (!empty($bukuPopuler) && $bukuPopuler->count())
+            <div>
+                <div
+                    class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4 text-center md:text-left">
+                    <div class="w-full md:w-auto">
+                        <div
+                            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 rounded-full mb-4 mx-auto md:mx-0">
+                            <i class="fas fa-fire text-red-500 text-xs"></i>
+                            <span class="text-xs font-semibold text-blue-800 tracking-wide">Paling Laris</span>
+                        </div>
+                        <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
+                            Buku <span
+                                class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Terpopuler</span>
+                        </h2>
+                        <p class="text-gray-500 mt-2 max-w-md mx-auto md:mx-0">
+                            Koleksi buku favorit yang paling banyak dipinjam oleh para pengunjung perpustakaan kami.
+                        </p>
                     </div>
-                    <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
-                        Buku <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Terpopuler</span>
-                    </h2>
-                    <p class="text-gray-500 mt-2 max-w-md mx-auto md:mx-0">
-                        Koleksi buku favorit yang paling banyak dipinjam oleh para pengunjung perpustakaan kami.
-                    </p>
                 </div>
-            </div>
 
-            <div class="grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 gap-6">
-                @foreach($bukuPopuler as $item)
-                @php
-                    $habis = ($item->eksemplar <= 0);
-                @endphp
-                <div class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full relative">
-                    
-                    <!-- Peminjaman Count Badge -->
-                    <div class="absolute top-2 left-2 z-20">
-                        <span class="bg-blue-600/90 backdrop-blur-md text-white text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm flex items-center gap-1">
-                            <i class="fas fa-book-reader"></i> {{ $item->peminjaman_count }}x
-                        </span>
-                    </div>
+                <div class="grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 gap-6">
+                    @foreach ($bukuPopuler as $item)
+                        @php
+                            $habis = $item->eksemplar <= 0;
+                        @endphp
+                        <div
+                            class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full relative">
 
-                    <!-- Book Cover -->
-                    <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
-                        @if($item->cover ?? $item->sampul)
-                            <img src="{{ asset('storage/' . ($item->cover ?? $item->sampul)) }}" alt="{{ $item->judul }}" 
-                                class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
-                        @else
-                            <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
-                                <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                                <span class="text-xs font-medium">No Cover</span>
+                            <!-- Peminjaman Count Badge -->
+                            <div class="absolute top-2 left-2 z-20">
+                                <span
+                                    class="bg-blue-600/90 backdrop-blur-md text-white text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm flex items-center gap-1">
+                                    <i class="fas fa-book-reader"></i> {{ $item->peminjaman_count }}x
+                                </span>
                             </div>
-                        @endif
-                        
-                        @if($habis)
-                            <!-- Overlay Dipinjam Semua -->
-                            <div class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
-                                <div class="bg-red-600/90 text-white font-black text-sm md:text-base px-2 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none text-center">
-                                    TIDAK TERSEDIA
+
+                            <!-- Book Cover -->
+                            <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
+                                @if ($item->cover ?? $item->sampul)
+                                    <img src="{{ asset('storage/' . ($item->cover ?? $item->sampul)) }}"
+                                        alt="{{ $item->judul }}"
+                                        class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
+                                @else
+                                    <div
+                                        class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
+                                        <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor"
+                                            viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                                            </path>
+                                        </svg>
+                                        <span class="text-xs font-medium">No Cover</span>
+                                    </div>
+                                @endif
+
+                                @if ($habis)
+                                    <!-- Overlay Dipinjam Semua -->
+                                    <div
+                                        class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
+                                        <div
+                                            class="bg-red-600/90 text-white font-black text-sm md:text-base px-2 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none text-center">
+                                            TIDAK TERSEDIA
+                                        </div>
+                                    </div>
+                                @endif
+
+                                <div class="absolute top-2 right-2 flex justify-between items-start z-10">
+                                    <span
+                                        class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
+                                        {{ $item->nomor_panggil ?? '-' }}
+                                    </span>
                                 </div>
                             </div>
-                        @endif
 
-                        <div class="absolute top-2 right-2 flex justify-between items-start z-10">
-                            <span class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
-                                {{ $item->nomor_panggil ?? '-' }}
-                            </span>
-                        </div>
-                    </div>
+                            <!-- Content -->
+                            <div class="p-4 flex-grow flex flex-col">
+                                <h2 class="text-xs sm:text-sm font-bold text-gray-900 mb-1 line-clamp-2 {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }} leading-snug"
+                                    title="{{ $item->judul }}">
+                                    {{ $item->judul }}
+                                </h2>
+                                <p class="text-blue-600 font-medium text-[10px] sm:text-xs mb-2 line-clamp-1">
+                                    {{ $item->pengarang }}
+                                </p>
+                                <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
+                                    <div class="flex justify-between items-center text-[10px] text-gray-500">
+                                        <span class="truncate pr-1">{{ $item->penerbit }}</span>
+                                        <span
+                                            class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+                                    </div>
+                                </div>
+                            </div>
 
-                    <!-- Content -->
-                    <div class="p-4 flex-grow flex flex-col">
-                        <h2 class="text-xs sm:text-sm font-bold text-gray-900 mb-1 line-clamp-2 {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }} leading-snug" title="{{ $item->judul }}">
-                            {{ $item->judul }}
-                        </h2>
-                        <p class="text-blue-600 font-medium text-[10px] sm:text-xs mb-2 line-clamp-1">
-                            {{ $item->pengarang }}
-                        </p>
-                        <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
-                            <div class="flex justify-between items-center text-[10px] text-gray-500">
-                                <span class="truncate pr-1">{{ $item->penerbit }}</span>
-                                <span class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+                            <!-- Action Area -->
+                            <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
+                                @if ($habis)
+                                    <button disabled
+                                        class="w-full text-center bg-gray-100 text-gray-500 text-xs font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
+                                        Habis Dipinjam
+                                    </button>
+                                @else
+                                    <a href="{{ route('katalog.show', $item->id ?? 1) }}"
+                                        class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-xs font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
+                                        Lihat Detail
+                                    </a>
+                                @endif
                             </div>
                         </div>
-                    </div>
-
-                    <!-- Action Area -->
-                    <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
-                        @if($habis)
-                            <button disabled class="w-full text-center bg-gray-100 text-gray-500 text-xs font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
-                                Habis Dipinjam
-                            </button>
-                        @else
-                            <a href="{{ route('katalog.show', $item->id_buku ?? 1) }}" class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-xs font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
-                                Lihat Detail
-                            </a>
-                        @endif
-                    </div>
+                    @endforeach
                 </div>
-                @endforeach
             </div>
-        </div>
         @endif
     </div>
 </section>
diff --git a/resources/views/welcome/rekomendasi.blade.php b/resources/views/welcome/rekomendasi.blade.php
index e7acde2..0ab5b59 100644
--- a/resources/views/welcome/rekomendasi.blade.php
+++ b/resources/views/welcome/rekomendasi.blade.php
@@ -16,85 +16,102 @@
                     Buku-buku rilis baru dan penambahan paling anyar di perpustakaan kami.
                 </p>
             </div>
-            <a href="{{ route('katalog.index') }}" class="px-6 py-3 bg-white text-primary-600 rounded-2xl font-semibold text-sm border border-primary-200 hover:bg-primary-50 transition-colors shadow-sm inline-flex items-center gap-2">
+            <a href="{{ route('katalog.index') }}"
+                class="px-6 py-3 bg-white text-primary-600 rounded-2xl font-semibold text-sm border border-primary-200 hover:bg-primary-50 transition-colors shadow-sm inline-flex items-center gap-2">
                 Lihat Semua Katalog <i class="fas fa-arrow-right text-xs"></i>
             </a>
         </div>
 
-        @if(!empty($bukuTerbaru) && $bukuTerbaru->count())
+        @if (!empty($bukuTerbaru) && $bukuTerbaru->count())
             <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                @foreach($bukuTerbaru as $item)
-                @php
-                    $habis = ($item->eksemplar <= 0);
-                @endphp
-                <div class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full relative">
-                    <!-- Badge BUKU BARU (Pojok Kanan Atas Kartu) -->
-                    @if(!$habis)
-                    <div class="absolute top-0 right-0 z-20">
-                        <div class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[9px] sm:text-[10px] font-extrabold px-3 py-1.5 shadow-lg rounded-bl-xl origin-top-right transform">
-                            <i class="fas fa-sparkles mr-1"></i> BUKU BARU
-                        </div>
-                    </div>
-                    @endif
-
-                    <!-- Book Cover -->
-                    <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
-                        @if($item->cover ?? $item->sampul)
-                            <img src="{{ asset('storage/' . ($item->cover ?? $item->sampul)) }}" alt="{{ $item->judul }}" 
-                                class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
-                        @else
-                            <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
-                                <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                                <span class="text-xs font-medium">Cover Tidak Tersedia</span>
-                            </div>
-                        @endif
-                        
-                        @if($habis)
-                            <!-- Overlay Dipinjam Semua -->
-                            <div class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
-                                <div class="bg-red-600/90 text-white font-black text-sm md:text-base px-6 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none">
-                                    TIDAK TERSEDIA
+                @foreach ($bukuTerbaru as $item)
+                    @php
+                        $habis = $item->eksemplar <= 0;
+                    @endphp
+                    <div
+                        class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl border border-gray-100 overflow-hidden transition-all duration-300 transform {{ $habis ? 'grayscale opacity-75 cursor-not-allowed' : 'hover:-translate-y-1' }} flex flex-col h-full relative">
+                        <!-- Badge BUKU BARU (Pojok Kanan Atas Kartu) -->
+                        @if (!$habis)
+                            <div class="absolute top-0 right-0 z-20">
+                                <div
+                                    class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[9px] sm:text-[10px] font-extrabold px-3 py-1.5 shadow-lg rounded-bl-xl origin-top-right transform">
+                                    <i class="fas fa-sparkles mr-1"></i> BUKU BARU
                                 </div>
                             </div>
                         @endif
 
-                        <!-- Overlay Badges (Nomor Panggil) -->
-                        <div class="absolute top-2 inset-x-2 flex justify-between items-start z-10">
-                            <span class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
-                                {{ $item->nomor_panggil ?? '-' }}
-                            </span>
-                        </div>
-                    </div>
+                        <!-- Book Cover -->
+                        <div class="relative w-full pt-[140%] overflow-hidden bg-gray-50 flex-shrink-0">
+                            @if ($item->cover ?? $item->sampul)
+                                <img src="{{ asset('storage/' . ($item->cover ?? $item->sampul)) }}"
+                                    alt="{{ $item->judul }}"
+                                    class="absolute inset-0 w-full h-full object-cover {{ !$habis ? 'group-hover:scale-110' : '' }} transition-transform duration-700 ease-in-out">
+                            @else
+                                <div
+                                    class="absolute inset-0 flex flex-col items-center justify-center text-gray-300 bg-gray-100 {{ !$habis ? 'group-hover:bg-gray-200' : '' }} transition-colors duration-300">
+                                    <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor"
+                                        viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                                        </path>
+                                    </svg>
+                                    <span class="text-xs font-medium">Cover Tidak Tersedia</span>
+                                </div>
+                            @endif
 
-                    <!-- Content -->
-                    <div class="p-4 flex-grow flex flex-col">
-                        <h2 class="text-sm sm:text-base font-bold text-gray-900 mb-1 line-clamp-2 {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }} leading-snug" title="{{ $item->judul }}">
-                            {{ $item->judul }}
-                        </h2>
-                        <p class="text-blue-600 font-medium text-xs sm:text-sm mb-2 line-clamp-1">
-                            {{ $item->pengarang }}
-                        </p>
-                        <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
-                            <div class="flex justify-between items-center text-[10px] sm:text-xs text-gray-500">
-                                <span class="truncate pr-1">{{ $item->penerbit }}</span>
-                                <span class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+                            @if ($habis)
+                                <!-- Overlay Dipinjam Semua -->
+                                <div
+                                    class="absolute inset-0 bg-red-900/30 backdrop-blur-[1px] flex items-center justify-center z-10">
+                                    <div
+                                        class="bg-red-600/90 text-white font-black text-sm md:text-base px-6 py-2 border-y-2 border-white transform -rotate-12 shadow-2xl tracking-widest uppercase pointer-events-none">
+                                        TIDAK TERSEDIA
+                                    </div>
+                                </div>
+                            @endif
+
+                            <!-- Overlay Badges (Nomor Panggil) -->
+                            <div class="absolute top-2 inset-x-2 flex justify-between items-start z-10">
+                                <span
+                                    class="bg-white/90 backdrop-blur-md text-gray-800 text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-sm">
+                                    {{ $item->nomor_panggil ?? '-' }}
+                                </span>
                             </div>
                         </div>
-                    </div>
 
-                    <!-- Action Area -->
-                    <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
-                        @if($habis)
-                            <button disabled class="w-full text-center bg-gray-100 text-gray-500 text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
-                                Habis Dipinjam
-                            </button>
-                        @else
-                            <a href="{{ route('katalog.show', $item->id_buku ?? 1) }}" class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
-                                Lihat Detail
-                            </a>
-                        @endif
+                        <!-- Content -->
+                        <div class="p-4 flex-grow flex flex-col">
+                            <h2 class="text-sm sm:text-base font-bold text-gray-900 mb-1 line-clamp-2 {{ !$habis ? 'group-hover:text-blue-600 transition-colors' : '' }} leading-snug"
+                                title="{{ $item->judul }}">
+                                {{ $item->judul }}
+                            </h2>
+                            <p class="text-blue-600 font-medium text-xs sm:text-sm mb-2 line-clamp-1">
+                                {{ $item->pengarang }}
+                            </p>
+                            <div class="mt-auto pt-3 flex flex-col gap-2 border-t border-gray-50">
+                                <div class="flex justify-between items-center text-[10px] sm:text-xs text-gray-500">
+                                    <span class="truncate pr-1">{{ $item->penerbit }}</span>
+                                    <span
+                                        class="font-medium bg-gray-100 px-1.5 py-0.5 rounded">{{ $item->tahun_terbit ?? '-' }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Action Area -->
+                        <div class="px-4 pb-4 pt-0 mt-auto relative z-30">
+                            @if ($habis)
+                                <button disabled
+                                    class="w-full text-center bg-gray-100 text-gray-500 text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 cursor-not-allowed opacity-80 backdrop-blur-sm">
+                                    Habis Dipinjam
+                                </button>
+                            @else
+                                <a href="{{ route('katalog.show', $item->id ?? 1) }}"
+                                    class="block w-full text-center bg-gray-50 hover:bg-blue-600 text-gray-700 hover:text-white text-sm font-semibold py-2 px-3 rounded-xl border border-gray-200 hover:border-transparent transition-all duration-300">
+                                    Lihat Detail
+                                </a>
+                            @endif
+                        </div>
                     </div>
-                </div>
                 @endforeach
             </div>
         @else