351 lines
16 KiB
Vue
351 lines
16 KiB
Vue
<template>
|
|
<div class="max-w-5xl mx-auto p-8 bg-gradient-to-b from-pink-50 to-blue-50 shadow-lg rounded-xl">
|
|
<!-- Judul Form -->
|
|
<div class="text-center mb-10">
|
|
<h1 class="text-3xl md:text-4xl font-extrabold text-purple-700 drop-shadow-sm">
|
|
🎂 Form Pemesanan Undangan Ulang Tahun 🎉
|
|
</h1>
|
|
<p class="text-gray-600 mt-2">
|
|
Isi data berikut dengan lengkap untuk melakukan pemesanan undangan ulang tahun.
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="submitForm" class="space-y-10">
|
|
|
|
<!-- Tema Undangan -->
|
|
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Tema Undangan
|
|
</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<input :value="form.nama_template" type="text" placeholder="Nama Template" class="input-readonly" readonly />
|
|
<input :value="form.kategori" type="text" placeholder="Kategori" class="input-readonly" readonly />
|
|
<input :value="form.harga" type="text" placeholder="Harga" class="input-readonly" readonly />
|
|
<input :value="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly"
|
|
readonly />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pemesan -->
|
|
<!-- Pemesan -->
|
|
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="relative">
|
|
<input v-model="form.nama_pemesan" type="text" id="nama_pemesan" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="nama_pemesan"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Nama Pemesan
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.no_hp" type="text" id="no_hp" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="no_hp"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
No. WhatsApp
|
|
</label>
|
|
</div>
|
|
<div class="relative md:col-span-2">
|
|
<input v-model="form.email" type="email" id="email" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="email"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Email
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Data Anak -->
|
|
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="relative">
|
|
<input v-model="form.nama_lengkap_anak" type="text" id="nama_lengkap_anak" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="nama_lengkap_anak"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Nama Lengkap Anak
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.nama_panggilan_anak" type="text" id="nama_panggilan_anak" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="nama_panggilan_anak"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Nama Panggilan Anak
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.bapak_anak" type="text" id="bapak_anak" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="bapak_anak"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Nama Bapak
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.ibu_anak" type="text" id="ibu_anak" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="ibu_anak"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Nama Ibu
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.umur_dirayakan" type="text" id="umur_dirayakan" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="umur_dirayakan"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Ulang Tahun ke-
|
|
</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.anak_ke" type="text" id="anak_ke" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="anak_ke"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
|
|
Anak ke-
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Jadwal Acara -->
|
|
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="relative">
|
|
<input v-model="form.hari_tanggal_acara" type="date" id="hari_tanggal_acara" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="hari_tanggal_acara"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Hari & Tanggal</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="form.waktu_acara" type="text" id="waktu_acara" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="waktu_acara"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Waktu Acara</label>
|
|
</div>
|
|
<div class="relative md:col-span-2">
|
|
<textarea v-model="form.alamat_acara" id="alamat_acara" rows="3" placeholder=" " required
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
|
<label for="alamat_acara"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Alamat Lengkap</label>
|
|
</div>
|
|
<div class="relative md:col-span-2">
|
|
<input v-model="form.maps_acara" type="text" id="maps_acara" placeholder=" "
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="maps_acara"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Google Maps (Opsional)</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Informasi Tambahan -->
|
|
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
|
|
</h2>
|
|
<div class="relative">
|
|
<input v-model="form.link_musik" type="text" id="link_musik" placeholder=" "
|
|
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<label for="link_musik"
|
|
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Musik (Opsional)</label>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Galeri -->
|
|
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
|
|
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
<div v-for="(img, i) in previewImages" :key="i"
|
|
class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
|
|
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
|
<button type="button" @click="removeImage(i)"
|
|
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
|
|
aria-label="Hapus gambar">
|
|
×
|
|
</button>
|
|
</div>
|
|
<label v-if="previewImages.length < 5" for="gallery-upload"
|
|
class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
<!-- Submit -->
|
|
<div class="mt-10 text-center">
|
|
<button @click="submitForm"
|
|
class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition"
|
|
:disabled="loading">
|
|
{{ loading ? "Mengirim..." : "Kirim & Konfirmasi Admin" }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Alert -->
|
|
<div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">✅ Form berhasil
|
|
dikirim!</div>
|
|
<div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">❌ Gagal mengirim form.
|
|
Pastikan semua data yang wajib diisi sudah lengkap.</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
|
|
// 1. STRUKTUR DATA DISESUAIKAN DENGAN BACKEND
|
|
const form = ref({
|
|
template_id: "",
|
|
nama_template: "",
|
|
kategori: "",
|
|
harga: "",
|
|
tanggal_pemesanan: new Date().toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' }),
|
|
|
|
nama_pemesan: "",
|
|
no_hp: "",
|
|
email: "",
|
|
|
|
nama_lengkap_anak: "",
|
|
nama_panggilan_anak: "",
|
|
bapak_anak: "",
|
|
ibu_anak: "",
|
|
umur_dirayakan: "",
|
|
anak_ke: "",
|
|
hari_tanggal_acara: "",
|
|
waktu_acara: "",
|
|
alamat_acara: "",
|
|
maps_acara: "",
|
|
|
|
link_musik: "",
|
|
galeri: [],
|
|
});
|
|
|
|
const previewImages = ref([]);
|
|
const loading = ref(false);
|
|
const success = ref(false);
|
|
const error = ref(false);
|
|
|
|
onMounted(async () => {
|
|
if (route.query.template_id) {
|
|
try {
|
|
const template = await $fetch(`http://localhost:8000/api/templates/${route.query.template_id}`);
|
|
form.value.template_id = template.id;
|
|
form.value.nama_template = template.nama_template;
|
|
form.value.kategori = template.kategori?.nama || "-";
|
|
form.value.harga = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(template.harga);
|
|
} catch (err) {
|
|
console.error("Gagal ambil template", err);
|
|
}
|
|
}
|
|
});
|
|
|
|
// FUNGSI UNTUK MENAMBAH GAMBAR
|
|
const handleFileUpload = (event) => {
|
|
const newFiles = Array.from(event.target.files);
|
|
const combinedFiles = [...form.value.galeri, ...newFiles];
|
|
|
|
// Batasi total file menjadi 5
|
|
form.value.galeri = combinedFiles.slice(0, 5);
|
|
|
|
// Buat ulang array preview berdasarkan data file yang sudah final
|
|
previewImages.value = [];
|
|
form.value.galeri.forEach(file => {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
previewImages.value.push(e.target.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
// Reset input agar bisa memilih file yang sama lagi
|
|
event.target.value = null;
|
|
};
|
|
|
|
// FUNGSI UNTUK MENGHAPUS GAMBAR (SEKARANG DI LUAR)
|
|
const removeImage = (index) => {
|
|
form.value.galeri.splice(index, 1);
|
|
previewImages.value.splice(index, 1);
|
|
};
|
|
|
|
|
|
const submitForm = async () => {
|
|
loading.value = true;
|
|
success.value = false;
|
|
error.value = false;
|
|
|
|
try {
|
|
const body = new FormData();
|
|
for (const key in form.value) {
|
|
if (key === "galeri") {
|
|
form.value.galeri.forEach((file) => body.append("galeri[]", file));
|
|
} else if (form.value[key] !== null && form.value[key] !== undefined) {
|
|
body.append(key, form.value[key]);
|
|
}
|
|
}
|
|
|
|
// 2. ENDPOINT API DIPERBAIKI
|
|
await $fetch("http://localhost:8000/api/form/ulang-tahun", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
success.value = true;
|
|
|
|
|
|
const adminNumber = "62895602603247";
|
|
|
|
// Susun pesan WA
|
|
const message = `
|
|
Halo Admin, ada pesanan undangan ulang tahun baru 🎉
|
|
|
|
Nama Pemesan: ${form.value.nama_pemesan}
|
|
No HP: ${form.value.no_hp}
|
|
Email: ${form.value.email}
|
|
|
|
Nama Anak: ${form.value.nama_lengkap_anak} (${form.value.nama_panggilan_anak})
|
|
Orang Tua: ${form.value.bapak_anak} & ${form.value.ibu_anak}
|
|
Umur Dirayakan: ${form.value.umur_dirayakan}
|
|
Anak ke: ${form.value.anak_ke}
|
|
|
|
Acara: ${form.value.hari_tanggal_acara} | ${form.value.waktu_acara}
|
|
Alamat: ${form.value.alamat_acara}
|
|
Google Maps: ${form.value.maps_acara || "-"}
|
|
|
|
Template: ${form.value.nama_template} (${form.value.kategori})
|
|
Harga: ${form.value.harga}
|
|
Tanggal Pemesanan: ${form.value.tanggal_pemesanan}
|
|
`;
|
|
|
|
// Redirect ke WhatsApp
|
|
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(message)}`;
|
|
window.location.href = waUrl;
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
error.value = true;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script> |