From 80c1fdda8b8eaa7f3da2e71f3e8e3392716e0a23 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Thu, 18 Sep 2025 17:00:50 +0700
Subject: [PATCH] update form ultah

---
 .../app/components/forms/UlangTahunForm.vue   | 231 +++++++++++++-----
 1 file changed, 164 insertions(+), 67 deletions(-)

diff --git a/proyek-frontend/app/components/forms/UlangTahunForm.vue b/proyek-frontend/app/components/forms/UlangTahunForm.vue
index 55d6cfa..5d530d9 100644
--- a/proyek-frontend/app/components/forms/UlangTahunForm.vue
+++ b/proyek-frontend/app/components/forms/UlangTahunForm.vue
@@ -21,92 +21,189 @@
           <input :value="form.nama_template" type="text" placeholder="Nama Template" class="input-readonly" readonly />
           <input :value="form.kategori" type="text" placeholder="Kategori" class="input-readonly" readonly />
           <input :value="form.harga" type="text" placeholder="Harga" class="input-readonly" readonly />
-          <input :value="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly" readonly />
+          <input :value="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly"
+            readonly />
         </div>
       </section>
 
       <!-- Pemesan -->
-      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
-        <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-          <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan" class="input" required />
-          <input v-model="form.no_hp" type="text" placeholder="No. WhatsApp" class="input" required />
-          <input v-model="form.email" type="email" placeholder="Email" class="input md:col-span-2" required />
-        </div>
-      </section>
+      <!-- Pemesan -->
+<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
+  <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+    <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
+  </h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="relative">
+      <input v-model="form.nama_pemesan" type="text" id="nama_pemesan" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="nama_pemesan"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Nama Pemesan
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.no_hp" type="text" id="no_hp" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="no_hp"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        No. WhatsApp
+      </label>
+    </div>
+    <div class="relative md:col-span-2">
+      <input v-model="form.email" type="email" id="email" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="email"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Email
+      </label>
+    </div>
+  </div>
+</section>
 
-      <!-- Data Anak -->
-      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
-        <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-          <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input v-model="form.nama_lengkap_anak" type="text" placeholder="Nama Lengkap Anak" class="input" required />
-          <input v-model="form.nama_panggilan_anak" type="text" placeholder="Nama Panggilan Anak" class="input" required />
-          <input v-model="form.bapak_anak" type="text" placeholder="Nama Bapak" class="input" required />
-          <input v-model="form.ibu_anak" type="text" placeholder="Nama Ibu" class="input" required />
-          <input v-model="form.umur_dirayakan" type="text" placeholder="Ulang Tahun ke-" class="input" required />
-          <input v-model="form.anak_ke" type="text" placeholder="Anak ke-" class="input" required />
-        </div>
-      </section>
+<!-- Data Anak -->
+<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
+  <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+    <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
+  </h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="relative">
+      <input v-model="form.nama_lengkap_anak" type="text" id="nama_lengkap_anak" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="nama_lengkap_anak"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Nama Lengkap Anak
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.nama_panggilan_anak" type="text" id="nama_panggilan_anak" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="nama_panggilan_anak"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Nama Panggilan Anak
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.bapak_anak" type="text" id="bapak_anak" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="bapak_anak"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Nama Bapak
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.ibu_anak" type="text" id="ibu_anak" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="ibu_anak"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Nama Ibu
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.umur_dirayakan" type="text" id="umur_dirayakan" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="umur_dirayakan"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Ulang Tahun ke-
+      </label>
+    </div>
+    <div class="relative">
+      <input v-model="form.anak_ke" type="text" id="anak_ke" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="anak_ke"
+        class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
+        Anak ke-
+      </label>
+    </div>
+  </div>
+</section>
 
