From cc2e340e17107076846b84440bcc0f0a0cbd6b85 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:30:04 +0700
Subject: [PATCH] rsvp template  khitan basic

---
 .../templates/KhitanBasic/GuestBook.vue       | 217 +++++---
 .../undangan/undangan-khitan-basic.vue        | 478 +++++++++---------
 2 files changed, 376 insertions(+), 319 deletions(-)

diff --git a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
index 4271e98..b209fc9 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
+++ b/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
-        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 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>
 
     <!-- 🌈 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
-        @submit.prevent="sendMessage"
-        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"
+      <form @submit.prevent="submitMessage"
+        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"
           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
-          v-model="messageInput"
-          rows="3"
-          placeholder="Tulis ucapan Anda..."
+          required />
+        <textarea v-model="form.message" 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>
 
-        <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"
-        >
+        <select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400 
+         focus:ring-2 focus:ring-orange-500 focus:border-orange-500 
+         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
-            v-for="(msg, index) in messages"
-            :key="index"
-            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
-          >
-            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
-            <p class="text-blue-100">{{ msg.text }}</p>
+          <div class="space-y-4">
+            <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
+              <div class="flex items-center justify-between mb-2">
+                <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">
+                  {{ formatAttendance(msg.status_kehadiran) }}
+                </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,
-  saySomething: String,
-  messages: Array
-})
-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
-    })
+  messages: {
+    type: Array,
+    required: false,
+    default: () => []
   }
-  stars.value = temp
-}
+})
 
-onMounted(() => generateStars())
+const messages = ref([...props.messages])
 
-const sendMessage = () => {
-  if (!guestNameInput.value || !messageInput.value) return
-  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
-  messageInput.value = ''
-}
+const form = ref({ name: '', message: '', attendance: 'hadir' });
+
+onMounted(() => {
+  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,8 +224,9 @@ const sendMessage = () => {
 ::-webkit-scrollbar {
   width: 6px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 9999px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
index 2bdba3c..e5d4ca6 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
@@ -1,245 +1,241 @@
 <template>
-    <div
-      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
-          v-for="(star, index) in stars"
-          :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>
-  
-      <!-- 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 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 v-for="(star, index) in stars" :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>
-  </template>
-  
-  <script setup>
-  import { ref, computed, onMounted } 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 }
-  })
-  
-  // ================== BACKEND CONFIG ==================
-  const config = useRuntimeConfig()
-  const backendUrl = config.public.apiBaseUrl
-  
-  // ================== FORM DATA ==================
-  const formData = computed(() => props.data.form || {})
-  
-  // ================== 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,
-        left: Math.random() * 100,
-        size: Math.random() * 3 + 1,
-        delay: Math.random() * 5,
-        opacity: Math.random() * 0.7 + 0.3,
-        class: `star-${i % 3}`
+
+    <!-- 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 ? 'Pause' : 'Play' }}
+      </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="tamu.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 (Ucapan) -->
+      <KhitanSay v-if="currentSection === 'say'"
+        :guestName="tamu.nama_tamu || 'Tamu Undangan'"
+        :messages="messages"
+        @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 ==================
-  const audioPlayer = ref(null)
-  const isPlaying = ref(false)
-  const musicUrl = computed(() =>
-    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
-  )
-  
-  const toggleMusic = () => {
-    if (!audioPlayer.value) return
-    if (isPlaying.value) {
-      audioPlayer.value.pause()
-    } else {
-      audioPlayer.value.play()
-    }
-    isPlaying.value = !isPlaying.value
-  }
-  
-  // ================== GUEST BOOK ==================
-  const messages = ref([])
-  const addMessage = (msg) => messages.value.push(msg)
-  
-  // ================== STYLE NAV ==================
-  const navClass = (s) =>
-    currentSection.value === s
-      ? 'text-yellow-300 glow'
-      : 'hover:text-yellow-200 transition-colors duration-300'
-  
-  // ================== LIFECYCLE ==================
-  onMounted(() => {
-    generateStars()
-  })
-  </script>
-  
-  <style scoped>
-  /* 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>
\ No newline at end of file
+}
+
+// ================== NAV STYLE ==================
+const navClass = (section) =>
+  currentSection.value === section
+    ? 'text-yellow-300 glow'
+    : 'hover:text-yellow-200 transition-colors duration-300'
+
+// ================== LIFECYCLE ==================
+onMounted(() => {
+  generateStars()
+})
+</script>
+
+<style scoped>
+/* Animasi bintang */
+@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; }
+
+/* Glow untuk nav 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);
+}
+
+/* Scrollbar */
+::-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>
\ No newline at end of file