From 4c467488fb0dd11d08c2d9d527ac082ede52d748 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Thu, 16 Oct 2025 11:29:26 +0700
Subject: [PATCH] update form premium

---
 .../app/pages/form/khitan/premium.vue         | 240 +++++------
 .../app/pages/form/ulang_tahun/premium.vue    | 379 ++++++++++--------
 2 files changed, 340 insertions(+), 279 deletions(-)

diff --git a/proyek-frontend/app/pages/form/khitan/premium.vue b/proyek-frontend/app/pages/form/khitan/premium.vue
index 374cbe1..33d2616 100644
--- a/proyek-frontend/app/pages/form/khitan/premium.vue
+++ b/proyek-frontend/app/pages/form/khitan/premium.vue
@@ -12,15 +12,42 @@
       <section class="mb-8">
         <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan" 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.no_tlpn" 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" />
+          <!-- Nama Pemesan -->
+          <div class="relative">
+            <input v-model="form.nama_pemesan" type="text" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Nama Pemesan
+            </label>
+          </div>
+
+          <!-- Email -->
+          <div class="relative">
+            <input v-model="form.email" type="email" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Email
+            </label>
+          </div>
+
+          <!-- No Telepon -->
+          <div class="relative">
+            <input v-model="form.no_tlpn" type="text" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              No Telepon
+            </label>
+          </div>
+
         </div>
       </section>
 
@@ -28,27 +55,26 @@
       <section class="mb-8">
         <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🧒 Data Anak</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input v-model="form.form.nama_lengkap" 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.form.nama_panggilan" 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.form.nama_bapak" 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.form.nama_ibu" 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.form.link_instagram" placeholder="Link 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.form.link_facebook" placeholder="Link 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.form.link_twitter" placeholder="Link 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" />
+          <template v-for="(field, i) in [
+            { model: 'nama_lengkap', label: 'Nama Lengkap' },
+            { model: 'nama_panggilan', label: 'Nama Panggilan' },
+            { model: 'nama_bapak', label: 'Nama Bapak' },
+            { model: 'nama_ibu', label: 'Nama Ibu' },
+            { model: 'link_instagram', label: 'Link Instagram' },
+            { model: 'link_facebook', label: 'Link Facebook' },
+            { model: 'link_twitter', label: 'Link Twitter' }
+          ]" :key="i">
+            <div class="relative">
+              <input v-model="form.form[field.model]" placeholder="" required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+              <label class="absolute left-2 text-gray-400 transition-all
+                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+                 peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
+                 peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
+                {{ field.label }}
+              </label>
+            </div>
+          </template>
         </div>
       </section>
 
@@ -57,115 +83,91 @@
         <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Acara Khitan</h2>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div>
-            <label class="block font-medium text-gray-700 mb-2">
-              Hari & Tanggal Acara
-            </label>
-            <input v-model="form.form.hari_tanggal_acara" type="date" 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 duration-200" />
+          <!-- Hari & Tanggal -->
+          <div class="flex flex-col">
+            <label class="text-gray-600 text-sm font-medium mb-1">Hari & Tanggal Acara</label>
+            <input v-model="form.form.hari_tanggal_acara" type="date" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
           </div>
 
-          <div>
-            <label class="block font-medium text-gray-700 mb-2">
-              Waktu Acara
-            </label>
-            <input v-model="form.form.waktu" type="time" 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 duration-200" />
+          <!-- Waktu -->
+          <div class="flex flex-col">
+            <label class="text-gray-600 text-sm font-medium mb-1">Waktu Acara</label>
+            <input v-model="form.form.waktu" type="time" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
           </div>
         </div>
 
-        <div class="mt-6">
-          <label class="block font-medium text-gray-700 mb-2">
-            Alamat Acara
+
+
+        <div class="mt-6 relative">
+          <textarea v-model="form.form.alamat" rows="3" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-5 pb-1.5 text-sm resize-none
+                   focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"></textarea>
+          <label class="absolute left-2 text-gray-400 transition-all
+                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+                 peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
+                 peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
+            Alamat acara
           </label>
