Add support for multiple detail sertifikat

Enhanced the request validation, model, and Blade template to support multiple detail sertifikat entries, which are now encoded in JSON format. Additionally, added a dynamic form for entry, including delete functionality for each sertifikat entry.

app/Http/Controllers/PemilikJaminanController.php

@@ -63,6 +63,7 @@
         public function update(PemilikJaminanRequest $request, $id, $pemilik)
         {
             $validate = $request->validated();
+
             if ($validate) {
                 try {
                     $pemilik = PemilikJaminan::find($pemilik);
@@ -88,6 +89,7 @@
             $districts       = District::where('city_code', $pemilik->city_code)->get();
             $villages        = Village::where('district_code', $pemilik->district_code)->get();
             $hubunganPemilik = HubunganPemilikJaminan::all();
+            $detailSertifikat = $pemilik->detail_sertifikat;
 
             return view(
                 'lpj::pemilik_jaminan.form',
@@ -99,6 +101,7 @@
                     'villages',
                     'hubunganPemilik',
                     'pemilik',
+                    'detailSertifikat'
                 ),
             );
         }

app/Http/Requests/PemilikJaminanRequest.php

@@ -26,6 +26,7 @@
                 'address'                     => 'nullable|string',
                 'postal_code'                 => 'nullable|string|max:10',
                 'status'                      => 'nullable|boolean',
+                'detail_sertifikat'           => 'nullable|string|max:255',
             ];
 
             //$rules['nomor_id'] = 'nullable|max:16|unique:pemilik_jaminan,nomor_id,debiture_id,' . $this->debiture_id;
@@ -41,4 +42,26 @@
         {
             return true;
         }
+
+        public function prepareForValidation() {
+
+            $detailSertifikat = [];
+            $names = $this->input('detail_sertifikat.name', []);
+            $nomorIds = $this->input('detail_sertifikat.nomor_id', []);
+
+            foreach ($names as $index => $name) {
+                if (isset($nomorIds[$index])) {
+                    $detailSertifikat[] = [
+                        'name' => $name,
+                        'nomor_id' => $nomorIds[$index]
+                    ];
+                }
+            }
+
+            $this->merge([
+                'detail_sertifikat' => json_encode($detailSertifikat),
+            ]);
+
+
+        }
     }

app/Models/PemilikJaminan.php

@@ -30,7 +30,8 @@ class PemilikJaminan extends Base
         'status',
         'authorized_at',
         'authorized_status',
-        'authorized_by'
+        'authorized_by',
+        'detail_sertifikat',
     ];
 
     public function province()

resources/views/pemilik_jaminan/form.blade.php

@@ -79,7 +79,7 @@
                                     @enderror
                                 </div>
                                 <div class="flex flex-wrap items-baseline w-full">
-                                    <input class="input  @error('nomor_id') border-danger bg-danger-light @enderror" type="number" name="nomor_id" value="{{ $debitur->nomor_id ?? '' }}" placeholder="Nomor ID/KTP">
+                                    <input class="input  @error('nomor_id') border-danger bg-danger-light @enderror" type="number" name="nomor_id" value="{{ $pemilik->nomor_id ?? '' }}" placeholder="Nomor ID/KTP">
                                     @error('nomor_id')
                                     <em class="alert text-danger text-sm">{{ $message }}</em>
                                     @enderror
@@ -88,7 +88,28 @@
                         </div>
                     </div>
                     <div id="nama_sertifikat">
+                        @if(isset($detailSertifikat))
+                           @foreach(json_decode($detailSertifikat) as $sertifikat)
+                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5">
+                                    <label class="form-label max-w-56">
+                                        Nama Lengkap
+                                    </label>
+                                    <div class="flex flex-wrap items-baseline w-full">
+                                        <div class="flex flex-col lg:flex-row gap-2 w-full">
+                                            <div class="flex flex-wrap items-baseline w-full">
+                                                <input class="input" type="text" id="name" name="detail_sertifikat[name][]" value="{{ $sertifikat->name }}" placeholder="Nama Pemilik Jaminan">
 
+                                            </div>
+                                            <div class="flex flex-wrap items-baseline w-full">
+                                                <input class="input" type="number" name="detail_sertifikat[nomor_id][]" value="{{ $sertifikat->nomor_id }}" placeholder="Nomor ID/KTP">
+
+                                            </div>
+                                            <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            @endforeach
+                        @endif
                     </div>
                     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                         <label class="form-label max-w-56">
@@ -253,41 +274,46 @@
     </div>
 @endsection
 
-
 @push('scripts')
     <script>
-        document.getElementById('tambah_sertifikat').addEventListener('click', function() {
+        document.addEventListener("DOMContentLoaded", function() {
-            const namaSertifikatDiv = document.getElementById('nama_sertifikat');
+            const namaSertifikatDiv = document.getElementById("nama_sertifikat");
-            const newDiv = document.createElement('div');
-            newDiv.innerHTML = `
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5">
-                <label class="form-label max-w-56">
-                    Nama Lengkap
-                </label>
-                <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col lg:flex-row gap-2 w-full">
-                        <div class="flex flex-wrap items-baseline w-full">
-                            <input class="input  @error('name') border-danger bg-danger-light @enderror" type="text" id="name" name="name[]" value="" placeholder="Nama Pemilik Jaminan">
-                            @error('name')
-            <em class="alert text-danger text-sm">{{ $message }}</em>
-                            @enderror
-            </div>
-            <div class="flex flex-wrap items-baseline w-full">
-                <input class="input  @error('nomor_id') border-danger bg-danger-light @enderror" type="number" name="nomor_id[]" value="" placeholder="Nomor ID/KTP">
-                            @error('nomor_id')
-            <em class="alert text-danger text-sm">{{ $message }}</em>
-                            @enderror
-            </div>
-            <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
-        </div>
-    </div>
-</div>
-`;
-            namaSertifikatDiv.appendChild(newDiv);
 
-            // Event listener untuk tombol hapus
+            // Function to add delete event listeners to existing buttons
-            newDiv.querySelector('.delete-button').addEventListener('click', function() {
+            function addDeleteListeners() {
-                namaSertifikatDiv.removeChild(newDiv);
+                document.querySelectorAll(".delete-button").forEach(button => {
+                    button.addEventListener("click", function() {
+                        this.closest(".flex.items-baseline.flex-wrap.lg\\:flex-nowrap.gap-2\\.5.mb-5").remove();
+                    });
+                });
+            }
+
+            // Add delete listeners to existing buttons
+            addDeleteListeners();
+
+            document.getElementById("tambah_sertifikat").addEventListener("click", function() {
+                const newDiv = document.createElement("div");
+                newDiv.className = "flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5";
+                newDiv.innerHTML = `
+                    <label class="form-label max-w-56">
+                        Nama Lengkap
+                    </label>
+                    <div class="flex flex-wrap items-baseline w-full">
+                        <div class="flex flex-col lg:flex-row gap-2 w-full">
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input" type="text" name="detail_sertifikat[name][]" value="" placeholder="Nama Pemilik Jaminan">
+                            </div>
+                            <div class="flex flex-wrap items-baseline w-full">
+                                <input class="input" type="number" name="detail_sertifikat[nomor_id][]" value="" placeholder="Nomor ID/KTP">
+                            </div>
+                            <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
+                        </div>
+                    </div>
+                `;
+                namaSertifikatDiv.appendChild(newDiv);
+
+                // Add delete listener to the new button
+                addDeleteListeners();
             });
         });
     </script>