proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue

@@ -1,23 +1,27 @@
 <template>
   <!-- 🌌 Latar belakang fullscreen -->
   <section
-    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6">
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
+  >
     <!-- 🌟 Bintang Berkedip -->
     <div class="absolute inset-0 overflow-hidden z-0">
-      <div v-for="(star, i) in stars" :key="i" class="absolute bg-white rounded-full animate-twinkle" :style="{
+      <div
-        top: star.top + '%',
+        v-for="(star, i) in stars"
-        left: star.left + '%',
+        :key="i"
-        width: star.size + 'px',
+        class="absolute bg-white rounded-full animate-twinkle"
-        height: star.size + 'px',
+        :style="{
-        animationDelay: star.delay + 's',
+          top: star.top + '%',
-        opacity: star.opacity
+          left: star.left + '%',
-      }"></div>
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
     </div>
 
     <!-- 🌈 Cahaya lembut -->
-    <div
+    <div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
-      class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-    </div>
 
     <!-- 💬 Konten utama -->
     <div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
@@ -28,27 +32,29 @@
       <p class="text-blue-100">{{ saySomething }}</p>
 
       <!-- 📝 Form -->
-      <form @submit.prevent="submitMessage"
+      <form
-        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4">
+        @submit.prevent="sendMessage"
-        <input v-model="form.name" type="text" placeholder="Nama Anda"
+        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
+      >
+        <input
+          v-model="guestNameInput"
+          type="text"
+          placeholder="Nama Anda"
           class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
-          required />
+          required
-        <textarea v-model="form.message" rows="3" placeholder="Tulis ucapan Anda..."
+        />
+        <textarea
+          v-model="messageInput"
+          rows="3"
+          placeholder="Tulis ucapan Anda..."
           class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
-          required></textarea>
+          required
+        ></textarea>
 
-        <select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400 
+        <button
-         focus:ring-2 focus:ring-orange-500 focus:border-orange-500 
+          type="submit"
-         bg-gradient-to-r from-yellow-50 to-orange-50 text-gray-800 
+          class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
-         appearance-none transition-all duration-300 cursor-pointer">
+        >
-          <option value="hadir" class="bg-white text-gray-800">✅ Hadir</option>
-          <option value="tidak_hadir" class="bg-white text-gray-800">❌ Tidak Hadir</option>
-          <option value="mungkin" class="bg-white text-gray-800">🤔 Mungkin</option>
-        </select>
-
-
-        <button type="submit"
-          class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105">
           Kirim ✨
         </button>
       </form>
@@ -56,138 +62,75 @@
       <!-- 💌 Pesan -->
       <div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
         <transition-group name="fade" tag="div">
-          <div class="space-y-4">
+          <div
-            <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
+            v-for="(msg, index) in messages"
-              <div class="flex items-center justify-between mb-2">
+            :key="index"
-                <span class="font-bold text-orange-800">{{ msg.nama }}</span>
+            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
-                <span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
+          >
-                  {{ formatAttendance(msg.status_kehadiran) }}
+            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
-                </span>
+            <p class="text-blue-100">{{ msg.text }}</p>
-              </div>
-              <p class="text-gray-700">{{ msg.pesan }}</p>
-            </div>
           </div>
         </transition-group>
       </div>
     </div>
 
     <!-- 🌠 Ornamen bawah -->
-    <div
+    <div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
-      class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent">
-    </div>
   </section>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue'
-import { useRoute, useRuntimeConfig } from '#app';
-
-const route = useRoute();
-const config = useRuntimeConfig();
-const backendUrl = config.public.apiBaseUrl;
-const invitationCode = route.params.code || '';
-const guest = route.query.code
 
 const props = defineProps({
-  messages: {
+  guestName: String,
-    type: Array,
+  saySomething: String,
-    required: false,
+  messages: Array
-    default: () => []
-  }
 })
+const emit = defineEmits(['addMessage'])
 
-const messages = ref([...props.messages])
+const guestNameInput = ref(props.guestName || '')
+const messageInput = ref('')
 
