From 1eb26b5d4316a0f084545274d6a602b3e26650f4 Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Mon, 24 Nov 2025 23:11:51 +0700
Subject: [PATCH] feat: optimize component

---
 Views/Transaksi/Bsi/Index.cshtml | 45 ++++++++++----------------------
 1 file changed, 14 insertions(+), 31 deletions(-)

diff --git a/Views/Transaksi/Bsi/Index.cshtml b/Views/Transaksi/Bsi/Index.cshtml
index 7aa18f6..7dee4c4 100644
--- a/Views/Transaksi/Bsi/Index.cshtml
+++ b/Views/Transaksi/Bsi/Index.cshtml
@@ -23,7 +23,7 @@
         <h3 id="modal_title" class="text-gray-900 text-xl font-semibold font-['Plus_Jakarta_Sans'] leading-8 mb-8">Tambah Transaksi BSI</h3>
         <form id="formTambah" onsubmit="submitForm(event)">
             <input type="hidden" id="edit_mode" value="false">
-            <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-3">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                     <div class="flex flex-col">
                         <fieldset class="fieldset">
@@ -49,7 +49,7 @@
 
                 <div class="divider"></div>
                 <div class="flex flex-col gap-2" id="jenis_sampah_container">
-                    <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4">
+                    <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4" id="template_jenis_sampah_row">
                         <div class="flex flex-col">
                             <fieldset class="fieldset">
                                 <legend class="fieldset-legend">
@@ -78,7 +78,7 @@
                     </div>
                 </div>    
 
-                <div class="flex justify-end items-center">
+                <div class="flex justify-end items-center mt-2 mb-4">
                     <button type="button" class="btn btn-sm rounded-full bg-white" id="tambah_jenis_sampah">
                         Tambah Jenis Sampah
                         <i class="ph ph-plus"></i>
@@ -243,36 +243,19 @@
 
             index++;
 
-            let newRow = `
-            <div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4 jenis_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_${index}" class="select w-full jenis_sampah_select" required>
-                            <option value="" disabled selected>Pilih Jenis Sampah</option>
-                        </select>
-                    </fieldset>
-                </div>
+            // Clone row template
+            let newRow = $("#template_jenis_sampah_row")
+                .clone()
+                .removeAttr("id")           // hapus id template
+                .addClass("jenis_sampah_row");
 
-                <div class="flex flex-col">
-                    <fieldset class="fieldset">
-                        <legend class="fieldset-legend">
-                            Berat Sampah (Kg)
-                            <span class="text-red-500">*</span>
-                        </legend>
-                        <input id="berat_sampah_${index}" type="number" step="0.1" class="input input-bordered w-full" placeholder="0.0" required />
-                    </fieldset>
-                </div>
+            // Update ID duplikat pada select
+            newRow.find("select[id='jenis_sampah']").each(function (i) {
+                let newId = "jenis_sampah_" + index + "_" + (i + 1);
+                $(this).attr("id", newId);
+            });
 
-                <a href="#" class="mt-8 btn btn-circle btn-error text-white justify-self-end delete-row">
-                    <i class="ph ph-trash"></i>
-                </a>
-            </div>`;
-            
-            // Tambahkan row ke dalam container
+            // Append ke container
             $("#jenis_sampah_container").append(newRow);
         });