From aee8fab832bce17eae999c661cc5d464b5c80712 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 4 Dec 2025 11:20:37 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8F=20feat(ui):=20Tambah=20auto-suffix?=
 =?UTF-8?q?=20m/km=20pada=20input=20jarak=20lingkungan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Menambahkan class measure-input dan atribut data-unit pada:
  - jarak_jalan_utama (km)
  - jarak_cbd_point (km)
- Menambahkan script untuk:
  - Membatasi input hanya angka dan koma
  - Menghapus suffix saat fokus dan input
  - Menambahkan suffix otomatis saat blur
  - Menghapus suffix saat submit agar backend menerima angka bersih
- Menyediakan cara mengubah unit ke 'm' dengan mengganti data-unit pada input
---
 .../components/analisa/lingkungan.blade.php   |   6 +-
 .../surveyor/components/lingkungan.blade.php  | 183 +++++++++++-------
 2 files changed, 113 insertions(+), 76 deletions(-)

diff --git a/resources/views/penilai/components/analisa/lingkungan.blade.php b/resources/views/penilai/components/analisa/lingkungan.blade.php
index 71d8e14..3ad36be 100644
--- a/resources/views/penilai/components/analisa/lingkungan.blade.php
+++ b/resources/views/penilai/components/analisa/lingkungan.blade.php
@@ -10,14 +10,14 @@
 <table style="width: 100%">
     @php
         $lingkungan = $forminspeksi['lingkungan'];
+
         $fasilitas = $lingkungan['fasilitas_dekat_object'] ?? [];
         $fasilitasInput = $lingkungan['fasilitas_dekat_object_input'] ?? [];
     @endphp
-
     <tr>
         <td style=" width:25%; padding: 2px; vertical-align: top;">Jarak Jalan Utama</td>
         <td style=" width:1%; padding: 2px; vertical-align: top;">:</td>
-        <td style="padding: 2px; vertical-align: top;">{{ $lingkungan['jarak_jalan_utama'] ?? '-' }} m</td>
+        <td style="padding: 2px; vertical-align: top;">{{ $lingkungan['jarak_jalan_utama'] ?? '-' }}</td>
     </tr>
     <tr>
         <td style="padding: 2px; vertical-align: top;">Jalan Lingkungan</td>
@@ -33,7 +33,7 @@
     <tr>
         <td style="padding: 2px; vertical-align: top;">Lebar Perkerasan Jalan</td>
         <td style="padding: 2px; vertical-align: top;">:</td>
-        <td style="padding: 2px; vertical-align: top;">{{ $lingkungan['lebar_perkerasan_jalan'] ?? '-' }} m</td>
+        <td style="padding: 2px; vertical-align: top;">{{ $lingkungan['lebar_perkerasan_jalan'] ?? '-' }}</td>
     </tr>
     {{-- mulai --}}
     <tr>
diff --git a/resources/views/surveyor/components/lingkungan.blade.php b/resources/views/surveyor/components/lingkungan.blade.php
index e6e7a31..ff104c0 100644
--- a/resources/views/surveyor/components/lingkungan.blade.php
+++ b/resources/views/surveyor/components/lingkungan.blade.php
@@ -1,38 +1,38 @@
-<div class="card border border-agi-100 w-full  rounded-lg shadow-md  overflow-hidden">
+<div class="overflow-hidden w-full rounded-lg border shadow-md card border-agi-100">
     <div class="card-header light:bg-agi-50">
-        <h3 class="card-title uppercase">
+        <h3 class="uppercase card-title">
             Analisa Lingkungan
         </h3>
     </div>
     <div class="card-body">
         <div class="grid gap-5">
             <!-- Jarak dari Objek Utama -->
-            <div class=" rounded-lg">
+            <div class="rounded-lg">
                 <div class="grid grid-cols-2 gap-5">
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Jarak Dari Jalan
                             Utama</label>
