[Update] working flow pemesanan

backend-baru/app/Http/Controllers/Api/PelangganApiController.php

@@ -6,46 +6,77 @@ use App\Http\Controllers\Controller;
 use App\Models\Pelanggan;
 use App\Models\Template;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
 
 class PelangganApiController extends Controller
 {
     // 🔹 Simpan pesanan pelanggan via API
-    public function store(Request $request)
+   public function store(Request $request)
     {
-        $request->validate([
-            'nama_pemesan' => 'required|string|max:255',
-            'email'        => 'required|email',
-            'no_tlpn'      => 'required|string|max:20',
-            'template_id'  => 'required|exists:templates,id',
-            'form'         => 'required|array',
-        ]);
+        try {
+            $validated = $request->validate([
+                'nama_pemesan' => 'required|string|max:255',
+                'email'        => 'required|email',
+                'no_tlpn'      => 'required|string|max:20',
+                'template_slug' => 'required|exists:templates,slug',
+                'form'         => 'required|array',
+                'foto.*'       => 'nullable|image|mimes:jpeg,png,jpg|max:2048',
+            ]);
 
-        $template = Template::findOrFail($request->input('template_id'));
+            $template = Template::where('slug', $request->input('template_slug'))->firstOrFail();
 
-        // 🔸 Generate kode undangan unik
-        $invitationCode = 'INV-' . strtoupper(Str::random(6));
-        while (Pelanggan::where('invitation_code', $invitationCode)->exists()) {
+            // Generate unique invitation code
             $invitationCode = 'INV-' . strtoupper(Str::random(6));
+            while (Pelanggan::where('invitation_code', $invitationCode)->exists()) {
+                $invitationCode = 'INV-' . strtoupper(Str::random(6));
+            }
+
+            // Handle file uploads
+            $fotoPaths = [];
+            if ($request->hasFile('foto')) {
+                foreach ($request->file('foto') as $file) {
+                    $path = $file->store('photos', 'public'); // Store in storage/public/photos
+                    $fotoPaths[] = $path;
+                }
+            }
+
+            // Save customer data
+            $pelanggan = Pelanggan::create([
+                'nama_pemesan'    => $validated['nama_pemesan'],
+                'email'           => $validated['email'],
+                'no_tlpn'         => $validated['no_tlpn'],
+                'template_id'     => $template->id,
+                'form'            => array_merge($validated['form'], ['foto' => $fotoPaths]),
+                'harga'           => $template->harga,
+                'status'          => 'menunggu',
+                'invitation_code' => $invitationCode,
+            ]);
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Pesanan berhasil dibuat',
+                'data'    => $pelanggan,
+            ], 201);
+
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Validation failed',
+                'errors'  => $e->errors(),
+            ], 422);
+        } catch (\Illuminate\Database\Eloquent\ModelNotFoundException $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Template not found',
+            ], 404);
+        } catch (\Exception $e) {
+            Log::error('Error in store method: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'An error occurred: ' . $e->getMessage(),
+            ], 500);
         }
-
-        // 🔸 Simpan data pelanggan baru
-        $pelanggan = Pelanggan::create([
-            'nama_pemesan'    => $request->nama_pemesan,
-            'email'           => $request->email,
-            'no_tlpn'         => $request->no_tlpn,
-            'template_id'     => $template->id,
-            'form'            => $request->input('form'),
-            'harga'           => $template->harga,
-            'status'          => 'menunggu',
-            'invitation_code' => $invitationCode,
-        ]);
-
-        return response()->json([
-            'success' => true,
-            'message' => 'Pesanan berhasil dibuat',
-            'data'    => $pelanggan,
-        ], 201);
     }
 
     // 🔹 Ambil semua data pelanggan

backend-baru/database/migrations/2025_10_02_043030_create_templates_table.php

