From ee079a8aa84a137494c1a50dda489a0e1c26f6d2 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 11 Sep 2025 09:44:35 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(surveyor):=20perbaiki=20fung?=
 =?UTF-8?q?si=20calculateTotalLuas=20untuk=20mendukung=20format=20koma=20d?=
 =?UTF-8?q?esimal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Menambahkan logika menghapus format ribuan (titik) sebelum perhitungan luas.
- Mengonversi koma menjadi titik untuk parsing **float** dengan benar.
- Menggunakan **toLocaleString('id-ID')** untuk hasil sesuai format Indonesia.
- Mendukung input angka dengan format Indonesia dan internasional.
---
 .../views/surveyor/components/denah.blade.php | 94 +++++++++++--------
 1 file changed, 55 insertions(+), 39 deletions(-)

diff --git a/resources/views/surveyor/components/denah.blade.php b/resources/views/surveyor/components/denah.blade.php
index deb149d..88bfad9 100644
--- a/resources/views/surveyor/components/denah.blade.php
+++ b/resources/views/surveyor/components/denah.blade.php
@@ -15,11 +15,11 @@
     </style>
 
     @include('lpj::assetsku.includenya')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
-        <div class="card border border-agi-100 min-w-full">
+    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
+        <div class="min-w-full border card border-agi-100">
             <div class="card-header bg-agi-50">
                 <h3 class="card-title">Denah</h3>
-                <div class="flex items-center gap-2">
+                <div class="flex gap-2 items-center">
                     <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>
@@ -41,13 +41,13 @@
                     <div id="denah-container">
                         @if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
                             @foreach ($formDenah['denahs'] as $index => $denah)
-                                <div class="denah-item grid gap-5 mb-5 border p-4 rounded">
+                                <div class="grid gap-5 p-4 mb-5 rounded border denah-item">
                                     <div class="flex flex-wrap gap-4">
-                                        <div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
+                                        <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                                             <label class="form-label max-w-56">
                                                 <span class="form-label">Upload Denah (Foto/PDF)</span>
                                             </label>
-                                            <div class="w-full grid gap-5">
+                                            <div class="grid gap-5 w-full">
                                                 <!-- Preview Container -->
                                                 <div class="preview-container-{{ $index }}">
                                                     @if (isset($denah['foto_denah']))
@@ -68,9 +68,9 @@
                                                     @endif
                                                 </div>
 
-                                                <div class="input-group w-full flex gap-2">
+                                                <div class="flex gap-2 w-full input-group">
                                                     <input type="file" name="foto_denah[]"
-                                                        class="file-input file-input-bordered w-full"
+                                                        class="w-full file-input file-input-bordered"
                                                         data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
                                                         onchange="previewFile(this)">
                                                 </div>
@@ -78,26 +78,26 @@
                                         </div>
                                     </div>
 
-                                    <div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
+                                    <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                                         <div class="w-full">
                                             <div class="flex flex-wrap gap-4">
-                                                <div class="flex w-full items-center justify-center gap-4">
+                                                <div class="flex gap-4 justify-center items-center w-full">
                                                     <label class="form-label max-w-56">
                                                         <span class="form-label">Nama Denah</span>
                                                     </label>
-                                                    <input type="text" name="nama_denah[]" class="input w-full"
+                                                    <input type="text" name="nama_denah[]" class="w-full input"
                                                         value="{{ $denah['nama_denah'] ?? '' }}">
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="w-full">
                                             <div class="flex flex-wrap gap-4">
-                                                <div class="flex w-full items-center justify-center gap-4">
+                                                <div class="flex gap-4 justify-center items-center w-full">
                                                     <label class="form-label max-w-56">
                                                         <span class="form-label"> Luas</span>
                                                     </label>
                                                     <input type="text" name="luas_denah[]"
-                                                        class="input w-full number-format"
+                                                        class="w-full input number-format"
                                                         value="{{ isset($denah['luas_denah']) ? $denah['luas_denah'] . ' m²' : '' }}"
                                                         onkeyup="formatNumber(this)">
                                                 </div>
@@ -115,45 +115,45 @@
                             @endforeach
                         @else
                             <!-- Tambahkan satu elemen default jika tidak ada data -->
-                            <div class="denah-item grid gap-5 mb-5 border p-4 rounded">
+                            <div class="grid gap-5 p-4 mb-5 rounded border denah-item">
                                 <!-- Isi dengan elemen default seperti sebelumnya -->
                                 <div class="flex flex-wrap gap-4">
-                                    <div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
+                                    <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                                         <label class="form-label max-w-56">
                                             <span class="form-label">Upload Denah (Foto/PDF)</span>
                                         </label>
-                                        <div class="w-full grid gap-5">
+                                        <div class="grid gap-5 w-full">
                                             <div class="preview-container-0">
                                                 <!-- Preview akan ditampilkan di sini -->
                                             </div>
 
-                                            <div class="input-group w-full flex gap-2">
+                                            <div class="flex gap-2 w-full input-group">
                                                 <input type="file" name="foto_denah[]"
-                                                    class="file-input file-input-bordered w-full" data-index="0"
+                                                    class="w-full file-input file-input-bordered" data-index="0"
                                                     accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
 
-                                <div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
+                                <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                                     <div class="w-full">
                                         <div class="flex flex-wrap gap-4">
