@include('lpj::surveyor.components.header')

<div class="card w-full bg-white rounded-lg shadow-md overflow-hidden">
    <div class="card-body">


        <div class="py-4 ">
            <h1 class="text-md font-medium text-gray-900">Analisa Tanah</h1>
        </div>
        <div class="grid gap-5">
            <!-- Luas tanah -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Luas Tanah</label>
                <div class="mt-2">
                    @if (isset($permohonan->debiture->documents))
                        @foreach ($permohonan->debiture->documents as $item)
                            @php
                                $details = json_decode($item->detail);
                                $luas_tanah = isset($details['luas_tanah']) ? $details['luas_tanah'] : 'N/A';
                            @endphp
                            <p class="text-2sm text-gray-700">{{ $luas_tanah }} m2</p>
                        @endforeach
                    @endif
                    <div class="flex-wrap items-stretch">
                        <div class="flex flex-wrap items-baseline w-full">
                            <div class="grid grid-cols-3 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="luas_tanah" value="sesuai"
                                        onclick="toggleTidakSesuai('luas_tanah', 'luas_tanah_tidak_sesuai')"
                                        {{ old('luas_tanah', $forminspeksi['luas_tanah'] ?? '') == 'sesuai' ? 'checked' : '' }}>
                                    <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="luas_tanah" value="tidak sesuai"
                                        onclick="toggleTidakSesuai('luas_tanah', 'luas_tanah_tidak_sesuai')"
                                        {{ old('luas_tanah', $forminspeksi['luas_tanah'] ?? '') == 'tidak sesuai' ? 'checked' : '' }}>
                                    <span class="ml-2">Tidak Sesuai</span>
                                </label>
                                <input type="text" name="luas_tanah_tidak_sesuai" id="luas_tanah_tidak_sesuai"
                                    class="input w-full" placeholder="Masukan Luas Tanah"
                                    value="{{ old('luas_tanah_tidak_sesuai', $forminspeksi['luas_tanah_tidak_sesuai'] ?? '') }}"
                                    style="{{ old('luas_tanah', $forminspeksi['luas_tanah'] ?? '') == 'tidak sesuai' ? '' : 'display: none;' }}">
                            </div>
                            <em id="error-luas_tanah" class="alert text-danger text-sm"></em>
                        </div>
                    </div>
                </div>
            </div>


            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Hadap Mata Angin</label>
                <div class="flex-wrap items-stretch">
                    <div class="grid grid-cols-3 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="hadap_mata_angin" value="sesuai"
                                onclick="toggleTidakSesuai('hadap_mata_angin', 'hadap_mata_angin_tidak_sesuai')"
                                {{ old('hadap_mata_angin', $forminspeksi['hadap_mata_angin'] ?? '') == 'sesuai' ? 'checked' : '' }}>
                            <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="hadap_mata_angin" value="tidak sesuai"
                                onclick="toggleTidakSesuai('hadap_mata_angin', 'hadap_mata_angin_tidak_sesuai')"
                                {{ old('hadap_mata_angin', $forminspeksi['hadap_mata_angin'] ?? '') == 'tidak sesuai' ? 'checked' : '' }}>
                            <span class="ml-2">Tidak Sesuai</span>
                        </label>

                        <!-- Select dropdown untuk "Tidak Sesuai" -->
                        <select id="hadap_mata_angin_tidak_sesuai"
                            class="input w-full @error('hadap_mata_angin_tidak_sesuai') border-danger bg-danger-light @enderror"
                            name="hadap_mata_angin_tidak_sesuai"
                            style="{{ old('hadap_mata_angin', $forminspeksi['hadap_mata_angin'] ?? '') == 'tidak sesuai' ? '' : 'display: none;' }}">
                            <option value="">Select Hadap Mata Angin</option>
                            @if (isset($arahMataAngin))
                                @foreach ($arahMataAngin as $item)
                                    <option value="{{ $item->name }}"
                                        {{ old('hadap_mata_angin_tidak_sesuai', $forminspeksi['hadap_mata_angin_tidak_sesuai'] ?? '') == $item->name ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <em id="error-hadap_mata_angin" class="alert text-danger text-sm"></em>
                </div>
            </div>


            <!-- Bentuk Tanah -->
            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Bentuk Tanah</label>
                <div class="flex-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($bentukTanah))
                            @foreach ($bentukTanah as $item)
                                @if (strcasecmp($item->name, 'lainnya') == 0)
                                    <div class="flex items-center">
                                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                                            <input class="checkbox" name="bentuk_tanah[]" type="checkbox"
                                                value="{{ $item->name }}"
                                                {{ in_array($item->name, old('bentuk_tanah', [])) || (isset($forminspeksi['bentuk_tanah']) && in_array($item->name, $forminspeksi['bentuk_tanah'])) ? 'checked' : '' }}
                                                onclick="toggleTidakSesuai('bentuk_tanah', 'bentuk_tanah_lainnya')" />
                                            {{ $item->name }}
                                        </label>
                                        <input id="bentuk_tanah_lainnya" type="text" name="bentuk_tanah_lainnya"
                                            class="input w-full mt-2" placeholder="Masukkan bentuk tanah..."
                                            onclick="toggleTidakSesuai('bentuk_tanah', 'bentuk_tanah_lainnya')">
                                    </div>
                                @else
                                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                                        <input class="checkbox" name="bentuk_tanah[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('bentuk_tanah', [])) || (isset($forminspeksi['bentuk_tanah']) && in_array($item->name, $forminspeksi['bentuk_tanah'])) ? 'checked' : '' }}
                                            onclick="toggleTidakSesuai('bentuk_tanah', 'bentuk_tanah_lainnya')" />
                                        {{ $item->name }}
                                    </label>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-bentuk_tanah" class="alert text-danger text-sm"></em>
                </div>
            </div>



            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kontur Tanah</label>
                <div class="flex-wrap items-stretch">

                    <div class="flex flex-col items-start gap-4">
                        @if (isset($konturTanah))
                            @foreach ($konturTanah as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="kontur_tanah[]" type="checkbox"
                                    value="{{ $item->name }}"
                                    {{ in_array($item->name, old('kontur_tanah', isset($forminspeksi['kontur_tanah']) ? $forminspeksi['kontur_tanah'] : [])) ? 'checked' : '' }} />
                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-kontur_tanah" class="alert text-danger text-sm"></em>
                </div>
            </div>



            <!-- Beda Ketinggian Dengan Jalan -->
            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Beda Ketinggian Dengan Jalan</label>
                <div class="flex-wrap items-stretch">


                    <div class="flex flex-col items-start gap-4">
                        @if (isset($ketinggianTanah))
                            @foreach ($ketinggianTanah as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="ketinggian_jalan[]" type="checkbox"
                                        value="{{ $item->name }}"
                                        {{ in_array($item->name, old('ketinggian_jalan', $forminspeksi['ketinggian_jalan'] ?? [])) ? 'checked' : '' }} />
                                    {{ $item->name }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-ketinggian_jalan" class="alert text-danger text-sm"></em>
                </div>
            </div>


            <!-- Kontur Jalan Depan Objek -->
            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kontur Jalan Depan Objek</label>
                <div class="flex-wrap items-stretch">
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input type="radio" class="radio" name="kontur_jalan" value="menurun"
                                {{ old('kontur_jalan', $forminspeksi['kontur_jalan'] ?? '') == 'menurun' ? 'checked' : '' }}>
                            <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="kontur_jalan" value="rata"
                                {{ old('kontur_jalan', $forminspeksi['kontur_jalan'] ?? '') == 'rata' ? 'checked' : '' }}>
                            <span class="ml-2">Rata</span>
                        </label>
                    </div>
                    <em id="error-kontur_jalan" class="alert text-danger text-sm"></em>
                </div>
            </div>

            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Posisi Kavling</label>
                <div class="flex-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($posisiKavling))
                            @foreach ($posisiKavling as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="posisi_kavling[]" type="checkbox"
                                        value="{{ $item->name }}"
                                        {{ in_array($item->name, old('posisi_kavling', [])) || (isset($forminspeksi['posisi_kavling']) && in_array($item->name, $forminspeksi['posisi_kavling'])) ? 'checked' : '' }} />
                                    {{ $item->name }}
                                </label>
                                @if (strcasecmp($item->name, 'lainnya') == 0)
                                    <div class="flex items-center">
                                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                                            <input class="checkbox" name="posisi_kavling[]" type="checkbox"
                                                value="{{ $item->name }}" />
                                            {{ $item->name }}
                                        </label>
                                        <input type="text" name="posisi_kavling_lainnya" class="input mt-2"
                                            id="bentukTanahInput" placeholder="Masukkan Posisi Kavling">
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-posisi_kavling" class="alert text-danger text-sm"></em>
                </div>
            </div>


            <!-- Tusuk Sate -->
            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Tusuk Sate</label>
                <div class="flex-wrap items-stretch">
                    <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="tusuk_sate" value="yes"
                                {{ old('tusuk_sate') == 'yes' || (isset($forminspeksi['tusuk_sate']) && $forminspeksi['tusuk_sate'] == 'yes') ? 'checked' : '' }}>
                            <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="tusuk_sate" value="no"
                                {{ old('tusuk_sate') == 'no' || (isset($forminspeksi['tusuk_sate']) && $forminspeksi['tusuk_sate'] == 'no') ? 'checked' : '' }}>
                            <span class="ml-2">Tidak</span>
                        </label>
                    </div>
                    <em id="error-tusuk_sate" class="alert text-danger text-sm"></em>
                </div>
            </div>

            <!-- Lockland -->
            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Lockland</label>
                <div class="flex-wrap items-stretch">
                    <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="yes"
                                {{ old('lockland') == 'yes' || (isset($forminspeksi['lockland']) && $forminspeksi['lockland'] == 'yes') ? 'checked' : '' }}>
                            <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="no"
                                {{ old('lockland') == 'no' || (isset($forminspeksi['lockland']) && $forminspeksi['lockland'] == 'no') ? 'checked' : '' }}>
                            <span class="ml-2">Tidak</span>
                        </label>
                    </div>
                    <em id="error-lockland" class="alert text-danger text-sm"></em>
                </div>
            </div>

            <!-- Kondisi Fisik Tanah -->

            <div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kondisi Fisik Tanah</label>
                <div class="flex-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($kondisiFisikTanah))
                            @foreach ($kondisiFisikTanah as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="kondisi_fisik_tanah[]" type="checkbox"
                                        value="{{ $item->name }}"
                                        {{ in_array($item->name, old('kondisi_fisik_tanah', [])) || (isset($forminspeksi['kondisi_fisik_tanah']) && in_array($item->name, $forminspeksi['kondisi_fisik_tanah'])) ? 'checked' : '' }}
                                        onclick="toggleInputLainnya(this, 'kondisi_fisik_tanah_lainnya', '{{ $item->name }}')" />
                                    {{ $item->name }}
                                </label>

                                <!-- Display input field only if "lainnya" is selected -->
                                @if (strcasecmp($item->name, 'lainnya') == 0)
                                    <div class="flex items-center">
                                        <input type="text" name="kondisi_fisik_tanah_lainnya"
                                            id="kondisi_fisik_tanah_lainnya" class="input mt-2"
                                            placeholder="Masukkan Kondisi Fisik Tanah..." style="display: none;"
                                            value="{{ old('kondisi_fisik_tanah_lainnya') }}">
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-kondisi_fisik_tanah" class="alert text-danger text-sm"></em>
                </div>
            </div>
        </div>
    </div>
</div>


@push('scripts')
    <script>
        function handleSelectionChange() {
            const select = document.getElementById('bentukTanahSelect');
            const input = document.getElementById('bentukTanahInput');

            if (select.value === 'lainnya') {
                input.style.display = 'block';
                input.value = ''; // Kosongkan input
                input.focus(); // Fokus pada input
            } else {
                input.style.display = 'none';
                input.value = select.value; // Isi input dengan nilai yang dipilih
            }
        }







        function toggleJenisAsset(params) {
            const inputData = document.querySelector(`input[name="${params}"]:checked`);
            const luasTanah = document.getElementById('jenis_asset');

            if (inputData && inputData.value === 'tidak sesuai') {
                luasTanah.style.display = 'block';
            } else {
                luasTanah.style.display = 'none';
            }
        }


        function toggleAlamat(params) {
            const inputData = document.querySelector(`input[name="${params}"]:checked`);
            const luasTanah = document.getElementById('alamat');

            if (inputData && inputData.value === 'tidak sesuai') {
                luasTanah.style.display = 'block';
            } else {
                luasTanah.style.display = 'none';
            }
        }


        function toggleTidakSesuaiHadap(showSelect) {
            const selectElement = document.getElementById('selectTidakSesuai');
            selectElement.style.display = showSelect ? 'block' : 'none';
        }


        const perwakilanContainer = document.getElementById('perwakilan');
        const addPerwakilanButton = document.getElementById('addPerwakilan');

        // Tambahkan event listener untuk tombol "Tambah"
        addPerwakilanButton.addEventListener('click', function() {
            // Clone elemen ".perwakilan"
            const newDiv = perwakilanContainer.querySelector('.perwakilan').cloneNode(true);

            newDiv.querySelector('input').value = '';
            const deleteButton = newDiv.querySelector('.delete-button');
            deleteButton.style.display = 'inline-block';

            deleteButton.addEventListener('click', function() {
                newDiv.remove();
            });

            perwakilanContainer.appendChild(newDiv);
        });
    </script>
@endpush