From 6febfcfe9a143721a24f3490f047a44644d5ac11 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Fri, 12 Sep 2025 14:37:40 +0700
Subject: [PATCH] template

---
 .../components/template-page/TemplateGrid.vue | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index 33a8613..f2c8303 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -16,40 +16,53 @@
     <div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
       
       <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
-        <img :src="`http://localhost:8000${tpl.foto}`" alt="Template">
-
-        
-        <div class="p-5 text-center">
-          <h4 class="text-xl font-bold text-gray-800 mb-2">{{ tpl.nama }}</h4>
-          <p class="text-green-600 font-semibold text-xl mb-4">
+    <img :src="`http://localhost:8000${tpl.foto}`" :alt="tpl.nama" class="w-full h-48 object-cover">
+    
+    <div class="p-5 text-center">
+        <h4 class="text-xl font-bold text-gray-800 mb-2">{{ tpl.nama }}</h4>
+        <p class="text-green-600 font-semibold text-xl mb-4">
             Rp {{ tpl.harga.toLocaleString('id-ID') }}
-          </p>
+        </p>
 
-          <div v-if="tpl.fitur && tpl.fitur.deskripsi" class="relative mb-4">
+        <div v-if="tpl.fitur && tpl.fitur.length > 0" class="relative mb-4">
             <button @click="toggleDropdown(tpl.id)" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center text-center">
-    <span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
-    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-</button>
+                <span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
+                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+            </button>
             
             <div v-if="openDropdownId === tpl.id">
-              <ul class="mt-4 space-y-2 text-gray-600">
-                <li v-for="(feature, index) in tpl.fitur.deskripsi.split(',')" :key="index">
-                  {{ feature.trim() }}
-                </li>
-              </ul>
+                <ul class="mt-4 space-y-2 text-gray-600 text-left">
+                    <li v-for="item_fitur in tpl.fitur" :key="item_fitur.id" class="flex items-center">
+                        <svg class="h-4 w-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                        
+                        {{ item_fitur.deskripsi }}
+                    </li>
+                </ul>
             </div>
-          </div>
-          
-          <div class="mt-6">
-            <div class="flex items-center gap-3">
-              <button class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors">Preview</button>
-              <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">Order</button>
-            </div>
-          </div>
         </div>
-      </div>
+        
+        <div class="mt-6">
+  <div class="flex items-center gap-3">
+    <!-- Tombol Preview (masih sama) -->
+    <button
+      class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
+    >
+      Preview
+    </button>
+
+    <!-- Tombol Order langsung ke form Khitan -->
+    <NuxtLink
+      to="/khitan"
+      class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center"
+    >
+      Order
+    </NuxtLink>
+  </div>
+</div>
+    </div>
+</div>
+      
     </div>
-    
     <div v-else class="text-center py-10 text-gray-500">
       <p>Belum ada template untuk kategori ini.</p>
     </div>