<div class="card border border-agi-100 w-full bg-white rounded-lg shadow-md overflow-hidden">
    <div class="card-header bg-agi-50">
        <h3 class="card-title uppercase">
            Analisa Unit
        </h3>
    </div>
    <div class="card-body">
        <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 Unit</label>
                @if (isset($permohonan->documents))
                    @foreach ($permohonan->documents as $item)
                        @php
                            $total_luas_unit = 0;
                            $jenis_legalitas_jaminan_id = 0;
                            if (isset($item->detail)) {
                                $total_luas_unit = calculateTotalLuas($item->detail, 'luas_bangunan', 1, 27, 3);
                            }
                        @endphp
                        <input type="hidden" id="jenis_legalistas_jaminan_unit_id" name="jenis_legalistas_jaminan_unit_id"
                            class="input" value="{{ $jenis_legalitas_jaminan_id }}">
                        <input type="hidden" name="luas_unit_sesuai" class="input" value="{{ $total_luas_unit }}">

                        <p class="text-2sm text-gray-700">{{ $total_luas_unit }} m<sup>2</sup></p>
                    @endforeach
                @endif

                <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
                                onclick="toggleFieldVisibility('luas_unit','luas_unit_tidak_sesuai', ['tidak sesuai'])"
                                type="radio" class="radio" name="luas_unit" value="sesuai"
                                {{ old('luas_unit', isset($forminspeksi['luas_unit']['sesuai'])) ? 'checked' : '' }}>
                            <span class="ml-2">Sesuai</span>
                        </label>
                        <label class="form-label flex items-center gap-2.5 text-nowrap">
                            <input
                                onclick="toggleFieldVisibility('luas_unit','luas_unit_tidak_sesuai', ['tidak sesuai'])"
                                type="radio" class="radio" name="luas_unit" value="tidak sesuai"
                                {{ old('luas_unit', isset($forminspeksi['luas_unit']['tidak sesuai'])) ? 'checked' : '' }}>
                            <span class="ml-2">Tidak Sesuai</span>
                        </label>

                        <div id="luas_unit_tidak_sesuai" class="flex items-baseline gap-2"
                            style="{{ old('luas_unit', isset($forminspeksi['luas_unit']['tidak sesuai'])) ? '' : 'display: none;' }}">
                            <div class="input">
                                <input id="analisa_luas_unit_tidak_sesuai" type="text" name="luas_unit_tidak_sesuai"
                                    class="number-format w-full" placeholder="Masukan Luas Tanah"
                                    value="{{ old('luas_unit_tidak_sesuai', $forminspeksi['luas_unit_tidak_sesuai'] ?? '') }}">
                                <i>M<sup>2</sup></i>
                            </div>
                            {{-- <button type="button" class="btn btn-md btn-primary"
                                onclick="updateAnalisa('analisa_unit')">Save</button> --}}
                        </div>
                    </div>
                    <em id="error-luas_unit" class="alert text-danger text-sm"></em>
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Kondisi Unit</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <div class="flex-wrap items-stretch">
                        <div class="flex flex-col items-start gap-2">
                            @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_unit[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('kondisi_unit', $forminspeksi['kondisi_unit'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                @endforeach
                            @endif
                        </div>
                        <em id="error-kondisi_unit" class="alert text-danger text-sm"></em>
                    </div>
                </div>
            </div>

            <!-- Posisi Unit -->
            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Posisi Unit</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <div class="flex-wrap items-stretch">
                        <div class="flex flex-col items-start gap-2">
                            @if (isset($basicData['posisiUnit']))
                                @foreach ($basicData['posisiUnit'] as $item)
                                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                                        <input class="checkbox" name="posisi_unit[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('posisi_unit', $forminspeksi['posisi_unit'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                @endforeach
                            @endif
                        </div>
                        <em id="error-posisi_unit" class="alert text-danger text-sm"></em>
                    </div>
                </div>
            </div>

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

                    <div class="flex flex-col items-start gap-4">
                        @if (isset($basicData['lantai']))
                            @foreach ($basicData['lantai'] 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="lantai[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('lantai', $forminspeksi['lantai'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                    <input type="text" name="lantai_input[]" class="input w-full" id="lantaiInput"
                                        placeholder="Masukkan {{ $item->name }}..."
                                        value="{{ old('lantai_input.' . $loop->index, $forminspeksi['lantai_input'][$loop->index] ?? '') }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <em id="error-lantai" class="alert text-danger text-sm"></em>
                </div>
            </div>

            <!-- Kondisi Fisik Tanah -->

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">View</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <div class="flex-wrap items-stretch">
                        <div class="flex flex-col items-start gap-2">
                            @if (isset($basicData['viewUnit']))
                                @foreach ($basicData['viewUnit'] as $item)
                                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                                        <input class="checkbox" name="view[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('view', $forminspeksi['view'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                @endforeach
                            @endif
                        </div>
                        <em id="error-view" class="alert text-danger text-sm"></em>
                    </div>
                </div>
            </div>

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">Bentuk Unit</label>
                <div class="flex flex-wrap items-baseline w-full">
                    <div class="flex-wrap items-stretch">
                        <div class="flex flex-col items-start gap-2">
                            @if (isset($basicData['bentukUnit']))
                                @foreach ($basicData['bentukUnit'] as $item)
                                    <label class="form-label flex items-center gap-2.5 text-nowrap">
                                        <input class="checkbox" name="bentuk_unit[]" type="checkbox"
                                            value="{{ $item->name }}"
                                            {{ in_array($item->name, old('bentuk_unit', $forminspeksi['bentuk_unit'] ?? [])) ? 'checked' : '' }} />
                                        {{ $item->name }}
                                    </label>
                                @endforeach
                            @endif
                        </div>
                        <em id="error-bentuk_unit" class="alert text-danger text-sm"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