-          <textarea v-model="form.form.alamat" rows="3" placeholder="Tulis alamat lengkap acara" 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>
         </div>
 
-        <div class="mt-4">
-          <label class="block font-medium text-gray-700 mb-2">
-            Link Google Maps
-          </label>
-          <input v-model="form.form.link_gmaps" type="url" placeholder="https://maps.google.com/..." 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 duration-200" />
+        <div class=" relative">
+          <input v-model="form.form.link_gmaps" type="url" placeholder="" required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Link Google Maps
+            </label>
         </div>
       </section>
 
-      <!-- Syukuran -->
+      <!-- Rekening & Musik -->
       <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🍽️ Acara Syukuran</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input v-model="form.form.hari_tanggal_syukuran" type="date" placeholder="Hari & Tanggal Syukuran" 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.form.waktu_syukuran" type="time" 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 duration-200" />
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          <template v-for="(rek, i) in [1, 2, 3]" :key="i">
+            <div class="relative">
+              <input v-model="form.form[`rekening_${rek}`]" type="text" placeholder="" required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+              <label class="absolute left-2 text-gray-400 transition-all duration-200
+                 peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
+                 peer-focus:top-[-2px] peer-focus:text-[10px] peer-focus:text-blue-500
+                 peer-valid:top-[-2px] peer-valid:text-[10px] peer-valid:text-gray-500">
+                Rekening {{ rek }}
+              </label>
+            </div>
+          </template>
         </div>
-        <textarea v-model="form.form.alamat_syukuran" rows="3" placeholder="Alamat Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-2 
-                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                 outline-none transition resize-none"></textarea>
-        <input v-model="form.form.link_gmaps_syukuran" placeholder="Link Gmaps Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-2 
-                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                 outline-none transition" />
 
-        <!-- Hitung Mundur -->
-        <div>
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🕒 Hitung Mundur</h2>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-gray-600 text-sm mb-1">Mulai dari</label>
-              <input v-model="form.form.hitung_mundur_mulai" type="datetime-local"
-                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 class="space-y-4">
+          <div class="relative">
+            <input v-model="form.form.link_music" placeholder="" required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-2 text-gray-400 transition-all duration-200
+               peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
+               peer-focus:top-[-2px] peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-[-2px] peer-valid:text-[10px] peer-valid:text-gray-500">
+              Link Music
+            </label>
+          </div>
 
-            <div>
-              <label class="block text-gray-600 text-sm mb-1">Sampai dengan</label>
-              <input v-model="form.form.hitung_mundur_selesai" type="datetime-local"
-                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 class="relative">
+            <input v-model="form.form.link_live_streaming" placeholder="" required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-2 text-gray-400 transition-all duration-200
+               peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
+               peer-focus:top-[-2px] peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-[-2px] peer-valid:text-[10px] peer-valid:text-gray-500">
+              Link Live Streaming
+            </label>
           </div>
         </div>
       </section>
 
-      <!-- Lainnya -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🕒 Informasi Tambahan</h2>
-        <input v-model="form.form.link_live_streaming" placeholder="Link Live Streaming" class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-2 
-                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                 outline-none transition" />
-        <textarea v-model="form.form.say_something" rows="3" placeholder="Say Something..." 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>
 
-      <!-- Rekening -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <input v-model="form.form.rekening_1" 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.form.rekening_2" 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.form.rekening_3" 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>
-      </section>
-
-      <!-- Musik -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
-        <input v-model="form.form.link_music" placeholder="Link Music (opsional)" 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" />
-      </section>
 
       <!-- Foto Upload -->
       <section class="mb-8">
diff --git a/proyek-frontend/app/pages/form/ulang_tahun/premium.vue b/proyek-frontend/app/pages/form/ulang_tahun/premium.vue
index f8ce3cc..a248f99 100644
--- a/proyek-frontend/app/pages/form/ulang_tahun/premium.vue
+++ b/proyek-frontend/app/pages/form/ulang_tahun/premium.vue
@@ -1,173 +1,232 @@
 <template>
