@push('scripts')
    {{-- <script src="https://cdn.tailwindcss.com"></script> --}}
@endpush


<form action="{{ isset($debitur->id) ? route('debitur.update', $debitur->id) : route('debitur.store') }}" method="POST"
    class="grid gap-5">
    @if (isset($debitur->id))
        <input type="hidden" name="id" value="{{ $debitur->id }}">
        @method('PUT')
    @endif
    @csrf


    <div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-600 text-white py-4 px-6">
            <h1 class="text-md font-medium text-gray-900">Analisa Tanah</h1>
        </div>
        <div class="p-6 space-y-6">
            <div class="bg-info p-4 rounded-lg gap-12">
                <label class="form-label max-w-56">
                    Luas Tanah
                </label>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-3 text-nowrap">
                        <input type="radio" class="radio" name="luasTanah" value="sesuai">
                        <span class="ml-2">Sesuai</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="luasTanah" value="tidakSesuai">
                        <span class="ml-2">Tidak Sesuai</span>
                    </label>
                </div>
            </div>

            <!-- Hadap Mata Angin -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Hadap Mata Angin</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="hadapMataAngin" value="sesuai">
                        <span class="ml-2">Sesuai</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="hadapMataAngin" value="tidakSesuai">
                        <span class="ml-2">Tidak Sesuai</span>
                    </label>
                </div>
            </div>

            <!-- Bentuk Tanah -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Bentuk Tanah</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="empatPersegi">
                        <span class="ml-2">Empat Persegi</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="persegiPanjang">
                        <span class="ml-2">Persegi Panjang</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="bujurSangkar">
                        <span class="ml-2">Bujur Sangkar</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="cukupBeraturan">
                        <span class="ml-2">Cukup Beraturan</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="tidakBeraturan">
                        <span class="ml-2">Tidak Beraturan</span>
                    </label>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Lainnya</span>
                        </label>
                        <input type="text" class="input" placeholder="Lainnya">
                    </div>
                </div>
            </div>

            <!-- Kontur Tanah -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Kontur Tanah</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="konturTanah" value="rata">
                        <span class="ml-2">Rata</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="konturTanah" value="berbukit">
                        <span class="ml-2">Berbukit</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="konturTanah" value="tidakRata">
                        <span class="ml-2">Tidak Rata</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="konturTanah" value="bergelombang">
                        <span class="ml-2">Bergelombang</span>
                    </label>
                </div>
            </div>

            <!-- Beda Ketinggian Dengan Jalan -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Beda Ketinggian Dengan Jalan</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="bedaKetinggian" value="sama">
                        <span class="ml-2">Sama dengan jalan</span>
                    </label>

                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="bedaKetinggian" value="bervariasi">
                        <span class="ml-2">Bervariasi</span>
                    </label>

                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="radio" class="radio" name="bedaKetinggian" value="lebihTinggi">
                            <span class="ml-2">Lebih Tinggi</span>
                        </label>
                        <input type="text" class="input" placeholder="meter">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="radio" class="radio" name="bedaKetinggian" value="lebihRendah">
                            <span class="ml-2">Lebih Rendah</span>
                        </label>
                        <input type="text" class="input" placeholder="meter">
                    </div>
                </div>
            </div>

            <!-- Kontur Jalan Depan Objek -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Kontur Jalan Depan Objek</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="konturJalan" value="menurun">
                        <span class="ml-2">Menurun</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="konturJalan" value="rata">
                        <span class="ml-2">Rata</span>
                    </label>
                </div>
            </div>

            <!-- Posisi Kavling -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Posisi Kavling</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="posisiKavling" value="badan">
                        <span class="ml-2">Badan</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="posisiKavling" value="pojok">
                        <span class="ml-2">Pojok</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="posisiKavling" value="hook">
                        <span class="ml-2">Hook</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="posisiKavling" value="kuldesak">
                        <span class="ml-2">Kuldesak</span>
                    </label>
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" class="checkbox" name="posisiKavling" value="lainnya">
                        <input type="text"
                            class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
                            placeholder="Lainnya">
                    </div>
                </div>
            </div>

            <!-- Tusuk Sate -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Tusuk Sate</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="tusukSate" value="ya">
                        <span class="ml-2">Ya</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="tusukSate" value="tidak">
                        <span class="ml-2">Tidak</span>
                    </label>
                </div>
            </div>

            <!-- Lockland -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Lockland</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="lockland" value="ya">
                        <span class="ml-2">Ya</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="lockland" value="tidak">
                        <span class="ml-2">Tidak</span>
                    </label>
                </div>
            </div>

            <!-- Kondisi Fisik Tanah -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Kondisi Fisik Tanah</label>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="kondisiFisikTanah" value="tanahDarat">
                        <span class="ml-2">Tanah Darat</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="kondisiFisikTanah" value="sawah">
                        <span class="ml-2">Sawah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="kondisiFisikTanah" value="urutkan">
                        <span class="ml-2">Urutkan</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="kondisiFisikTanah" value="bukit">
                        <span class="ml-2">Bukit</span>
                    </label>
                </div>
            </div>
        </div>
    </div>


    <div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-600 text-white py-4 px-6">
            <h1 class="text-md font-medium text-gray-900">Analisa Bangunan</h1>
        </div>
        <div class="p-6 space-y-6">
            <div class="bg-info p-4 rounded-lg gap-12">
                <label class="form-label max-w-56">
                    Luas Bagunan
                </label>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-3 text-nowrap">
                        <input type="radio" class="radio" name="luasTanah" value="sesuai">
                        <span class="ml-2">Sesuai</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="luasTanah" value="tidakSesuai">
                        <span class="ml-2">Tidak Sesuai</span>
                    </label>
                </div>
            </div>

            <!-- Hadap Mata Angin -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Jenis Bangunan</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="empatPersegi">
                        <span class="ml-2">Rumah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="persegiPanjang">
                        <span class="ml-2">Ruko</span>
                    </label>

                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="cukupBeraturan">
                        <span class="ml-2">Pabrik</span>
                    </label>

                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Lainnya</span>
                        </label>
                        <input type="text" class="input" placeholder="Lainnya">
                    </div>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="bujurSangkar">
                        <span class="ml-2">Gudang</span>
                    </label>
                </div>
            </div>

            <!-- Bentuk Tanah -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Kondisi Bangunan</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="empatPersegi">
                        <span class="ml-2">Cukup Terawat</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="persegiPanjang">
                        <span class="ml-2">Kurang Terawat</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="bujurSangkar">
                        <span class="ml-2">Tidak Terawat</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="cukupBeraturan">
                        <span class="ml-2">Hancur/Tidak Layak Ditinggali</span>
                    </label>

                </div>
            </div>

            <!-- Sifat Bangunan -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Sifat Bangunan</label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="mr-2">Permanen</span>
                        </label>
                        <input type="text" class="input" placeholder="Permanen">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Semi Permanen</span>
                        </label>
                        <input type="text" class="input" placeholder="Semi Permanen">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Tidak Permanen</span>
                        </label>
                        <input type="text" class="input" placeholder="Tidak Permanen">
                    </div>
                </div>
            </div>

            <!-- Spek Bangunan -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Spek Bangunan</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="bedaKetinggian" value="sama">
                        <span class="ml-2">Sama dengan jalan</span>
                    </label>

                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="bedaKetinggian" value="bervariasi">
                        <span class="ml-2">Bervariasi</span>
                    </label>

                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="radio" class="radio" name="bedaKetinggian" value="lebihTinggi">
                            <span class="ml-2">Lebih Tinggi</span>
                        </label>
                        <input type="text" class="input" placeholder="meter">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="radio" class="radio" name="bedaKetinggian" value="lebihRendah">
                            <span class="ml-2">Lebih Rendah</span>
                        </label>
                        <input type="text" class="input" placeholder="meter">
                    </div>
                </div>
            </div>

            <!-- Kontur Jalan Depan Objek -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Sarana pelengkap</label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="mr-2">Pagar</span>
                        </label>
                        <input type="text" class="input" placeholder="Pagar">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Perkerasan</span>
                        </label>
                        <input type="text" class="input" placeholder="Perkerasan">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Kanopi</span>
                        </label>
                        <input type="text" class="input" placeholder="Kanopi">
                    </div>

                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Air</span>
                        </label>
                        <input type="text" class="input" placeholder="Air">
                    </div>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Listrik</span>
                        </label>
                        <input type="text" class="input" placeholder="Listrik">
                    </div>
                </div>
            </div>

        </div>
    </div>



    <div class=" bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-green-600 text-white py-4 px-6">
            <h1 class="text-md font-medium text-gray-900">Analisis Lingkungan</h1>
        </div>
        <div class="p-6 space-y-6">
            <!-- Jarak dari Objek Utama -->
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Jarak Dari Jalan Utama</label>
                        <input type="text" class="input mt-2" name="jarakKantorPolisi" placeholder="Km">
                    </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="jarakRumahSakit" placeholder="Km">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Lebar Perkerasan Jalan Depan
                            objek</label>
                        <input type="text" class="input mt-2" placeholder="Meter">
                    </div>
                </div>
            </div>


            <div class="bg-gray-50 p-4 rounded-lg">
                <label class="form-label max-w-56">Perkerasan Jalan</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="empatPersegi">
                        <span class="ml-2">Aspal</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="persegiPanjang">
                        <span class="ml-2">Beton</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="bujurSangkar">
                        <span class="ml-2">Conblock</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="cukupBeraturan">
                        <span class="ml-2">Sirtu</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="tidakBeraturan">
                        <span class="ml-2">Belum ada perkerasan</span>
                    </label>
                    <div class="flex items-center space-x-2">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="checkbox" class="checkbox" name="bentukTanah" value="lainnya">
                            <span class="ml-2">Lainnya</span>
                        </label>
                        <input type="text" class="input" placeholder="Lainnya">
                    </div>
                </div>
            </div>

            <!-- Lokasi dari Pusat Kota -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Lalulintas Depan Lokasi</h2>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="empatPersegi">
                        <span class="ml-2">Satu Arah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="persegiPanjang">
                        <span class="ml-2">Dua Arah - Satu Jalur</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="bentukTanah" value="bujurSangkar">
                        <span class="ml-2">Dua Arah - Dua Jalur</span>
                    </label>
                </div>
            </div>

            <!-- Golongan Hidup Sekitar -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Golongan Hidup Sekitar</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="golonganHidup" value="menengahAtas">
                        <span class="ml-2">Menengah Atas</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="golonganHidup" value="menengah">
                        <span class="ml-2">Menengah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="golonganHidup" value="menengahBawah">
                        <span class="ml-2">Menengah Bawah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="golonganHidup" value="atas">
                        <span class="ml-2">Atas</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="golonganHidup" value="atas">
                        <span class="ml-2">Kecil</span>
                    </label>
                </div>
            </div>

            <!-- Tingkat Keamanan -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Tingkat Keramaian</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="tingkatKeamanan" value="aman">
                        <span class="ml-2">Ramai</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="tingkatKeamanan" value="cukupAman">
                        <span class="ml-2">Cukup Ramai</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="tingkatKeamanan" value="tidakAman">
                        <span class="ml-2">Sepi</span>
                    </label>
                </div>
            </div>

            <!-- Tataletak di Area -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Terletak di Area</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitas" value="perumahan">
                        <span class="ml-2">Perumahan</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitas" value="perkantoran">
                        <span class="ml-2">Pemukiman</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitas" value="komersial">
                        <span class="ml-2">Komersial</span>
                    </label>
                </div>
            </div>

            <!-- Disekitar Lokasi -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Struktur Letak</h2>
                <div class="grid grid-cols-2 gap-4">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitas" value="komersial">
                        <span class="ml-2">Telah Ada Bangunan</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitas" value="komersial">
                        <span class="ml-2">Belum Ada Bangunan</span>
                    </label>
                </div>
            </div>

            <!-- Sarana Keluar -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Dekat Makam</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="saranaKeluar" value="ya">
                        <span class="ml-2">Ya</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="saranaKeluar" value="tidak">
                        <span class="ml-2">Tidak</span>
                    </label>
                </div>
            </div>


            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Dekat Tps</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="saranaKeluar" value="ya">
                        <span class="ml-2">Ya</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="radio" class="radio" name="saranaKeluar" value="tidak">
                        <span class="ml-2">Tidak</span>
                    </label>
                </div>
            </div>


            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Merupakan daerah</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="mengganggSekitar" value="suara">
                        <span class="ml-2">Bebas Banjir</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="mengganggSekitar" value="bahnSampah">
                        <span class="ml-2">Rawan Banjir</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="mengganggSekitar" value="getaranMesin">
                        <span class="ml-2">Sering Banjir</span>
                    </label>
                </div>
            </div>

            <!-- Fasilitas Umum Sekitar -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h2 class="form-label max-w-56">Fasilitas Umum Ddekat Object</h2>
                <div class="grid grid-cols-2 gap-4 mt-2">
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="tempatIbadah">
                        <span class="ml-2">Tempat Ibadah</span> </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="sekolah">
                        <span class="ml-2">Sekolah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="kantorPemerintah">
                        <span class="ml-2">Kantor Pemerintah</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="rumahSakit">
                        <span class="ml-2">Rumah Sakit</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="pasarTradisional">
                        <span class="ml-2">Pasar Tradisional</span>
                    </label>
                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                        <input type="checkbox" class="checkbox" name="fasilitasUmum" value="pusatPerbelanjaan">
                        <span class="ml-2">Pusat Perbelanjaan</span>
                    </label>
                </div>
            </div>
        </div>
    </div>


    <div class=" bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-600 text-white py-4 px-6">
            <h1 class="text-md font-medium text-gray-900">Analisis Fakta</h1>
        </div>
        <div class="p-6 space-y-6">
            <!-- Bagian 1: Input teks panjang -->
            <div class="space-y-4 p-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Faktor Positif</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Faktor Negatif</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Rute Menuju</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
            </div>



            <!-- Bagian 4: Dropdown dan input -->
            <div class="grid grid-cols-2 gap-4 p-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Batas batas</label>
                    <select
                        class="select mt-2">
                        <option>utara</option>
                        <option>Timur</option>
                        <option>Barat</option>
                        <option>Selata</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Catatan</label>
                    <input type="text"
                        class="input mt-2">
                </div>
            </div>


            <div class="space-y-4 p-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Kondisi lain terkait lingkungan</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Kondisi lain terkait Bangunan</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Informasi Terkait Dokumen</label>
                    <textarea
                        class="textarea mt-2"
                        rows="3"></textarea>
                </div>
            </div>

        </div>
    </div>


    <div class="container mx-auto p-4">
        <!-- Header -->
        <div class="bg-blue-600 text-white py-4 px-6">
            <h1 class="text-md font-medium text-gray-900">Informasi Dinas Tata Ruang</h1>
        </div>

        <!-- Informasi Tata Ruang Form -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Left Form Section -->
            <div class="col-span-2 bg-white p-6 rounded-lg shadow-lg">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">Peruntukan</label>
                        <input type="text" class="input" placeholder="Masukkan Peruntukan">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">KDB</label>
                        <input type="text" class="input" placeholder="Masukkan KDB">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">KDH</label>
                        <input type="text" class="input" placeholder="Masukkan KDH">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">GSB</label>
                        <input type="text" class="input" placeholder="Masukkan GSB">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">Max Lantai</label>
                        <input type="text" class="input" placeholder="Masukkan Max Lantai">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">KLB</label>
                        <input type="text" class="input" placeholder="Masukkan KLB">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">GSS</label>
                        <input type="text" class="input" placeholder="Masukkan GSS">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">Pelebaran Jalan</label>
                        <input type="text" class="input" placeholder="Masukkan Pelebaran Jalan">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">Nama Petugas TK</label>
                        <input type="text" class="input" placeholder="Masukkan Nama Petugas TK">
                    </div>

            </div>
        </div>

        <!-- Peta Section -->
        <div class="mt-2">
            <div class="bg-info border p-6 rounded-lg shadow-lg flex items-center justify-center" style="height: 300px">
              <iframe src="https://gistaru.atrbpn.go.id/rtronline/" frameborder="0" style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>

        <!-- Upload Photo Button -->
        <div class=" flex w-full mt-2">
            <div class="input-group w-full">

                <input class="file-input" type="file"/>
               </div>

        </div>

        <!-- Notes Section -->
        <div class="mt-2">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h4 class="block text-sm font-medium text-gray-700 mt-2">Catatan yang Perlu Diperhatikan</h4>
                <textarea class="textarea" placeholder="Masukkan catatan penting" rows="3"></textarea>
            </div>
        </div>
    </div>

</form>