-                        <input type="text" class="input mt-2" name="jarak_jalan_utama" placeholder="Km"
+                        <input type="text" class="mt-2 input measure-input" data-unit="km" name="jarak_jalan_utama" placeholder="Km"
                             value="{{ old('jarak_jalan_utama', isset($forminspeksi['lingkungan']['jarak_jalan_utama']) ? $forminspeksi['lingkungan']['jarak_jalan_utama'] : '') }}">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Jalan</label>
-                        <input type="text" name="jalan_linkungan" class="input mt-2"
+                        <input type="text" name="jalan_linkungan" class="mt-2 input"
                             placeholder="Masukkan Nama Jalan"
                             value="{{ old('jalan_linkungan', isset($forminspeksi['lingkungan']['jalan_linkungan']) ? $forminspeksi['lingkungan']['jalan_linkungan'] : '') }}">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Jarak ke CBD Point</label>
-                        <input type="text" class="input mt-2" name="jarak_cbd_point" placeholder="Masukkan Jarak ke CBD Point"
+                        <input type="text" class="mt-2 input measure-input" data-unit="km" name="jarak_cbd_point" placeholder="Masukkan Jarak ke CBD Point"
                             value="{{ old('jarak_cbd_point', isset($forminspeksi['lingkungan']['jarak_cbd_point']) ? $forminspeksi['lingkungan']['jarak_cbd_point'] : '') }}">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Nama CBD Point</label>
-                        <input type="text" class="input mt-2" name="nama_cbd_point" placeholder="Masukkan Nama CBD Point"
+                        <input type="text" class="mt-2 input" name="nama_cbd_point" placeholder="Masukkan Nama CBD Point"
                             value="{{ old('nama_cbd_point', isset($forminspeksi['lingkungan']['nama_cbd_point']) ? $forminspeksi['lingkungan']['nama_cbd_point'] : '') }}">
                     </div>
                 </div>
-                <div class="w-full mt-4">
+                <div class="mt-4 w-full">
                     <label class="block text-sm font-medium text-gray-700">Lebar Perkerasan Jalan Depan objek</label>
                     @php
                         $lebarPerkerasanJalan = old(
@@ -40,16 +40,16 @@
                             $forminspeksi['lingkungan']['lebar_perkerasan_jalan'] ?? '',
                         );
                     @endphp
-                    <input type="text" name="lebar_perkerasan_jalan" class="input mt-2" placeholder="Masukkan Lebar Perkerasan Jalan"
+                    <input type="text" name="lebar_perkerasan_jalan" class="mt-2 input measure-input"  data-unit="m" placeholder="Masukkan Lebar Perkerasan Jalan"
                         value="{{ $lebarPerkerasanJalan }}">
                 </div>
 
             </div>
 
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Perkerasan Jalan</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['perkerasanJalan']))
                             @foreach ($basicData['perkerasanJalan'] as $item)
                                 @php
@@ -60,7 +60,7 @@
                                             : [],
                                     );
                                 @endphp
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="perkerasan_jalan[]" type="checkbox"
                                         value="{{ $item->name }}" {{ $isChecked ? 'checked' : '' }}
                                         onclick="toggleCheckboxVisibility('perkerasan_jalan', 'perkerasan_jalan_lainnya', ['lainnya'])" />
@@ -79,25 +79,25 @@
                                     @endphp
                                     <input id="perkerasan_jalan_lainnya" type="text"
                                         style="{{ isset($forminspeksi['lingkungan']['perkerasan_jalan']['lainnya']) && $forminspeksi['lingkungan']['perkerasan_jalan']['lainnya'] ? '' : 'display: none' }}"
-                                        name="perkerasan_jalan_lainnya" class="input w-full mt-2"
+                                        name="perkerasan_jalan_lainnya" class="mt-2 w-full input"
                                         value="{{ $lainnyaValue }}" placeholder="Masukkan lainnya..." />
                                 @endif
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-perkerasan-jalan" class="alert text-danger text-sm"></em>
+                    <em id="error-perkerasan-jalan" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
 
             <!-- Lalulintas -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Lalu Lintas Depan Lokasi</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['laluLintasLokasi']))
                             @foreach ($basicData['laluLintasLokasi'] as $item)
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="lalu_lintas[]" type="checkbox"
                                         value="{{ $item->name }}"
                                         {{ isset($forminspeksi['lingkungan']['lalu_lintas']) && in_array($item->name, explode(',', is_array(old('lalu_lintas', $forminspeksi['lingkungan']['lalu_lintas'] ?? '')) ? implode(',', old('lalu_lintas', $forminspeksi['lingkungan']['lalu_lintas'] ?? '')) : old('lalu_lintas', $forminspeksi['lingkungan']['lalu_lintas'] ?? ''))) ? 'checked' : '' }} />
