update form premium
This commit is contained in:
Farhaan4
parent
3b42e905d3
commit
4c467488fb
@ -12,15 +12,42 @@
|
||||
<section class="mb-8">
|
||||
<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 v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan" 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.email" type="email" placeholder="Email" 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.no_tlpn" type="text" placeholder="No Telepon" 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" />
|
||||
<!-- Nama Pemesan -->
|
||||
<div class="relative">
|
||||
<input v-model="form.nama_pemesan" 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">
|
||||
Nama Pemesan
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="relative">
|
||||
<input v-model="form.email" type="email" 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">
|
||||
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>
|
||||
|
||||
@ -28,27 +55,26 @@
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🧒 Data Anak</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input v-model="form.form.nama_lengkap" placeholder="Nama Lengkap" 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.nama_panggilan" placeholder="Nama Panggilan" 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.nama_bapak" placeholder="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" />
|
||||
<input v-model="form.form.nama_ibu" placeholder="Nama Ibu" 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.link_instagram" placeholder="Link Instagram" 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.link_facebook" placeholder="Link Facebook" 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.link_twitter" placeholder="Link Twitter" 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 v-for="(field, i) in [
|
||||
{ model: 'nama_lengkap', label: 'Nama Lengkap' },
|
||||
{ model: 'nama_panggilan', label: 'Nama Panggilan' },
|
||||
{ model: 'nama_bapak', label: 'Nama Bapak' },
|
||||
{ model: 'nama_ibu', label: 'Nama Ibu' },
|
||||
{ model: 'link_instagram', label: 'Link Instagram' },
|
||||
{ model: 'link_facebook', label: 'Link Facebook' },
|
||||
{ model: 'link_twitter', label: 'Link Twitter' }
|
||||
]" :key="i">
|
||||
<div class="relative">
|
||||
<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
|
||||
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">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -57,115 +83,91 @@
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Acara Khitan</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block font-medium text-gray-700 mb-2">
|
||||
Hari & Tanggal Acara
|
||||
</label>
|
||||
<input v-model="form.form.hari_tanggal_acara" type="date" 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 duration-200" />
|
||||
<!-- Hari & Tanggal -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-gray-600 text-sm font-medium mb-1">Hari & Tanggal Acara</label>
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block font-medium text-gray-700 mb-2">
|
||||
Waktu Acara
|
||||
</label>
|
||||
<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
|
||||
outline-none transition duration-200" />
|
||||
<!-- Waktu -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-gray-600 text-sm font-medium mb-1">Waktu Acara</label>
|
||||
<input v-model="form.form.waktu" type="time" 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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<label class="block font-medium text-gray-700 mb-2">
|
||||
Alamat Acara
|
||||
|
||||
|
||||
<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>
|
||||
<textarea v-model="form.form.alamat" rows="3" placeholder="Tulis alamat lengkap 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 resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block font-medium text-gray-700 mb-2">
|
||||
Link Google Maps
|
||||
</label>
|
||||
<input v-model="form.form.link_gmaps" type="url" placeholder="https://maps.google.com/..." 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 duration-200" />
|
||||
<div class=" 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>
|
||||
|
||||
<!-- Syukuran -->
|
||||
<!-- Rekening & Musik -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🍽️ Acara Syukuran</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<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
|
||||
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
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||
outline-none transition duration-200" />
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<template v-for="(rek, i) in [1, 2, 3]" :key="i">
|
||||
<div class="relative">
|
||||
<input v-model="form.form[`rekening_${rek}`]" 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 {{ rek }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<textarea v-model="form.form.alamat_syukuran" rows="3" placeholder="Alamat Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-2
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||
outline-none transition resize-none"></textarea>
|
||||
<input v-model="form.form.link_gmaps_syukuran" placeholder="Link Gmaps Syukuran" class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-2
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||
outline-none transition" />
|
||||
|
||||
<!-- Hitung Mundur -->
|
||||
<div>
|
||||
<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>
|
||||
<label class="block text-gray-600 text-sm mb-1">Mulai dari</label>
|
||||
<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" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="relative">
|
||||
<input v-model="form.form.link_music" 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 Music
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-gray-600 text-sm mb-1">Sampai dengan</label>
|
||||
<input v-model="form.form.hitung_mundur_selesai" 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" />
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input v-model="form.form.link_live_streaming" 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 Live Streaming
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lainnya -->
|
||||
<section class="mb-8">
|
||||
<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
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||
outline-none transition" />
|
||||
<textarea v-model="form.form.say_something" rows="3" placeholder="Say Something..." 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>
|
||||
|
||||
<!-- Rekening -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<input v-model="form.form.rekening_1" placeholder="Rekening 1" 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.rekening_2" placeholder="Rekening 2" 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.rekening_3" placeholder="Rekening 3" 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>
|
||||
</section>
|
||||
|
||||
<!-- Musik -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
|
||||
<input v-model="form.form.link_music" placeholder="Link Music (opsional)" 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" />
|
||||
</section>
|
||||
|
||||
<!-- Foto Upload -->
|
||||
<section class="mb-8">
|
||||
|
||||
@ -1,173 +1,232 @@
|
||||
<template>
|
||||
<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 Ulang Tahun Premium
|
||||
</h1>
|
||||
<p class="text-center text-gray-500 text-sm mb-8">
|
||||
Isi semua data berikut dengan lengkap dan benar.
|
||||
</p>
|
||||
<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 Ulang Tahun Premium
|
||||
</h1>
|
||||
<p class="text-center text-gray-500 text-sm mb-8">
|
||||
Isi semua data berikut 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>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan"
|
||||
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.email" type="email" placeholder="Email"
|
||||
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.no_tlpn" type="text" placeholder="No Telepon"
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- Data Anak -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Data Anak</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<div class="grid gap-2">
|
||||
<input v-model="form.form.nama_lengkap" placeholder="Nama Lengkap"
|
||||
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.nama_panggilan" placeholder="Nama Panggilan"
|
||||
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.nama_bapak" placeholder="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" />
|
||||
<input v-model="form.form.nama_ibu" placeholder="Nama Ibu"
|
||||
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.umur_yang_dirayakan" type="number" placeholder="Umur Yang Dirayakan"
|
||||
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.anak_ke" type="number" placeholder="Anak Ke"
|
||||
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>
|
||||
<div>
|
||||
<div class="grid gap-2">
|
||||
<input v-model="form.form.instagram" placeholder="Link Instagram"
|
||||
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.facebook" placeholder="Link Facebook"
|
||||
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.twitter" placeholder="Link Twitter"
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Detail Acara -->
|
||||
<section class="mb-8">
|
||||
<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 v-model="form.form.hari_tanggal_acara" type="date" placeholder="Hari & Tanggal 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" />
|
||||
<input v-model="form.form.waktu" type="text" placeholder="Waktu"
|
||||
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" />
|
||||
<textarea v-model="form.form.alamat" rows="4" placeholder="Alamat"
|
||||
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>
|
||||
<input v-model="form.form.link_gmaps" type="text" placeholder="Link Gmaps"
|
||||
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" />
|
||||
<!-- Hitung Mundur -->
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-700 mb-3">Hitung Mundur</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Mulai -->
|
||||
<div>
|
||||
<label class="block text-gray-600 text-sm mb-1">Mulai dari</label>
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<!-- Sampai -->
|
||||
<div>
|
||||
<label class="block text-gray-600 text-sm mb-1">Sampai dengan</label>
|
||||
<input v-model="form.form.hitung_mundur_selesai" 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" />
|
||||
</div>
|
||||
<input v-model="form.form.link_live_streaming" type="text" placeholder="Link Live Streaming"
|
||||
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>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Pesan & Rekening -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Pesan & Rekening</h2>
|
||||
<textarea v-model="form.form.say_something" rows="4" placeholder="Say Something..."
|
||||
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>
|
||||
<div class="grid md:grid-cols-3 gap-4 mt-4">
|
||||
<input v-model="form.form.rekening_1" placeholder="Rekening 1"
|
||||
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.rekening_2" placeholder="Rekening 2"
|
||||
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.rekening_3" placeholder="Rekening 3"
|
||||
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>
|
||||
<input v-model="form.form.link_music" placeholder="Link Music (opsional)"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-4 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
</section>
|
||||
|
||||
<!-- Foto Upload -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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. 8, JPEG/PNG, maks. 2MB)</span>
|
||||
<!-- Data Pemesan -->
|
||||
<section class="mb-8">
|
||||
<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">
|
||||
<!-- Nama Pemesan -->
|
||||
<div class="relative">
|
||||
<input v-model="form.nama_pemesan" 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">
|
||||
Nama Pemesan
|
||||
</label>
|
||||
<div v-else class="grid grid-cols-3 sm:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="(src, i) in previews"
|
||||
:key="i"
|
||||
class="relative group"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="relative">
|
||||
<input v-model="form.email" type="email" 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">
|
||||
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</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid gap-4">
|
||||
<template v-for="(field, i) in [
|
||||
{ key: 'nama_lengkap', label: 'Nama Lengkap' },
|
||||
{ key: 'nama_panggilan', label: 'Nama Panggilan' },
|
||||
{ key: 'nama_bapak', label: 'Nama Bapak' },
|
||||
{ key: 'nama_ibu', label: 'Nama Ibu' },
|
||||
{ key: 'umur_yang_dirayakan', label: 'Umur yang Dirayakan', type: 'number' },
|
||||
{ key: 'anak_ke', label: 'Anak Ke', type: 'number' }
|
||||
]" :key="i">
|
||||
<div class="relative">
|
||||
<input v-model="form.form[field.key]" :type="field.type || 'text'" required 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-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">
|
||||
|
||||
{{ field.label }}
|
||||
</label>
|
||||
</div>
|
||||
<label
|
||||
v-if="previews.length < 8"
|
||||
for="gallery"
|
||||
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>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<template v-for="(field, i) in [
|
||||
{ key: 'instagram', label: 'Link Instagram' },
|
||||
{ key: 'facebook', label: 'Link Facebook' },
|
||||
{ key: 'twitter', label: 'Link Twitter' }
|
||||
]" :key="i">
|
||||
<div class="relative">
|
||||
<input v-model="form.form[field.key]" 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
|
||||
peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Detail Acara -->
|
||||
<section class="mb-8">
|
||||
<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">
|
||||
<div class="relative">
|
||||
<input v-model="form.form.hari_tanggal_acara" type="date" required 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">
|
||||
Hari & Tanggal Acara
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<input v-model="form.form.waktu" type="time" required 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 Acara
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="relative md:col-span-2">
|
||||
<textarea v-model="form.form.alamat" rows="4" required 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-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">
|
||||
Alamat
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="relative md:col-span-2">
|
||||
<input v-model="form.form.link_gmaps" type="text" required 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-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 Gmaps
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pesan & Rekening -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Pesan & Rekening</h2>
|
||||
|
||||
<!-- Say Something -->
|
||||
<section class="mb-8">
|
||||
|
||||
<textarea v-model="form.form.say_something" rows="4" placeholder="Kata-kata spesial atau pesan untuk tamu..."
|
||||
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>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-4">
|
||||
<template v-for="(rek, i) in [1, 2, 3]" :key="i">
|
||||
<div class="relative">
|
||||
<input v-model="form.form[`rekening_${rek}`]" required 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-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">
|
||||
|
||||
Rekening {{ rek }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tombol -->
|
||||
<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">
|
||||
Batal
|
||||
</button>
|
||||
<button @click="konfirmasi"
|
||||
class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
|
||||
Konfirmasi
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-4">
|
||||
<input v-model="form.form.link_music" 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 Music
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Foto Upload -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
||||
<div
|
||||
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">
|
||||
<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. 8, JPEG/PNG, maks. 2MB)</span>
|
||||
</label>
|
||||
<div v-else class="grid grid-cols-3 sm:grid-cols-4 gap-4">
|
||||
<div v-for="(src, i) in previews" :key="i" class="relative group">
|
||||
<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 v-if="previews.length < 8" for="gallery"
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tombol -->
|
||||
<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">
|
||||
Batal
|
||||
</button>
|
||||
<button @click="konfirmasi" class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
|
||||
Konfirmasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user