form khitan starter

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

@@ -1,27 +1,23 @@
 <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
+      <div v-for="(star, i) in stars" :key="i" class="absolute bg-white rounded-full animate-twinkle" :style="{
-        v-for="(star, i) in stars"
-        :key="i"
-        class="absolute bg-white rounded-full animate-twinkle"
-        :style="{
         top: star.top + '%',
         left: star.left + '%',
         width: star.size + 'px',
         height: star.size + 'px',
         animationDelay: star.delay + 's',
         opacity: star.opacity
-        }"
+      }"></div>
-      ></div>
     </div>
 
     <!-- 🌈 Cahaya lembut -->
-    <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>
+    <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">
@@ -32,29 +28,27 @@
       <p class="text-blue-100">{{ saySomething }}</p>
 
       <!-- 📝 Form -->
-      <form
+      <form @submit.prevent="submitMessage"
-        @submit.prevent="sendMessage"
+        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4">
-        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
+        <input v-model="form.name" type="text" placeholder="Nama Anda"
-      >
-        <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
+          required></textarea>
-        ></textarea>
 
-        <button
+        <select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400 
-          type="submit"
+         focus:ring-2 focus:ring-orange-500 focus:border-orange-500 
-          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"
+         bg-gradient-to-r from-yellow-50 to-orange-50 text-gray-800 
-        >
+         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>
@@ -62,75 +56,138 @@
       <!-- 💌 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
+          <div class="space-y-4">
-            v-for="(msg, index) in messages"
+            <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
-            :key="index"
+              <div class="flex items-center justify-between mb-2">
-            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
+                <span class="font-bold text-orange-800">{{ msg.nama }}</span>
-          >
+                <span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
-            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
+                  {{ formatAttendance(msg.status_kehadiran) }}
-            <p class="text-blue-100">{{ msg.text }}</p>
+                </span>
+              </div>
+              <p class="text-gray-700">{{ msg.pesan }}</p>
+            </div>
           </div>
         </transition-group>
       </div>
     </div>
 
     <!-- 🌠 Ornamen bawah -->
-    <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>
+    <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({
-  guestName: String,
+  messages: {
-  saySomething: String,
+    type: Array,
-  messages: Array
+    required: false,
-})
+    default: () => []
-const emit = defineEmits(['addMessage'])
-
-const guestNameInput = ref(props.guestName || '')
-const messageInput = ref('')
-
-// 🌟 Efek bintang
-const stars = ref([])
-
-const generateStars = () => {
-  const count = 70
-  const temp = []
-  for (let i = 0; i < count; i++) {
-    temp.push({
-      top: Math.random() * 100,
-      left: Math.random() * 100,
-      size: Math.random() * 2 + 1,
-      delay: Math.random() * 5,
-      opacity: Math.random() * 0.8 + 0.2
-    })
   }
-  stars.value = temp
+})
-}
 
-onMounted(() => generateStars())
+const messages = ref([...props.messages])
 
-const sendMessage = () => {
+const form = ref({ name: '', message: '', attendance: 'hadir' });
-  if (!guestNameInput.value || !messageInput.value) return
+
-  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
+onMounted(() => {
-  messageInput.value = ''
+  messages.value = props.messages || []
-}
+})
+
+// Fungsi untuk mengirim data RSVP ke backend
+const submitMessage = async () => {
+  if (!form.value.name || !form.value.message) {
+    alert('Nama dan ucapan harus diisi!');
+    return;
+  }
+
+  try {
+    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) {
+      throw new Error(`Gagal menyimpan RSVP`);
+    }
+
+    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;
 }