@@ -108,17 +108,17 @@
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-lalu-lintas" class="alert text-danger text-sm"></em>
+                    <em id="error-lalu-lintas" class="text-sm alert text-danger"></em>
                 </div>
             </div>
             <!-- Golongan Hidup Sekitar -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Golongan Masyarakat Sekitar</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['golMasySekitar']))
                             @foreach ($basicData['golMasySekitar'] as $item)
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="gol_mas_sekitar[]" type="checkbox"
                                         value="{{ $item->name }}"
                                         {{ isset($forminspeksi['lingkungan']['gol_mas_sekitar']) && in_array($item->name, explode(',', is_array(old('gol_mas_sekitar', $forminspeksi['lingkungan']['gol_mas_sekitar'] ?? '')) ? implode(',', old('gol_mas_sekitar', $forminspeksi['lingkungan']['gol_mas_sekitar'] ?? '')) : old('gol_mas_sekitar', $forminspeksi['lingkungan']['gol_mas_sekitar'] ?? ''))) ? 'checked' : '' }} />
@@ -128,18 +128,18 @@
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-gol_mas_sekitar" class="alert text-danger text-sm"></em>
+                    <em id="error-gol_mas_sekitar" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
             <!-- Tingkat Keramaian -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Tingkat Keramaian</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['tingkatKeramaian']))
                             @foreach ($basicData['tingkatKeramaian'] as $item)
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="tingkat_keramaian[]" type="checkbox"
                                         value="{{ $item->name }}"
                                         {{ isset($forminspeksi['lingkungan']['tingkat_keramaian']) && in_array($item->name, explode(',', is_array(old('tingkat_keramaian', $forminspeksi['lingkungan']['tingkat_keramaian'] ?? '')) ? implode(',', old('tingkat_keramaian', $forminspeksi['lingkungan']['tingkat_keramaian'] ?? '')) : old('tingkat_keramaian', $forminspeksi['lingkungan']['tingkat_keramaian'] ?? ''))) ? 'checked' : '' }} />
@@ -149,18 +149,18 @@
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-tingkat_keramaian" class="alert text-danger text-sm"></em>
+                    <em id="error-tingkat_keramaian" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
             <!-- Terletak Di Area -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Terletak Di Area</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['terletakDiArea']))
                             @foreach ($basicData['terletakDiArea'] as $item)
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="terletak_diarea[]" type="checkbox"
                                         value="{{ $item->name }}"
                                         {{ isset($forminspeksi['lingkungan']['terletak_diarea']['terletak_diarea']) && in_array($item->name, explode(',', is_array(old('terletak_diarea', $forminspeksi['lingkungan']['terletak_diarea']['terletak_diarea'] ?? '')) ? implode(',', old('terletak_diarea', $forminspeksi['lingkungan']['terletak_diarea']['terletak_diarea'] ?? '')) : old('terletak_diarea', $forminspeksi['lingkungan']['terletak_diarea'] ?? ''))) ? 'checked' : '' }}
@@ -179,32 +179,32 @@
                                     @endphp
                                     <input id="terletak_diarea_lainnya" type="text"
                                         style="{{ isset($forminspeksi['lingkungan']['terletak_diarea']['lainnya']) && $forminspeksi['lingkungan']['terletak_diarea']['lainnya'] ? '' : 'display: none' }}"