-    <div class="min-h-screen bg-gray-50 py-10 px-6">
-      <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8">
-        <h1 class="text-2xl font-bold text-center text-gray-800">
-          Form Undangan Ulang Tahun Premium
-        </h1>
-        <p class="text-center text-gray-500 text-sm mb-8">
-          Isi semua data berikut dengan lengkap dan benar.
-        </p>
+  <div class="min-h-screen bg-gray-50 py-10 px-6">
+    <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8">
+      <h1 class="text-2xl font-bold text-center text-gray-800">
+        Form Undangan Ulang Tahun Premium
+      </h1>
+      <p class="text-center text-gray-500 text-sm mb-8">
+        Isi semua data berikut dengan lengkap dan benar.
+      </p>
 
-        <!-- Data Pemesan -->
-        <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan"
-              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.no_tlpn" 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>
 
-        <!-- Data Anak -->
-        <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Data Anak</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <div class="grid gap-2">
-                <input v-model="form.form.nama_lengkap" 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.form.nama_panggilan" 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.form.nama_bapak" 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.form.nama_ibu" 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.form.umur_yang_dirayakan" type="number" placeholder="Umur Yang Dirayakan"
-                  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.form.anak_ke" type="number" placeholder="Anak Ke"
-                  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>
-            <div>
-              <div class="grid gap-2">
-                <input v-model="form.form.instagram" placeholder="Link 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.form.facebook" placeholder="Link 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.form.twitter" placeholder="Link 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>
-          </div>
-        </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 grid-cols-1 md:grid-cols-2 gap-4">
-            <input v-model="form.form.hari_tanggal_acara" type="date" placeholder="Hari & Tanggal Acara"
-              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.form.waktu" type="text" placeholder="Waktu"
-              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" />
-            <textarea v-model="form.form.alamat" rows="4" placeholder="Alamat"
-              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>
-            <input v-model="form.form.link_gmaps" type="text" placeholder="Link Gmaps"
-              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" />
-            <!-- Hitung Mundur -->
-          <div>
-            <h3 class="font-medium text-gray-700 mb-3">Hitung Mundur</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <!-- Mulai -->
-              <div>
-                <label class="block text-gray-600 text-sm mb-1">Mulai dari</label>
-                <input v-model="form.form.hitung_mundur_mulai" type="datetime-local"
-                  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>
-
-              <!-- Sampai -->
-              <div>
-                <label class="block text-gray-600 text-sm mb-1">Sampai dengan</label>
-                <input v-model="form.form.hitung_mundur_selesai" type="datetime-local"
-                  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.form.link_live_streaming" type="text" placeholder="Link Live Streaming"
-              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>
-          </div>
-          
-        </section>
-
-        <!-- Pesan & Rekening -->
-        <section class="mb-8">
-          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Pesan & Rekening</h2>
-          <textarea v-model="form.form.say_something" rows="4" placeholder="Say Something..."
-            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>
-          <div class="grid md:grid-cols-3 gap-4 mt-4">
-            <input v-model="form.form.rekening_1" 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.form.rekening_2" 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.form.rekening_3" 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.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>
-
-        <!-- Foto Upload -->
-        <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 flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
-          >
-            <input
-              id="gallery"
-              type="file"
-              multiple
-              accept="image/*"
-              class="hidden"
-              @change="handleFileChange"
-            />
-            <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. 8, JPEG/PNG, maks. 2MB)</span>
+      <!-- Data Pemesan -->
+      <section class="mb-8">
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- Nama Pemesan -->
+          <div class="relative">
+            <input v-model="form.nama_pemesan" type="text" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Nama Pemesan
             </label>
