Files
lpj/resources/views/surveyor/components/inspeksi.blade.php

558 lines
23 KiB
PHP

@extends('layouts.main')
@section('breadcrumbs')
{{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection
@section('content')
@include('lpj::assetsku.includenya')
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<form id="formInspeksi" method="POST" enctype="multipart/form-data" class="grid gap-5">
@csrf
<input id="permohonan_id" type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
<input id="dokument_id" type="hidden" name="dokument_id" value="{{ request('dokument') }}">
<input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">
@if (strtolower($permohonan->tujuanPenilaian->name) == 'rap')
<input type="hidden" name="action" value="rap">
<input type="hidden" name="type" value="rap">
@include('lpj::surveyor.components.header')
@include('lpj::surveyor.components.rap')
@else
@foreach ($permohonan->debiture->documents as $dokumen)
@if ($dokumen->jenisJaminan)
@php
$formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
@endphp
@if (isset($formKategori) && $formKategori)
@php
$kategoriArray = is_array($formKategori) ? $formKategori : [$formKategori];
$kategoriUnik = array_unique($kategoriArray);
@endphp
<input type="hidden" name="action" value="{{ implode(',', $kategoriUnik) }}">
<input type="hidden" name="type" value="{{ implode(',', $kategoriUnik) }}">
@if (array_intersect($kategoriUnik, ['tanah', 'bangunan', 'apartemen-kantor']))
@include('lpj::surveyor.components.header')
@endif
@foreach ($kategoriUnik as $kategori)
{{-- Tampilkan komponen sesuai kategori --}}
@include('lpj::surveyor.components.' . str_replace('-', '-', $kategori), [
'dokumen' => $dokumen,
])
@endforeach
@endif
@endif
@endforeach
@endif
<div class="card border border-agi-100 w-full rounded-lg shadow-md overflow-hidden">
<div class="card-header bg-agi-50">
<h3 class="card-title uppercase">
Tanda Tangan
</h3>
</div>
<div class="card-body">
<div class="flex items-baseline justify-between flex-wrap lg:flex-nowrap">
@foreach (['penilai', 'cabang', 'debitur', 'kjjp'] as $type)
@include('lpj::component.signature-pad', ['type' => $type])
@endforeach
</div>
</div>
</div>
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
<button type="button" class="btn btn-primary" id="saveButton" onclick="submitData()">
<i class="ki-filled ki-save-2"></i>
<span id="saveButtonText">Save</span>
</button>
<a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('dokument'), 'jenis_jaminan_id' => request('jenis_jaminan')]) }}" class="btn btn-info" id="saveButton">
<i class="ki-filled ki-printer"></i>
<span>Print Out</span>
</a>
</div>
</form>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script type="text/javascript">
const datas = @json($forminspeksi);
console.log(datas);
document.addEventListener('DOMContentLoaded', function() {
const signaturePads = {};
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
// Inisialisasi semua signature pad
types.forEach(type => {
initSignaturePad(type);
});
function initSignaturePad(type) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
// Set ukuran canvas yang responsif
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
signaturePads[type] = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
minWidth: 0.5,
maxWidth: 2.5
});
// Load existing signature
loadSignature(type);
// Event listeners
const saveBtn = document.getElementById(`save-${type}`);
const clearBtn = document.getElementById(`clear-${type}`);
const deleteBtn = document.getElementById(`delete-${type}`);
if (saveBtn) {
saveBtn.addEventListener('click', () => saveSignature(type));
}
if (clearBtn) {
clearBtn.addEventListener('click', () => clearSignature(type));
}
if (deleteBtn) {
deleteBtn.addEventListener('click', () => deleteSignature(type));
}
}
function saveSignature(type) {
const signaturePad = signaturePads[type];
if (!signaturePad || signaturePad.isEmpty()) {
Swal.fire({
icon: 'warning',
title: 'Peringatan',
text: 'Harap memberikan tanda tangan terlebih dahulu.'
});
return;
}
const data = {
signature: signaturePad.toDataURL('image/png'),
type: type,
document_id: document.getElementById('dokument_id')?.value,
permohonan_id: document.getElementById('permohonan_id')?.value
};
console.log(data);
// Tampilkan loading
Swal.fire({
title: 'Menyimpan...',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
fetch(`{{ url('/surveyor/signatures') }}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
Swal.close();
if (data.success) {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: 'Tanda tangan berhasil disimpan!',
timer: 1500
});
} else {
throw new Error(data.message || 'Terjadi kesalahan');
}
})
.catch(error => {
Swal.fire({
icon: 'error',
title: 'Error',
text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
});
});
}
function loadSignature(type) {
const params = new URLSearchParams({
document_id: document.getElementById('dokument_id')?.value,
permohonan_id: document.getElementById('permohonan_id')?.value
});
fetch(`{{ url('/surveyor/signatures/${type}?${params}') }}`)
.then(response => response.json())
.then(data => {
if (data.success && data.data?.signature) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
const signaturePad = signaturePads[type];
const image = new Image();
image.onload = function() {
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = data.data.signature;
}
})
.catch(error => {
console.error('Error loading signature:', error);
});
}
function deleteSignature(type) {
Swal.fire({
title: 'Konfirmasi',
text: 'Apakah Anda yakin ingin menghapus tanda tangan ini?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, Hapus',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
const data = {
type: type,
document_id: document.getElementById('dokument_id')?.value,
permohonan_id: document.getElementById('permohonan_id')?.value
};
fetch(`{{ url('/surveyor/signatures/${type}') }}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
clearSignature(type);
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: 'Tanda tangan berhasil dihapus!',
timer: 1500
});
} else {
throw new Error(data.message || 'Terjadi kesalahan');
}
})
.catch(error => {
Swal.fire({
icon: 'error',
title: 'Error',
text: error.message ||
'Terjadi kesalahan saat menghapus tanda tangan'
});
console.error('Error:', error);
});
}
});
}
function clearSignature(type) {
const signaturePad = signaturePads[type];
if (signaturePad) {
signaturePad.clear();
updateStatus(type, '');
}
}
function updateStatus(type, message, status = '') {
const statusElement = document.getElementById(`status-${type}`);
if (statusElement) {
statusElement.textContent = message;
statusElement.className = `status-message ${status}`;
}
}
// Handle window resize untuk canvas responsif
window.addEventListener('resize', function() {
types.forEach(type => {
const canvas = document.getElementById(`signature-pad-${type}`);
if (canvas) {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
// Reload signature jika ada
loadSignature(type);
}
});
});
});
function updateAlamatFields(status) {
// Ambil elemen formulir
const addressForm = document.getElementById('alamat_form');
const inputs = addressForm.querySelectorAll('input, select');
const addressInput = document.getElementById('address');
if (status === 'sesuai') {
addressInput.value = "{{ $dokumen->address ?? '' }}";
inputs.forEach(element => {
if (element.tagName === 'INPUT') {
element.setAttribute('readonly', true);
} else if (element.tagName === 'SELECT') {
element.setAttribute('disabled', true);
element.classList.add('disabled-input')
}
});
addressForm.style.display = 'grid';
addressForm.disabled = true;
addressForm.classList.add('disabled-input')
} else if (status === 'tidak sesuai') {
addressForm.style.display = 'grid';
addressForm.removeAttribute('disabled');
addressForm.classList.remove('disabled-input')
const formInspeksi = @json($forminspeksi);
const addressInput = document.getElementById('address');
if (formInspeksi && formInspeksi.asset && formInspeksi.asset.alamat) {
if (formInspeksi.asset.alamat['tidak sesuai'] && formInspeksi.asset.alamat['tidak sesuai'].address) {
addressInput.value = formInspeksi.asset.alamat['tidak sesuai'].address;
} else if (formInspeksi.asset.alamat['sesuai'] && formInspeksi.asset.alamat['sesuai'].address) {
addressInput.value = formInspeksi.asset.alamat['sesuai'].address;
} else {
addressInput.value = "";
}
}
inputs.forEach(element => {
if (element.tagName === 'INPUT') {
element.removeAttribute('readonly');
} else if (element.tagName === 'SELECT') {
element.removeAttribute('disabled');
element.classList.remove('disabled-input')
}
});
}
}
function toggleFieldVisibility(fieldName, inputId, visibleValues = []) {
const selectedValue = $(`[name="${fieldName}"]:checked`).val();
const inputField = $(`#${inputId}`);
if (visibleValues.includes(selectedValue)) {
inputField.show();
} else {
inputField.hide().val('');
}
}
function toggleCheckboxVisibility(fieldName, inputId, visibleValues = []) {
const selectedValues = $(`[name="${fieldName}[]"]:checked`)
.map(function() {
return $(this).val().toLowerCase(); // Konversi nilai ke huruf kecil
})
.get();
const inputField = $(`#${inputId}`);
// Cek apakah salah satu nilai yang dipilih cocok dengan visibleValues
const shouldShow = visibleValues.some(value => selectedValues.includes(value.toLowerCase()));
if (shouldShow) {
inputField.show();
} else {
inputField.hide().val('');
}
}
function toggleMultipleFields(fieldName, mappings) {
// Ambil semua nilai checkbox yang dicentang
const selectedValues = $(`[name="${fieldName}[]"]:checked`)
.map(function() {
return $(this).val().toLowerCase(); // Konversi nilai ke huruf kecil
})
.get();
// Iterasi melalui setiap mapping
for (const [key, inputId] of Object.entries(mappings)) {
const inputField = $(`#${inputId}`);
// Tampilkan input jika nilai yang relevan dipilih
if (selectedValues.includes(key.toLowerCase())) {
inputField.show();
} else {
inputField.hide().val(''); // Sembunyikan dan reset nilai
}
}
}
function toggleAlamatVisibility(idSesuai, idTidakSesuai, selectedValue) {
// Ambil elemen berdasarkan ID
const alamatSesuai = document.getElementById(idSesuai);
const alamatTidakSesuai = document.getElementById(idTidakSesuai);
// Periksa nilai yang dipilih dan tampilkan elemen yang sesuai
if (selectedValue === 'sesuai') {
alamatSesuai.style.display = 'grid'; // Tampilkan "Alamat Sesuai"
alamatTidakSesuai.style.display = 'none'; // Sembunyikan "Alamat Tidak Sesuai"
} else if (selectedValue === 'tidak sesuai') {
alamatSesuai.style.display = 'none'; // Sembunyikan "Alamat Sesuai"
alamatTidakSesuai.style.display = 'grid'; // Tampilkan "Alamat Tidak Sesuai"
}
}
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.store') }}',
type: 'POST',
data: formData,
processData: false,
contentType: false,
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function(response) {
hideLoadingSwal();
if (response.success) {
Swal.fire({
title: 'Berhasil!',
text: response.message,
icon: 'success',
confirmButtonText: 'OK'
}).then((response) => {
if (response.isConfirmed) {
window.location.href =
'{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
}
});
} else {
Swal.fire({
title: 'Error!',
text: response.message || 'Terjadi kesalahan',
icon: 'error',
confirmButtonText: 'OK'
});
}
console.log(response);
},
error: function(xhr, status, error) {
let errors = xhr.responseJSON?.errors;
$('.alert').text('');
if (errors) {
$.each(errors, function(key, value) {
$(`#error-${key}`).text(value[0]);
toastrErrorBuild(value[0]);
});
// toastrErrorBuild(error);
}
hideLoadingSwal();
console.log(errors);
}
});
}
// Ensure existing remove buttons are functional
document.addEventListener('DOMContentLoaded', () => {
const removeButtons = document.querySelectorAll('.remove-btn');
removeButtons.forEach(button => {
button.addEventListener('click', function() {
this.closest('.perwakilan').remove();
});
});
document.querySelectorAll('.number-format').forEach(input => {
input.addEventListener('input', function() {
formatNumber(this);
});
});
});
function updateAnalisa(params) {
const inputMap = {
jenis_asset: 'jenis_asset_tidak_sesuai',
analisa_tanah: 'analisa_tanah_tidak_sesuai',
analisa_unit: 'analisa_luas_unit_tidak_sesuai',
analisa_bangunan: 'analisa_bangunan_tidak_sesuai',
};
// Pastikan elemen ID ada di inputMap
if (!inputMap[params]) {
console.error('Parameter tidak valid:', params);
return;
}
// Ambil nilai berdasarkan parameter
const inputValue = document.getElementById(inputMap[params]).value;
const data = {
[params === 'jenis_asset' ? 'jenis_asset' : params.replace('analisa_', 'luas_')]: inputValue,
types: params
};
$.ajax({
url: '{{ route('surveyor.update_analisa', ['id' => $permohonan->id]) }}',
type: 'POST',
data: data,
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function(response) {
console.log(response);
if (response.success) {
// window.location.href =
// '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
toastrSuccessBuild(response.message);
}
},
error: function(xhr, status, error) {
console.error('Terjadi error:', error);
console.log('Status:', status);
console.log('Response:', xhr.responseText);
if (xhr.responseJSON.message) {
toastrErrorBuild(xhr.responseJSON.message);
} else {
toastrErrorBuild('Terjadi kesalahan');
}
}
});
}
</script>
<script></script>
@include('lpj::surveyor.js.utils')
@endpush