@@ -141,11 +198,13 @@ const sendMessage = () => {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
 .animate-fade-in {
   animation: fade-in 1.2s ease-out;
 }
@@ -155,6 +214,7 @@ const sendMessage = () => {
 .fade-leave-active {
   transition: opacity 0.4s;
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -164,6 +224,7 @@ const sendMessage = () => {
 ::-webkit-scrollbar {
   width: 6px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 9999px;

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

@@ -1,24 +1,17 @@
 <template>
-    <div
+  <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden">
-      class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
-    >
     <!-- ================= BACKGROUND ELEMENTS ================= -->
     <!-- Bintang berkedip -->
     <div class="absolute inset-0">
-        <div
+      <div v-for="(star, index) in stars" :key="index" class="absolute rounded-full bg-white animate-twinkle"
-          v-for="(star, index) in stars"
+        :class="star.class" :style="{
-          :key="index"
-          class="absolute rounded-full bg-white animate-twinkle"
-          :class="star.class"
-          :style="{
           top: star.top + '%',
           left: star.left + '%',
           width: star.size + 'px',
           height: star.size + 'px',
           animationDelay: star.delay + 's',
           opacity: star.opacity
-          }"
+        }"></div>
-        ></div>
     </div>
 
     <!-- Awan dekoratif -->
@@ -26,135 +19,120 @@
     <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
 
     <!-- ================= NAVIGATION ================= -->
-      <nav
+    <nav v-if="currentSection !== 'landing'" class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20">
-        v-if="currentSection !== 'landing'"
+      <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">
-        class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
+        <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
-      >
+        <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
-        <ul
+        <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
-          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('say')" :class="navClass('say')">Ucapan</button></li>
-        >
+        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
-          <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 
+      <button @click="toggleMusic"
-          @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">
-          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 ? 'Pause' : 'Play' }}
-        >
-          {{ isPlaying ? '⏸️' : '▶️' }}
       </button>
       <audio ref="audioPlayer" :src="musicUrl" loop></audio>
     </div>
 
     <!-- ================= MAIN CONTENT ================= -->
-      <main
+    <main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
-        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
-      >
       <!-- Landing Page -->
-        <KhitanALanding
+      <KhitanALanding v-if="currentSection === 'landing'"
-          v-if="currentSection === 'landing'"
         :childName="formData.nama_panggilan"
-          :guestName="data.nama_tamu"
+        :guestName="tamu.nama_tamu"
-          @next-page="switchSection('introduction')"
+        @next-page="switchSection('introduction')" />
-        />
 
       <!-- Introduction -->
-        <KhitanIntroduction
+      <KhitanIntroduction v-if="currentSection === 'introduction'"
-          v-if="currentSection === 'introduction'"
         :form="formData"
-          @next="switchSection('event')"
+        @next="switchSection('event')" />
-        />
 
       <!-- Event -->
-        <KhitanEvent
+      <KhitanEvent v-if="currentSection === 'event'"
-          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')"
+        @next="switchSection('gallery')" />
-        />
 
       <!-- Gallery -->
-        <KhitanGallery
+      <KhitanGallery v-if="currentSection === 'gallery'"
-          v-if="currentSection === 'gallery'"
         :images="galleryImages"
-          @next="switchSection('say')"
+        @next="switchSection('say')" />
-        />
 
-        <!-- Guest Book -->
+      <!-- Guest Book (Ucapan) -->
-        <KhitanSay
+      <KhitanSay v-if="currentSection === 'say'"
-          v-if="currentSection === 'say'"
+        :guestName="tamu.nama_tamu || 'Tamu Undangan'"
-          :guestName="data.nama_tamu"
-          :saySomething="formData.say_something"
         :messages="messages"
-          @addMessage="addMessage"
+        @addMessage="addMessage" />
-          @next="switchSection('thanks')"
-        />
 
       <!-- Thank You -->
-        <KhitanThankYou
+      <KhitanThankYou v-if="currentSection === 'thanks'"
-          v-if="currentSection === 'thanks'"
         :childName="formData.nama_panggilan"
-          :jsonData="formData"
+        :jsonData="formData" />
-        />
     </main>
   </div>
-  </template>
+</template>
 
-  <script setup>
+<script setup>
-  import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
-  import { useRuntimeConfig } from '#app'
+import { useRuntimeConfig } from '#app'
 
-  // ================== IMPORT KOMPONEN ==================
+// ================== IMPORT KOMPONEN ==================
-  import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
+import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
-  import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
+import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
-  import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
+import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
-  import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
+import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
-  import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
+import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
-  import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
+import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
 
-  // ================== PROPS ==================
+// ================== PROPS ==================
-  const props = defineProps({
+const props = defineProps({
-    data: { type: Object, required: true }
+  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}`
     })
+})
 
-  // ================== BACKEND CONFIG ==================
+// ================== NAVIGASI SECTION ==================
-  const config = useRuntimeConfig()
+const currentSection = ref('landing')
-  const backendUrl = config.public.apiBaseUrl
+const switchSection = (section) => {
+  currentSection.value = section
+  // Auto scroll ke atas saat pindah section
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
 
-  // ================== FORM DATA ==================
+// ================== BINTANG ANIMASI ==================
-  const formData = computed(() => props.data.form || {})
+const stars = ref([])
-  
+const generateStars = () => {
-  // ================== GALERI ==================
-  const galleryImages = computed(() => {
-    const f = formData.value
-    return [
-      f.foto_1,
-      f.foto_2,
-      f.foto_3,
-      f.foto_4
-    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
-  })
-  
-  // ================== NAVIGASI SECTION ==================
-  const currentSection = ref('landing')
-  const switchSection = (s) => (currentSection.value = s)
-  
-  // ================== 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,
@@ -166,80 +144,98 @@
     })
   }
   stars.value = newStars
-  }
+}
 
-  // ================== MUSIK ==================
+// ================== MUSIK ==================
-  const audioPlayer = ref(null)
+const audioPlayer = ref(null)
-  const isPlaying = ref(false)
+const isPlaying = ref(false)
-  const musicUrl = computed(() =>
-    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
-  )
 
-  const toggleMusic = () => {
+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()
+    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 })
 
-  // ================== GUEST BOOK ==================
+// ================== TAMBAH UCAPAN (RSVP) ==================
-  const messages = ref([])
+const addMessage = async (newMessage) => {
-  const addMessage = (msg) => messages.value.push(msg)
+  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
+      })
+    })
 
-  // ================== STYLE NAV ==================
+    if (!res.ok) throw new Error('Gagal menyimpan ucapan')
-  const navClass = (s) =>
+
-    currentSection.value === s
+    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.')
+  }
+}
+
+// ================== NAV STYLE ==================
+const navClass = (section) =>
+  currentSection.value === section
     ? 'text-yellow-300 glow'
     : 'hover:text-yellow-200 transition-colors duration-300'
 
-  // ================== LIFECYCLE ==================
+// ================== LIFECYCLE ==================
-  onMounted(() => {
+onMounted(() => {
   generateStars()
-  })
+})
-  </script>
+</script>
 
-  <style scoped>
+<style scoped>
-  /* Animasi bintang berkedip */
+/* Animasi bintang */
-  @keyframes twinkle {
+@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; }
 
-  .animate-twinkle {
+/* Glow untuk nav aktif */
-    animation: twinkle 3s ease-in-out infinite;
+.glow {
-  }
+  text-shadow:
-  
+    0 0 10px rgba(255, 255, 255, 0.8),
-  /* 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 */
+/* Scrollbar */
-  main {
+::-webkit-scrollbar { width: 6px; }
-    transition: all 0.7s ease-in-out;
+::-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); }
-  /* Scrollbar custom */
+</style>
-  ::-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,130 +2,197 @@
   <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 Starter
+        Form Undangan Khitan Basic
       </h1>
       <p class="text-center text-gray-500 text-sm mb-8">
-        Isi semua data berikut dengan lengkap dan benar.
+        Isi semua data 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">
-          <input
+          <!-- Nama Pemesan -->
-            v-model="form.nama_pemesan"
+          <div class="relative">
-            type="text"
+            <input v-model="form.nama_pemesan" type="text" placeholder=" " required
-            placeholder="Nama Pemesan"
+              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" />
-            required
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
-            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-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
-          <input
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
-            v-model="form.email"
+              Nama Pemesan
-            type="email"
+            </label>
-            placeholder="Email"
+          </div>
-            required
+
-            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"
+          <!-- Email -->
-          />
+          <div class="relative">
-          <input
+            <input v-model="form.email" type="email" placeholder=" " required
-            v-model="form.no_tlpn"
+              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" />
-            type="text"
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
-            placeholder="No Telepon"
+               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">
+              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-3 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <input
+          <template v-for="(field, i) in [
-            v-model="form.form.nama_lengkap"
+            { model: 'nama_lengkap', label: 'Nama Lengkap' },
-            type="text"
+            { model: 'nama_panggilan', label: 'Nama Panggilan' },
-            placeholder="Nama Lengkap Anak"
+            { model: 'nama_bapak', label: '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"
+            { model: 'nama_ibu', label: 'Nama Ibu' }
-          />
+          ]" :key="i">
-          <input
+            <div class="relative">
-            v-model="form.form.nama_bapak"
+              <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
-            type="text"
+                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
-            placeholder="Nama Bapak"
+              <label class="absolute left-2 text-gray-400 transition-all
-            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-placeholder-shown:top-4 peer-placeholder-shown:text-sm
-          />
+                 peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
-          <input
+                 peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
-            v-model="form.form.nama_ibu"
+                {{ field.label }}
-            type="text"
+              </label>
-            placeholder="Nama Ibu"
+            </div>
-            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>
-          />
         </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">
+
-          <input
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-            v-model="form.form.hari_tanggal_acara"
+          <!-- Hari & Tanggal -->
-            type="date"
+          <div class="flex flex-col">
-            placeholder="Hari & Tanggal Acara"
+            <label class="text-gray-600 text-sm font-medium mb-1">Hari & Tanggal 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.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" />
-          <input
-            v-model="form.form.waktu"
-            type="text"
-            placeholder="Waktu 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"
-          />
           </div>
-        <textarea
+
-          v-model="form.form.alamat"
+          <!-- Waktu -->
-          rows="3"
+          <div class="flex flex-col">
-          placeholder="Alamat 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 mt-3 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"
+            <input v-model="form.form.waktu" type="time" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
-        ></textarea>
+               focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          </div>
+        </div>
+
+        <!-- Alamat -->
+        <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>
+        </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
+        <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center 
-          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"
+                 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. 2, JPEG/PNG, maks. 2MB)</span>
+            <span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
           </label>
-          <div v-else class="grid grid-cols-2 gap-4">
+          <div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            <div
+            <div v-for="(src, i) in previews" :key="i" class="relative group">
-              v-for="(src, i) in previews"
+              <img :src="src" class="w-24 h-24 object-cover rounded-lg border shadow" />
-              :key="i"
+              <button @click="removeFile(i)" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 
-              class="relative group"
+                       flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
-            >
+                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
+            <label v-if="previews.length < 4" for="gallery" class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 
-              v-if="previews.length < 2"
+                     border-2 border-dashed border-gray-300 rounded-lg text-gray-400 
-              for="gallery"
+                     hover:border-blue-400 hover:text-blue-500 transition">
-              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>
@@ -134,16 +201,10 @@
 
       <!-- Tombol -->
       <div class="text-end mt-6">
-        <button
+        <button @click="batal" class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2">
-          @click="batal"
-          class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"
-        >
           Batal
         </button>
-        <button
+        <button @click="konfirmasi" class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
-          @click="konfirmasi"
-          class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"
-        >
           Konfirmasi
         </button>
       </div>
@@ -154,6 +215,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import Swal from 'sweetalert2'
 
 const router = useRouter()
 
@@ -163,11 +225,17 @@ 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: []
 })
@@ -176,27 +244,25 @@ const previews = ref([])
 
 const handleFileChange = (e) => {
   const files = Array.from(e.target.files)
-  const totalFiles = form.value.foto.length + files.length
+  const total = form.value.foto.length + files.length
-
+  if (total > 4) {
-  if (totalFiles > 2) {
+    Swal.fire('Maksimal 4 foto!', '', 'warning')
-    alert('Maksimal 2 foto!')
     e.target.value = ''
     return
   }
 
   files.forEach(file => {
     if (file.size > 2 * 1024 * 1024) {
-      alert(`File ${file.name} terlalu besar! Maksimal 2MB.`)
+      Swal.fire(`${file.name} terlalu besar! Maks 2MB.`, '', 'error')
       return
     }
     if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
-      alert(`File ${file.name} harus berupa JPEG atau PNG!`)
+      Swal.fire(`${file.name} harus JPEG/PNG.`, '', 'error')
       return
     }
     form.value.foto.push(file)
     previews.value.push(URL.createObjectURL(file))
   })
-
   e.target.value = ''
 }
 
@@ -206,17 +272,17 @@ const removeFile = (index) => {
 }
 
 const konfirmasi = async () => {
-  try {
   if (!form.value.nama_pemesan || !form.value.email) {
-      alert('Harap isi semua kolom wajib (Nama Pemesan, Email)!')
+    Swal.fire('Harap isi Nama Pemesan dan Email!', '', 'warning')
     return
   }
 
+  try {
     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-starter')
+    data.append('template_slug', 'undangan-khitan-basic')
 
     for (const [key, value] of Object.entries(form.value.form)) {
       data.append(`form[${key}]`, value)
@@ -235,23 +301,77 @@ const konfirmasi = async () => {
 
     if (!res.ok) {
       if (res.status === 422) {
-        const errors = result.errors || {}
+        throw new Error(Object.values(result.errors || {}).flat().join('\n'))
-        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')
     }
 
-    alert(result.message || 'Data berhasil disimpan!')
+    await Swal.fire({
+      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)
-    alert('Terjadi kesalahan: ' + err.message)
+    Swal.fire('Gagal!', err.message || 'Terjadi kesalahan saat menyimpan.', 'error')
   }
 }
 
-const batal = () => router.back()
+const batal = () => {
+  Swal.fire({
+    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>