feat: add dynamic form

Views/Transaksi/Nasabah/Index.cshtml

@@ -58,14 +58,17 @@
 
                 <div class="divider"></div>
 
-                <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4">
+                <div id="sampahFields" class="flex flex-col gap-4"></div>
+
+                <template id="jenisSampahRowTemplate">
+                    <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end sampah-row">
                         <div class="flex flex-col">
                             <fieldset class="fieldset">
                                 <legend class="fieldset-legend">
                                     Jenis Sampah
                                     <span class="text-red-500">*</span>
                                 </legend>
-                            <select id="jenis_sampah" class="select w-full" required>
+                                <select name="jenis_sampah[]" class="select w-full" required>
                                     <option value="" disabled selected>Pilih Jenis Sampah</option>
                                 </select>
                             </fieldset>
@@ -77,17 +80,18 @@
                                     Berat Sampah (Kg)
                                     <span class="text-red-500">*</span>
                                 </legend>
-                            <select id="jenis_sampah" class="select w-full" required>
+                                <input type="number" name="berat_sampah[]" class="input w-full" placeholder="Masukkan Berat Sampah" min="0" step="0.01" required />
-                                <option value="" disabled selected>Pilih Jenis Sampah</option>
-                            </select>
                             </fieldset>
                         </div>
 
-                    <a href="#" class="mt-8 btn btn-circle btn-error delete text-white justify-self-end"><i class="ph ph-trash"></i></a>
+                        <button type="button" class="mt-8 btn btn-circle btn-error text-white justify-self-end btn-remove-sampah" onclick="removeSampahRow(this)">
+                            <i class="ph ph-trash"></i>
+                        </button>
                     </div>
+                </template>
 
                 <div class="flex justify-end items-center">
-                    <button type="button" class="btn btn-sm rounded-full bg-white">
+                    <button type="button" class="btn btn-sm rounded-full bg-white" onclick="addSampahRow()">
                         Tambah Jenis Sampah
                         <i class="ph ph-plus"></i>
                     </button>
@@ -206,10 +210,14 @@
 
             // Populate form with row data
             $('#nama').val(row.nama);
+            setSampahRows(row && row.detail_sampah ? row.detail_sampah : []);
 
             // Open modal
             modal_tambah.showModal();
         });
+
+        // initialize dynamic sampah fields
+        setSampahRows();
     });
 
     function closeModal() {
@@ -217,6 +225,7 @@
         $('#formTambah')[0].reset();
         $('#edit_mode').val('false');
         $('#modal_title').text('Tambah Fasilitas');
+        setSampahRows();
 
         // Close modal
         modal_tambah.close();
@@ -244,5 +253,65 @@
             table.ajax.reload();
         });
     }
+
+    function setSampahRows(items) {
+        var container = document.getElementById('sampahFields');
+        if (!container) return;
+        container.innerHTML = '';
+
+        if (items && items.length) {
+            items.forEach(function (item) { addSampahRow(item); });
+        } else {
+            addSampahRow();
+        }
+    }
+
+    function addSampahRow(data) {
+        var template = document.getElementById('jenisSampahRowTemplate');
+        var container = document.getElementById('sampahFields');
+        if (!template || !container) return;
+
+        var clone = template.content.firstElementChild.cloneNode(true);
+        var jenisSelect = clone.querySelector('select[name="jenis_sampah[]"]');
+        var beratInput = clone.querySelector('input[name="berat_sampah[]"]');
+
+        if (data && jenisSelect) {
+            var jenisValue = data.jenis_sampah_id || data.jenis_sampah;
+            if (jenisValue) jenisSelect.value = jenisValue;
+        }
+
+        if (data && beratInput && (data.berat !== undefined || data.jumlah_berat !== undefined)) {
+            beratInput.value = data.berat || data.jumlah_berat;
+        }
+
+        container.appendChild(clone);
+        updateSampahRemoveButtons();
+    }
+
+    function removeSampahRow(button) {
+        var container = document.getElementById('sampahFields');
+        if (!container) return;
+
+        var row = button.closest('.sampah-row');
+        if (row) {
+            row.remove();
+            updateSampahRemoveButtons();
+        }
+    }
+
+    function updateSampahRemoveButtons() {
+        var container = document.getElementById('sampahFields');
+        if (!container) return;
+
+        var rows = container.querySelectorAll('.sampah-row');
+        var disableRemove = rows.length <= 1;
+
+        rows.forEach(function (row) {
+            var btn = row.querySelector('.btn-remove-sampah');
+            if (!btn) return;
+            btn.disabled = disableRemove;
+            btn.classList.toggle('btn-disabled', disableRemove);
+        });
+    }
 </script>
 }