-                                            <div class="flex w-full items-center justify-center gap-4">
+                                            <div class="flex gap-4 justify-center items-center w-full">
                                                 <label class="form-label max-w-56">
                                                     <span class="form-label">Nama Denah</span>
                                                 </label>
-                                                <input type="text" name="nama_denah[]" class="input w-full">
+                                                <input type="text" name="nama_denah[]" class="w-full input">
                                             </div>
                                         </div>
                                     </div>
                                     <div class="w-full">
                                         <div class="flex flex-wrap gap-4">
-                                            <div class="flex w-full items-center justify-center gap-4">
+                                            <div class="flex gap-4 justify-center items-center w-full">
                                                 <label class="form-label max-w-56">
                                                     <span class="form-label"> Luas</span>
                                                 </label>
-                                                <input type="text" name="luas_denah[]" class="input w-full number-format"
+                                                <input type="text" name="luas_denah[]" class="w-full input number-format"
                                                     onkeyup="formatNumber(this)">
                                             </div>
                                         </div>
@@ -164,18 +164,19 @@
                     </div>
 
 
-                    <div class="w-full p-4">
+                    <div class="p-4 w-full">
                         <div class="flex flex-wrap gap-4">
-                            <div class="flex w-full items-center justify-center gap-4">
+                            <div class="flex gap-4 justify-center items-center w-full">
                                 <label class="form-label max-w-56">
                                     <span class="form-label">Total Luas</span>
                                 </label>
-                                <input type="text" name="total_luas" id="totalLuas" class="input w-full number-format" readonly>
+                                <input type="text" name="total_luas" id="totalLuas"
+                                    class="w-full input number-format" readonly>
 
                             </div>
                         </div>
                     </div>
-                    <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
+                    <div class="flex gap-2 justify-end" style="margin-right: 20px; margin-top: 20px">
                         <button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
                             <span id="saveButtonText">Save</span>
                         </button>
@@ -240,23 +241,38 @@
             });
         });
 
+        /**
+         * Menghitung total luas dari semua input denah
+         * Mendukung format angka dengan koma sebagai pemisah desimal
+         * dan menghapus format ribuan (titik) sebelum perhitungan
+         */
         function calculateTotalLuas() {
             let totalLuas = 0;
 
             const luasInputs = document.querySelectorAll('input[name="luas_denah[]"]');
             luasInputs.forEach(input => {
-                const value = parseFloat(input.value.replace(/[^0-9.]/g, ''));
+                // Hapus format ribuan (titik) dan spasi
+                let cleanValue = input.value.replace(/\./g, '').replace(/\s/g, '');
+
+                // Ganti koma dengan titik untuk desimal
+                cleanValue = cleanValue.replace(',', '.');
+
+                // Parse ke float
+                const value = parseFloat(cleanValue);
                 if (!isNaN(value)) {
                     totalLuas += value;
                 }
             });
 
             const totalLuasInput = document.getElementById('totalLuas');
-            totalLuasInput.value = totalLuas ? `${totalLuas.toLocaleString()} m²` : '';
+            totalLuasInput.value = totalLuas ? `${totalLuas.toLocaleString('id-ID')} m²` : '';
+
+            // Log untuk debugging
+            console.log('Total luas dihitung:', totalLuas);
         }
 
         // Tambahkan event listener untuk setiap input luas_denah[]
-        document.addEventListener('input', function (e) {
+        document.addEventListener('input', function(e) {
             if (e.target && e.target.name === 'luas_denah[]') {
                 calculateTotalLuas();
             }
@@ -271,17 +287,17 @@
             denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
             denahItem.innerHTML = `
             <div class="flex flex-wrap gap-4">
-                <div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
+                <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                     <label class="form-label max-w-56">
                         <span class="form-label">Upload Denah (Foto/PDF)</span>
                     </label>
-                    <div class="w-full grid gap-5">
+                    <div class="grid gap-5 w-full">
                         <div class="preview-container-${index}">
                             <!-- Preview akan ditampilkan di sini -->
                         </div>
-                        <div class="input-group w-full flex gap-2">
+                        <div class="flex gap-2 w-full input-group">
                             <input type="file" name="foto_denah[]"
-                                class="file-input file-input-bordered w-full"
+                                class="w-full file-input file-input-bordered"
                                 data-index="${index}"
                                 accept=".jpg,.jpeg,.png,.pdf"
                                 onchange="previewFile(this)">
@@ -289,25 +305,25 @@
                     </div>
                 </div>
             </div>
-            <div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
+            <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                 <div class="w-full">
                     <div class="flex flex-wrap gap-4">
-                        <div class="flex w-full items-center justify-center gap-4">
+                        <div class="flex gap-4 justify-center items-center w-full">
                             <label class="form-label max-w-56">
                                 <span class="form-label">Nama Denah</span>
                             </label>
-                            <input type="text" name="nama_denah[]" class="input w-full">
+                            <input type="text" name="nama_denah[]" class="w-full input">
                         </div>
                     </div>
                 </div>
                 <div class="w-full">
                     <div class="flex flex-wrap gap-4">
-                        <div class="flex w-full items-center justify-center gap-4">
+                        <div class="flex gap-4 justify-center items-center w-full">
                             <label class="form-label max-w-56">
                                 <span class="form-label"> Luas</span>
                             </label>
                             <input type="text" name="luas_denah[]"
-                                class="input w-full number-format"
+                                class="w-full input number-format"
                                 onkeyup="formatNumber(this)">
                         </div>
                     </div>