-            <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>
+
+          <!-- Email -->
+          <div class="relative">
+            <input v-model="form.email" type="email" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Email
+            </label>
+          </div>
+
+          <!-- No Telepon -->
+          <div class="relative">
+            <input v-model="form.no_tlpn" type="text" placeholder=" " required
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              No Telepon
+            </label>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- Data Anak -->
+      <section class="mb-8">
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Data Anak</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="grid gap-4">
+            <template v-for="(field, i) in [
+              { key: 'nama_lengkap', label: 'Nama Lengkap' },
+              { key: 'nama_panggilan', label: 'Nama Panggilan' },
+              { key: 'nama_bapak', label: 'Nama Bapak' },
+              { key: 'nama_ibu', label: 'Nama Ibu' },
+              { key: 'umur_yang_dirayakan', label: 'Umur yang Dirayakan', type: 'number' },
+              { key: 'anak_ke', label: 'Anak Ke', type: 'number' }
+            ]" :key="i">
+              <div class="relative">
+                <input v-model="form.form[field.key]" :type="field.type || 'text'" required placeholder=" "
+                  class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+
+                  {{ field.label }}
+                </label>
               </div>
-              <label
-                v-if="previews.length < 8"
-                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>
+            </template>
+          </div>
+
+          <div class="grid gap-4">
+            <template v-for="(field, i) in [
+              { key: 'instagram', label: 'Link Instagram' },
+              { key: 'facebook', label: 'Link Facebook' },
+              { key: 'twitter', label: 'Link Twitter' }
+            ]" :key="i">
+              <div class="relative">
+                <input v-model="form.form[field.key]" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+            focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <label class="absolute left-2 text-gray-400 transition-all
+            peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
+            peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500">
+                  {{ field.label }}
+                </label>
+              </div>
+            </template>
+          </div>
+        </div>
+      </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 grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="relative">
+            <input v-model="form.form.hari_tanggal_acara" type="date" required placeholder=" " class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+        focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-2 text-gray-400 transition-all
+                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+                 peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
+                 peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
+                  Hari & Tanggal Acara
+                </label>
+          </div>
+
+          <div class="relative">
+            <input v-model="form.form.waktu" type="time" required placeholder=" " class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+        focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-2 text-gray-400 transition-all
+                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+                 peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
+                 peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
+                  Waktu Acara
+                </label>
+          </div>
+
+          <div class="relative md:col-span-2">
+            <textarea v-model="form.form.alamat" rows="4" required placeholder=" "
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Alamat
+            </label>
+          </div>
+
+          <div class="relative md:col-span-2">
+            <input v-model="form.form.link_gmaps" type="text" required placeholder=" "
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all 
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Link Gmaps
+            </label>
+          </div>
+        </div>
+      </section>
+
+      <!-- Pesan & Rekening -->
+      <section class="mb-8">
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Pesan & Rekening</h2>
+
+        <!-- Say Something -->
+        <section class="mb-8">
+
+          <textarea v-model="form.form.say_something" rows="4" placeholder="Kata-kata spesial atau pesan untuk tamu..."
+            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>
+
+        <div class="grid md:grid-cols-3 gap-4">
+          <template v-for="(rek, i) in [1, 2, 3]" :key="i">
+            <div class="relative">
+              <input v-model="form.form[`rekening_${rek}`]" required placeholder=" "
+                class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+              <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+
+                Rekening {{ rek }}
               </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">
-            Batal
-          </button>
-          <button @click="konfirmasi"
-            class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
-            Konfirmasi
-          </button>
+          </template>
         </div>
+
+        <div class="relative mt-4">
+          <input v-model="form.form.link_music" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
+      focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all 
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+            Link Music
+          </label>
+        </div>
+      </section>
+
+
+      <!-- Foto Upload -->
+      <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 flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition">
+          <input id="gallery" type="file" multiple accept="image/*" class="hidden" @change="handleFileChange" />
+          <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. 8, JPEG/PNG, maks. 2MB)</span>
+          </label>
+          <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>
+            <label v-if="previews.length < 8" 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">
+          Batal
+        </button>
+        <button @click="konfirmasi" class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
+          Konfirmasi
+        </button>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>