Undangan/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue

<!-- components/undangan/undangan-khitan-premium.vue -->
<template>
  <div
    class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
  >
    <!-- ================= NAVIGATION ================= -->
    <nav
      v-if="currentSection !== 'landing'"
      class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"
    >
      <ul
        class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800"
      >
        <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')">Guest Book</button></li>
        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
      </ul>
    </nav>

    <!-- ================= MUSIK CONTROL ================= -->
    <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
      <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
        {{ 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 -->
      <KhitanA
        v-if="currentSection === 'landing'"
        :childName="formData.nama_panggilan"
        :guestName="data.nama_tamu"
        @next-page="switchSection('introduction')"
      />

      <!-- Introduction -->
         <KhitanIntroduction
        v-if="currentSection === 'introduction'"
       :form="formData"
        />


      <!-- 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_mulai="formData.hitung_mundur_mulai"

  :hari_tanggal_syukuran="formData.hari_tanggal_syukuran"
  :waktu_syukuran="formData.waktu_syukuran"
  :alamat_syukuran="formData.alamat_syukuran"
  :link_gmaps_syukuran="formData.link_gmaps_syukuran"
  :hitung_mundur_selesai="formData.hitung_mundur_selesai"
/>


      <!-- Gallery -->
      <KhitanGallery
        v-if="currentSection === 'gallery'"
        :images="galleryImages"
      />

      <!-- Guest Book -->
      <KhitanSay
        v-if="currentSection === 'say'"
        :guestName="data.nama_tamu"
        :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, watch } from 'vue'
import { useRuntimeConfig } from '#app'

// ================== IMPORT KOMPONEN ==================
import KhitanA from '~/components/templates/khitan/KhitanA.vue'
import KhitanIntroduction from '~/components/templates/khitan/Introduction.vue'
import KhitanEvent from '~/components/templates/khitan/Event.vue'
import KhitanGallery from '~/components/templates/khitan/Gallery.vue'
import KhitanSay from '~/components/templates/khitan/GuestBook.vue'
import KhitanThankYou from '~/components/templates/khitan/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.foto


    if (Array.isArray(f)) {
        return f.map(img => `${backendUrl}/storage/${img}`)
    }

    // Jika masih bentuk lama (foto_1, foto_2, dst.)
    return [
        formData.value.foto_1,
        formData.value.foto_2,
        formData.value.foto_3,
        formData.value.foto_4,
        formData.value.foto_5
    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
})

// Foto utama diambil dari foto pertama
const mainPhoto = computed(() => {
  const firstPhoto = formData.value.foto?.[0]
  return firstPhoto ? `${backendUrl}/${firstPhoto}` : ''
})

// ================== NAVIGASI SECTION ==================
const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s)

// ================== 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-blue-800 underline'
    : 'hover:text-blue-700'
</script>

<style scoped>
main {
  transition: all 0.7s ease-in-out;
}
</style>