-const form = ref({ name: '', message: '', attendance: 'hadir' });
+// 🌟 Efek bintang
+const stars = ref([])
 
-onMounted(() => {
+const generateStars = () => {
-  messages.value = props.messages || []
+  const count = 70
-})
+  const temp = []
-
+  for (let i = 0; i < count; i++) {
-// Fungsi untuk mengirim data RSVP ke backend
+    temp.push({
-const submitMessage = async () => {
+      top: Math.random() * 100,
-  if (!form.value.name || !form.value.message) {
+      left: Math.random() * 100,
-    alert('Nama dan ucapan harus diisi!');
+      size: Math.random() * 2 + 1,
-    return;
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
   }
+  stars.value = temp
+}
 
-  try {
+onMounted(() => generateStars())
-    console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, {
-      nama: form.value.name,
-      pesan: form.value.message,
-      status_kehadiran: form.value.attendance,
-    });
-    const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        nama: form.value.name,
-        pesan: form.value.message,
-        status_kehadiran: form.value.attendance,
-      }),
-    });
 
-    if (!response.ok) {
+const sendMessage = () => {
-      throw new Error(`Gagal menyimpan RSVP`);
+  if (!guestNameInput.value || !messageInput.value) return
-    }
+  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
-
+  messageInput.value = ''
-    const result = await response.json();
+}
-    messages.value.push(result.data);
-    form.value = { name: '', message: '', attendance: 'hadir' };
-    alert(result.message);
-  } catch (error) {
-    console.error('Error menyimpan RSVP:', error);
-    alert('Terjadi kesalahan saat menyimpan RSVP.');
-  }
-};
-
-// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
-const getAttendanceClass = (attendance) => {
-  switch (attendance) {
-    case 'hadir':
-      return 'bg-green-100 text-green-700';
-    case 'tidak_hadir':
-      return 'bg-red-100 text-red-700';
-    case 'mungkin':
-      return 'bg-yellow-100 text-yellow-700';
-    default:
-      return 'bg-gray-100 text-gray-700';
-  }
-};
-
-// Fungsi untuk memformat teks kehadiran
-const formatAttendance = (attendance) => {
-  switch (attendance) {
-    case 'hadir':
-      return 'Hadir';
-    case 'tidak_hadir':
-      return 'Tidak Hadir';
-    case 'mungkin':
-      return 'Mungkin';
-    default:
-      return attendance;
-  }
-};
 </script>
 
 <style scoped>
 /* 🌟 Animasi bintang berkedip */
 @keyframes twinkle {
-
+  0%, 100% {
-  0%,
-  100% {
     opacity: 0.3;
     transform: scale(1);
   }
-
   50% {
     opacity: 1;
     transform: scale(1.3);
   }
 }
-
 .animate-twinkle {
   animation: twinkle 3.5s ease-in-out infinite;
 }
@@ -198,13 +141,11 @@ const formatAttendance = (attendance) => {
     opacity: 0;
     transform: translateY(20px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-
 .animate-fade-in {
   animation: fade-in 1.2s ease-out;
 }
@@ -214,7 +155,6 @@ const formatAttendance = (attendance) => {
 .fade-leave-active {
   transition: opacity 0.4s;
 }
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -224,9 +164,8 @@ const formatAttendance = (attendance) => {
 ::-webkit-scrollbar {
   width: 6px;
 }
-
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 9999px;
 }
-</style>
+</style>

proyek-frontend/app/components/undangan/undangan-khitan-basic.vue

@@ -1,241 +1,245 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden">
+    <div
-    <!-- ================= BACKGROUND ELEMENTS ================= -->
+      class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
-    <!-- Bintang berkedip -->
+    >
-    <div class="absolute inset-0">
+      <!-- ================= BACKGROUND ELEMENTS ================= -->
-      <div v-for="(star, index) in stars" :key="index" class="absolute rounded-full bg-white animate-twinkle"
+      <!-- Bintang berkedip -->
-        :class="star.class" :style="{
+      <div class="absolute inset-0">
-          top: star.top + '%',
+        <div
-          left: star.left + '%',
+          v-for="(star, index) in stars"
-          width: star.size + 'px',
+          :key="index"
-          height: star.size + 'px',
+          class="absolute rounded-full bg-white animate-twinkle"
-          animationDelay: star.delay + 's',
+          :class="star.class"
-          opacity: star.opacity
+          :style="{
-        }"></div>
+            top: star.top + '%',
+            left: star.left + '%',
+            width: star.size + 'px',
+            height: star.size + 'px',
+            animationDelay: star.delay + 's',
+            opacity: star.opacity
+          }"
+        ></div>
+      </div>
+  
+      <!-- Awan dekoratif -->
+      <div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
+      <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
+  
+      <!-- ================= NAVIGATION ================= -->
+      <nav
+        v-if="currentSection !== 'landing'"
+        class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
+      >
+        <ul
+          class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
+        >
+          <li><button @click="switchSection('introduction')" :class="navClass('introduction')">🌙 Intro</button></li>
+          <li><button @click="switchSection('event')" :class="navClass('event')">⭐ Event</button></li>
+          <li><button @click="switchSection('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
+          <li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</button></li>
+          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
+        </ul>
+      </nav>
+  
+      <!-- ================= MUSIK CONTROL ================= -->
+      <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
+        <button 
+          @click="toggleMusic" 
+          class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
+        >
+          {{ isPlaying ? '⏸️' : '▶️' }}
+        </button>
+        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+      </div>
+  
+      <!-- ================= MAIN CONTENT ================= -->
+      <main
+        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
+      >
+        <!-- Landing Page -->
+        <KhitanALanding
+          v-if="currentSection === 'landing'"
+          :childName="formData.nama_panggilan"
+          :guestName="data.nama_tamu"
+          @next-page="switchSection('introduction')"
+        />
+  
+        <!-- Introduction -->
+        <KhitanIntroduction
+          v-if="currentSection === 'introduction'"
+          :form="formData"
+          @next="switchSection('event')"
+        />
+  
+        <!-- Event -->
+        <KhitanEvent
+          v-if="currentSection === 'event'"
+          :hari_tanggal_acara="formData.hari_tanggal_acara"
+          :waktu="formData.waktu"
+          :alamat="formData.alamat"
+          :link_gmaps="formData.link_gmaps"
+          :hitung_mundur="formData.hitung_mundur"
+          @next="switchSection('gallery')"
+        />
+  
+        <!-- Gallery -->
+        <KhitanGallery
+          v-if="currentSection === 'gallery'"
+          :images="galleryImages"
+          @next="switchSection('say')"
+        />
+  
+        <!-- Guest Book -->
+        <KhitanSay
+          v-if="currentSection === 'say'"
+          :guestName="data.nama_tamu"
+          :saySomething="formData.say_something"
+          :messages="messages"
+          @addMessage="addMessage"
+          @next="switchSection('thanks')"
+        />
+  
+        <!-- Thank You -->
+        <KhitanThankYou
+          v-if="currentSection === 'thanks'"
+          :childName="formData.nama_panggilan"
+          :jsonData="formData"
+        />
+      </main>
     </div>
-
+  </template>
-    <!-- Awan dekoratif -->
+  
-    <div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
+  <script setup>
-    <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
+  import { ref, computed, onMounted } from 'vue'
-
+  import { useRuntimeConfig } from '#app'
-    <!-- ================= NAVIGATION ================= -->
+  
-    <nav v-if="currentSection !== 'landing'" class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20">
+  // ================== IMPORT KOMPONEN ==================
-      <ul class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white">
+  import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
-        <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
+  import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
-        <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
+  import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
-        <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
+  import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
-        <li><button @click="switchSection('say')" :class="navClass('say')">Ucapan</button></li>
+  import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
-        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
+  import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
-      </ul>
+  
-    </nav>
+  // ================== PROPS ==================
-
+  const props = defineProps({
-    <!-- ================= MUSIK CONTROL ================= -->
+    data: { type: Object, required: true }
-    <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
+  })
-      <button @click="toggleMusic"
+  
-        class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300">
+  // ================== BACKEND CONFIG ==================
-        {{ isPlaying ? 'Pause' : 'Play' }}
+  const config = useRuntimeConfig()
-      </button>
+  const backendUrl = config.public.apiBaseUrl
-      <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+  
-    </div>
+  // ================== FORM DATA ==================
-
+  const formData = computed(() => props.data.form || {})
-    <!-- ================= MAIN CONTENT ================= -->
+  
-    <main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
+  // ================== GALERI ==================
-      <!-- Landing Page -->
+  const galleryImages = computed(() => {
-      <KhitanALanding v-if="currentSection === 'landing'"
+    const f = formData.value
-        :childName="formData.nama_panggilan"
+    return [
-        :guestName="tamu.nama_tamu"
+      f.foto_1,
-        @next-page="switchSection('introduction')" />
+      f.foto_2,
-
+      f.foto_3,
-      <!-- Introduction -->
+      f.foto_4
-      <KhitanIntroduction v-if="currentSection === 'introduction'"
+    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
-        :form="formData"
+  })
-        @next="switchSection('event')" />
+  
-
+  // ================== NAVIGASI SECTION ==================
-      <!-- Event -->
+  const currentSection = ref('landing')
-      <KhitanEvent v-if="currentSection === 'event'"
+  const switchSection = (s) => (currentSection.value = s)
-        :hari_tanggal_acara="formData.hari_tanggal_acara"
+  
-        :waktu="formData.waktu"
+  // ================== BINTANG ANIMASI ==================
-        :alamat="formData.alamat"
+  const stars = ref([])
-        :link_gmaps="formData.link_gmaps"
+  
-        :hitung_mundur="formData.hitung_mundur"
+  const generateStars = () => {
-        @next="switchSection('gallery')" />
+    const starCount = 50
-
+    const newStars = []
-      <!-- Gallery -->
+    
-      <KhitanGallery v-if="currentSection === 'gallery'"
+    for (let i = 0; i < starCount; i++) {
-        :images="galleryImages"
+      newStars.push({
-        @next="switchSection('say')" />
+        top: Math.random() * 100,
-
+        left: Math.random() * 100,
-      <!-- Guest Book (Ucapan) -->
+        size: Math.random() * 3 + 1,
-      <KhitanSay v-if="currentSection === 'say'"
+        delay: Math.random() * 5,
-        :guestName="tamu.nama_tamu || 'Tamu Undangan'"
+        opacity: Math.random() * 0.7 + 0.3,
-        :messages="messages"
+        class: `star-${i % 3}`
-        @addMessage="addMessage" />
-
-      <!-- Thank You -->
-      <KhitanThankYou v-if="currentSection === 'thanks'"
-        :childName="formData.nama_panggilan"
-        :jsonData="formData" />
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { useRuntimeConfig } from '#app'
-
-// ================== IMPORT KOMPONEN ==================
-import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
-import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
-import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
-import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
-import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
-import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
-
-// ================== PROPS ==================
-const props = defineProps({
-  data: { type: Object, required: true },
-  tamu: { type: Object, required: true }
-})
-
-// ================== BACKEND CONFIG ==================
-const config = useRuntimeConfig()
-const backendUrl = config.public.apiBaseUrl
-
-// ================== FORM DATA ==================
-const formData = computed(() => props.data.form || {})
-
-// ================== PESAN UCAPAN (RSVP) ==================
-const messages = ref(props.data.rsvp || [])
-
-// ================== GALERI GAMBAR ==================
-const galleryImages = computed(() => {
-  const fotos = formData.value.foto || []
-  return fotos
-    .filter(Boolean)
-    .map(img => {
-      // Jika img sudah URL lengkap (dari CDN), gunakan langsung
-      if (typeof img === 'string' && img.startsWith('http')) return img
-      // Jika dari storage lokal
-      return `${backendUrl}/storage/${img}`
-    })
-})
-
-// ================== NAVIGASI SECTION ==================
-const currentSection = ref('landing')
-const switchSection = (section) => {
-  currentSection.value = section
-  // Auto scroll ke atas saat pindah section
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-// ================== BINTANG ANIMASI ==================
-const stars = ref([])
-const generateStars = () => {
-  const starCount = 50
-  const newStars = []
-  for (let i = 0; i < starCount; i++) {
-    newStars.push({
-      top: Math.random() * 100,
-      left: Math.random() * 100,
-      size: Math.random() * 3 + 1,
-      delay: Math.random() * 5,
-      opacity: Math.random() * 0.7 + 0.3,
-      class: `star-${i % 3}`
-    })
-  }
-  stars.value = newStars
-}
-
-// ================== MUSIK ==================
-const audioPlayer = ref(null)
-const isPlaying = ref(false)
-
-const musicUrl = computed(() => {
-  const url = formData.value.link_music
-  if (!url) return ''
-  // Jika sudah URL lengkap (YouTube, Spotify, dll), gunakan langsung
-  if (url.startsWith('http')) return url
-  // Jika dari storage lokal
-  return `${backendUrl}/${url}`
-})
-
-const toggleMusic = () => {
-  if (!audioPlayer.value) return
-  if (isPlaying.value) {
-    audioPlayer.value.pause()
-  } else {
-    audioPlayer.value.play().catch(() => {
-      // Autoplay dicegah browser
-      isPlaying.value = false
-    })
-  }
-  isPlaying.value = !isPlaying.value
-}
-
-// Auto-play saat masuk section pertama (setelah landing)
-watch(currentSection, (newVal) => {
-  if (newVal === 'introduction' && musicUrl.value && !isPlaying.value) {
-    setTimeout(() => {
-      audioPlayer.value?.play().catch(() => {})
-    }, 500)
-  }
-}, { immediate: false })
-
-// ================== TAMBAH UCAPAN (RSVP) ==================
-const addMessage = async (newMessage) => {
-  try {
-    const res = await fetch(`${backendUrl}/api/rsvp`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        undangan_id: props.data.id,
-        nama: newMessage.nama,
-        ucapan: newMessage.ucapan,
-        kehadiran: newMessage.kehadiran
       })
-    })
+    }
-
+    stars.value = newStars
-    if (!res.ok) throw new Error('Gagal menyimpan ucapan')
-
-    const saved = await res.json()
-    messages.value.push(saved.data)
-  } catch (err) {
-    console.error('Error saving RSVP:', err)
-    alert('Gagal mengirim ucapan. Coba lagi nanti.')
   }
-}
+  
-
+  // ================== MUSIK ==================
-// ================== NAV STYLE ==================
+  const audioPlayer = ref(null)
-const navClass = (section) =>
+  const isPlaying = ref(false)
-  currentSection.value === section
+  const musicUrl = computed(() =>
-    ? 'text-yellow-300 glow'
+    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
-    : 'hover:text-yellow-200 transition-colors duration-300'
+  )
-
+  
-// ================== LIFECYCLE ==================
+  const toggleMusic = () => {
-onMounted(() => {
+    if (!audioPlayer.value) return
-  generateStars()
+    if (isPlaying.value) {
-})
+      audioPlayer.value.pause()
-</script>
+    } else {
-
+      audioPlayer.value.play()
-<style scoped>
+    }
-/* Animasi bintang */
+    isPlaying.value = !isPlaying.value
-@keyframes twinkle {
+  }
-  0%, 100% { opacity: 0.3; transform: scale(1); }
+  
-  50% { opacity: 1; transform: scale(1.1); }
+  // ================== GUEST BOOK ==================
-}
+  const messages = ref([])
-.animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
+  const addMessage = (msg) => messages.value.push(msg)
-
+  
-/* Glow untuk nav aktif */
+  // ================== STYLE NAV ==================
-.glow {
+  const navClass = (s) =>
-  text-shadow:
+    currentSection.value === s
-    0 0 10px rgba(255, 255, 255, 0.8),
+      ? 'text-yellow-300 glow'
-    0 0 20px rgba(255, 255, 255, 0.6),
+      : 'hover:text-yellow-200 transition-colors duration-300'
-    0 0 30px rgba(255, 255, 255, 0.4);
+  
-}
+  // ================== LIFECYCLE ==================
-
+  onMounted(() => {
-/* Scrollbar */
+    generateStars()
-::-webkit-scrollbar { width: 6px; }
+  })
-::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
+  </script>
-::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
+  
-::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
+  <style scoped>
-</style>
+  /* Animasi bintang berkedip */
+  @keyframes twinkle {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.1); }
+  }
+  
+  .animate-twinkle {
+    animation: twinkle 3s ease-in-out infinite;
+  }
+  
+  /* Efek glow untuk navigasi aktif */
+  .glow {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+                 0 0 20px rgba(255, 255, 255, 0.6),
+                 0 0 30px rgba(255, 255, 255, 0.4);
+  }
+  
+  /* Transisi halus untuk konten utama */
+  main {
+    transition: all 0.7s ease-in-out;
+  }
+  
+  /* Scrollbar custom */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  </style>

proyek-frontend/app/pages/form/khitan/starter.vue

@@ -2,197 +2,130 @@
   <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 Khitan Basic
+        Form Undangan Khitan Starter
       </h1>
       <p class="text-center text-gray-500 text-sm mb-8">
-        Isi semua data dengan lengkap dan benar.
+        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>
+        <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 -->
+          <input
-          <div class="relative">
+            v-model="form.nama_pemesan"
-            <input v-model="form.nama_pemesan" type="text" placeholder=" " required
+            type="text"
-              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" />
+            placeholder="Nama Pemesan"
-            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+            required
-               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+            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"
-               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">
+          <input
-              Nama Pemesan
+            v-model="form.email"
-            </label>
+            type="email"
-          </div>
+            placeholder="Email"
-
+            required
-          <!-- 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"
-          <div class="relative">
+          />
-            <input v-model="form.email" type="email" placeholder=" " required
+          <input
-              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" />
+            v-model="form.no_tlpn"
-            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
+            type="text"
-               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+            placeholder="No Telepon"
-               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+            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"
-               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 yang Dikhitan</h2>
+        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">👦 Data Anak yang Dikhitan</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <template v-for="(field, i) in [
+          <input
-            { model: 'nama_lengkap', label: 'Nama Lengkap' },
+            v-model="form.form.nama_lengkap"
-            { model: 'nama_panggilan', label: 'Nama Panggilan' },
+            type="text"
-            { model: 'nama_bapak', label: 'Nama Bapak' },
+            placeholder="Nama Lengkap Anak"
-            { model: 'nama_ibu', label: '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"
-          ]" :key="i">
+          />
-            <div class="relative">
+          <input
-              <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
+            v-model="form.form.nama_bapak"
-                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            type="text"
-              <label class="absolute left-2 text-gray-400 transition-all
+            placeholder="Nama Bapak"
-                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+            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"
-                 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">
+          <input
-                {{ field.label }}
+            v-model="form.form.nama_ibu"
-              </label>
+            type="text"
-            </div>
+            placeholder="Nama Ibu"
-          </template>
+            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>
 
       <!-- Detail Acara -->
       <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Detail Acara</h2>
+        <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="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          <input
-          <!-- Hari & Tanggal -->
+            v-model="form.form.hari_tanggal_acara"
-          <div class="flex flex-col">
+            type="date"
-            <label class="text-gray-600 text-sm font-medium mb-1">Hari & Tanggal Acara</label>
+            placeholder="Hari & Tanggal Acara"
-            <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
+            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"
-               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          />
-          </div>
+          <input
-
+            v-model="form.form.waktu"
-          <!-- Waktu -->
+            type="text"
-          <div class="flex flex-col">
+            placeholder="Waktu Acara"
-            <label class="text-gray-600 text-sm font-medium mb-1">Waktu Acara</label>
+            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="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>
-
+        <textarea
-        <!-- Alamat -->
+          v-model="form.form.alamat"
-        <div class="mt-6 relative">
+          rows="3"
-          <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
+          placeholder="Alamat Acara"
-                   focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"></textarea>
+          class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-3 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"
-          <label class="absolute left-2 text-gray-400 transition-all
+        ></textarea>
-                 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>
-        </div>
-
-        <!-- Link Google Maps -->
-        <div class="mt-4 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>
-
-      <!-- Hitung Mundur -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Hitung Mundur</h2>
-        <div class="relative">
-          <input v-model="form.form.hitung_mundur" type="datetime-local" 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 Hitung Mundur
-          </label>
-        </div>
-      </section>
-
-      <!-- Rekening -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Rekening</h2>
-        <div class="relative">
-          <input v-model="form.form.rekening_1" 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 1
-          </label>
-        </div>
-      </section>
-
-      <!-- Musik -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Musik</h2>
-        <div class="relative">
-          <input v-model="form.form.link_music" 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">
-            Link Musik (opsional)
-          </label>
-        </div>
-      </section>
-
-      <!-- Say Something -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Say Something</h2>
-        <textarea v-model="form.form.say_something" rows="4" placeholder="Kata-kata atau ucapan terima kasih..."
-          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>
 
       <!-- Galeri Foto -->
       <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Galeri Foto</h2>
+        <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 
+        <div
-                 text-gray-400 hover:border-blue-400 hover:text-blue-500 transition">
+          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" />
+        >
+          <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. 4, JPEG/PNG, maks. 2MB)</span>
+            <span class="text-sm mt-2">Pilih Foto (maks. 2, JPEG/PNG, maks. 2MB)</span>
           </label>
-          <div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <div v-else class="grid grid-cols-2 gap-4">
-            <div v-for="(src, i) in previews" :key="i" class="relative group">
+            <div
-              <img :src="src" class="w-24 h-24 object-cover rounded-lg border shadow" />
+              v-for="(src, i) in previews"
-              <button @click="removeFile(i)" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 
+              :key="i"
-                       flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
+              class="relative group"
-                title="Hapus foto">
+            >
+              <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 < 4" for="gallery" class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 
+            <label
-                     border-2 border-dashed border-gray-300 rounded-lg text-gray-400 
+              v-if="previews.length < 2"
-                     hover:border-blue-400 hover:text-blue-500 transition">
+              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>
@@ -201,10 +134,16 @@
 
       <!-- 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">
+        <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
+          @click="konfirmasi"
+          class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"
+        >
           Konfirmasi
         </button>
       </div>
@@ -215,7 +154,6 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import Swal from 'sweetalert2'
 
 const router = useRouter()
 
@@ -225,17 +163,11 @@ const form = ref({
   no_tlpn: '',
   form: {
     nama_lengkap: '',
-    nama_panggilan: '',
     nama_bapak: '',
     nama_ibu: '',
     hari_tanggal_acara: '',
     waktu: '',
-    alamat: '',
+    alamat: ''
-    link_gmaps: '',
-    say_something: '',
-    hitung_mundur: '',
-    rekening_1: '',
-    link_music: ''
   },
   foto: []
 })
@@ -244,25 +176,27 @@ const previews = ref([])
 
 const handleFileChange = (e) => {
   const files = Array.from(e.target.files)
-  const total = form.value.foto.length + files.length
+  const totalFiles = form.value.foto.length + files.length
-  if (total > 4) {
+
-    Swal.fire('Maksimal 4 foto!', '', 'warning')
+  if (totalFiles > 2) {
+    alert('Maksimal 2 foto!')
     e.target.value = ''
     return
   }
 
   files.forEach(file => {
     if (file.size > 2 * 1024 * 1024) {
-      Swal.fire(`${file.name} terlalu besar! Maks 2MB.`, '', 'error')
+      alert(`File ${file.name} terlalu besar! Maksimal 2MB.`)
       return
     }
     if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
-      Swal.fire(`${file.name} harus JPEG/PNG.`, '', 'error')
+      alert(`File ${file.name} harus berupa JPEG atau PNG!`)
       return
     }
     form.value.foto.push(file)
     previews.value.push(URL.createObjectURL(file))
   })
+
   e.target.value = ''
 }
 
@@ -272,17 +206,17 @@ const removeFile = (index) => {
 }
 
 const konfirmasi = async () => {
-  if (!form.value.nama_pemesan || !form.value.email) {
-    Swal.fire('Harap isi Nama Pemesan dan Email!', '', 'warning')
-    return
-  }
-
   try {
+    if (!form.value.nama_pemesan || !form.value.email) {
+      alert('Harap isi semua kolom wajib (Nama Pemesan, Email)!')
+      return
+    }
+
     const data = new FormData()
     data.append('nama_pemesan', form.value.nama_pemesan)
     data.append('email', form.value.email)
     data.append('no_tlpn', form.value.no_tlpn)
-    data.append('template_slug', 'undangan-khitan-basic')
+    data.append('template_slug', 'undangan-khitan-starter')
 
     for (const [key, value] of Object.entries(form.value.form)) {
       data.append(`form[${key}]`, value)
@@ -301,77 +235,23 @@ const konfirmasi = async () => {
 
     if (!res.ok) {
       if (res.status === 422) {
-        throw new Error(Object.values(result.errors || {}).flat().join('\n'))
+        const errors = result.errors || {}
+        const errorMessages = Object.values(errors).flat().join('\n')
+        throw new Error(errorMessages || result.message || 'Validasi gagal')
+      }
+      if (res.status === 404) {
+        throw new Error(result.message || 'Template tidak ditemukan')
       }
       throw new Error(result.message || 'Gagal mengirim data')
     }
 
-    await Swal.fire({
+    alert(result.message || 'Data berhasil disimpan!')
-      title: 'Berhasil!',
-      text: result.message || 'Data undangan berhasil disimpan.',
-      icon: 'success',
-      confirmButtonText: 'Lanjut ke WhatsApp',
-      confirmButtonColor: '#2563eb',
-      background: '#f9fafb',
-      color: '#111827',
-    })
-
-    // Kirim ke WhatsApp Admin
-    const adminNumber = '62895333053398'
-    const pesan = `
-Halo Admin 
-Ada pesanan baru untuk *Undangan Khitan Basic* 
-
-*Data Pemesan*
-- Nama: ${form.value.nama_pemesan}
-- Email: ${form.value.email}
-- No. Telepon: ${form.value.no_tlpn}
-
-*Data Anak*
-- Nama Lengkap: ${form.value.form.nama_lengkap || '-'}
-- Nama Panggilan: ${form.value.form.nama_panggilan || '-'}
-- Bapak: ${form.value.form.nama_bapak || '-'}
-- Ibu: ${form.value.form.nama_ibu || '-'}
-
-*Detail Acara*
-- Tanggal: ${form.value.form.hari_tanggal_acara || '-'}
-- Waktu: ${form.value.form.waktu || '-'}
-- Alamat: ${form.value.form.alamat || '-'}
-- Gmaps: ${form.value.form.link_gmaps || '-'}
-
-*Hitung Mundur*: ${form.value.form.hitung_mundur || '-'}
-
-*Say Something*: 
-${form.value.form.say_something || '-'}
-
-*Rekening 1*: ${form.value.form.rekening_1 || '-'}
-
-*Musik*: ${form.value.form.link_music || '-'}
-
-Terima kasih 
-`
-
-    const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(pesan)}`
-    window.open(waUrl, '_blank')
-
     router.push('/')
   } catch (err) {
     console.error(err)
-    Swal.fire('Gagal!', err.message || 'Terjadi kesalahan saat menyimpan.', 'error')
+    alert('Terjadi kesalahan: ' + err.message)
   }
 }
 
-const batal = () => {
+const batal = () => router.back()
-  Swal.fire({
+</script>
-    title: 'Batalkan?',
-    text: 'Perubahan yang belum disimpan akan hilang.',
-    icon: 'warning',
-    showCancelButton: true,
-    confirmButtonColor: '#d33',
-    cancelButtonColor: '#6b7280',
-    confirmButtonText: 'Ya, Batalkan'
-  }).then(result => {
-    if (result.isConfirmed) router.back()
-  })
-}
-</script>