<div class="card-body grid gap-5">

    @php
        $informasiPembanding = isset($inspeksi->data_pembanding) ? json_decode($inspeksi->data_pembanding, true) : [];
    @endphp

    @if (isset($informasiPembanding['data_pembanding']))
        @foreach ($informasiPembanding['data_pembanding'] as $key => $item)
            <div class="border border-gray-200">
                <label class="px-5 py-5 form-label uppercase">Pembanding {{ $key + 1 }}
                </label>
                <div class="flex grid-col-md-2 gap-5 px-5">
                    <div class="grid gap-2.5">
                        <div class="image-container">
                            <img
                                src="{{ isset($item['foto_objek']) ? asset('storage/' . old('foto_objek', $item['foto_objek'])) : '#' }}"
                                alt="Gambar foto_objek"
                                class="responsive-image"
                            />
                        </div>
                    </div>
                    <div class="grid gap-2.5 w-full">
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Jenis Properti</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['jenis_aset'] ?? '' }}</span>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Alamat Lokasi</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['address'] ?? '' }}</span>
                            </div>
                        </div>
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Status Hak Tanah</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['hak_properti'] ?? '' }}</span>
                            </div>
                        </div>


                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Harga Penawaran</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ isset($item['harga']) ? formatRupiah($item['harga']) : '' }}</span>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Indikasi Harga Transaksi</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ isset($item['total']) ? formatRupiah($item['total']) : '' }}</span>
                            </div>
                        </div>
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Penjual (HP)</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['telepon'] ?? '' }}</span>
                            </div>
                        </div>
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Tanggal Data</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ isset($item['tanggal']) ? formatTanggalIndonesia($item['tanggal']) : '' }}</span>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">LT</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['luas_tanah'] ?? '' }} </span>
                                 <sup> m2</sup>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">LB</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['luas_bangunan'] ?? '' }} </span>
                                <sup> m2</sup>
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">Titik Koordinat</label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <span>{{ $item['kordinat_lat'] ?? '' }} , {{ $item['kordinat_lng'] ?? '' }}</span>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        @endforeach
    @endif
</div>


<style>

    .image-container {
        max-width: 20rem;
        max-height: 15rem;
        overflow: hidden;
    }

    .responsive-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