-                                        name="terletak_diarea_lainnya" class="input w-full mt-2"
+                                        name="terletak_diarea_lainnya" class="mt-2 w-full input"
                                         value="{{ $lainnyaValue }}" placeholder="Masukkan lainnya..." />
                                 @endif
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-terletak_diarea" class="alert text-danger text-sm"></em>
+                    <em id="error-terletak_diarea" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
             <!-- Disekitar Lokasi -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Disekitar Lokasi</label>
                 <div class="flex flex-wrap items-baseline w-full">
                     <div class="flex flex-col gap-2 mt-2">
-                        <label class="text-sm flex items-center gap-2.5 text-nowrap">
+                        <label class="flex gap-2.5 items-center text-sm text-nowrap">
                             <input
                                 onclick="toggleFieldVisibility('disekitar_lokasi', 'disekitar_lokasi_sesuai', ['ya'])"
                                 type="radio" class="radio" name="disekitar_lokasi" value="ya"
                                 {{ old('disekitar_lokasi', $forminspeksi['lingkungan']['disekitar_lokasi'] ?? '') == 'ya' ? 'checked' : '' }} />
                             <span class="ml-2">Telah ada bangunan</span>
                         </label>
-                        <div class="flex w-full items-center gap-4">
+                        <div class="flex gap-4 items-center w-full">
                             <div id="disekitar_lokasi_sesuai" class="grid grid-cols-2 gap-4 mt-5 mb-5"
                                 style="{{ old('disekitar_lokasi', $forminspeksi['lingkungan']['disekitar_lokasi'] ?? '') == 'ya' ? '' : 'display: none;' }}">
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="" class="text-sm text-gray-700">Kondisi bangunan</label>
 
                                     @php
@@ -221,7 +221,7 @@
                                         @endforeach
                                     </select>
                                 </div>
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="" class="text-sm text-gray-700">Sifat bangunan</label>
                                     @php
                                         $sifat = ['Permanen', 'Semi Permanen', 'Tidak Permanen'];
@@ -240,7 +240,7 @@
                             </div>
                         </div>
 
-                        <label class="form-label flex items-center gap-2.5 text-nowrap">
+                        <label class="flex gap-2.5 items-center form-label text-nowrap">
                             <input
                                 onclick="toggleFieldVisibility('disekitar_lokasi', 'disekitar_lokasi_sesuai', ['ya'])"
                                 type="radio" class="radio" name="disekitar_lokasi" value="tidak sesuai"
@@ -248,62 +248,99 @@
                             <span class="ml-2">Belum ada bangunan</span>
                         </label>
                     </div>
-                    <em id="error-terletak_diarea" class="alert text-danger text-sm"></em>
+                    <em id="error-terletak_diarea" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
             <!-- Dekat Makam -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Dekat Makam</label>
                 <div class="flex flex-wrap items-baseline w-full">
                     <div class="flex flex-col gap-2 mt-2">
                         <!-- Opsi Ya -->
-                        <div class="flex w-full items-center gap-4">
-                            <label class="text-sm flex items-center gap-2.5 text-nowrap">
+                        <div class="flex gap-4 items-center w-full">
+                            <label class="flex gap-2.5 items-center text-sm text-nowrap">
                                 <input onclick="toggleFieldVisibility('dekat_makam', 'dekat-makam', ['ya'])"
                                     type="radio" class="radio" name="dekat_makam" value="ya"
                                     {{ old('dekat_makam', $forminspeksi['lingkungan']['dekat_makam'] ?? '') == 'ya' ? 'checked' : '' }} />
                                 <span class="ml-2">Ya</span>
                             </label>
-                            <div id="dekat-makam" class="flex items-baseline gap-4 w-full"
+                            <div id="dekat-makam" class="flex gap-4 items-baseline w-full"
                                 style="{{ old('dekat_makam', $forminspeksi['lingkungan']['dekat_makam'] ?? '') == 'ya' ? 'display:flex;' : 'display:none;' }}">
 
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="jarak_makam" class="form-label max-w-56">Jarak</label>
-                                    <input type="text" class="input mt-2" name="jarak_makam"
+                                    <input type="text" class="mt-2 input" name="jarak_makam"
                                         value="{{ old('jarak_makam', $forminspeksi['lingkungan']['jarak_makam'] ?? '') }}"
                                         placeholder="Km" />
                                 </div>
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="nama_makam" class="form-label max-w-56">Nama TPU</label>
-                                    <input type="text" class="input mt-2 w-full" name="nama_makam"
+                                    <input type="text" class="mt-2 w-full input" name="nama_makam"
                                         value="{{ old('nama_makam', $forminspeksi['lingkungan']['nama_makam'] ?? '') }}"
                                         placeholder="Nama TPU" />
