From 1071e4e428e80cf0fae5b3dfd08c44d7b56c35b7 Mon Sep 17 00:00:00 2001
From: wardhatul1765 <wardhatuljannahfiqyani@gmail.com>
Date: Sun, 17 May 2026 16:53:32 +0700
Subject: [PATCH] denah

---
 .../views/visitor/katalog/show.blade.php      | 102 +++++-------------
 1 file changed, 26 insertions(+), 76 deletions(-)

diff --git a/resources/views/visitor/katalog/show.blade.php b/resources/views/visitor/katalog/show.blade.php
index b0d20f0..a8742a4 100644
--- a/resources/views/visitor/katalog/show.blade.php
+++ b/resources/views/visitor/katalog/show.blade.php
@@ -279,21 +279,35 @@ class="text-blue-600 font-bold text-sm">{{ $buku->kategori->nama_kategori ?? $lo
 
             <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">
+                <!-- MAP CONTAINER RESPONSIVE -->
+                <div class="relative inline-block w-full max-w-4xl shadow-sm border-2 border-slate-300 select-none font-sans overflow-hidden rounded-lg">
                     <!-- Background Image Map -->
-                    <img src="{{ asset('img/img 2.png') }}?v={{ time() }}" alt="Denah Perpustakaan" id="mapImage">
+                    <img src="{{ asset('img/img 2.png') }}?v={{ time() }}" alt="Denah Perpustakaan" class="w-full h-auto block">
 
-                    <!-- Pin Container (JavaScript akan merender pin di sini) -->
-                    <div id="pinContainer"></div>
+                    @if ($buku->lokasi_x && $buku->lokasi_y)
+                        <!-- Pin Marker (Render via Blade) -->
+                        <div class="absolute -translate-x-1/2 -translate-y-full flex flex-col items-center" 
+                             style="top: {{ $buku->lokasi_y }}%; left: {{ $buku->lokasi_x }}%; margin-top: 4px;">
+                             
+                             <!-- Tooltip / Label -->
+                             <div class="bg-blue-700 text-white text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-md mb-1 whitespace-nowrap">
+                                 {{ $lokasi['rak'] }} — {{ $lokasi['area'] }}
+                             </div>
 
-                    @if (!$buku->lokasi_x || !$buku->lokasi_y)
+                             <!-- Ikon Pin Merah -->
+                             <div class="relative flex flex-col items-center animate-bounce">
+                                 <i class="fas fa-map-marker-alt text-red-600 text-3xl sm:text-4xl drop-shadow-md"></i>
+                             </div>
+                             
+                             <!-- Bayangan (Shadow) tepat di bawah ujung pin -->
+                             <div class="w-2 h-1 bg-black/40 rounded-full blur-[1px]"></div>
+                        </div>
+                    @else
                         <!-- Overlay Not Found -->
-                        <div class="map-overlay-notfound">
-                            <i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-2 animate-pulse"></i>
-                            <h4 class="font-bold text-red-600 text-sm sm:text-base">Lokasi Rak Belum Dipetakan</h4>
-                            <p class="text-xs text-gray-500 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
+                        <div class="absolute inset-0 flex flex-col items-center justify-center bg-white/70 backdrop-blur-sm z-10 text-center p-4">
+                            <i class="fas fa-exclamation-triangle text-red-500 text-3xl sm:text-4xl mb-2 animate-pulse"></i>
+                            <h4 class="font-bold text-red-600 text-sm sm:text-lg">Lokasi Rak Belum Dipetakan</h4>
+                            <p class="text-xs sm:text-sm text-gray-700 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
                         </div>
                     @endif
                 </div>
@@ -419,69 +433,5 @@ class="text-sm font-semibold text-blue-600 hover:text-blue-800 flex items-center
 @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);
-
-            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 + '%';
-
-                // 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 tail = document.createElement('div');
-                tail.className = 'map-pin__tail';
-
-                icon.appendChild(circle);
-                icon.appendChild(tail);
-                pin.appendChild(icon);
-
-                // 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);
-                }
-
-                container.appendChild(pin);
-                return pin;
-            }
-
-            // Render pin utama buku ini
-            renderPin(pinData.x, pinData.y, pinData.label, true);
-        });
-    </script>
+    <!-- Skrip lama pembuat pin JS sudah dihapus dan digantikan full Tailwind CSS di HTML -->
 @endpush