From ea2f303ea44854c08371fb614868347daf5253e4 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Tue, 18 Mar 2025 08:45:31 +0700
Subject: [PATCH] feat(bank-data): tambahkan fitur galeri foto dan modal untuk
 gambar

- Menambahkan dukungan untuk menampilkan foto objek bank.
- Menambahkan modal untuk memperbesar gambar saat diklik.
- Memperbarui tampilan untuk menampilkan foto utama dan thumbnail.
- Memperbaiki lebar konten info window untuk menyesuaikan dengan gambar.
---
 app/Http/Controllers/BankDataController.php |  3 +-
 resources/views/bank-data/index.blade.php   | 46 ++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/BankDataController.php b/app/Http/Controllers/BankDataController.php
index ac94545..4662338 100644
--- a/app/Http/Controllers/BankDataController.php
+++ b/app/Http/Controllers/BankDataController.php
@@ -148,7 +148,8 @@ class BankDataController extends Controller
                 'harga'         => $item->harga,
                 'nilai_pasar'   => $item->nilai_pasar,
                 'location'      => $item->kordinat_lat . ', ' . $item->kordinat_lng,
-                'address'       => formatAlamat($item)
+                'address'       => formatAlamat($item),
+                'photos' => json_decode($item->foto_objek, true) ?: [$item->foto_objek],
                 // Add more fields as needed
             ];
         });
diff --git a/resources/views/bank-data/index.blade.php b/resources/views/bank-data/index.blade.php
index 360e3c7..547f6ac 100644
--- a/resources/views/bank-data/index.blade.php
+++ b/resources/views/bank-data/index.blade.php
@@ -166,6 +166,13 @@
             </div>
         </div>
     </div>
+
+    <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+        <div class="bg-white p-4 rounded-lg max-w-3xl max-h-[100vh] overflow-auto">
+            <img id="modalImage" src="" alt="Zoomed Image" class="max-w-full h-auto">
+            <button id="closeModal" class="mt-4 px-4 py-2 bg-red-300 text-gray-800 rounded hover:bg-red-400" onclick="closeImageModal()">Close</button>
+        </div>
+    </div>
 @endsection
 
 @push('scripts')
@@ -183,6 +190,26 @@
             });
         }
 
+        function openImageModal(src) {
+            const modal = document.getElementById('imageModal');
+            const modalImage = document.getElementById('modalImage');
+            modalImage.src = src;
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        }
+
+        function closeImageModal() {
+            const modal = document.getElementById('imageModal');
+            modal.classList.remove('flex');
+            modal.classList.add('hidden');
+        }
+
+        function changeMainPhoto(thumbnail, index) {
+            const mainPhoto = thumbnail.closest('.photo-gallery').querySelector('.main-photo img');
+            mainPhoto.src = thumbnail.src;
+            mainPhoto.alt = thumbnail.alt;
+        }
+
         function updateMapMarkers(data) {
             // Clear existing markers
             markers.forEach(marker => marker.setMap(null));
@@ -218,7 +245,7 @@
 
                         // Create info window content
                         const contentString = `
-                            <div id='content' style='width: 500px; max-width: 100%;'>
+                            <div id='content' style='width: 550px; max-width: 100%;'>
                                 <div id='siteNotice'></div>
                                 <h2 class='card-title mb-5'>
                                     ${item.jenis_aset}
@@ -320,6 +347,23 @@
                                             </span>
                                         </div>
                                     </div>
+                                    ${item.photos && item.photos.length > 0 ? `
+                                        <div class="photo-gallery mb-5">
+                                            <div class="main-photo mb-2">
+                                                <img src="storage/${item.photos[0]}" alt="${item.jenis_aset}"
+                                                     style="width: 100%; height: auto; object-fit: cover; cursor: pointer;"
+                                                     onclick="openImageModal(this.src)">
+                                            </div>
+                                            <div class="thumbnail-container flex gap-2 overflow-x-auto">
+                                                ${item.photos.map((photo, index) => `
+                                                    <img src="storage/${photo}" alt="${item.jenis_aset} ${index + 1}"
+                                                         class="thumbnail cursor-pointer"
+                                                         style="width: 60px; height: 60px; object-fit: cover;"
+                                                         onclick="changeMainPhoto(this, ${index})">
+                                                `).join('')}
+                                            </div>
+                                        </div>
+                                    ` : ''}
                                     <div class="border-t border-gray-300 border-dashed"></div>
                                     <div class='flex justify-end mt-3'>
                                         <button onclick="getDirections(${lat}, ${lng})" class='btn btn-sm btn-primary'>