From 2b9985bbc7a1aaf31132b75a877f25d892ff2a0e Mon Sep 17 00:00:00 2001
From: Arya Dwi Putra <aryadptr.developer@gmail.com>
Date: Tue, 2 Dec 2025 08:04:49 +0700
Subject: [PATCH] Revamp public asset view with marketplace-style photo gallery

---
 .../views/pages/landing/asset-show.blade.php  | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/resources/views/pages/landing/asset-show.blade.php b/resources/views/pages/landing/asset-show.blade.php
index 1f7cf08..05a0390 100644
--- a/resources/views/pages/landing/asset-show.blade.php
+++ b/resources/views/pages/landing/asset-show.blade.php
@@ -3,7 +3,7 @@
 @section('content')
 <section class="section" id="home">
     <div class="container">
-        <div class="row g-4 align-items-center">
+        <div class="row g-4 align-items-start">
             <div class="col-lg-6">
                 <div class="d-inline-flex align-items-center gap-2 text-default badge bg-white border fs-13 rounded-pill">
                     <span class="avatar avatar-xs avatar-rounded bg-warning"><i class="ri-qr-code-fill fs-14"></i></span>Asset Detail
@@ -44,15 +44,17 @@
             <div class="col-lg-6">
                 <div class="card custom-card">
                     <div class="card-body">
-                        <div class="row g-2">
+                        @php $firstPhoto = $asset->photos->first(); @endphp
+                        <div class="mb-3 text-center">
+                            <img id="main-asset-photo" src="{{ $firstPhoto ? asset('storage/'.$firstPhoto->path) : asset('landing-asset-hero.jpg') }}" alt="foto aset" class="img-fluid rounded" style="height:320px;object-fit:cover;">
+                        </div>
+                        <div class="d-flex gap-2 flex-wrap justify-content-center">
                             @forelse($asset->photos as $photo)
-                                <div class="col-6 col-md-4">
-                                    <a href="{{ asset('storage/'.$photo->path) }}" target="_blank" class="d-block">
-                                        <img src="{{ asset('storage/'.$photo->path) }}" class="img-fluid rounded" style="height:140px;object-fit:cover;" alt="foto aset">
-                                    </a>
-                                </div>
+                                <button class="thumb-btn border-0 p-0 bg-transparent" data-src="{{ asset('storage/'.$photo->path) }}">
+                                    <img src="{{ asset('storage/'.$photo->path) }}" class="img-thumbnail {{ $loop->first ? 'border border-2 border-primary' : '' }}" style="width:90px;height:90px;object-fit:cover;" alt="foto aset">
+                                </button>
                             @empty
-                                <div class="col-12 text-muted small">Belum ada foto aset.</div>
+                                <span class="text-muted small">Belum ada foto aset.</span>
                             @endforelse
                         </div>
                     </div>
@@ -61,4 +63,18 @@
         </div>
     </div>
 </section>
+
+@section('scripts')
+<script>
+    document.querySelectorAll('.thumb-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const main = document.getElementById('main-asset-photo');
+            main.src = this.dataset.src;
+            document.querySelectorAll('.thumb-btn img').forEach(img => img.classList.remove('border-primary','border','border-2'));
+            this.querySelector('img').classList.add('border','border-2','border-primary');
+        });
+    });
+</script>
+@endsection
 @endsection