From c2fcb9e22e65693f163e34b7796ac86055e8136a Mon Sep 17 00:00:00 2001
From: timotiabbauftech <timotiabbauftech@gmail.com>
Date: Mon, 13 Oct 2025 09:38:10 +0700
Subject: [PATCH] Update undangan-pernikahan-premium.vue

---
 .../form/undangan-pernikahan-premium.vue      | 317 ++++++++----------
 1 file changed, 145 insertions(+), 172 deletions(-)

diff --git a/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
index 49dcacb..c12edbd 100644
--- a/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
+++ b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
@@ -16,7 +16,7 @@
               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
             <input v-model="form.email" type="email" placeholder="Email"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-            <input v-model="form.telepon" type="text" placeholder="No Telepon"
+            <input v-model="form.no_telepon" type="text" placeholder="No Telepon"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
           </div>
         </section>
@@ -29,19 +29,19 @@
             <div>
               <h3 class="font-medium text-gray-700 mb-2">Mempelai Pria</h3>
               <div class="grid gap-2">
-                <input v-model="form.pria.nama_lengkap" placeholder="Nama Lengkap"
+                <input v-model="form.nama_lengkap_pria" placeholder="Nama Lengkap"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.nama_panggilan" placeholder="Nama Panggilan"
+                <input v-model="form.nama_panggilan_pria" placeholder="Nama Panggilan"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.nama_bapak" placeholder="Nama Bapak"
+                <input v-model="form.nama_bapak_pria" placeholder="Nama Bapak"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.nama_ibu" placeholder="Nama Ibu"
+                <input v-model="form.nama_ibu_pria" placeholder="Nama Ibu"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.instagram" placeholder="Instagram"
+                <input v-model="form.instagram_pria" placeholder="Instagram"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.facebook" placeholder="Facebook"
+                <input v-model="form.facebook_pria" placeholder="Facebook"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-                <input v-model="form.pria.twitter" placeholder="Twitter"
+                <input v-model="form.twitter_pria" placeholder="Twitter"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
               </div>
             </div>
@@ -50,19 +50,19 @@
             <div>
               <h3 class="font-medium text-gray-700 mb-2">Mempelai Wanita</h3>
               <div class="grid gap-2">
-                <input v-model="form.wanita.nama_lengkap" placeholder="Nama Lengkap"
+                <input v-model="form.nama_lengkap_wanita" placeholder="Nama Lengkap"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.nama_panggilan" placeholder="Nama Panggilan"
+                <input v-model="form.nama_panggilan_wanita" placeholder="Nama Panggilan"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.nama_bapak" placeholder="Nama Bapak"
+                <input v-model="form.nama_bapak_wanita" placeholder="Nama Bapak"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.nama_ibu" placeholder="Nama Ibu"
+                <input v-model="form.nama_ibu_wanita" placeholder="Nama Ibu"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.instagram" placeholder="Instagram"
+                <input v-model="form.instagram_wanita" placeholder="Instagram"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.facebook" placeholder="Facebook"
+                <input v-model="form.facebook_wanita" placeholder="Facebook"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.wanita.twitter" placeholder="Twitter"
+                <input v-model="form.twitter_wanita" placeholder="Twitter"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
               </div>
             </div>
@@ -72,201 +72,174 @@
         <!-- Cerita Kita -->
         <section class="mb-8">
           <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Cerita Kita</h2>
-          <textarea v-model="form.cerita" rows="4" placeholder="Ceritakan kisah kalian..."
+          <textarea v-model="form.cerita_kita" rows="4" placeholder="Ceritakan kisah kalian..."
             class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"></textarea>
         </section>
-  
-        <!-- Detail Acara -->
-        <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Detail Acara</h2>
-          <div class="grid md:grid-cols-2 gap-6">
-            <!-- Akad -->
-            <div>
-              <h3 class="font-medium text-gray-700 mb-2">Akad</h3>
-              <div class="grid gap-2">
-                <input v-model="form.akad.tanggal" type="date"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
-                <input v-model="form.akad.waktu" type="time"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
-                <input v-model="form.akad.alamat" placeholder="Alamat Akad"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
-                <input v-model="form.akad.link_gmaps" placeholder="Link Gmaps Akad"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
-              </div>
-            </div>
-  
-            <!-- Resepsi -->
-            <div>
-              <h3 class="font-medium text-gray-700 mb-2">Resepsi</h3>
-              <div class="grid gap-2">
-                <input v-model="form.resepsi.tanggal" type="date"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
-                <input v-model="form.resepsi.waktu" type="time"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
-                <input v-model="form.resepsi.alamat" placeholder="Alamat Resepsi"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
-                <input v-model="form.resepsi.link_gmaps" placeholder="Link Gmaps Resepsi"
-                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
-              </div>
-            </div>
-          </div>
+        <!-- Rekening & Musik --> 
+         <section class="mb-8"> 
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
+         <div class="grid md:grid-cols-3 gap-4"> 
+            <input v-model="form.rekening1" placeholder="Rekening 1" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" /> 
+            <input v-model="form.rekening2" placeholder="Rekening 2" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.rekening3" placeholder="Rekening 3" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" /> 
+        </div> 
+        <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>
-  
-        <!-- Rekening & Musik -->
+        <!-- Foto Upload -->
         <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
