{{-- @if ($analisaType == 'tanah_bangunan') --}}
<div class=" bg-white rounded-lg shadow-md overflow-hidden">
    <div class="y-4 px-6">
        <h1 class="text-md font-medium text-gray-900">Analisa Bangunan</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">Luas Tanah</label>
            <div class="flex flex-wrap items-baseline w-full">
                <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="luas_tanah_bagunan" value="sesuai"
                            {{ old('luas_tanah_bagunan') == '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_bagunan" value="tidak sesuai"
                            {{ old('luas_tanah_bagunan') == 'tidak sesuai' ? 'checked' : '' }}>
                        <span class="ml-2">Tidak Sesuai</span>
                    </label>
                </div>

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


        <!-- Jenis Bangunan -->
        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
            <label class="form-label max-w-56">Jenis Bangunan</label>
            <div class="flex flex-wrap items-baseline w-full">
                <select
                    class="input tomselect w-full @error('jenis_bangunan') border-danger bg-danger-light  @enderror"
                    name="jenis_bangunan">
                    <option value="">Select Jenis Bangunan</option>
                    @if (isset($jenisBangunan))
                        @foreach ($jenisBangunan as $item)
                            <option value="{{ $item->name }}"
                                {{ old('jenis_bangunan', isset($analisa) &&  optional($analisa->analisaTanahBangunan)->jenis_bangunan) == $item->name ? 'selected' : '' }}>{{ $item->name }}
                            </option>
                        @endforeach
                    @endif
                </select>

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

        <!-- Kondisi Bangunan -->
        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
            <label class="form-label max-w-56">Kondisi Bangunan</label>
            <div class="flex flex-wrap items-baseline w-full">
                <select
                    class="input tomselect w-full @error('kondisi_bangunan') border-danger bg-danger-light  @enderror"
                    name="kondisi_bangunan">
                    <option value="">Select Kondisi Bangunan</option>
                    @if (isset($kondisiBangunan))
                        @foreach ($kondisiBangunan as $item)
                            <option value="{{ $item->name }}"
                                {{ old('kondisi_bangunan', isset($analisa) &&  optional($analisa->analisaTanahBangunan)->kondisi_bangunan) == $item->name ? 'selected' : '' }}>{{ $item->name }}
                            </option>
                        @endforeach
                    @endif
                </select>

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

        <!-- Sifat Bangunan -->
        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
            <label class="form-label max-w-56"> Sifat Bangunan</label>
            <div class="flex flex-wrap items-baseline w-full">
                <select
                    class="input tomselect w-full @error('sifat_bangunan') border-danger bg-danger-light  @enderror"
                    name="sifat_bangunan">
                    <option value="">Select Sifat Bangunan</option>
                    @if (isset($sifatBangunan))
                        @foreach ($sifatBangunan as $item)
                            <option value="{{ $item->name }}"
                                {{ old('sifat_bangunan', isset($analisa) &&  optional($analisa->analisaTanahBangunan)->sifat_bangunan) == $item->name ? 'selected' : '' }}>{{ $item->name }}
                            </option>
                        @endforeach
                    @endif
                </select>

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

        <!-- Spek Bangunan -->
        <div class="gap-2.5">
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Spek Bangunan</label>

                <div class="flex flex-wrap items-baseline w-full" id="spek-bangunan-container">
                    <div class="spek-bangunan w-full gap-4">
                        <input type="hidden" name="nama_bagunan[]" value="Bangunan">
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
                            @if (@isset($spekKategoriBagunan))
                                @foreach ($spekKategoriBagunan as $item)
                                    <div>
                                        <label
                                            class="form-label flex items-center gap-3 text-nowrap">{{ $item->name }}</label>
                                        <div class="flex flex-wrap items-baseline w-full">
                                            <select
                                                class="input tomselect w-full @error('name') border-danger bg-danger-light @enderror"
                                                name="name[]">
                                                <option value="">Select {{ $item->name }}</option>
                                                @foreach ($spekBangunan as $spek)
                                                    @if ($spek->spek_kategori_bangunan_id == $item->id)
                                                        <option value="{{ $spek->name }}"
                                                            {{ old('name') == $spek->name ? 'selected' : '' }}>
                                                            {{ $spek->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>

                                            @error('name')
                                                <em class="alert text-danger text-sm">{{ $message }}</em>
                                            @enderror
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <button type="button"
                            class="mt-2 btn btn-danger btn-outline btn-xs delete-button">Hapus</button>
                    </div>
                </div>
            </div>

            <div class="flex justify-end">
                <button class="btn  btn-xs btn-primary" type="button" id="addBagunan">
                    tambah bangunan
                    <i class="ki-filled ki-plus"></i>
                </button>
            </div>
        </div>


        <!-- Sarana pelengkap -->

        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
            <label class="form-label max-w-56">Sarana pelengkap</label>
            <div class="flex flex-wrap items-baseline w-full">
                <select
                    class="input tomselect w-full @error('sarana_pelengkap') border-danger bg-danger-light  @enderror"
                    name="sarana_pelengkap">
                    <option value="">Select Posisi Kavling</option>
                    @if (isset($saranaPelengkap))
                        @foreach ($saranaPelengkap as $item)
                            <option value="{{ $item->name }}"
                                {{ old('sarana_pelengkap', isset($analisa) &&  optional($analisa->analisaTanahBangunan)->sarana_pelengkap) == $item->name ? 'selected' : '' }}>{{ $item->name }}
                            </option>
                        @endforeach
                    @endif
                </select>

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

@push('scripts')
    <script>
        const spekBangunanContainer = document.getElementById('spek-bangunan-container');

        function updateDeleteButtonsVisibility() {
            const allDeleteButtons = spekBangunanContainer.querySelectorAll('.delete-button');
            // Only show the delete buttons if there are more than one form
            allDeleteButtons.forEach(button => {
                if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
                    button.style.display = 'inline-block';
                } else {
                    button.style.display = 'none';
                }
            });
        }

        document.getElementById('addBagunan').addEventListener('click', function() {
            const newDiv = spekBangunanContainer.querySelector('.spek-bangunan').cloneNode(true);

            // Clear the selected values of the cloned input fields
            newDiv.querySelectorAll('select').forEach(select => {
                select.value = '';
            });

            // Append the cloned div to the container
            spekBangunanContainer.appendChild(newDiv);

            // Add event listener to the delete button in the cloned div
            newDiv.querySelector('.delete-button').addEventListener('click', function() {
                spekBangunanContainer.removeChild(newDiv);
                updateDeleteButtonsVisibility();
            });

            // Update delete buttons visibility
            updateDeleteButtonsVisibility();
        });

        // Initial delete button visibility
        updateDeleteButtonsVisibility();

        // Add delete functionality to the initial form
        spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
            button.addEventListener('click', function() {
                const spekBangunan = this.closest('.spek-bangunan');

                // Make sure not to delete the last remaining form
                if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
                    spekBangunan.remove();
                    updateDeleteButtonsVisibility();
                }
            });
        });
    </script>
@endpush