@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5">
        <div class="grid gap-5">
            <div class="card-grid min-w-full" data-datatable="false" data-datatable-page-size="5"
                data-datatable-state-save="false" id="data-table" data-api-url="">

                <form id="dataPembandingForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
                    <input type="hidden" name="type" value="tanah">
                    <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Data Pembanding</h3>
                            <div class="flex items-center gap-2">
                                <a href="{{ route('surveyor.show', ['id' => request('pembanding')]) }}"
                                    class="btn btn-xs btn-info">
                                    <i class="ki-filled ki-exit-left"></i> Kembali
                                </a>
                            </div>
                        </div>

                        <div class="card-header 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>

                        {{-- @php
                            print_r($inspectionData);
                        @endphp --}}

                        <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">
                                                    <img id="uploadedImage1"
                                                        src="{{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? asset('storage/' . $fotoForm['object_jaminan'][0]['foto_objek']) : '' }}"
                                                        class="max-w-[200px] {{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? '' : 'hidden' }}"
                                                        alt="Uploaded Image">
                                                    <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 Properti</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Jenis Aset</td>
                                            <td class="px-4 py-2">
                                                <select name="jenis_aset" class="select">
                                                    <option value="">Pilih Jenis Aset</option>
                                                    @foreach ($data['jenisJaminan'] as $item)
                                                        <option value="{{ $item->name }}"
                                                            {{ ($inspectionData['asset']['jenis_asset']['sesuai'] ?? '') == $item->name ? 'selected' : '' }}>
                                                            {{ $item->name }}</option>
                                                    @endforeach

                                                </select>
                                            </td>
                                            <td class="px-4 py-2">
                                                <select name="jenis_aset_pembanding[]" class="select">
                                                    <option value="">Pilih Jenis Aset</option>
                                                    @foreach ($data['jenisJaminan'] as $item)
                                                        <option value="{{ $item->name }}"
                                                            {{ ($inspectionData['jenis_aset'] ?? '') == $item->name ? 'selected' : '' }}>
                                                            {{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>

                                        @php
                                            $apartemenKantorData = explode(',', $inspeksi->name);
                                            $isApartemenKantor = array_intersect($apartemenKantorData, [
                                                'tanah',
                                                'bangunan',
                                            ]);

                                        @endphp

                                        @if ($isApartemenKantor)
                                            <tr>
                                                <td class="px-4 py-2">Luas Tanah (m²)</td>
                                                @php
                                                    $cekLuas =
                                                        isset($inspectionData['tanah']['luas_tanah']) == 'sesuai'
                                                            ? 'sesuai'
                                                            : 'tidak sesuai';

                                                @endphp
                                                <td class="px-4 py-2">
                                                    <input type="text" name="luas_tanah" class="input number-format"
                                                        value="{{ $inspectionData['tanah']['luas_tanah']['sesuai'] ?? ($inspectionData['tanah']['luas_tanah']['tidak sesuai'] ?? '') }}">
                                                </td>
                                                <td class="px-4 py-2">

                                                    <input type="text" name="luas_tanah_pembanding[]"
                                                        class="input number-format">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-4 py-2">Luas Bangunan (m²)</td>
                                                <td class="px-4 py-2">

                                                    <input type="text" name="luas_tanah_bagunan"
                                                        class="input number-format"
                                                        value="{{ $inspectionData['bangunan']['luas_tanah_bagunan']['sesuai'] ?? ($inspectionData['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? '') }}">
                                                </td>
                                                <td class="px-4 py-2">
                                                    <input type="text" name="luas_bangunan_pembanding[]"
                                                        class="input number-format">
                                                </td>
                                            </tr>
                                        @else
                                            <tr>
                                                <td class="px-4 py-2">Luas Unit (m²)</td>
                                                <td class="px-4 py-2">
                                                    <input type="text" name="luas_unit" class="input number-format"
                                                        value="{{ $inspectionData['unit']['luas_unit']['sesuai'] ?? ($inspectionData['unit']['luas_unit']['tidak sesuai'] ?? '') }}">
                                                </td>
                                                <td class="px-4 py-2">
                                                    <input type="text" name="luas_unit_pembanding[]"
                                                        class="input number-format">
                                                </td>
                                            </tr>
                                        @endif


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

                                        <tr>
                                            <td class="px-4 py-2">Status Narasumber</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="status_nara_sumber" class="input"
                                                    value="{{ $inspectionData['asset']['status_nara_sumber'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="status_nara_sumber_pembanding[]"
                                                    class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Nama Narasumber</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="nama_nara_sumber" class="input"
                                                    value="{{ $inspectionData['asset']['nama_nara_sumber'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="nama_nara_sumber_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['asset']['kordinat_lat'] ?? '' }}">
                                                    <input type="text" name="kordinat_lng" class="input"
                                                        placeholder="Longitude"
                                                        value="{{ $inspectionData['asset']['kordinat_lng'] ?? '' }}">
                                                </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">
                                                    <input type="text" name="kordinat_lng_pembanding[]" class="input"
                                                        placeholder="Longitude">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Alamat</td>
                                            <td class="px-4 py-2">
                                                @php
                                                    $statusAlamat = isset($inspectionData['asset']['alamat']['sesuai'])
                                                        ? 'sesuai'
                                                        : 'tidak sesuai';
                                                    $address =
                                                        $inspectionData['asset']['alamat'][$statusAlamat]['address'] ??
                                                        null;
                                                @endphp
                                                <textarea name="address" 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">
                                                    @php
                                                        $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
                                                            ? 'sesuai'
                                                            : 'tidak sesuai';
                                                        $address =
                                                            $inspectionData['asset']['alamat'][$statusKey][
                                                                'province_code'
                                                            ] ?? null;
                                                    @endphp
                                                    <option value="">Select Province</option>
                                                    @foreach ($provinces as $province)
                                                        @php
                                                            $statusKey = isset(
                                                                $inspectionData['asset']['alamat']['sesuai'],
                                                            )
                                                                ? 'sesuai'
                                                                : 'tidak sesuai';
                                                            $selectedProvince =
                                                                $inspectionData['asset']['alamat'][$statusKey][
                                                                    '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

                                                        $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
                                                            ? 'sesuai'
                                                            : 'tidak sesuai';
                                                        $selectedCity =
                                                            $inspectionData['asset']['alamat'][$statusKey][
                                                                '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

                                                        $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
                                                            ? 'sesuai'
                                                            : 'tidak sesuai';
                                                        $selectedDisrict =
                                                            $inspectionData['asset']['alamat'][$statusKey][
                                                                '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
                                                        $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
                                                            ? 'sesuai'
                                                            : 'tidak sesuai';
                                                        $selectedDesa =
                                                            $inspectionData['asset']['alamat'][$statusKey][
                                                                '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 Per Meter</td>
                                        </tr>

                                        <tr>
                                            <td class="px-4 py-2">Harga</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-format"
                                                        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-format">
                                                    <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-format"
                                                    value="{{ $inspectionData['asset']['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="harga_diskon" class="input currency-format"
                                                    value="{{ $inspectionData['asset']['harga_diskon'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="harga_diskon_pembanding[]"
                                                    class="input currency-format">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="flex justify-end gap-2">
                                <button type="button" onclick="submitData()" class="btn btn-primary">
                                    <i class="ki-duotone ki-save-2 fs-2"></i>
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection

@push('scripts')
    @include('lpj::surveyor.js.utils')
    <script>
        let columnCount = 1;



        // Fungsi calculate prices yang diperbaiki
        function calculatePrices(type = 'main', index = null) {
            let hargaInput, diskonInput, totalInput, hargaDiskonInput;

            // Tentukan input berdasarkan tipe (main atau pembanding)
            if (type === 'main') {
                hargaInput = document.querySelector('input[name="harga"]');
                diskonInput = document.querySelector('input[name="diskon"]');
                totalInput = document.querySelector('input[name="total"]');
                hargaDiskonInput = document.querySelector('input[name="harga_diskon"]');
            } else {
                // Untuk pembanding, gunakan array input dengan index
                const hargaInputs = document.getElementsByName('harga_pembanding[]');
                const diskonInputs = document.getElementsByName('diskon_pembanding[]');
                const totalInputs = document.getElementsByName('total_pembanding[]');
                const hargaDiskonInputs = document.getElementsByName('harga_diskon_pembanding[]');

                // Pastikan index valid
                if (index !== null && index < hargaInputs.length) {
                    hargaInput = hargaInputs[index];
                    diskonInput = diskonInputs[index];
                    totalInput = totalInputs[index];
                    hargaDiskonInput = hargaDiskonInputs[index];
                } else {
                    return; // Keluar jika index tidak valid
                }
            }

            // Validasi input
            if (!hargaInput || !diskonInput || !totalInput || !hargaDiskonInput) {
                return;
            }

            // Ambil nilai numerik dari input
            const harga = parseFloat(hargaInput.value.replace(/[^\d]/g, '') || '0');
            let diskon = parseFloat(diskonInput.value.replace(/[^\d]/g, '') || '0');

            // Batasi diskon maksimal 100%
            diskon = Math.min(diskon, 100);
            diskonInput.value = formatCurrency(diskon.toString());

            // Hitung total dan harga setelah diskon
            const total = harga;
            const hargaSetelahDiskon = harga - (harga * (diskon / 100));

            // Update nilai dengan format currency
            totalInput.value = formatCurrency(total.toString());
            hargaDiskonInput.value = formatCurrency(hargaSetelahDiskon.toString());
        }


        // Update fungsi fillPembandingData
        function fillPembandingData(data, index) {
            if (!data) return;

            function setArrayInputValue(name, value, index) {
                const element = document.getElementsByName(name)[index];
                if (element) {
                    if (element.tagName === "SELECT") {
                        const options = Array.from(element.options);
                        const optionToSelect = options.find(option => option.value === value);
                        if (optionToSelect) {
                            optionToSelect.selected = true;
                        } else {
                            element.selectedIndex = 0;
                        }
                    } else {
                        // Format currency untuk input harga
                        if (name.includes('harga') || name.includes('total') || name.includes('diskon')) {
                            element.value = formatCurrency(value ? value.toString() : '0');
                        } else {
                            element.value = value || '';
                        }
                    }
                }
            }

            const inputs = {
                'jenis_aset_pembanding[]': data.jenis_aset,
                'luas_tanah_pembanding[]': data.luas_tanah,
                'luas_bangunan_pembanding[]': data.luas_bangunan,
                'status_nara_sumber_pembanding[]': data.status_nara_sumber,
                'nama_nara_sumber_pembanding[]': data.nama_nara_sumber,
                'kordinat_lat_pembanding[]': data.kordinat_lat,
                'kordinat_lng_pembanding[]': data.kordinat_lng,
                'address_pembanding[]': data.address,
                'village_code_pembanding[]': data.village_code,
                'district_code_pembanding[]': data.district_code,
                'city_code_pembanding[]': data.city_code,
                'province_code_pembanding[]': data.province_code,
                'harga_pembanding[]': data.harga,
                'harga_diskon_pembanding[]': data.harga_diskon,
                'total_pembanding[]': data.total,
                'diskon_pembanding[]': data.diskon,
            };

            Object.entries(inputs).forEach(([name, value]) => {
                setArrayInputValue(name, value, index);
            });

            // Handle foto objek
            if (data.foto_objek) {
                const imageId = `uploadedImage${index + 2}`;
                const preview = document.getElementById(imageId);
                if (preview) {
                    preview.src = `/storage/${data.foto_objek}`;
                    preview.classList.remove('hidden');
                }
            }

            // Handle lokasi secara berurutan
            if (data.province_code) {
                setTimeout(() => {
                    getCity(data.province_code, index + 1).then(() => {
                        if (data.city_code) {
                            setArrayInputValue('city_code_pembanding[]', data.city_code, index);
                            getDistrict(data.city_code, index + 1).then(() => {
                                if (data.district_code) {
                                    setArrayInputValue('district_code_pembanding[]', data
                                        .district_code, index);
                                    getVillage(data.district_code, index + 1).then(() => {
                                        if (data.village_code) {
                                            setArrayInputValue('village_code_pembanding[]',
                                                data.village_code, index);
                                        }
                                    });
                                }
                            });
                        }
                    });
                }, 100);
            }

            // Hitung harga setelah data terisi
            setTimeout(() => calculatePrices(index), 200);
        }

        // Update event listener untuk input harga dan diskon
        function initializePriceCalculation() {
            // Event listener untuk input utama
            const mainHargaInput = document.querySelector('input[name="harga"]');
            const mainDiskonInput = document.querySelector('input[name="diskon"]');

            if (mainHargaInput) {
                mainHargaInput.addEventListener('input', () => calculatePrices('main'));
            }

            if (mainDiskonInput) {
                mainDiskonInput.addEventListener('input', () => calculatePrices('main'));
            }

            // Event listener untuk input pembanding
            const pembandingHargaInputs = document.getElementsByName('harga_pembanding[]');
            const pembandingDiskonInputs = document.getElementsByName('diskon_pembanding[]');

            pembandingHargaInputs.forEach((input, index) => {
                input.addEventListener('input', () => calculatePrices('pembanding', index));
            });

            pembandingDiskonInputs.forEach((input, index) => {
                input.addEventListener('input', () => calculatePrices('pembanding', index));
            });
        }



        document.addEventListener('DOMContentLoaded', function() {
            try {
                const inspectionData = {!! isset($inspectionData) ? json_encode($inspectionData) : 'null' !!};
                const comparisons = {!! isset($comparisons) ? json_encode($comparisons) : 'null' !!};

                console.log('inspectionData:', inspectionData);
                console.log('comparisons:', comparisons);

                initializeFirstPembandingListeners();
                ensureLocationEventListeners();
                initializePriceCalculation();

                if (comparisons) {
                    comparisons.data_pembanding.forEach((comparison, index) => {
                        if (index > 0) {
                            addColumn();
                        }
                        fillPembandingData(comparison, index);
                    });
                }

                updateRemoveButtonVisibility();
                initializeEventListeners();
            } catch (error) {
                console.error('Error initializing form:', error);
            }
        });

        function addColumn() {
            columnCount++;
            const table = document.getElementById('dataTable');
            const headerRow = table.querySelector('thead tr');
            const bodyRows = table.querySelectorAll('tbody tr');

            const newHeader = document.createElement('th');
            newHeader.className = 'px-4 py-3 min-w-[250px]';
            newHeader.textContent = `Data Pembanding ${columnCount}`;
            headerRow.appendChild(newHeader);

            bodyRows.forEach(row => {
                const newCell = document.createElement('td');
                newCell.className = 'px-4 py-2';

                const firstInputCell = row.querySelector('td:last-child');
                if (firstInputCell) {
                    const clonedContent = firstInputCell.innerHTML;
                    newCell.innerHTML = clonedContent;

                    const inputs = newCell.querySelectorAll('input, select, textarea');
                    inputs.forEach((input) => {
                        if (input.type === 'file') {
                            const newImageId = `uploadedImage${columnCount + 1}`;
                            const preview = newCell.querySelector('img');
                            if (preview) {
                                preview.id = newImageId;
                                preview.src = '';
                                preview.classList.add('hidden');
                                input.onchange = function() {
                                    previewImage(this, newImageId);
                                };
                            }
                        }

                        if (input.tagName === 'SELECT') {
                            const baseId = input.id.replace(/_\d+$/, '').replace('_pembanding', '');
                            const newId = `${baseId}_pembanding_${columnCount}`;
                            input.id = newId;

                            if (input.name.includes('jenis_aset')) {
                                const originalOptions = document.querySelector(
                                    'select[name="jenis_aset_pembanding[]"]').innerHTML;
                                input.innerHTML = originalOptions;
                            } else if (!input.id.includes('province')) {
                                // Reset opsi untuk select lokasi
                                input.innerHTML = `<option value="">Pilih ${
                input.id.includes('city') ? 'Kota/Kabupaten' :
                input.id.includes('district') ? 'Kecamatan' :
                'Desa/Kelurahan'
            }</option>`;
                            }

                            if (input.id.includes('province')) {
                                input.onchange = function() {
                                    handleProvinceChange(this);
                                };
                            } else if (input.id.includes('city')) {
                                input.onchange = function() {
                                    handleCityChange(this);
                                };
                            } else if (input.id.includes('district')) {
                                input.onchange = function() {
                                    handleDistrictChange(this);
                                };
                            }
                        }

                        if (input.type !== 'file' && input.tagName !== 'SELECT') {
                            input.value = '';
                        }

                        if (input.classList.contains('currency-format')) {
                            input.addEventListener('input', function() {
                                formatCurrency(this);

                                // Special handling for price-related inputs
                                if (input.name.includes('harga_pembanding') ||
                                    input.name.includes('diskon_pembanding')) {
                                    const inputs = document.getElementsByName(input.name);
                                    const index = Array.from(inputs).indexOf(this);
                                    calculatePrices(index);
                                }
                            });
                        }

                        // Specific handling for discount to limit to 100%
                        if (input.name.includes('diskon_pembanding')) {
                            input.addEventListener('input', function() {
                                let value = parseFloat(this.value.replace(/[^\d]/g, '') || '0');
                                value = Math.min(value, 100);
                                this.value = formatCurrency(value.toString());
                            });
                        }
                    });
                }
                row.appendChild(newCell);
            });
            initializePriceCalculation();
            updateRemoveButtonVisibility();
        }




        function removeColumn() {
            if (columnCount > 1) {
                const table = document.getElementById('dataTable');
                const rows = table.querySelectorAll('tr');

                rows.forEach(row => {
                    row.deleteCell(-1);
                });

                columnCount--;
                updateRemoveButtonVisibility();
            }
        }

        function updateRemoveButtonVisibility() {
            const removeBtn = document.getElementById('removeColumnBtn');
            if (removeBtn) {
                removeBtn.style.display = columnCount > 1 ? 'inline-flex' : 'none';
            }
        }

        function initializeEventListeners() {
            document.getElementById('addColumnBtn').addEventListener('click', addColumn);
            document.getElementById('removeColumnBtn').addEventListener('click', removeColumn);
            reinitializeEventListeners();
        }


        function reinitializeEventListeners() {
            // Event listener yang sudah ada
            document.querySelectorAll('.currency-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatCurrency(this);
                });
            });

            document.querySelectorAll('.number-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatNumber(this);
                });
            });

            // Tambahkan kalkulasi harga
            initializePriceCalculation();

            // Location event listeners
            ensureLocationEventListeners();
        }


        function initializeFirstPembandingListeners() {
            const firstProvinceSelect = document.getElementById('province_code_pembanding');
            if (firstProvinceSelect) {
                firstProvinceSelect.addEventListener('change', function() {
                    const provinceId = this.value;
                    if (provinceId) {
                        getCity(provinceId, 1);
                    }
                });
            }

            const firstCitySelect = document.getElementById('city_code_pembanding');
            if (firstCitySelect) {
                firstCitySelect.addEventListener('change', function() {
                    const cityId = this.value;
                    if (cityId) {
                        getDistrict(cityId, 1);
                    }
                });
            }

            const firstDistrictSelect = document.getElementById('district_code_pembanding');
            if (firstDistrictSelect) {
                firstDistrictSelect.addEventListener('change', function() {
                    const districtId = this.value;
                    if (districtId) {
                        getVillage(districtId, 1);
                    }
                });
            }
        }

        function ensureLocationEventListeners() {
            document.querySelectorAll('[id^="province_code_pembanding"]').forEach(select => {
                select.onchange = function() {
                    handleProvinceChange(this);
                };
            });

            document.querySelectorAll('[id^="city_code_pembanding"]').forEach(select => {
                select.onchange = function() {
                    handleCityChange(this);
                };
            });

            document.querySelectorAll('[id^="district_code_pembanding"]').forEach(select => {
                select.onchange = function() {
                    handleDistrictChange(this);
                };
            });
        }

        function handleProvinceChange(provinceSelect) {
            const provinceId = provinceSelect.value;
            let columnIndex;

            if (provinceSelect.id === 'province_code_pembanding') {
                columnIndex = 1;
            } else {
                columnIndex = provinceSelect.id.split('_').pop();
            }

            if (provinceId) {
                getCity(provinceId, columnIndex);
            }
        }

        function handleCityChange(citySelect) {
            const cityId = citySelect.value;
            let columnIndex;

            if (citySelect.id === 'city_code_pembanding') {
                columnIndex = 1;
            } else {
                columnIndex = citySelect.id.split('_').pop();
            }

            if (cityId) {
                getDistrict(cityId, columnIndex);
            }
        }

        function handleDistrictChange(districtSelect) {
            const districtId = districtSelect.value;
            let columnIndex;

            if (districtSelect.id === 'district_code_pembanding') {
                columnIndex = 1;
            } else {
                columnIndex = districtSelect.id.split('_').pop();
            }

            if (districtId) {
                getVillage(districtId, columnIndex);
            }
        }

        async function getCity(provinceId, columnIndex) {
            try {
                const response = await fetch(`/locations/cities/province/${provinceId}`);
                const data = await response.json();

                const cityDropdown = columnIndex === 1 ?
                    document.getElementById('city_code_pembanding') :
                    document.getElementById(`city_code_pembanding_${columnIndex}`);

                if (cityDropdown) {
                    cityDropdown.innerHTML = '<option value="">Pilih Kota/Kabupaten</option>';
                    data.forEach(city => {
                        cityDropdown.innerHTML += `<option value="${city.code}">${city.name}</option>`;
                    });
                }
            } catch (error) {
                console.error('Error fetching cities:', error);
            }
        }

        async function getDistrict(cityId, columnIndex) {
            try {
                const response = await fetch(`/locations/districts/city/${cityId}`);
                const data = await response.json();

                const districtDropdown = columnIndex === 1 ?
                    document.getElementById('district_code_pembanding') :
                    document.getElementById(`district_code_pembanding_${columnIndex}`);

                if (districtDropdown) {
                    districtDropdown.innerHTML = '<option value="">Pilih Kecamatan</option>';
                    data.forEach(district => {
                        districtDropdown.innerHTML +=
                            `<option value="${district.code}">${district.name}</option>`;
                    });
                }
            } catch (error) {
                console.error('Error fetching districts:', error);
            }
        }

        async function getVillage(districtId, columnIndex) {
            try {
                const response = await fetch(`/locations/villages/district/${districtId}`);
                const data = await response.json();

                const villageDropdown = columnIndex === 1 ?
                    document.getElementById('village_code_pembanding') :
                    document.getElementById(`village_code_pembanding_${columnIndex}`);

                if (villageDropdown) {
                    villageDropdown.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
                    data.forEach(village => {
                        villageDropdown.innerHTML += `<option value="${village.code}">${village.name}</option>`;
                    });
                }
            } catch (error) {
                console.error('Error fetching villages:', error);
            }
        }

        function submitData() {
            showLoadingSwal('Mengirim data ke server...');
            const form = document.querySelector('form');
            const formData = new FormData(form);

            console.log('Form data entries:', Array.from(formData.entries()));

            $.ajax({
                url: '{{ route('surveyor.storeDataPembanding') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(result) {
                    hideLoadingSwal();
                    console.log(result);
                    if (result.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: result.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href =
                                    '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
                            }
                        });

                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: result.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }

                },
                error: function(xhr, status, error) {
                    hideLoadingSwal();
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Terjadi kesalahan pada server',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    </script>
@endpush