[Update] form khitan

This commit is contained in:
Arief Dwi Wicaksono 2025-10-16 10:06:15 +07:00
parent 82f74c3a3b
commit dd75f12217

View File

@ -56,9 +56,7 @@
<section class="mb-8"> <section class="mb-8">
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Acara Khitan</h2> <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Acara Khitan</h2>
<!-- Grid dua kolom untuk tanggal & waktu -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Hari & Tanggal Acara -->
<div> <div>
<label class="block font-medium text-gray-700 mb-2"> <label class="block font-medium text-gray-700 mb-2">
Hari & Tanggal Acara Hari & Tanggal Acara
@ -68,7 +66,6 @@
outline-none transition duration-200" /> outline-none transition duration-200" />
</div> </div>
<!-- Waktu Acara -->
<div> <div>
<label class="block font-medium text-gray-700 mb-2"> <label class="block font-medium text-gray-700 mb-2">
Waktu Acara Waktu Acara
@ -76,12 +73,9 @@
<input v-model="form.form.waktu" type="time" class="w-full border border-gray-300 rounded-lg px-3 py-2 <input v-model="form.form.waktu" type="time" class="w-full border border-gray-300 rounded-lg px-3 py-2
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400 focus:border-blue-400
outline-none transition duration-200" /> outline-none transition duration-200" />
</div> </div>
</div> </div>
<!-- Alamat Acara -->
<div class="mt-6"> <div class="mt-6">
<label class="block font-medium text-gray-700 mb-2"> <label class="block font-medium text-gray-700 mb-2">
Alamat Acara Alamat Acara
@ -91,7 +85,6 @@
outline-none transition resize-none"></textarea> outline-none transition resize-none"></textarea>
</div> </div>
<!-- Link Gmaps -->
<div class="mt-4"> <div class="mt-4">
<label class="block font-medium text-gray-700 mb-2"> <label class="block font-medium text-gray-700 mb-2">
Link Google Maps Link Google Maps
@ -102,7 +95,6 @@
</div> </div>
</section> </section>
<!-- Syukuran --> <!-- Syukuran -->
<section class="mb-8"> <section class="mb-8">
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🍽 Acara Syukuran</h2> <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🍽 Acara Syukuran</h2>
@ -110,7 +102,6 @@
<input v-model="form.form.hari_tanggal_syukuran" type="date" placeholder="Hari & Tanggal Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2 <input v-model="form.form.hari_tanggal_syukuran" type="date" placeholder="Hari & Tanggal Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400 focus:border-blue-400
outline-none transition" /> outline-none transition" />
<input v-model="form.form.waktu_syukuran" type="time" class="w-full border border-gray-300 rounded-lg px-3 py-2 <input v-model="form.form.waktu_syukuran" type="time" class="w-full border border-gray-300 rounded-lg px-3 py-2
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400 focus:border-blue-400
outline-none transition duration-200" /> outline-none transition duration-200" />
@ -124,16 +115,14 @@
<!-- Hitung Mundur --> <!-- Hitung Mundur -->
<div> <div>
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🍽 Hitung Mundur</h2> <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🕒 Hitung Mundur</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Mulai -->
<div> <div>
<label class="block text-gray-600 text-sm mb-1">Mulai dari</label> <label class="block text-gray-600 text-sm mb-1">Mulai dari</label>
<input v-model="form.form.hitung_mundur_mulai" type="datetime-local" <input v-model="form.form.hitung_mundur_mulai" type="datetime-local"
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" /> 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> </div>
<!-- Sampai -->
<div> <div>
<label class="block text-gray-600 text-sm mb-1">Sampai dengan</label> <label class="block text-gray-600 text-sm mb-1">Sampai dengan</label>
<input v-model="form.form.hitung_mundur_selesai" type="datetime-local" <input v-model="form.form.hitung_mundur_selesai" type="datetime-local"
@ -141,13 +130,11 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Lainnya --> <!-- Lainnya -->
<section class="mb-8"> <section class="mb-8">
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🕒 Informasi Tambahan</h2> <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🕒 Informasi Tambahan</h2>
<input v-model="form.form.link_live_streaming" placeholder="Link Live Streaming" class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-2 <input v-model="form.form.link_live_streaming" placeholder="Link Live Streaming" class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-2
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400 focus:border-blue-400
outline-none transition" /> outline-none transition" />
@ -208,7 +195,6 @@
</div> </div>
</section> </section>
<!-- Tombol --> <!-- Tombol -->
<div class="text-end mt-6"> <div class="text-end mt-6">
<button @click="batal" class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"> <button @click="batal" class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2">
@ -227,7 +213,6 @@ import { ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
const router = useRouter() const router = useRouter()
// State utama form // State utama form
@ -251,14 +236,8 @@ const form = ref({
waktu_syukuran: '', waktu_syukuran: '',
alamat_syukuran: '', alamat_syukuran: '',
link_gmaps_syukuran: '', link_gmaps_syukuran: '',
// Tambahkan dua ini:
hitung_mundur_mulai: '', hitung_mundur_mulai: '',
hitung_mundur_selesai: '', hitung_mundur_selesai: '',
// hapus yang lama:
// hitung_mundur: '',
link_live_streaming: '', link_live_streaming: '',
say_something: '', say_something: '',
rekening_1: '', rekening_1: '',
@ -269,8 +248,6 @@ const form = ref({
foto: [] foto: []
}) })
// Preview foto
const previews = ref([]) const previews = ref([])
// Upload file // Upload file
@ -313,8 +290,6 @@ const konfirmasi = async () => {
return return
} }
try { try {
const data = new FormData() const data = new FormData()
data.append('nama_pemesan', form.value.nama_pemesan) data.append('nama_pemesan', form.value.nama_pemesan)
@ -327,9 +302,9 @@ const konfirmasi = async () => {
data.append(`form[${key}]`, value) data.append(`form[${key}]`, value)
} }
// Tambah foto // Tambah foto (pakai array foto[] biar sama seperti versi pernikahan)
form.value.foto.forEach((file, index) => { form.value.foto.forEach((file) => {
data.append(`foto[${index}]`, file) data.append('foto[]', file)
}) })
const res = await fetch('http://localhost:8000/api/pelanggans', { const res = await fetch('http://localhost:8000/api/pelanggans', {
@ -354,12 +329,6 @@ const konfirmasi = async () => {
confirmButtonColor: '#2563eb', confirmButtonColor: '#2563eb',
background: '#f9fafb', background: '#f9fafb',
color: '#111827', color: '#111827',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
}) })
// Kirim ke WhatsApp admin // Kirim ke WhatsApp admin
@ -419,7 +388,6 @@ Terima kasih 🙏
} }
} }
const batal = () => { const batal = () => {
Swal.fire({ Swal.fire({
title: 'Batalkan?', title: 'Batalkan?',