{{-- @if ($analisaType == 'tanah_bangunan') --}}
<div class="card w-full bg-white rounded-lg shadow-md overflow-hidden">
    <div class="card-body">


        <div class="">
            <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-stretch 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">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($jenisBangunan))
                            @foreach ($jenisBangunan as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="jenis_bangunan[]" type="checkbox"
                                        value="{{ $item->name }}" />
                                    {{ $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="jenis_bangunan[]" type="checkbox"
                                            value="{{ $item->name }}" />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="jenis_bangunan" class="input mt-2" id="bentukTanahInput"
                                        placeholder="Masukkan Jenis Bangunan...">
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    @error('jenis_bangunan')
                        <em class="alert text-danger text-sm">{{ $message }}</em>
                    @enderror
                </div>
            </div>

            <!-- Kondisi Bangunan -->
            <div class="flex items-stretch 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">

                    <div class="flex flex-col items-start gap-4">
                        @if (isset($kondisiBangunan))
                            @foreach ($kondisiBangunan as $item)
                                <label class="form-label flex items-center gap-2.5 text-nowrap">
                                    <input class="checkbox" name="kondisi_bangunan[]" type="checkbox"
                                        value="{{ $item->name }}" />
                                    {{ $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="kondisi_bangunan[]" type="checkbox"
                                            value="{{ $item->name }}" />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="kondisi_bangunan" class="input mt-2" id="bentukTanahInput"
                                        placeholder="Masukkan Kondisi Bangunan...">
                                </div>
                                @endif
                            @endforeach
                        @endif
                       
                    </div>


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

            <!-- Sifat Bangunan -->
            <div class="flex items-stretch 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">


                    <div class="flex flex-col items-start gap-4">
                        @if (isset($sifatBangunan))
                            @foreach ($sifatBangunan as $item)
                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 ">
                                    <label class="form-label max-w-56  gap-2.5 " style="width: 500px">
                                        <input class="checkbox" name="sifat_bangunan[]" type="checkbox"
                                            value="{{ $item->name }}" />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="bentuk_tanah" class="input w-full" id="sifat_bangunan[]"
                                        placeholder="Masukkan {{ $item->name }}...">
                                </div>
                            @endforeach
                        @endif
                    </div>

                    @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-stretch 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">
                                                <div class="flex flex-col items-start gap-4" style="margin-top: 10px">
                                                    @foreach ($spekBangunan as $spek)
                                                        @if ($spek->spek_kategori_bangunan_id == $item->id)
                                                            <label class="form-label flex items-center gap-2.5">
                                                                <input class="checkbox" name="spek_bangunan[]"
                                                                    type="checkbox" value="{{ $spek->name }}" />
                                                                {{ $spek->name }}
                                                            </label>
                                                        @endif
                                                    @endforeach
                                                </div>

                                                @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">


                    <div class="flex flex-col items-start gap-4">
                        @if (isset($saranaPelengkap))
                            @foreach ($saranaPelengkap as $item)
                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 ">
                                    <label class="form-label max-w-56  gap-2.5 " style="width: 500px">
                                        <input class="checkbox" name="sarana_pelengkap[]" type="checkbox"
                                            value="{{ $item->name }}" />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="bentuk_tanah" class="input w-full"
                                        id="bentukTanahInput" placeholder="Masukkan {{ $item->name }}...">
                                </div>
                            @endforeach
                        @endif
                    </div>

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