-          <div class="grid md:grid-cols-3 gap-4">
-            <input v-model="form.rekening1" placeholder="Rekening 1"
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-            <input v-model="form.rekening2" placeholder="Rekening 2"
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-            <input v-model="form.rekening3" placeholder="Rekening 3"
-              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-          </div>
-          <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">
-        <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>
-            <span class="text-sm mt-2">Pilih Foto</span>
-        </label>
-        </div>
+  <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 flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
+  >
+    <!-- Input File -->
+    <input
+      id="gallery"
+      type="file"
+      multiple
+      accept="image/*"
+      class="hidden"
+      @change="handleFileChange"
+    />
+
+    <!-- Jika belum ada foto -->
+    <label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
+      <span class="text-4xl font-bold">+</span>
+      <span class="text-sm mt-2">Pilih Foto (maks. 6)</span>
+    </label>
+
+    <!-- Jika sudah ada foto -->
+    <div v-else class="grid grid-cols-3 sm:grid-cols-4 gap-4">
+      <div
+        v-for="(src, i) in previews"
+        :key="i"
+        class="relative group"
+      >
+        <img
+          :src="src"
+          class="w-24 h-24 object-cover rounded-lg border shadow"
+        />
+        <button
+          @click="removeFile(i)"
+          class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
+          title="Hapus foto"
+        >
+          ✕
+        </button>
+      </div>
+
+      <!-- Tambah foto baru (+) -->
+      <label
+        v-if="previews.length < 6"
+        for="gallery"
+        class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
+      >
+        <span class="text-3xl font-bold">+</span>
+      </label>
+    </div>
+  </div>
+</section>
 
   
         <!-- Tombol -->
-      <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"> 
+        <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"> 
+          </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>
-
-<script setup>
+  </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: ''
-  },
+  no_telepon: '',
+  nama_lengkap_pria: '',
+  nama_panggilan_pria: '',
+  nama_bapak_pria: '',
+  nama_ibu_pria: '',
+  instagram_pria: '',
+  facebook_pria: '',
+  twitter_pria: '',
+  nama_lengkap_wanita: '',
+  nama_panggilan_wanita: '',
+  nama_bapak_wanita: '',
+  nama_ibu_wanita: '',
+  instagram_wanita: '',
+  facebook_wanita: '',
+  twitter_wanita: '',
   rekening1: '',
   rekening2: '',
   rekening3: '',
+  cerita_kita: '',
   link_music: '',
-  galeri: []
+  foto: []
 })
 
-// Fungsi Konfirmasi
+const previews = ref([])
+
+const handleFileChange = (e) => {
+  const files = Array.from(e.target.files)
+  const totalFiles = form.value.foto.length + files.length
+
+  if (totalFiles > 6) {
+    alert('Maksimal 6 foto!')
+    e.target.value = ''
+    return
+  }
+
+  files.forEach(file => {
+    form.value.foto.push(file)
+    previews.value.push(URL.createObjectURL(file))
+  })
+
+  // reset input agar bisa upload lagi file yang sama
+  e.target.value = ''
+}
+
+const removeFile = (index) => {
+  form.value.foto.splice(index, 1)
+  previews.value.splice(index, 1)
+}
+
 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])
+    for (const key in form.value) {
+      const value = form.value[key]
+      if (Array.isArray(value)) {
+        // untuk semua foto
+        value.forEach(file => data.append(`${key}[]`, file))
+      } else {
+        data.append(key, value)
+      }
     }
 
-    // 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', {
+    const res = await fetch('http://localhost:8000/api/pelanggans', {
       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()
+    if (!res.ok) throw new Error('Gagal mengirim data')
     alert('Data berhasil disimpan!')
-
     router.push('/')
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     alert('Terjadi kesalahan, coba lagi!')
   }
 }
 
-
-// Fungsi Batal
-const batal = () => {
-  // Kembali ke landing page tanpa menyimpan
-  router.back()('/')
-}
-</script>
\ No newline at end of file
+const batal = () => router.back()
+</script>