<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="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="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="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="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="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="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="mt-4 w-full">
                    <label class="block text-sm font-medium text-gray-700">Lebar Perkerasan Jalan Depan objek</label>
                    @php
                        $lebarPerkerasanJalan = old(
                            'lebar_perkerasan_jalan',
                            $forminspeksi['lingkungan']['lebar_perkerasan_jalan'] ?? '',
                        );
                    @endphp
                    <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 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 gap-4 items-start">
                        @if (isset($basicData['perkerasanJalan']))
                            @foreach ($basicData['perkerasanJalan'] as $item)
                                @php
                                    $isChecked = in_array(
                                        $item->name,
                                        isset($forminspeksi['lingkungan']['perkerasan_jalan']['perkerasan_jalan'])
                                            ? $forminspeksi['lingkungan']['perkerasan_jalan']['perkerasan_jalan']
                                            : [],
                                    );
                                @endphp
                                <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'])" />
                                    {{ $item->name }}
                                </label>

                                @if (strcasecmp($item->name, 'Lainnya') == 0)
                                    @php

                                        $lainnyaValue = old(
                                            'perkerasan_jalan_lainnya',
                                            isset($forminspeksi['lingkungan']['perkerasan_jalan']['lainnya'])
                                                ? $forminspeksi['lingkungan']['perkerasan_jalan']['lainnya']
                                                : '',
                                        );
                                    @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="mt-2 w-full input"
                                        value="{{ $lainnyaValue }}" placeholder="Masukkan lainnya..." />
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-perkerasan-jalan" class="text-sm alert text-danger"></em>
                </div>
            </div>


            <!-- Lalulintas -->
            <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 gap-4 items-start">
                        @if (isset($basicData['laluLintasLokasi']))
                            @foreach ($basicData['laluLintasLokasi'] as $item)
                                <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' : '' }} />


                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-lalu-lintas" class="text-sm alert text-danger"></em>
                </div>
            </div>
            <!-- Golongan Hidup Sekitar -->
            <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 gap-4 items-start">
                        @if (isset($basicData['golMasySekitar']))
                            @foreach ($basicData['golMasySekitar'] as $item)
                                <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' : '' }} />

                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-gol_mas_sekitar" class="text-sm alert text-danger"></em>
                </div>
            </div>

            <!-- Tingkat Keramaian -->
            <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 gap-4 items-start">
                        @if (isset($basicData['tingkatKeramaian']))
                            @foreach ($basicData['tingkatKeramaian'] as $item)
                                <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' : '' }} />

                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-tingkat_keramaian" class="text-sm alert text-danger"></em>
                </div>
            </div>

            <!-- Terletak Di Area -->
            <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 gap-4 items-start">
                        @if (isset($basicData['terletakDiArea']))
                            @foreach ($basicData['terletakDiArea'] as $item)
                                <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' : '' }}
                                        onclick="toggleCheckboxVisibility('terletak_diarea', 'terletak_diarea_lainnya', ['Lainnya'])" />

                                    {{ $item->name }}
                                </label>
                                @if (strcasecmp($item->name, 'Lainnya') == 0)
                                    @php
                                        $lainnyaValue = old(
                                            'terletak_diarea_lainnya',
                                            isset($forminspeksi['lingkungan']['terletak_diarea']['lainnya'])
                                                ? $forminspeksi['lingkungan']['terletak_diarea']['lainnya']
                                                : '',
                                        );
                                    @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="mt-2 w-full input"
                                        value="{{ $lainnyaValue }}" placeholder="Masukkan lainnya..." />
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-terletak_diarea" class="text-sm alert text-danger"></em>
                </div>
            </div>

            <!-- Disekitar Lokasi -->
            <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="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 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 gap-2 items-center">
                                    <label for="" class="text-sm text-gray-700">Kondisi bangunan</label>

                                    @php
                                        $kondisi = ['Cukup', 'Baik', 'Kurang'];
                                    @endphp

                                    <select class="select" name="kondisi_bagunan_disekitar_lokasi" id="">
                                        <option value="">pilih kondisi</option>
                                        @foreach ($kondisi as $item)
                                            <option value="{{ $item }}"
                                                {{ old('kondisi_bagunan_disekitar_lokasi', $forminspeksi['lingkungan']['kondisi_bagunan_disekitar_lokasi'] ?? '') == $item ? 'selected' : '' }}>
                                                {{ $item }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <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'];
                                    @endphp
                                    <select class="select" name="sifat_bagunan_disekitar_lokasi" id="">
                                        <option value="">pilih sifat bagunan</option>
                                        @foreach ($sifat as $item)
                                            <option value="{{ $item }}"
                                                {{ old('sifat_bagunan_disekitar_lokasi', $forminspeksi['lingkungan']['sifat_bagunan_disekitar_lokasi'] ?? '') == $item ? 'selected' : '' }}>
                                                {{ $item }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                        </div>

                        <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"
                                {{ old('disekitar_lokasi', $forminspeksi['lingkungan']['disekitar_lokasi'] ?? '') == 'tidak sesuai' ? 'checked' : '' }} />
                            <span class="ml-2">Belum ada bangunan</span>
                        </label>
                    </div>
                    <em id="error-terletak_diarea" class="text-sm alert text-danger"></em>
                </div>
            </div>

            <!-- Dekat Makam -->
            <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 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 gap-4 items-baseline w-full"
                                style="{{ old('dekat_makam', $forminspeksi['lingkungan']['dekat_makam'] ?? '') == 'ya' ? 'display:flex;' : 'display:none;' }}">

                                <div class="flex gap-2 items-center">
                                    <label for="jarak_makam" class="form-label max-w-56">Jarak</label>
                                    <input type="text" class="mt-2 input" name="jarak_makam"
                                        value="{{ old('jarak_makam', $forminspeksi['lingkungan']['jarak_makam'] ?? '') }}"
                                        placeholder="Km" />
                                </div>
                                <div class="flex gap-2 items-center">
                                    <label for="nama_makam" class="form-label max-w-56">Nama TPU</label>
                                    <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>
@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="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="text-sm alert text-danger"></em>
                </div>
            </div>


            <!-- Dekat Tps -->
            <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 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' : '' }} />
                                <span class="ml-2">Ya</span>
                            </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 gap-2 items-center">
                                    <label for="jarak_tps" class="form-label max-w-56">Jarak</label>
                                    <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 gap-2 items-center">
                                    <label for="nama_tps" class="form-label max-w-56">Nama TPS</label>
                                    <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>
                            </div>
                        </div>

                        <!-- Opsi Tidak -->
                        <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="text-sm alert text-danger"></em>
                </div>
            </div>

            <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="mt-2 input" name="dekat_lainnya"
                        value="{{ old('dekat_lainnya', $forminspeksi['lingkungan']['dekat_lainnya'] ?? '') }}"
                        placeholder="Masukkan Lainnya" />
                    <em id="error-dekat_makam" class="text-sm alert text-danger"></em>
                </div>
            </div>


            <!-- Merupakan daerah -->
            <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 gap-4 items-start">
                        @if (isset($basicData['merupakanDaerah']))
                            @foreach ($basicData['merupakanDaerah'] as $item)
                                <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' : '' }} />
                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-merupakan_daerah" class="text-sm alert text-danger"></em>
                </div>
            </div>

            <!-- Fasilitas Umum Sekitar -->

            <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 gap-4 items-start">
                        @if (isset($basicData['fasilitasObjek']))
                            @foreach ($basicData['fasilitasObjek'] as $item)
                                @php
                                    $isChecked = in_array(
                                        $item->name,
                                        old(
                                            'fasilitas_dekat_object',
                                            $forminspeksi['lingkungan']['fasilitas_dekat_object'] ?? [],
                                        ),
                                    );
                                    $inputValue = old(
                                        'fasilitas_dekat_object_input.' . $item->name,
                                        $forminspeksi['lingkungan']['fasilitas_dekat_object_input'][$item->name] ?? '',
                                    );
                                @endphp

                                <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="w-full input" placeholder="Masukkan fasilitas {{ $item->name }}..."
                                        value="{{ $inputValue }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-fasilitas_dekat_object" class="text-sm alert text-danger"></em>
                </div>
            </div>




        </div>
    </div>
</div>