-                                </div>
-                            </div>
-                        </div>
+</div>
+    </div>
+</div>
+@push('scripts')
+<script type="module">
+    const sanitizeNumberComma = (v) => {
+        if (!v) return '';
+        let s = String(v).replace(/[^\d,]/g, '');
+        const parts = s.split(',');
+        if (parts.length > 1) {
+            s = parts[0] + ',' + parts.slice(1).join('').replace(/,/g, '');
+        }
+        return s;
+    };
+
+    document.querySelectorAll('.measure-input').forEach((input) => {
+        const unit = input.getAttribute('data-unit') || 'km';
+
+        const stripSuffix = () => {
+            input.value = sanitizeNumberComma(input.value);
+        };
+
+        const appendSuffix = () => {
+            const raw = sanitizeNumberComma(input.value);
+            input.value = raw ? `${raw} ${unit}` : '';
+        };
+
+        input.addEventListener('focus', stripSuffix);
+        input.addEventListener('blur', appendSuffix);
+        input.addEventListener('input', stripSuffix);
+
+        const form = input.closest('form');
+        if (form) {
+            form.addEventListener('submit', stripSuffix);
+        }
+
+        appendSuffix();
+    });
+</script>
+@endpush
 
                         <!-- Opsi Tidak -->
-                        <label class="form-label flex items-center gap-2.5 text-nowrap">
+                        <label class="flex gap-2.5 items-center form-label text-nowrap">
                             <input onclick="toggleFieldVisibility('dekat_makam', 'dekat-makam', ['ya'])"
                                 type="radio" class="radio" name="dekat_makam" value="tidak"
                                 {{ old('dekat_makam', $forminspeksi['lingkungan']['dekat_makam'] ?? '') == 'tidak' ? 'checked' : '' }} />
                             <span class="ml-2">Tidak</span>
                         </label>
                     </div>
-                    <em id="error-dekat_makam" class="alert text-danger text-sm"></em>
+                    <em id="error-dekat_makam" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
 
             <!-- Dekat Tps -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Dekat TPS</label>
                 <div class="flex flex-wrap items-baseline w-full">
                     <div class="flex flex-col gap-2 mt-2 w-full">
                         <!-- Opsi Ya -->
-                        <div class="flex w-full items-center gap-4">
-                            <label class="text-sm flex items-center gap-2.5 text-nowrap">
+                        <div class="flex gap-4 items-center w-full">
+                            <label class="flex gap-2.5 items-center text-sm text-nowrap">
                                 <input onclick="toggleFieldVisibility('dekat_tps', 'dekat-tps', ['ya'])"
                                     type="radio" class="radio" name="dekat_tps" value="ya"
                                     {{ old('dekat_tps', $forminspeksi['lingkungan']['dekat_tps'] ?? '') == 'ya' ? 'checked' : '' }} />
@@ -311,16 +348,16 @@
                             </label>
                             <div id="dekat-tps" class="flex flex-wrap gap-4 w-full"
                                 style="{{ old('dekat_tps', $forminspeksi['lingkungan']['dekat_tps'] ?? '') == 'ya' ? 'display:flex;' : 'display:none;' }}">
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="jarak_tps" class="form-label max-w-56">Jarak</label>
-                                    <input type="text" id="jarak_tps" class="input mt-2" name="jarak_tps"
+                                    <input type="text" id="jarak_tps" class="mt-2 input" name="jarak_tps"
                                         value="{{ old('jarak_tps', $forminspeksi['lingkungan']['jarak_tps'] ?? '') }}"
                                         placeholder="Km" />
                                 </div>
 
-                                <div class="flex items-center gap-2">
+                                <div class="flex gap-2 items-center">
                                     <label for="nama_tps" class="form-label max-w-56">Nama TPS</label>
