From f0f570be21ce32f0af46d34abc624bd89da6aa8c Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Thu, 28 Aug 2025 14:35:04 +0700
Subject: [PATCH] Update Produk.vue

---
 resources/js/pages/Produk.vue | 66 +++++++++++++++++------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 566dce7..d9fb1ad 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -42,17 +42,18 @@
 
     <!-- Overlay Detail Produk -->
     <!-- Overlay Detail Produk -->
+<!-- Overlay Detail Produk -->
 <div
   v-if="showOverlay"
   class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
   @click.self="closeOverlay"
 >
   <div
-    class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
-    @mouseleave="closeOverlay"
+    class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
+    
   >
-    <!-- Foto Produk dengan Slider -->
-    <div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
+    <!-- Foto Produk -->
+    <div class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded">
       <img
         v-if="detail.foto && detail.foto.length > 0"
         :src="detail.foto[currentFotoIndex].url"
@@ -63,21 +64,14 @@
 
       <!-- Stok (pcs) pojok kiri atas -->
       <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
-        {{ detail.item_count }} pcs
-      </div>
-
-      <!-- Nama Produk di bawah -->
-      <div
-        class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
-      >
-        {{ detail.nama }}
+        {{ detail.items_count }} pcs
       </div>
 
       <!-- Tombol Prev -->
       <button
         v-if="detail.foto && detail.foto.length > 1"
         @click.stop="prevFoto"
-        class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+        class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
       >
         ‹
       </button>
@@ -85,40 +79,46 @@
       <button
         v-if="detail.foto && detail.foto.length > 1"
         @click.stop="nextFoto"
-        class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+        class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
       >
         ›
       </button>
     </div>
 
+    <!-- Nama Produk -->
+    <p class="text-lg font-semibold text-center mb-4">{{ detail.nama }}</p>
+
     <!-- Detail Harga & Info -->
-    <div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
-      <!-- harga beli dihapus -->
-      <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
-      <p class="text-right">{{ detail.kadar }} K</p>
-      <p class="col-span-2 text-center">
-        Berat : {{ detail.berat }} gram
-      </p>
-      <p class="col-span-2">
-        Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
-      </p>
+    <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+      <p class="col-span-1">Harga Jual :</p>
+      <p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_jual) }}</p>
+
+      <p class="col-span-1">Kadar :</p>
+      <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
+
+      <p class="col-span-1">Berat :</p>
+      <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
+
+      <p class="col-span-1">Harga/gram :</p>
+      <p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_per_gram) }}</p>
     </div>
 
     <!-- Tombol Aksi -->
-    <div class="flex justify-between w-full">
-      <button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
+    <div class="flex w-full gap-3">
+      <button class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
         Ubah
       </button>
-      <button class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+      <button class="flex-1 bg-green-400 text-black py-2 rounded font-bold">
         Tambah
       </button>
-      <button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
+      <button class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
         Hapus
       </button>
     </div>
   </div>
 </div>
 
+
   </mainLayout>
 </template>
 
@@ -170,14 +170,12 @@ const filteredProducts = computed(() => {
 });
 
 // buka overlay
-async function openOverlay(id) {
-  try {
-    const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
-    detail.value = res.data;
+function openOverlay(id) {
+  const produk = products.value.find((p) => p.id === id);
+  if (produk) {
+    detail.value = produk;
     currentFotoIndex.value = 0; // reset ke foto pertama
     showOverlay.value = true;
-  } catch (error) {
-    console.error("Gagal fetch detail produk:", error);
   }
 }