-      <!-- Jadwal Acara -->
-      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
-        <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-          <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input v-model="form.hari_tanggal_acara" type="date" class="input" required />
-          <input v-model="form.waktu_acara" type="text" placeholder="Waktu Acara (Contoh: 15:00 - Selesai)" class="input" required />
-          <textarea v-model="form.alamat_acara" rows="3" placeholder="Alamat Lengkap Acara" class="input md:col-span-2" required></textarea>
-          <input v-model="form.maps_acara" type="text" placeholder="Link Google Maps (Opsional)" class="input md:col-span-2" />
-        </div>
-      </section>
+<!-- Jadwal Acara -->
+<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
+  <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+    <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
+  </h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="relative">
+      <input v-model="form.hari_tanggal_acara" type="date" id="hari_tanggal_acara" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="hari_tanggal_acara"
+        class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Hari & Tanggal</label>
+    </div>
+    <div class="relative">
+      <input v-model="form.waktu_acara" type="text" id="waktu_acara" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="waktu_acara"
+        class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Waktu Acara</label>
+    </div>
+    <div class="relative md:col-span-2">
+      <textarea v-model="form.alamat_acara" id="alamat_acara" rows="3" placeholder=" " required
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+      <label for="alamat_acara"
+        class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Alamat Lengkap</label>
+    </div>
+    <div class="relative md:col-span-2">
+      <input v-model="form.maps_acara" type="text" id="maps_acara" placeholder=" "
+        class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+      <label for="maps_acara"
+        class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Google Maps (Opsional)</label>
+    </div>
+  </div>
+</section>
 
-      <!-- Informasi Tambahan -->
-      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
-        <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-          <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
-        </h2>
-        <input v-model="form.link_musik" type="text" placeholder="Link Musik Latar (Opsional)" class="input" />
-      </section>
+<!-- Informasi Tambahan -->
+<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
+  <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+    <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
+  </h2>
+  <div class="relative">
+    <input v-model="form.link_musik" type="text" id="link_musik" placeholder=" "
+      class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+    <label for="link_musik"
+      class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Musik (Opsional)</label>
+  </div>
+</section>
 
-     <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
+<!-- Galeri -->
+<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
   <h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
   <input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
   <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
-    <div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
+    <div v-for="(img, i) in previewImages" :key="i"
+      class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
       <img :src="img" alt="Preview" class="object-cover w-full h-full" />
-      <button 
-        type="button"
-        @click="removeImage(i)"  
+      <button type="button" @click="removeImage(i)"
         class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
-        aria-label="Hapus gambar" 
-      >
+        aria-label="Hapus gambar">
         &times;
       </button>
     </div>
-    <label v-if="previewImages.length < 5" for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-  </svg>
-</label>
-        </div>
-        </div>
-        </form>
+    <label v-if="previewImages.length < 5" for="gallery-upload"
+      class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+      </svg>
+    </label>
+  </div>
+</div>
+
+      
+    </form>
 
     <!-- Submit -->
     <div class="mt-10 text-center">
-      <button @click="submitForm" class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition" :disabled="loading">
+      <button @click="submitForm"
+        class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition"
+        :disabled="loading">
         {{ loading ? "Mengirim..." : "Kirim & Konfirmasi Admin" }}
       </button>
     </div>
 
     <!-- Alert -->
-    <div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">✅ Form berhasil dikirim!</div>
-    <div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">❌ Gagal mengirim form. Pastikan semua data yang wajib diisi sudah lengkap.</div>
+    <div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">✅ Form berhasil
+      dikirim!</div>
+    <div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">❌ Gagal mengirim form.
+      Pastikan semua data yang wajib diisi sudah lengkap.</div>
   </div>
 </template>
 
@@ -133,8 +230,8 @@ const form = ref({
   nama_panggilan_anak: "",
   bapak_anak: "",
   ibu_anak: "",
-  umur_dirayakan: "", 
-  anak_ke: "",        
+  umur_dirayakan: "",
+  anak_ke: "",
   hari_tanggal_acara: "",
   waktu_acara: "",
   alamat_acara: "",
@@ -172,7 +269,7 @@ const handleFileUpload = (event) => {
   form.value.galeri = combinedFiles.slice(0, 5);
 
   // Buat ulang array preview berdasarkan data file yang sudah final
-  previewImages.value = []; 
+  previewImages.value = [];
   form.value.galeri.forEach(file => {
     const reader = new FileReader();
     reader.onload = (e) => {
@@ -215,7 +312,7 @@ const submitForm = async () => {
 
     success.value = true;
 
-    
+
     const adminNumber = "62895602603247";
 
     // Susun pesan WA 
@@ -243,7 +340,7 @@ Tanggal Pemesanan: ${form.value.tanggal_pemesanan}
     // Redirect ke WhatsApp
     const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(message)}`;
     window.location.href = waUrl;
-    
+
   } catch (err) {
     console.error(err);
     error.value = true;