proyek-frontend/app/components/landing-page/featuredtemplates.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue'
 
 // ID template yang mau ditampilkan
-const selectedIds = [1, 3, 4, 5, 2, 7, 8, 9]
+const selectedIds = [1, 3, 4, 5, 6, 7, 8, 9]
 
 // State dropdown
 const openDropdownId = ref(null)

proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue

@@ -126,147 +126,48 @@
           <input v-model="form.link_music" placeholder="Link Music (opsional)"
             class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-4 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
         </section>
-        <label class="font-semibold text-blue-600 mb-3 block border-b pb-1">🖼️ Galeri Foto</label>
+  
-        <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 cursor-pointer hover:border-blue-400 hover:text-blue-500 transition">
+        <!-- Galeri Foto -->
-        <input 
+        <section class="mb-8">
-            type="file"
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
-            multiple
+          <div
-            class="hidden"
+            class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex justify-center items-center text-gray-400 cursor-pointer hover:border-blue-400 hover:text-blue-500 transition">
-            id="gallery"
-            @change="handleFileChange"
-        >
-        <label for="gallery" class="cursor-pointer flex flex-col items-center">
             <span class="text-3xl font-bold">+</span>
-            <span class="text-sm mt-2">Pilih Foto</span>
+          </div>
-        </label>
+        </section>
-        </div>
-
-
   
         <!-- Tombol -->
-      <div class="text-end mt-6">
+        <div class="text-center">
-        <button @click="batal"
+          <button @click="submitForm"
-            class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"> 
+            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow-md transition">
-            Batal
-        </button>
-        <button @click="konfirmasi"
-            class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"> 
             Konfirmasi
-        </button>
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </template>
-</template>
+  
-
+  <script setup>
-<script setup>
+  import { ref } from 'vue'
-import { ref } from 'vue'
+  
-import { useRouter } from 'vue-router'
+  const form = ref({
-
+    nama_pemesan: '',
-const router = useRouter()
+    email: '',
-const handleFileChange = (event) => {
+    telepon: '',
-  form.value.galeri = Array.from(event.target.files)
+    pria: {},
-}
+    wanita: {},
-
+    cerita: '',
-const form = ref({
+    akad: {},
-  nama_pemesan: '',
+    resepsi: {},
-  email: '',
+    rekening1: '',
-  telepon: '',
+    rekening2: '',
-  pria: {
+    rekening3: '',
-    nama_lengkap: '',
+    link_music: ''
-    nama_panggilan: '',
+  })
-    nama_bapak: '',
+  
-    nama_ibu: '',
+  const submitForm = () => {
-    instagram: '',
+    console.log('Data terkirim:', form.value)
-    facebook: '',
+    alert('Data berhasil dikonfirmasi!')
-    twitter: ''
-  },
-  wanita: {
-    nama_lengkap: '',
-    nama_panggilan: '',
-    nama_bapak: '',
-    nama_ibu: '',
-    instagram: '',
-    facebook: '',
-    twitter: ''
-  },
-  cerita: '',
-  akad: {
-    tanggal: '',
-    waktu: '',
-    alamat: '',
-    link_gmaps: ''
-  },
-  resepsi: {
-    tanggal: '',
-    waktu: '',
-    alamat: '',
-    link_gmaps: ''
-  },
-  rekening1: '',
-  rekening2: '',
-  rekening3: '',
-  link_music: '',
-  galeri: []
-})
-
-// Fungsi Konfirmasi
-const konfirmasi = async () => {
-  try {
-    const data = new FormData()
-
-    // Tambahkan field sederhana
-    data.append('nama_pemesan', form.value.nama_pemesan)
-    data.append('email', form.value.email)
-    data.append('telepon', form.value.telepon)
-
-    // Tambahkan nested object (pria, wanita, akad, resepsi)
-    for (const key in form.value.pria) {
-      data.append(`pria[${key}]`, form.value.pria[key])
-    }
-    for (const key in form.value.wanita) {
-      data.append(`wanita[${key}]`, form.value.wanita[key])
-    }
-    for (const key in form.value.akad) {
-      data.append(`akad[${key}]`, form.value.akad[key])
-    }
-    for (const key in form.value.resepsi) {
-      data.append(`resepsi[${key}]`, form.value.resepsi[key])
-    }
-
-    // Rekening & Musik
-    data.append('rekening1', form.value.rekening1)
-    data.append('rekening2', form.value.rekening2)
-    data.append('rekening3', form.value.rekening3)
-    data.append('link_music', form.value.link_music)
-
-    // File galeri
-    form.value.galeri.forEach(file => {
-      data.append('galeri[]', file)
-    })
-
-    // Kirim ke backend
-    const response = await fetch('https://localhost/api/undangan', {
-      method: 'POST',
-      body: data
-      // Jangan set header 'Content-Type' manual, biarkan browser otomatis atur multipart/form-data
-    })
-
-    if (!response.ok) throw new Error('Gagal mengirim data')
-
-    const result = await response.json()
-    alert('Data berhasil disimpan!')
-
-    router.push('/')
-  } catch (error) {
-    console.error(error)
-    alert('Terjadi kesalahan, coba lagi!')
   }
-}
+  </script>
-
+  
-
-// Fungsi Batal
-const batal = () => {
-  // Kembali ke landing page tanpa menyimpan
-  router.back()('/')
-}
-</script>