@@ -8,7 +8,8 @@ return new class extends Migration {
     public function up(): void {
         Schema::create('templates', function (Blueprint $table) {
             $table->id();
-            $table->string('nama_template');
+            $table->string('nama_template')->unique();
+            $table->string('slug')->unique();
             $table->decimal('harga', 10, 2)->default(0);
             $table->string('foto')->nullable();
             $table->enum('paket', ['starter', 'basic', 'premium'])->default('starter');

backend-baru/database/seeders/PelangganSeeder.php

@@ -10,7 +10,7 @@ class PelangganSeeder extends Seeder
 {
     public function run(): void
     {
-        Pelanggan::factory()->count(100)->create();
+        Pelanggan::factory(100)->create();
         // $pelanggans = [
         //     [
         //         'nama_pemesan' => 'Arief Dwi Wicaksono',

backend-baru/database/seeders/TemplateSeeder.php

@@ -16,6 +16,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Pernikahan Starter',
+            'slug' => 'undangan-pernikahan-starter',
             'harga' => 100000,
             'paket' => 'starter',
             'form' => [
@@ -42,6 +43,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Pernikahan Basic',
+            'slug' => 'undangan-pernikahan-basic',
             'harga' => 175000,
             'paket' => 'basic',
             'form' => [
@@ -79,6 +81,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Pernikahan Premium',
+            'slug' => 'undangan-pernikahan-premium',
             'harga' => 350000,
             'paket' => 'premium',
             'form' => [
@@ -134,60 +137,9 @@ class TemplateSeeder extends Seeder
             'foto' => 'templates/Pernikahan.jpg',
         ]);
 
-        // Template Pernikahan Premium
-        Template::create([
-            'nama_template' => 'Undangan Pernikahan Premium',
-            'harga' => 250000,
-            'paket' => 'premium',
-            'form' => [
-                'fields' => [
-                    ['name' => 'nama_pemesan', 'label' => 'Nama Pemesan', 'type' => 'text', 'required' => true],
-                    ['name' => 'email', 'label' => 'Email', 'type' => 'email', 'required' => true],
-                    ['name' => 'no_telepon', 'label' => 'No Telepon', 'type' => 'text'],
-                    ['name' => 'nama_lengkap_pria', 'label' => 'Nama Lengkap Pria', 'type' => 'text'],
-                    ['name' => 'nama_panggilan_pria', 'label' => 'Nama Panggilan Pria', 'type' => 'text'],
-                    ['name' => 'nama_bapak_pria', 'label' => 'Nama Bapak Pria', 'type' => 'text'],
-                    ['name' => 'nama_ibu_pria', 'label' => 'Nama Ibu Pria', 'type' => 'text'],
-                    ['name' => 'instagram_pria', 'label' => 'Link Instagram Pria', 'type' => 'text'],
-                    ['name' => 'facebook_pria', 'label' => 'Link Facebook Pria', 'type' => 'text'],
-                    ['name' => 'twitter_pria', 'label' => 'Link Twitter Pria', 'type' => 'text'],
-                    ['name' => 'nama_lengkap_wanita', 'label' => 'Nama Lengkap Wanita', 'type' => 'text'],
-                    ['name' => 'nama_panggilan_wanita', 'label' => 'Nama Panggilan Wanita', 'type' => 'text'],
-                    ['name' => 'nama_bapak_wanita', 'label' => 'Nama Bapak Wanita', 'type' => 'text'],
-                    ['name' => 'nama_ibu_wanita', 'label' => 'Nama Ibu Wanita', 'type' => 'text'],
-                    ['name' => 'instagram_wanita', 'label' => 'Link Instagram Wanita', 'type' => 'text'],
-                    ['name' => 'facebook_wanita', 'label' => 'Link Facebook Wanita', 'type' => 'text'],
-                    ['name' => 'twitter_wanita', 'label' => 'Link Twitter Wanita', 'type' => 'text'],
-                    ['name' => 'cerita_kita', 'label' => 'Cerita Kita', 'type' => 'textarea'],
-                    ['name' => 'hari_tanggal_akad', 'label' => 'Hari & Tanggal Acara (Akad)', 'type' => 'date'],
-                    ['name' => 'waktu_akad', 'label' => 'Waktu Akad', 'type' => 'text'],
-                    ['name' => 'alamat_akad', 'label' => 'Alamat Akad', 'type' => 'text'],
-                    ['name' => 'link_gmaps_akad', 'label' => 'Link Gmaps Akad', 'type' => 'text'],
-                    ['name' => 'hari_tanggal_resepsi', 'label' => 'Hari & Tanggal Acara (Resepsi)', 'type' => 'date'],
-                    ['name' => 'waktu_resepsi', 'label' => 'Waktu Resepsi', 'type' => 'text'],
-                    ['name' => 'alamat_resepsi', 'label' => 'Alamat Resepsi', 'type' => 'text'],
-                    ['name' => 'link_gmaps_resepsi', 'label' => 'Link Gmaps Resepsi', 'type' => 'text'],
-                    ['name' => 'say_something', 'label' => 'Say Something', 'type' => 'textarea'],
-                    ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
-                    ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
-                    ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
-                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
-                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
-                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
-                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
-                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
-                    ['name' => 'foto_6', 'label' => 'Foto 6', 'type' => 'file'],
-                    ['name' => 'foto_7', 'label' => 'Foto 7', 'type' => 'file'],
-                    ['name' => 'foto_8', 'label' => 'Foto 8', 'type' => 'file'],
-                    ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
-                ]
-            ],
-            'kategori_id' => $k1->id,
-            'foto' => 'templates/Pernikahan.jpg',
-        ]);
-
         Template::create([
             'nama_template' => 'Undangan Ulang Tahun Starter',
+            'slug' => 'undangan-ulang-tahun-starter',
             'harga' => 100000,
             'paket' => 'starter',
             'form' => [
@@ -210,6 +162,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Ulang Tahun Basic',
+            'slug' => 'undangan-ulang-tahun-basic',
             'harga' => 175000,
             'paket' => 'basic',
             'form' => [
@@ -242,6 +195,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Ulang Tahun Premium',
+            'slug' => 'undangan-ulang-tahun-premium',
             'harga' => 250000,
             'paket' => 'premium',
             'form' => [
@@ -283,47 +237,9 @@ class TemplateSeeder extends Seeder
             'foto' => 'templates/HBD.jpg',
         ]);
 
-        // Template Ulang Tahun Premium
-        Template::create([
-            'nama_template' => 'Undangan Ulang Tahun Premium',
-            'harga' => 200000,
-            'paket' => 'premium',
-            'form' => [
-                'fields' => [
-                    ['name' => 'nama_pemesan', 'label' => 'Nama Pemesan', 'type' => 'text', 'required' => true],
-                    ['name' => 'email', 'label' => 'Email', 'type' => 'email', 'required' => true],
-                    ['name' => 'no_telepon', 'label' => 'No Telepon', 'type' => 'text'],
-                    ['name' => 'nama_lengkap', 'label' => 'Nama Lengkap', 'type' => 'text'],
-                    ['name' => 'nama_panggilan', 'label' => 'Nama Panggilan', 'type' => 'text'],
-                    ['name' => 'nama_bapak', 'label' => 'Nama Bapak', 'type' => 'text'],
-                    ['name' => 'nama_ibu', 'label' => 'Nama Ibu', 'type' => 'text'],
-                    ['name' => 'umur_yang_dirayakan', 'label' => 'Umur Yang Dirayakan', 'type' => 'number'],
-                    ['name' => 'anak_ke', 'label' => 'Anak Ke', 'type' => 'number'],
-                    ['name' => 'instagram', 'label' => 'Link Instagram', 'type' => 'text'],
-                    ['name' => 'facebook', 'label' => 'Link Facebook', 'type' => 'text'],
-                    ['name' => 'twitter', 'label' => 'Link Twitter', 'type' => 'text'],
-                    ['name' => 'hari_tanggal_acara', 'label' => 'Hari & Tanggal Acara', 'type' => 'date'],
-                    ['name' => 'waktu', 'label' => 'Waktu', 'type' => 'text'],
-                    ['name' => 'alamat', 'label' => 'Alamat', 'type' => 'text'],
-                    ['name' => 'link_gmaps', 'label' => 'Link Gmaps', 'type' => 'text'],
-                    ['name' => 'say_something', 'label' => 'Say Something', 'type' => 'textarea'],
-                    ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
-                    ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
-                    ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
-                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
-                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
-                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
-                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
-                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
-                    ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
-                ]
-            ],
-            'kategori_id' => $k2->id,
-            'foto' => 'templates/HBD.jpg',
-        ]);
-
         Template::create([
             'nama_template' => 'Undangan Khitan Starter',
+            'slug' => 'undangan-khitan-starter',
             'harga' => 100000,
             'paket' => 'starter',
             'form' => [
@@ -347,6 +263,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Khitan Basic',
+            'slug' => 'undangan-khitan-basic',
             'harga' => 175000,
             'paket' => 'basic',
             'form' => [
@@ -378,6 +295,7 @@ class TemplateSeeder extends Seeder
 
         Template::create([
             'nama_template' => 'Undangan Khitan Premium',
+            'slug' => 'undangan-khitan-premium',
             'harga' => 250000,
             'paket' => 'premium',
             'form' => [
@@ -420,43 +338,5 @@ class TemplateSeeder extends Seeder
             'kategori_id' => $k3->id,
             'foto' => 'templates/Khitan.jpg',
         ]);
-
-        // Template Khitan Premium
-        Template::create([
-            'nama_template' => 'Undangan Khitan Premium',
-            'harga' => 180000,
-            'paket' => 'premium',
-            'form' => [
-                'fields' => [
-                    ['name' => 'nama_pemesan', 'label' => 'Nama Pemesan', 'type' => 'text', 'required' => true],
-                    ['name' => 'email', 'label' => 'Email', 'type' => 'email', 'required' => true],
-                    ['name' => 'no_telepon', 'label' => 'No Telepon', 'type' => 'text'],
-                    ['name' => 'nama_lengkap', 'label' => 'Nama Lengkap', 'type' => 'text'],
-                    ['name' => 'nama_panggilan', 'label' => 'Nama Panggilan', 'type' => 'text'],
-                    ['name' => 'nama_bapak', 'label' => 'Nama Bapak', 'type' => 'text'],
-                    ['name' => 'nama_ibu', 'label' => 'Nama Ibu', 'type' => 'text'],
-                    ['name' => 'instagram', 'label' => 'Link Instagram', 'type' => 'text'],
-                    ['name' => 'facebook', 'label' => 'Link Facebook', 'type' => 'text'],
-                    ['name' => 'twitter', 'label' => 'Link Twitter', 'type' => 'text'],
-                    ['name' => 'hari_tanggal_acara', 'label' => 'Hari & Tanggal Acara', 'type' => 'date'],
-                    ['name' => 'waktu', 'label' => 'Waktu', 'type' => 'text'],
-                    ['name' => 'alamat', 'label' => 'Alamat', 'type' => 'text'],
-                    ['name' => 'link_gmaps', 'label' => 'Link Gmaps', 'type' => 'text'],
-                    ['name' => 'say_something', 'label' => 'Say Something', 'type' => 'textarea'],
-                    ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
-                    ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
-                    ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
-                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
-                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
-                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
-                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
-                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
-                    ['name' => 'foto_6', 'label' => 'Foto 6', 'type' => 'file'],
-                    ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
-                ]
-            ],
-            'kategori_id' => $k3->id,
-            'foto' => 'templates/Khitan.jpg',
-        ]);
     }
 }

backend-baru/routes/web.php

@@ -6,7 +6,7 @@ use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\KategoriController;
 use App\Http\Controllers\TemplateController;
 use App\Http\Controllers\PelangganController;
-use App\Http\Controllers\ReviewController; // Pastikan ini controller web, bukan API
+use App\Http\Controllers\Api\ReviewController;
 use Illuminate\Support\Facades\Auth;
 
 // ============================

proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue

@@ -16,7 +16,7 @@
               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_telepon" type="text" placeholder="No Telepon"
+            <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>
@@ -29,19 +29,19 @@
             <div>
               <h3 class="font-medium text-gray-700 mb-2">Mempelai Pria</h3>
               <div class="grid gap-2">
-                <input v-model="form.nama_lengkap_pria" placeholder="Nama Lengkap"
+                <input v-model="form.form.nama_lengkap_pria" 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.nama_panggilan_pria" placeholder="Nama Panggilan"
+                <input v-model="form.form.nama_panggilan_pria" 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.nama_bapak_pria" placeholder="Nama Bapak"
+                <input v-model="form.form.nama_bapak_pria" 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.nama_ibu_pria" placeholder="Nama Ibu"
+                <input v-model="form.form.nama_ibu_pria" 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.instagram_pria" placeholder="Instagram"
+                <input v-model="form.form.instagram_pria" placeholder="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.facebook_pria" placeholder="Facebook"
+                <input v-model="form.form.facebook_pria" placeholder="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.twitter_pria" placeholder="Twitter"
+                <input v-model="form.form.twitter_pria" placeholder="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>
@@ -50,19 +50,19 @@
             <div>
               <h3 class="font-medium text-gray-700 mb-2">Mempelai Wanita</h3>
               <div class="grid gap-2">
-                <input v-model="form.nama_lengkap_wanita" placeholder="Nama Lengkap"
+                <input v-model="form.form.nama_lengkap_wanita" placeholder="Nama Lengkap"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.nama_panggilan_wanita" placeholder="Nama Panggilan"
+                <input v-model="form.form.nama_panggilan_wanita" placeholder="Nama Panggilan"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.nama_bapak_wanita" placeholder="Nama Bapak"
+                <input v-model="form.form.nama_bapak_wanita" placeholder="Nama Bapak"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.nama_ibu_wanita" placeholder="Nama Ibu"
+                <input v-model="form.form.nama_ibu_wanita" placeholder="Nama Ibu"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.instagram_wanita" placeholder="Instagram"
+                <input v-model="form.form.instagram_wanita" placeholder="Instagram"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.facebook_wanita" placeholder="Facebook"
+                <input v-model="form.form.facebook_wanita" placeholder="Facebook"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
-                <input v-model="form.twitter_wanita" placeholder="Twitter"
+                <input v-model="form.form.twitter_wanita" placeholder="Twitter"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
               </div>
             </div>
@@ -72,74 +72,71 @@
         <!-- Cerita Kita -->
         <section class="mb-8">
           <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Cerita Kita</h2>
-          <textarea v-model="form.cerita_kita" rows="4" placeholder="Ceritakan kisah kalian..."
+          <textarea v-model="form.form.cerita_kita" rows="4" placeholder="Ceritakan kisah kalian..."
             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 & Musik -->
-         <section class="mb-8"> 
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
-         <div class="grid md:grid-cols-3 gap-4"> 
-            <input v-model="form.rekening1" 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.rekening2" 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.rekening3" 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.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 class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
+          <div class="grid md:grid-cols-3 gap-4">
+            <input v-model="form.form.rekening1" 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.rekening2" 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.rekening3" 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 File -->
-    <input
-      id="gallery"
-      type="file"
-      multiple
-      accept="image/*"
-      class="hidden"
-      @change="handleFileChange"
-    />
-
-    <!-- Jika belum ada foto -->
-    <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. 6)</span>
-    </label>
-
-    <!-- Jika sudah ada foto -->
-    <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>
-
-      <!-- Tambah foto baru (+) -->
-      <label
-        v-if="previews.length < 6"
-        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>
-
+          <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. 6, 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 < 6"
+                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">
@@ -154,9 +151,9 @@
         </div>
       </div>
     </div>
-  </template>
+</template>
 
-  <script setup>
+<script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -165,26 +162,28 @@ const router = useRouter()
 const form = ref({
   nama_pemesan: '',
   email: '',
-  no_telepon: '',
-  nama_lengkap_pria: '',
-  nama_panggilan_pria: '',
-  nama_bapak_pria: '',
-  nama_ibu_pria: '',
-  instagram_pria: '',
-  facebook_pria: '',
-  twitter_pria: '',
-  nama_lengkap_wanita: '',
-  nama_panggilan_wanita: '',
-  nama_bapak_wanita: '',
-  nama_ibu_wanita: '',
-  instagram_wanita: '',
-  facebook_wanita: '',
-  twitter_wanita: '',
-  rekening1: '',
-  rekening2: '',
-  rekening3: '',
-  cerita_kita: '',
-  link_music: '',
+  no_tlpn: '',
+  form: {
+    nama_lengkap_pria: '',
+    nama_panggilan_pria: '',
+    nama_bapak_pria: '',
+    nama_ibu_pria: '',
+    instagram_pria: '',
+    facebook_pria: '',
+    twitter_pria: '',
+    nama_lengkap_wanita: '',
+    nama_panggilan_wanita: '',
+    nama_bapak_wanita: '',
+    nama_ibu_wanita: '',
+    instagram_wanita: '',
+    facebook_wanita: '',
+    twitter_wanita: '',
+    cerita_kita: '',
+    rekening1: '',
+    rekening2: '',
+    rekening3: '',
+    link_music: ''
+  },
   foto: []
 })
 
@@ -201,11 +200,19 @@ const handleFileChange = (e) => {
   }
 
   files.forEach(file => {
+    // Validate file size (2MB) and type
+    if (file.size > 2 * 1024 * 1024) {
+      alert(`File ${file.name} terlalu besar! Maksimal 2MB.`)
+      return
+    }
+    if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
+      alert(`File ${file.name} harus berupa JPEG atau PNG!`)
+      return
+    }
     form.value.foto.push(file)
     previews.value.push(URL.createObjectURL(file))
   })
 
-  // reset input agar bisa upload lagi file yang sama
   e.target.value = ''
 }
 
@@ -216,28 +223,53 @@ const removeFile = (index) => {
 
 const konfirmasi = async () => {
   try {
-    const data = new FormData()
-    for (const key in form.value) {
-      const value = form.value[key]
-      if (Array.isArray(value)) {
-        // untuk semua foto
-        value.forEach(file => data.append(`${key}[]`, file))
-      } else {
-        data.append(key, value)
-      }
+    // Basic client-side validation
+    if (!form.value.nama_pemesan || !form.value.email || !form.value.no_tlpn) {
+      alert('Harap isi semua kolom wajib (Nama Pemesan, Email, No Telepon)!')
+      return
     }
 
+    const data = new FormData()
+    data.append('nama_pemesan', form.value.nama_pemesan)
+    data.append('email', form.value.email)
+    data.append('no_tlpn', form.value.no_tlpn)
+    data.append('template_slug', 'undangan-pernikahan-premium')
+
+    // Append form fields individually to ensure Laravel receives them as an array
+    for (const [key, value] of Object.entries(form.value.form)) {
+      data.append(`form[${key}]`, value)
+    }
+
+    form.value.foto.forEach((file, index) => {
+      data.append(`foto[${index}]`, file)
+    })
+
+    console.log([...data]) // untuk debugging
+
     const res = await fetch('http://localhost:8000/api/pelanggans', {
       method: 'POST',
       body: data
     })
 
-    if (!res.ok) throw new Error('Gagal mengirim data')
-    alert('Data berhasil disimpan!')
+    const result = await res.json()
+
+    if (!res.ok) {
+      if (res.status === 422) {
+        const errors = result.errors || {}
+        const errorMessages = Object.values(errors).flat().join('\n')
+        throw new Error(errorMessages || result.message || 'Validasi gagal')
+      }
+      if (res.status === 404) {
+        throw new Error(result.message || 'Template tidak ditemukan')
+      }
+      throw new Error(result.message || 'Gagal mengirim data')
+    }
+
+    alert(result.message || 'Data berhasil disimpan!')
     router.push('/')
   } catch (err) {
     console.error(err)
-    alert('Terjadi kesalahan, coba lagi!')
+    alert('Terjadi kesalahan: ' + err.message)
   }
 }