1054 lines
55 KiB
PHP
1054 lines
55 KiB
PHP
@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="dokument_id" value="{{ request('dokument') }}">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
|
|
<!-- 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">Hak atas properti yang dialihkan</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="hak_properti" class="input"
|
|
value="{{ $inspectionData['hak_properti'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="hak_properti_pembanding[]"
|
|
class="input">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-2">Penawaran/ Transaksi</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="penawaran" class="input"
|
|
value="{{ $inspectionData['penawaran'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="penawaran_pembanding[]"
|
|
class="input">
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
<td class="px-4 py-2">Telepon Contact Person</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="telepon" class="input"
|
|
value="{{ $inspectionData['telepon'] ?? '' }}">
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<input type="text" name="telepon_pembanding[]"
|
|
class="input">
|
|
</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
|