tambahan satuan luas di denah

resources/views/surveyor/components/denah.blade.php

@@ -20,7 +20,7 @@
             <div class="card-header bg-agi-50">
                 <h3 class="card-title">Denah</h3>
                 <div class="flex items-center gap-2">
-                    <a href="{{ route('surveyor.show', ['id' => $permohonan->id ]) }}?form=denah" class="btn btn-xs btn-info">
+                    <a href="{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=denah" class="btn btn-xs btn-info">
                         <i class="ki-filled ki-exit-left"></i> Back
                     </a>
                 </div>
@@ -98,7 +98,7 @@
                                                     </label>
                                                     <input type="text" name="luas_denah[]"
                                                         class="input w-full number-format"
-                                                        value="{{ $denah['luas_denah'] ?? '' }}"
+                                                        value="{{ isset($denah['luas_denah']) ? $denah['luas_denah'] . ' m²' : '' }}" 
                                                         onkeyup="formatNumber(this)">
                                                 </div>
                                             </div>
@@ -191,14 +191,34 @@
                 input.addEventListener('input', function() {
                     formatNumber(this);
                 });
+                input.addEventListener('focus', function() {
+                    if (this.value === 'm²') {
+                        this.setSelectionRange(0, 0); // Kursor di awal
+                    }
+                });
             });
 
+
+
             // Tambah Denah
             document.getElementById('tambahDenah').addEventListener('click', function() {
                 const denahContainer = document.getElementById('denah-container');
                 const newDenah = createDenahElement(denahIndex);
                 denahContainer.appendChild(newDenah);
                 denahIndex++;
+
+                const newInputs = newDenah.querySelectorAll('.number-format');
+                newInputs.forEach(input => {
+                    input.addEventListener('input', function() {
+                        formatNumber(this);
+                    });
+
+                    input.addEventListener('focus', function() {
+                        if (this.value === 'm²') {
+                            this.setSelectionRange(0, 0); // Kursor di awal
+                        }
+                    });
+                });
             });
 
             // Event delegation untuk tombol hapus denah
@@ -303,6 +323,12 @@
         function submitDenah() {
             showLoadingSwal('Mengirim data ke server...');
 
+            document.querySelectorAll('.number-format').forEach(input => {
+                if (input.value.includes('m²')) {
+                    input.value = input.value.replace('m²', '').trim();
+                }
+            });
+
             const formElement = $('#formDenah')[0];
             const formData = new FormData(formElement);
 

resources/views/surveyor/js/utils.blade.php

@@ -26,18 +26,27 @@
     }
 
 
-
     function formatNumber(input) {
-        let value = input.value.replace(/[^\d.]/g, '');
+    // Ambil posisi kursor saat ini
-        input.value = value;
+    const cursorPosition = input.selectionStart;
-    }
+
+    // Ambil nilai input tanpa "m²" dan karakter non-angka
+    let value = input.value.replace(/[^\d]/g, '');
+
+    // Update nilai input dengan format angka dan "m²"
+    input.value = value ? value + ' m²' : 'm²';
+
+    // Atur posisi kursor di depan "m²"
+    input.setSelectionRange(cursorPosition, cursorPosition);
+}
+
 
 
     function formatCurrency(value, isDiskon = false) {
     // Ensure the value is a valid number
     const numericValue = parseFloat(value);
     if (isNaN(numericValue)) {
-        return 0; 
+        return 0;
     }
 
     // Format the number with commas for thousands separators