-                                    <input type="text" id="nama_tps" class="input mt-2" name="nama_tps"
+                                    <input type="text" id="nama_tps" class="mt-2 input" name="nama_tps"
                                         value="{{ old('nama_tps', $forminspeksi['lingkungan']['nama_tps'] ?? '') }}"
                                         placeholder="Nama TPS" />
                                 </div>
@@ -328,36 +365,36 @@
                         </div>
 
                         <!-- Opsi Tidak -->
-                        <label class="form-label flex items-center gap-2.5 text-nowrap">
+                        <label class="flex gap-2.5 items-center form-label text-nowrap">
                             <input onclick="toggleFieldVisibility('dekat_tps', 'dekat-tps', ['ya'])" type="radio"
                                 class="radio" name="dekat_tps" value="tidak"
                                 {{ old('dekat_tps', $forminspeksi['lingkungan']['dekat_tps'] ?? '') == 'tidak' ? 'checked' : '' }} />
                             <span class="ml-2">Tidak</span>
                         </label>
                     </div>
-                    <em id="error-dekat_tps" class="alert text-danger text-sm"></em>
+                    <em id="error-dekat_tps" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Dekat Lainnya</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <input type="text" class="input mt-2" name="dekat_lainnya"
+                    <input type="text" class="mt-2 input" name="dekat_lainnya"
                         value="{{ old('dekat_lainnya', $forminspeksi['lingkungan']['dekat_lainnya'] ?? '') }}"
                         placeholder="Masukkan Lainnya" />
-                    <em id="error-dekat_makam" class="alert text-danger text-sm"></em>
+                    <em id="error-dekat_makam" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
 
             <!-- Merupakan daerah -->
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Merupakan Daerah</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['merupakanDaerah']))
                             @foreach ($basicData['merupakanDaerah'] as $item)
-                                <label class="form-label flex items-center gap-2.5 text-nowrap">
+                                <label class="flex gap-2.5 items-center form-label text-nowrap">
                                     <input class="checkbox" name="merupakan_daerah[]" type="checkbox"
                                         value="{{ $item->name }}"
                                         {{ in_array($item->name, isset($forminspeksi['lingkungan']['merupakan_daerah']) ? $forminspeksi['lingkungan']['merupakan_daerah'] : []) ? 'checked' : '' }} />
@@ -366,16 +403,16 @@
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-merupakan_daerah" class="alert text-danger text-sm"></em>
+                    <em id="error-merupakan_daerah" class="text-sm alert text-danger"></em>
                 </div>
             </div>
 
             <!-- Fasilitas Umum Sekitar -->
 
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                 <label class="form-label max-w-56">Fasilitas Umum Dekat Objek</label>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <div class="flex flex-col items-start gap-4">
+                    <div class="flex flex-col gap-4 items-start">
                         @if (isset($basicData['fasilitasObjek']))
                             @foreach ($basicData['fasilitasObjek'] as $item)
                                 @php
@@ -392,20 +429,20 @@
                                     );
                                 @endphp
 
-                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                                    <label class="form-label max-w-56 gap-2.5" style="width: 500px">
+                                <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
+                                    <label class="gap-2.5 form-label max-w-56" style="width: 500px">
                                         <input class="checkbox" name="fasilitas_dekat_object[]" type="checkbox"
                                             value="{{ $item->name }}" {{ $isChecked ? 'checked' : '' }} />
                                         {{ $item->name }}
                                     </label>
                                     <input type="text" name="fasilitas_dekat_object_input[{{ $item->name }}]"
-                                        class="input w-full" placeholder="Masukkan fasilitas {{ $item->name }}..."
+                                        class="w-full input" placeholder="Masukkan fasilitas {{ $item->name }}..."
                                         value="{{ $inputValue }}">
                                 </div>
                             @endforeach
                         @endif
                     </div>
-                    <em id="error-fasilitas_dekat_object" class="alert text-danger text-sm"></em>
+                    <em id="error-fasilitas_dekat_object" class="text-sm alert text-danger"></em>
                 </div>
             </div>