<div class="card border border-agi-100 w-full  rounded-lg shadow-md overflow-hidden">
    <div class="card-header light:bg-agi-50">
        <h3 class="card-title uppercase">
            Analisa Bangunan
        </h3>
    </div>
    <div class="card-body">
        <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 Bangunan(IMB)</label>
                <div class="mt-2">

                    @if (isset($permohonan->documents))
                        @foreach ($permohonan->documents as $item)
                            @php
                                $total_luas_bangunan = 0;
                                $jenis_legalitas_jaminan_id = 0;
                                if (isset($item->detail)) {
                                    $total_luas_bangunan = calculateTotalLuas($item->detail, 'luas_bangunan', 10, 27, 3);
                                }
                            @endphp
                            <input type="hidden" id="jenis_legalistas_jaminan_bangunan_id"
                                name="jenis_legalistas_jaminan_bangunan_id" class="input"
                                value="{{ $jenis_legalitas_jaminan_id }}">
                            <input type="hidden" name="luas_bangunan_sesuai" class="input"
                                value="{{ $total_luas_bangunan }}">
                            <p class="text-2sm text-gray-700">{{ $total_luas_bangunan }} m<sup>2</sup></p>
                        @endforeach
                    @endif

                    <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-3 text-nowrap">
                                <input type="radio"
                                    onclick="toggleFieldVisibility('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai', ['tidak sesuai'])"
                                    class="radio" name="luas_tanah_bagunan" value="sesuai"
                                    {{ old('luas_tanah_bagunan', isset($forminspeksi['bangunan']['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"
                                    onclick="toggleFieldVisibility('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai',  ['tidak sesuai'])"
                                    value="tidak sesuai"
                                    {{ old('luas_tanah_bagunan', isset($forminspeksi['bangunan']['luas_tanah_bagunan']['tidak sesuai'])) ? 'checked' : '' }}>
                                <span class="ml-2">Tidak Sesuai</span>
                            </label>
                            @php
                                $statusKey = isset($forminspeksi['bangunan']['luas_tanah_bagunan']['sesuai'])
                                    ? 'sesuai'
                                    : 'tidak sesuai';
                                $selectedData = $forminspeksi['bangunan']['luas_tanah_bagunan'][$statusKey] ?? null;
                            @endphp

                            <div id="luas_tanah_bagunan_tidak_sesuai" class="flex items-baseline gap-2"
                                style="{{ old('luas_tanah_bagunan_tidak_sesuai', $selectedData) ? '' : 'display: none' }}">
                                <div class="input">
                                    <input type="text" id="analisa_bangunan_tidak_sesuai"
                                        name="luas_tanah_bagunan_tidak_sesuai" class="w-full number-format"
                                        placeholder="Masukan Luas Bangunan Tidak Sesuai..."
                                        value="{{ old('luas_tanah_bagunan_tidak_sesuai', $forminspeksi['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? '') }}">

                                </div>
                                {{-- <button type="button" class="btn btn-md btn-primary"
                                    onclick="updateAnalisa('analisa_bangunan')">
                                    Save
                                </button> --}}
                            </div>

                        </div>
                        <em id="error-luas_tanah_bagunan" class="alert text-danger text-sm"></em>
                    </div>
                </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-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($basicData['jenisBangunan']))
                            @foreach ($basicData['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 }}"
                                        {{ (is_array(old('jenis_bangunan')) && in_array($item->name, old('jenis_bangunan'))) ||
                                        (isset($forminspeksi['bangunan']['jenis_bangunan']) &&
                                            (is_array($forminspeksi['bangunan']['jenis_bangunan']) &&
                                                in_array($item->name, $forminspeksi['bangunan']['jenis_bangunan'])))
                                            ? 'checked'
                                            : '' }}
                                        onclick="toggleCheckboxVisibility('jenis_bangunan', 'jenis_bangunan_lainnya', ['lainnya'])" />
                                    {{ $item->name }}
                                </label>
                                @if (strcasecmp($item->name, 'Lainnya') == 0)
                                    <input id="jenis_bangunan_lainnya" type="text" style="display: none;"
                                        name="jenis_bangunan_lainnya" class="input w-full mt-2"
                                        placeholder="Masukkan lainnya..." />
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-jenis_bangunan" class="alert text-danger text-sm"></em>
                </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-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($basicData['kondisiBangunan']))
                            @foreach ($basicData['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 }}"
                                        {{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['bangunan']['kondisi_bangunan'] ?? [])) ? '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="kondisi_bangunan[]" type="checkbox"
                                                value="{{ $item->name }}"
                                                {{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['bangunan']['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
                                            {{ $item->name }}
                                        </label>
                                        <input type="text" name="kondisi_bangunan_lainnya" class="input mt-2"
                                            id="bentukTanahInput" placeholder="Masukkan Kondisi Bangunan..."
                                            value="{{ old('kondisi_bangunan_lainnya', $forminspeksi['bangunan']['kondisi_bangunan_lainnya'] ?? '') }}">
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <em id="error-kondisi_bangunan" class="alert text-danger text-sm"></em>
                </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-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($basicData['sifatBangunan']))
                            @foreach ($basicData['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 }}"
                                            {{ in_array($item->name, old('sifat_bangunan', $forminspeksi['bangunan']['sifat_bangunan'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="sifat_bangunan_input[]" class="input w-full"
                                        id="sifat_bangunan" placeholder="Masukkan {{ $item->name }}..."
                                        value="{{ old('sifat_bangunan_input.' . $loop->index, $forminspeksi['bangunan']['sifat_bangunan_input'][$loop->index] ?? '') }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-sifat_bangunan" class="alert text-danger text-sm"></em>
                </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">
                        @if (isset($forminspeksi['bangunan']) && is_array($forminspeksi['bangunan']) && !empty($forminspeksi['bangunan']['spesifikasi_bangunan']))
                            @foreach ($forminspeksi['bangunan']['spesifikasi_bangunan'] as $index => $bangunan)
                                <div class="spek-bangunan w-full gap-4 mt-5">
                                    <input type="hidden" name="nama_bangunan[]"
                                        value="{{ isset($bangunan['bagunan']) ? $bangunan['bagunan'] : 'Bangunan ' . ($index + 1) }}"
                                        required>
                                    <label
                                        class="building-label form-label">{{ isset($bangunan['bagunan']) ? $bangunan['bagunan'] : 'Bangunan ' . ($index + 1) }}</label>
                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
                                        @if (@isset($basicData['spekKategoriBangunan']))
                                            @foreach ($basicData['spekKategoriBangunan'] as $item)
                                                <div>
                                                    <input type="hidden" name="spek_kategori_bangunan[]"
                                                        value="{{ $item->name }}">
                                                    <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 ($basicData['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[{{ $index }}][{{ $item->name }}][]"
                                                                            type="checkbox"
                                                                            value="{{ $spek->name }}"
                                                                            {{ isset($bangunan['spek_kategori_bangunan'][$item->name]) &&
                                                                            in_array($spek->name, $bangunan['spek_kategori_bangunan'][$item->name])
                                                                                ? 'checked'
                                                                                : '' }} />
                                                                        {{ $spek->name }}
                                                                    </label>
                                                                @endif
                                                            @endforeach
                                                            <label class="form-label flex items-center gap-2.5 mt-2">
                                                                <input class="input" type="text"
                                                                    name="spek_bangunan[{{ $index }}][{{ $item->name }}][lainnya]"
                                                                    placeholder="Lainnya (sebutkan)"
                                                                    value="{{ isset($bangunan['spek_kategori_bangunan'][$item->name]['lainnya']) ? $bangunan['spek_kategori_bangunan'][$item->name]['lainnya'] : '' }}">
                                                            </label>
                                                        </div>
                                                        <em id="error-spek_bangunan_{{ $item->name }}"
                                                            class="alert text-danger text-sm"></em>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <button type="button"
                                        class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
                                        style="display: none;">Hapus</button>
                                </div>
                            @endforeach
                        @else
                            <div class="spek-bangunan w-full gap-4 mt-5">
                                <input type="hidden" name="nama_bangunan[]" value="Bangunan 1" required>
                                <label class="building-label form-label">Bangunan 1</label>
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
                                    @if (@isset($basicData['spekKategoriBangunan']))
                                        @foreach ($basicData['spekKategoriBangunan'] as $item)
                                            <div>
                                                <input type="hidden" name="spek_kategori_bangunan[]"
                                                    value="{{ $item->name }}">
                                                <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 ($basicData['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[0][{{ $item->name }}][]"
                                                                        type="checkbox"
                                                                        value="{{ $spek->name }}" />
                                                                    {{ $spek->name }}
                                                                </label>
                                                            @endif
                                                        @endforeach
                                                        <label class="form-label flex items-center gap-2.5 mt-2">
                                                            <input class=input" type="text"
                                                                name="spek_bangunan[0][{{ $item->name }}][lainnya]"
                                                                placeholder="Lainnya (sebutkan)">
                                                        </label>
                                                    </div>
                                                    <em id="error-spek_bangunan_{{ $item->name }}"
                                                        class="alert text-danger text-sm"></em>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
                                    style="display: none;">Hapus</button>
                            </div>
                        @endif
                    </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-wrap items-stretch">
                    <div class="flex flex-col items-start gap-4">
                        @if (isset($basicData['saranaPelengkap']))
                            @foreach ($basicData['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 }}"
                                            {{ in_array($item->name, (array) old('sarana_pelengkap', $forminspeksi['bangunan']['sarana_pelengkap'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="sarana_pelengkap_input[]" class="input w-full"
                                        placeholder="Masukkan {{ $item->name }}..."
                                        value="{{ old('sarana_pelengkap_input.' . $loop->index, $forminspeksi['bangunan']['sarana_pelengkap_input'][$loop->index] ?? '') }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-sarana_pelengkap" class="alert text-danger text-sm"></em>
                </div>
            </div>


        </div>
    </div>
</div>



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

        function updateDeleteButtonsVisibility() {
            const allDeleteButtons = spekBangunanContainer.querySelectorAll('.delete-button');
            allDeleteButtons.forEach(button => {
                button.style.display = spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1 ?
                    'inline-block' : 'none';
            });
        }

        function updateBuildingLabels() {
            const allSpekBangunan = spekBangunanContainer.querySelectorAll('.spek-bangunan');
            allSpekBangunan.forEach((div, index) => {
                const label = div.querySelector('.building-label');
                const nameInput = div.querySelector('input[name^="nama_bangunan"]');
                if (label) {
                    const buildingName = `Bangunan ${index + 1}`;
                    label.textContent = buildingName;
                    if (nameInput) {
                        nameInput.value = buildingName;
                    }
                }
            });
        }

        function updateInputNames(container, index) {
            container.querySelectorAll('input').forEach(input => {
                if (input.name) {
                    if (input.name.includes('[')) {
                        if (input.name.startsWith('spek_bangunan')) {
                            // Handle spek_bangunan inputs
                            const matches = input.name.match(/spek_bangunan\[\d+\]\[(.*?)\]/);
                            if (matches) {
                                input.name = `spek_bangunan[${index}][${matches[1]}][]`;
                            }
                        } else {
                            // Handle lainnya array inputs
                            input.name = input.name.replace(/\[\d*\]/, `[${index}]`);
                        }
                    }
                }
            });
        }

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

            // Reset and update inputs
            newDiv.querySelectorAll('input').forEach(input => {
                if (input.type === 'checkbox') {
                    input.checked = false;
                } else {
                    input.value = '';
                }
            });

            // Update input names
            updateInputNames(newDiv, newIndex);

            // Add delete button handler
            const deleteButton = newDiv.querySelector('.delete-button');
            deleteButton.addEventListener('click', function() {
                newDiv.remove();
                updateDeleteButtonsVisibility();
                updateBuildingLabels();
            });

            // Append and update UI
            spekBangunanContainer.appendChild(newDiv);
            updateDeleteButtonsVisibility();
            updateBuildingLabels();
        });

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', () => {
            updateDeleteButtonsVisibility();
            updateBuildingLabels();

            // Add delete handlers to existing buttons
            spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
                button.addEventListener('click', function() {
                    if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
                        this.closest('.spek-bangunan').remove();
                        updateDeleteButtonsVisibility();
                        updateBuildingLabels();
                    }
                });
            });
        });
    </script>
@endpush
