<div class="card-header bg-agi-50">
    <h3 class="card-title">Data Pembanding</h3>
    <div class="flex items-center gap-2">
        @if (Request::is('penilai/show-data-pembanding/*/edit') && request()->has('documentId') && request()->has('jenis_jaminan'))
        <a href="{{ url()->previous() }}" class="btn btn-xs btn-info">
            <i class="ki-filled ki-exit-left"></i> Back
        </a>
    @else
        <a href="{{ route('surveyor.show', ['id' => $permohonan->id]) }}" class="btn btn-xs btn-info">
            <i class="ki-filled ki-exit-left"></i> Back
        </a>
    @endif
    </div>
</div>

<div class="card-header bg-agi-50 py-5 flex-wrap flex justify-end">
    <button type="button" id="addColumnBtn" class="btn btn-primary btn-sm">
        <i class="ki-filled ki-plus"></i> Tambah Pembanding
    </button>
    <button type="button" id="removeColumnBtn" class="btn btn-danger btn-sm ml-2" style="display: none;">
        <i class="ki-filled ki-minus"></i> Hapus Pembanding
    </button>
</div>

<div class="card-body">
    <div class="scrollable-x-auto">
        <table id="dataTable" class="table table-auto table-border align-middle text-gray-700 font-medium text-sm">
            <thead class="bg-gray-50 sticky top-0">
                <tr>
                    <th class="px-4 py-3 min-w-[200px]">Parameter</th>
                    <th class="px-4 py-3 min-w-[250px]">Objek Penilaian</th>
                    <th class="px-4 py-3 min-w-[250px]">Data Pembanding 1</th>
                </tr>
            </thead>
            <tbody>
                <!-- Informasi Dasar -->
                <tr class="bg-gray-100">
                    <td colspan="3" class="px-4 py-2 font-semibold">Informasi Dasar</td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Foto</td>
                    <td class="px-4 py-2">
                        <div class="flex flex-col gap-2">
                            @php
                                $photos = $fotoForm['upload_foto'] ?? [];
                                if (!is_array($photos)) {
                                    $photos = [];
                                }

                                $groupedPhotos = collect($photos)->groupBy('category');
                                $mainPhoto = $groupedPhotos->get('Tampak Depan', collect())->first();

                                // echo $mainPhoto;
                            @endphp

                            @if ($mainPhoto)
                                <img id="uploadedImage1" src="{{ asset('storage/' . $mainPhoto['path']) }}"
                                    class="max-w-[200px]" alt="Uploaded Image">
                            @endif

                            <input type="file" name="foto_objek" class="file-input" accept="image/*"
                                onchange="previewImage(this, 'uploadedImage1')">
                        </div>
                    </td>

                    <td class="px-4 py-2">
                        <div class="flex flex-col gap-2">
                            <img id="uploadedImage2" class="max-w-[200px] hidden" alt="Pembanding Image">
                            <input type="file" name="foto_objek_pembanding[]" class="file-input" accept="image/*"
                                onchange="previewImage(this, 'uploadedImage2')">
                        </div>
                    </td>
                </tr>



                <!-- Data Properti -->
                <tr class="bg-gray-100">
                    <td colspan="3" class="px-4 py-2 font-semibold">Data </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Nama</td>
                    <td class="px-4 py-2">
                        <input type="text" name="nama" class="input" value="{{ $inspectionData['nama'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="nama_pembanding[]" class="input">
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Tipe</td>
                    <td class="px-4 py-2">
                        <input type="text" name="type" class="input" value="{{ $inspectionData['type'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">

                        <input type="text" name="type_pembanding[]" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Warna</td>
                    <td class="px-4 py-2">

                        <input type="text" name="warna" class="input "
                            value="{{ $inspectionData['warna'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="warna_pembanding[]" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Lokasi</td>
                    <td class="px-4 py-2">

                        <input type="text" name="lokasi" class="input"
                            value="{{ $inspectionData['lokasi'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="lokasi_pembanding[]" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Sumber data</td>
                    <td class="px-4 py-2">

                        <input type="text" name="sumber_data" class="input"
                            value="{{ $inspectionData['sumber_data'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="sumber_data_pembanding[]" class="input">
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Tahun</td>
                    <td class="px-4 py-2">

                        <input type="text" name="tahun" class="input "
                            value="{{ $inspectionData['tahun'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="tahun_pembanding[]" class="input ">
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Transmisi</td>
                    <td class="px-4 py-2">
                        <input type="text" name="transmisi" class="input"
                            value="{{ is_array($inspectionData['transmisi'] ?? '') ? implode(', ', $inspectionData['transmisi']) : $inspectionData['transmisi'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="transmisi_pembanding[]" class="input ">
                    </td>
                </tr>


                <!-- Informasi Harga -->
                <tr class="bg-gray-100">
                    <td colspan="3" class="px-4 py-2 font-semibold">Spesifikasi</td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Tahun Pembuatan
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="tahun_pembuatan" class="input number-format"
                            value="{{ $inspectionData['tahun_pembuatan'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="tahun_pembuatan_pembanding[]" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Merek / Buatan
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="merek_buatan" class="input"
                            value="{{ $inspectionData['merek_buatan'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="merek_buatan_pembanding[]" class="input">
                    </td>
                </tr>


                <tr>
                    <td class="px-4 py-2">Kapasitas / HP
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="kapasitas" class="input"
                            value="{{ $inspectionData['kapasitas'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="kapasitas_pembanding[]" class="input">
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Power</td>
                    <td class="px-4 py-2">
                        <input type="text" name="power" class="input"
                            value="{{ $inspectionData['power'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="power_pembanding[]" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Kondisi</td>
                    <td class="px-4 py-2">
                        <input type="text" name="kondisi" class="input"
                        value="{{ $inspectionData['kondisi'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="kondisi_pembanding[]" class="input">
                    </td>
                </tr>


                <!-- Lokasi -->
                <tr class="bg-gray-100">
                    <td colspan="3" class="px-4 py-2 font-semibold">Lokasi</td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Koordinat</td>
                    <td class="px-4 py-2">
                        <div class="grid grid-cols-2 gap-2">
                            <input type="text" name="kordinat_lat" class="input" placeholder="Latitude"
                                value="{{ $inspectionData['kordinat_lat'] ?? '' }}" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
                            <input type="text" name="kordinat_lng" class="input" placeholder="Longitude"
                                value="{{ $inspectionData['kordinat_lng'] ?? '' }}" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
                        </div>
                    </td>
                    <td class="px-4 py-2">
                        <div class="grid grid-cols-2 gap-2">
                            <input type="text" name="kordinat_lat_pembanding[]" class="input"
                                placeholder="Latitude" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
                            <input type="text" name="kordinat_lng_pembanding[]" class="input"
                                placeholder="Longitude" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Alamat</td>
                    <td class="px-4 py-2">
                        @php
                            $address = $inspectionData['nama_jalan'] ?? null;
                        @endphp
                        <textarea name="nama_jalan" class="input py-2" rows="2">{{ $address }}</textarea>
                    </td>
                    <td class="px-4 py-2">
                        <textarea name="address_pembanding[]" class="input py-2" rows="2"></textarea>
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Provinsi</td>
                    <td class="px-4 py-2">
                        <select id="province_code" name="province_code" class="input w-full">

                            <option value="">Select Province</option>
                            @foreach ($provinces as $province)
                                @php

                                    $selectedProvince = $inspectionData['alamat']['sesuai']['province_code'] ?? null;
                                @endphp

                                <option value="{{ $province->code }}"
                                    {{ $selectedProvince == $province->code ? 'selected' : '' }}>
                                    {{ $province->name }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                    <td class="px-4 py-2">
                        <select id="province_code_pembanding" name="province_code_pembanding[]"
                            onchange="handleProvinceChange(this)" class="input w-full">
                            <option value="">Pilih Provinsi</option>
                            @foreach ($provinces as $province)
                                <option value="{{ $province->code }}">{{ $province->name }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Kabupaten/Kota</td>
                    <td class="px-4 py-2">
                        <select id="city_code" name="city_code" class="select w-full">
                            @php

                                $selectedCity = $inspectionData['alamat']['sesuai']['city_code'] ?? null;
                            @endphp
                            <option value="">Pilih Kota/Kabupaten</option>
                            @if (isset($selectedCity))
                                @foreach ($cities as $city)
                                    <option value="{{ $city->code }}"
                                        {{ $selectedCity == $city->code ? 'selected' : '' }}>
                                        {{ $city->name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </td>
                    <td class="px-4 py-2">
                        <select id="city_code_pembanding" name="city_code_pembanding[]"
                            onchange="handleCityChange(this)" class="input w-full">
                            <option value="">Pilih Kota/Kabupaten</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Kecamatan</td>
                    <td class="px-4 py-2">
                        <select id="district_code" name="district_code" class="select w-full">
                            @php

                                $selectedDisrict = $inspectionData['alamat']['sesuai']['district_code'] ?? null;
                            @endphp
                            <option value="">Pilih Kecamatan</option>
                            @if (isset($selectedDisrict))
                                @foreach ($districts as $district)
                                    <option value="{{ $district->code }}"
                                        {{ $selectedDisrict == $district->code ? 'selected' : '' }}>
                                        {{ $district->name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </td>
                    <td class="px-4 py-2">

                        <select id="district_code_pembanding" name="district_code_pembanding[]"
                            onchange="handleDistrictChange(this)" class="input w-full">
                            <option value="">Pilih Kecamatan</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Desa/Kelurahan</td>
                    <td class="px-4 py-2">
                        <select id="village_code" name="village_code" class="select w-full">
                            @php

                                $selectedDesa = $inspectionData['alamat']['sesuai']['village_code'] ?? null;
                            @endphp
                            <option value="">Pilih Kecamatan</option>
                            @if (isset($selectedDesa))
                                @foreach ($villages as $village)
                                    <option value="{{ $village->code }}"
                                        {{ $selectedDesa == $village->code ? 'selected' : '' }}>
                                        {{ $village->name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </td>
                    <td class="px-4 py-2">
                        <select id="village_code_pembanding" name="village_code_pembanding[]" class="input w-full">
                            <option value="">Pilih Desa/Kelurahan</option>
                        </select>
                    </td>
                </tr>

                <tr class="bg-gray-100">
                    <td colspan="3" class="px-4 py-2 font-semibold">Harga</td>
                </tr>

                <tr>
                    <td class="px-4 py-2">Harga Penawaran/ Transaksi(Rp)</td>
                    <td class="px-4 py-2">
                        <input type="text" name="harga" class="input currency-format"
                            value="{{ $inspectionData['asset']['harga'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="harga_pembanding[]" class="input currency-format">
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2">Diskon</td>
                    <td class="px-4 py-2">
                        <div class="input">
                            <input type="text" name="diskon" class=" currency"
                                value="{{ $inspectionData['asset']['diskon'] ?? '' }}">
                            <span class="btn btn-icon">
                                <i class="ki-outline ki-percentage"></i>
                            </span>
                        </div>

                    </td>
                    <td class=" px-4 py-2">
                        <div class="input">
                            <input type="text" name="diskon_pembanding[]" class="currency">
                            <span class="btn btn-icon">
                                <i class="ki-outline ki-percentage"></i>
                                </i>
                            </span>
                        </div>

                    </td>
                </tr>
                {{-- <tr style="display: none;">
                    <td class="px-4 py-2">Total</td>
                    <td class="px-4 py-2">
                        <input type="text" name="total" class="input currency"
                            value="{{ $inspectionData['total'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="total_pembanding[]" class="input currency-format">
                    </td>
                </tr> --}}
                <tr>
                    <td class="px-4 py-2">Harga Setelah Diskon</td>
                    <td class="px-4 py-2">
                        <input type="text" name="total" class="input currency-format" readonly
                            value="{{ $inspectionData['asset']['total'] ?? '' }}">
                    </td>
                    <td class="px-4 py-2">
                        <input type="text" name="total_pembanding[]" readonly class="input currency-format">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
