Merge branch 'baru' of https://git.abbauf.com/Magang-2025/Undangan into baru

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, 6, 7, 8, 9]
+const selectedIds = [1, 3, 4, 5, 2, 7, 8, 9]
 
 // State dropdown
 const openDropdownId = ref(null)

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

@@ -126,48 +126,147 @@
           <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>
-  
-        <!-- Galeri Foto -->
-        <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
-          <div
-            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">
+        <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">
+        <input 
+            type="file"
+            multiple
+            class="hidden"
+            id="gallery"
+            @change="handleFileChange"
+        >
+        <label for="gallery" class="cursor-pointer flex flex-col items-center">
             <span class="text-3xl font-bold">+</span>
-          </div>
-        </section>
+            <span class="text-sm mt-2">Pilih Foto</span>
+        </label>
+        </div>
+
+
   
         <!-- Tombol -->
-        <div class="text-center">
-          <button @click="submitForm"
-            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow-md transition">
+      <div class="text-end mt-6">
+        <button @click="batal"
+            class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"> 
+            Batal
+        </button>
+        <button @click="konfirmasi"
+            class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"> 
             Konfirmasi
-          </button>
-        </div>
+        </button>
       </div>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref } from 'vue'
-  
-  const form = ref({
-    nama_pemesan: '',
-    email: '',
-    telepon: '',
-    pria: {},
-    wanita: {},
-    cerita: '',
-    akad: {},
-    resepsi: {},
-    rekening1: '',
-    rekening2: '',
-    rekening3: '',
-    link_music: ''
-  })
-  
-  const submitForm = () => {
-    console.log('Data terkirim:', form.value)
-    alert('Data berhasil dikonfirmasi!')
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const handleFileChange = (event) => {
+  form.value.galeri = Array.from(event.target.files)
+}
+
+const form = ref({
+  nama_pemesan: '',
+  email: '',
+  telepon: '',
+  pria: {
+    nama_lengkap: '',
+    nama_panggilan: '',
+    nama_bapak: '',
+    nama_ibu: '',
+    instagram: '',
+    facebook: '',
+    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>