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


<form  id="debiturForm" 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


    @if (false)
        @include('lpj::surveyor.components.apartemen-kantor')
    @else
        @include('lpj::surveyor.components.tanah-bangunan')
    @endif


    <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="grid gap-5">
            <!-- Jarak dari Objek Utama -->
            <div class="bg-gray-50 rounded-lg">
                <div class="grid grid-cols-3 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="jarakDariJalan" 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="jarakkeCbdPoint" placeholder="Km">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Lebar Perkerasan Jalan Depan
                            objek</label>
                        <input type="text" name="lebarPerkerasanJalan" class="input mt-2" placeholder="Meter">
                    </div>
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Perkerasan Jalan</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('perkerasanJalan') border-danger bg-danger-light  @enderror"
                        name="perkerasanJalan">
                        <option value="">Select Perkerasan Jalan</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('perkerasanJalan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Lalulintas -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Lalulintas Depan Lokasi</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('laluLintasDepanLoaksi') border-danger bg-danger-light  @enderror"
                        name="laluLintasDepanLoaksi">
                        <option value="">Select PLalulintas Depan Lokasi</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('laluLintasDepanLoaksi')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Golongan Hidup Sekitar -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Golongan Hidup Sekitar</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('golHidupSekitar') border-danger bg-danger-light  @enderror"
                        name="golHidupSekitar">
                        <option value="">Select Golongan Hidup Sekitar</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('golHidupSekitar')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Tingkat Keramaian -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Tingkat Keramaian</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('tingkatKeramaian') border-danger bg-danger-light  @enderror"
                        name="tingkatKeramaian">
                        <option value="">Select Tingkat Keramaian</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('tingkatKeramaian')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Tataletak di Area -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Tataletak di Area</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('tataLetakArea') border-danger bg-danger-light  @enderror"
                        name="tataLetakArea">
                        <option value="">Select Tataletak di Area</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('tataLetakArea')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Struktru tata letak -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Struktru tata letak</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <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="telahAdaBagunan" 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="telahAdaBagunan" value="komersial">
                            <span class="ml-2">Belum Ada Bangunan</span>
                        </label>
                    </div>

                    @error('telahAdaBagunan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Dekat Makam -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Dekat Makamh</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <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="dekatMakam" 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="dekatMakam" value="tidak">
                            <span class="ml-2">Tidak</span>
                        </label>
                    </div>

                    @error('bentuk_tanah')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Dekat Tps</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <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="dekatTps" 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="dekatTps" value="tidak">
                            <span class="ml-2">Tidak</span>
                        </label>
                    </div>

                    @error('bentuk_tanah')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Merupakan daerah</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('merupakanDaerah') border-danger bg-danger-light  @enderror"
                        name="merupakanDaerah">
                        <option value="">Select Merupakan daerah</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('merupakanDaerah')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Fasilitas Umum Sekitar -->

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Fasilitas Umum dekat Object</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <select
                        class="input tomselect w-full @error('fasilitasUmumDekat') border-danger bg-danger-light  @enderror"
                        name="fasilitasUmumDekat">
                        <option value="">Select Fasilitas Umum Ddekat Object</option>
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        @endif
                    </select>

                    @error('fasilitasUmumDekat')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </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="grid gap-5">
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Faktor Positif</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="faktorPositif" rows="3"></textarea>
                    @error('faktorPositif')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Faktor Negatif</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="faktorNegatif" rows="3"></textarea>
                    @error('faktorNegatif')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Rute Menuju</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="ruteMenuju" rows="3"></textarea>
                    @error('ruteMenuju')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Batas batas</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <div class="grid grid-cols-2 gap-4 items-center w-full">
                        <div>
                            <select class="select mt-2" name="BatasBatas">
                                @if (isset($arahMataAngin))
                                    @foreach ($arahMataAngin as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div>
                            <input name="keteranganBatas" type="text" class="input mt-2">
                        </div>
                    </div>

                    @error('kondisiFisikTanah')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kondisi lain terkait lingkungan</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="kondisiLainTerkaitLingkungan" rows="3"></textarea>
                    @error('kondisiLainTerkaitLingkungan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kondisi lain terkait Bangunan</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="kondisiLainTerkaitBangunan" rows="3"></textarea>
                    @error('kondisiLainTerkaitBangunan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Informasi Terkait Dokumen</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <textarea class="textarea mt-2" name="informasiTerkaitDokumen" rows="3"></textarea>
                    @error('informasiTerkaitDokumen')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

        </div>
    </div>


    <div class="container mx-auto ">
        <!-- 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 gap-5">

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Peruntukan</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="peruntukan" class="input" placeholder="Masukkan Peruntukan">
                    @error('peruntukan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">KDB</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="kdb" class="input" placeholder="Masukkan KDB">
                    @error('kdb')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">KDH</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="kdh" class="input" placeholder="Masukkan KDH">
                    @error('kdh')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">GSB</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="gsb" class="input" placeholder="Masukkan GSB">
                    @error('gsb')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Max Lantai</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="maxLantai" class="input" placeholder="Masukkan Max Lantai">
                    @error('maxLantai')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">KLB</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="klb" class="input" placeholder="Masukkan KLB">
                    @error('klb')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">GSS</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="gss" class="input" placeholder="Masukkan GSS">
                    @error('gss')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Pelebaran Jalan</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="pelebaranJalan" class="input"
                        placeholder="Masukkan Pelebaran Jalan">
                    @error('pelebaranJalan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Nama Petugas TK</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <input type="text" name="petugasTK" class="input" placeholder="Masukkan Petugas TK">
                    @error('petugasTK')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </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 id="mapFrame" 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" name="foto" 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 name="notes" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3"></textarea>
            </div>
        </div>
    </div>

    <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
        <button type="submit" class="btn btn-success">
            Save
        </button>
        <button type="submit" class="btn btn-primary">
            Submit
        </button>
    </div>

</form>


@push('scripts')

<script>
    // Fungsi untuk mengambil lokasi pengguna
    function getUserLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            alert("Geolocation tidak didukung oleh browser ini.");
        }
    }

    // Fungsi untuk menampilkan posisi
    function showPosition(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        var mapUrl = `https://www.google.com/maps?q=${lat},${lng}&z=15&output=embed`;
        document.getElementById('mapFrame').src = mapUrl;
    }

    // Fungsi untuk menangani error jika lokasi tidak bisa diambil
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                alert("Pengguna menolak permintaan geolokasi.");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("Informasi lokasi tidak tersedia.");
                break;
            case error.TIMEOUT:
                alert("Permintaan lokasi pengguna berakhir.");
                break;
            case error.UNKNOWN_ERROR:
                alert("Terjadi kesalahan yang tidak diketahui.");
                break;
        }
    }
    window.onload = getUserLocation;
</script>

<script>
    // Fungsi untuk menyimpan data ke localStorage saat ada perubahan input


    const formElement = document.getElementById('debiturForm');

    // Mengambil nilai dari localStorage saat halaman dimuat
    window.onload = () => {
        const storedData = localStorage.getItem('debiturData');
        if (storedData) {
            const formData = JSON.parse(storedData);
            // Mengisi nilai untuk elemen select
            for (const [key, value] of Object.entries(formData)) {
                const inputElement = formElement.querySelector(`[name="${key}"]`);
                if (inputElement) {
                    if (inputElement.tagName === 'SELECT') {
                        inputElement.value = value; // Atur nilai select
                    } else if (inputElement.type === 'radio') {
                        const radioButton = document.getElementById(`${key}${value.charAt(0).toUpperCase() + value.slice(1)}`);
                        if (radioButton) {
                            radioButton.checked = true; // Atur radio button yang sesuai sebagai checked
                        }
                    }
                }
            }
        }
    };

    // Simpan data ke localStorage dalam bentuk JSON
    formElement.addEventListener('change', () => {
        const formData = {};
        const inputs = formElement.querySelectorAll('input, select');

        inputs.forEach(input => {
            if (input.type === 'radio' && input.checked) {
                formData[input.name] = input.value; // Hanya ambil nilai radio yang terpilih
            } else if (input.type !== 'radio') {
                formData[input.name] = input.value; // Ambil nilai dari elemen lain
            }
        });

        localStorage.setItem('debiturData', JSON.stringify(formData)); // Simpan objek sebagai JSON
    });

    // Opsi: Reset localStorage saat form disubmit
    formElement.onsubmit = () => {
        localStorage.removeItem('debiturData'); // Menghapus data spesifik dari localStorage
    };


    // Opsi: Reset localStorage saat form disubmit
    document.getElementById('debiturForm').onsubmit = (event) => {
        event.preventDefault(); // Mencegah pengiriman form

        // Menyimpan semua input ke localStorage
        inputs.forEach(input => {
            localStorage.setItem(input.name, input.value);
        });

        // Opsional: Tampilkan pesan bahwa data telah disimpan
        alert('Data telah disimpan ke localStorage!');

        // Jika ingin menghapus localStorage, uncomment baris di bawah
        // localStorage.clear();
    };
</script>

@endpush