558 lines
32 KiB
PHP
558 lines
32 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 mx-auto">
|
|
<div class="card min-w-full">
|
|
<div class="card min-w-full">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
Data Jaminan
|
|
</h3>
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('surveyor.show', ['id' => request('foto')]) }}?form=foto"
|
|
class="btn btn-xs btn-info">
|
|
<i class="ki-filled ki-exit-left"></i> Back
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@php
|
|
$jenisJaminanData = null;
|
|
@endphp
|
|
<div data-accordion="true">
|
|
@foreach ($permohonan->debiture->documents as $dokumen)
|
|
@php
|
|
$jenisJaminanData = $dokumen->jenisJaminan->name ?? '';
|
|
@endphp
|
|
<div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200"
|
|
data-accordion-item="true" id="accordion_1_item_1">
|
|
<button class="accordion-toggle py-4 group mx-8" data-accordion-toggle="#accordion_detail_jaminan_{{ $loop->index }}">
|
|
<span class="text-base text-gray-900 font-medium">
|
|
Jaminan {{ $loop->index + 1 }}
|
|
</span>
|
|
<i class="ki-outline ki-plus text-gray-600 text-2sm accordion-active:hidden block">
|
|
</i>
|
|
<i class="ki-outline ki-minus text-gray-600 text-2sm accordion-active:block hidden">
|
|
</i>
|
|
</button>
|
|
<div class="accordion-content hidden" id="accordion_detail_jaminan_{{ $loop->index }}">
|
|
<div class="card-body lg:py-7.5 grid grid-cols-2">
|
|
<div class="mb-5">
|
|
<h3 class="text-md font-medium text-gray-900">
|
|
Pemilik Jaminan:
|
|
</h3>
|
|
<span class="text-2sm text-gray-700">
|
|
{{ $dokumen->pemilik->name ?? '' }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-5">
|
|
<h3 class="text-md font-medium text-gray-900">
|
|
Jenis Jaminan:
|
|
</h3>
|
|
<span class="text-2sm text-gray-700">
|
|
{{ $dokumen->jenisJaminan->name ?? '' }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-5">
|
|
<h3 class="text-md font-medium text-gray-900">
|
|
Hubungan Pemilik Jaminan:
|
|
</h3>
|
|
<span class="text-2sm text-gray-700">
|
|
{{ $dokumen->pemilik->hubungan_pemilik->name ?? '' }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-5">
|
|
<h3 class="text-md font-medium text-gray-900">
|
|
Alamat Pemilik Jaminan:
|
|
</h3>
|
|
<span class="text-2sm text-gray-700">
|
|
{{ $dokumen->pemilik->address ?? '' }},
|
|
<br> {{ $dokumen->pemilik->village->name ?? '' }},
|
|
{{ $dokumen->pemilik->district->name ?? '' }},
|
|
{{ $dokumen->pemilik->city->name ?? '' }},
|
|
{{ $dokumen->pemilik->province->name ?? '' }} -
|
|
{{ $dokumen->pemilik->village->postal_code ?? '' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-table scrollable-x-auto pb-3">
|
|
<table class="table align-middle text-sm text-gray-500">
|
|
@foreach ($dokumen->detail as $detail)
|
|
<tr>
|
|
<td class="py-2 text-gray-600 font-normal max-w-[100px]">
|
|
{{ $loop->index + 1 }}. {{ $detail->jenisLegalitasJaminan->name }}
|
|
</td>
|
|
<td class="py-2 text-gray-800 font-normaltext-sm">
|
|
{{ $detail->name ?? '' }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 max-w-[100px]">
|
|
Dokumen Jaminan
|
|
</td>
|
|
<td class="py-3 text-gray-700 text-2sm font-normal">
|
|
@if (isset($detail->dokumen_jaminan))
|
|
<a href="{{ route('debitur.jaminan.download', ['id' => $permohonan->debiture->id, 'dokumen' => $detail->id]) }}"
|
|
class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
|
|
<i class="ki-filled ki-cloud-download"></i></a>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 max-w-[100px]">
|
|
Keterangan
|
|
</td>
|
|
<td class="py-3 text-gray-700 text-2sm font-normal">
|
|
{{ $detail->keterangan ?? '' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form action="{{ route('surveyor.storeFoto') }}" method="POST" class="grid gap-5"
|
|
enctype="multipart/form-data">
|
|
@if (isset($fotoJaminan->id))
|
|
<input type="hidden" name="id" value="{{ $fotoJaminan->id }}">
|
|
@method('PUT')
|
|
@endif
|
|
@csrf
|
|
|
|
<input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
|
|
<input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
|
|
|
|
|
|
@php
|
|
$data = [
|
|
'tanah' => 'Tanah',
|
|
'unit_rumah' => 'Rumah Tinggal / Ruko (Unit) / Apartemen (Unit) / Gudang',
|
|
'tanah_bangunan' => 'Kawasan Industrial / Komersil / Residensial - Perumahan',
|
|
'unit_gedung' => 'Gedung Apartement / Kantor / Condotel (Strata Title)',
|
|
'tanah_bangunan' => 'Mall',
|
|
];
|
|
|
|
$analisaType = 'unknown';
|
|
if (isset($analisa->id)) {
|
|
$analisaType = $analisa->type ?? 'unknown';
|
|
} else {
|
|
foreach ($data as $key => $value) {
|
|
if (
|
|
isset($jenisJaminanData) &&
|
|
trim(strtolower($jenisJaminanData)) === trim(strtolower($value))
|
|
) {
|
|
$analisaType = $key;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if ($analisaType === 'tanah') {
|
|
$analisaType = 'tanah_bangunan';
|
|
}
|
|
|
|
if ($analisaType === 'unit_rumah' || $analisaType === 'unit_gedung') {
|
|
$analisaType = 'unit';
|
|
}
|
|
@endphp
|
|
<input type="hidden" name="analisa_type" value="{{ $analisaType }}">
|
|
<div class="bg-white rounded-lg shadow-md">
|
|
<div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
|
|
<h1 class="text-md font-medium text-gray-900">Rute Menuju Lokasi</h1>
|
|
<button id="btnRute" type="button" class="btn btn-primary btn-sm">
|
|
<i class="ki-filled ki-plus text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
@if (isset($fotoJaminan))
|
|
@foreach ($fotoJaminan->ruteJaminan as $item)
|
|
|
|
<div id="inputContainerRute" style="margin-top: 10px">
|
|
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Foto Rute Menuju Lokasi</span>
|
|
</label>
|
|
<div class="w-full grid gap-5">
|
|
@if (isset($item->foto_rute))
|
|
<img src="{{ asset('storage/' . old('foto_rute', $item->foto_rute)) }}"
|
|
alt="Gambar Pendamping" style="width: 12rem;">
|
|
@endif
|
|
<input class="name_rute" type="hidden" name="name_rute[]" value="rute">
|
|
<input id="inputRute" type="file" name="foto_rute[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@error('foto_rute.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
@error('name_rute.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div id="inputContainerRute" style="margin-top: 10px">
|
|
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Foto Rute Menuju Lokasi</span>
|
|
</label>
|
|
<input class="name_rute" type="hidden" name="name_rute[]" value="rute">
|
|
<input id="inputRute" type="file" name="foto_rute[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
@error('foto_rute.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
@error('name_rute.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md">
|
|
<div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
|
|
<h1 class="text-md font-medium text-gray-900">Objek Jaminan</h1>
|
|
</div>
|
|
@php
|
|
$objekViews = [];
|
|
if ($analisaType === 'tanah_bangunan') {
|
|
$objekViews = [
|
|
['label' => 'Tampak Samping Kiri', 'index' => 0],
|
|
['label' => 'Tampak Samping Kanan', 'index' => 1],
|
|
['label' => 'Nomor Rumah/Unit', 'index' => 2],
|
|
];
|
|
} elseif ($analisaType === 'unit') {
|
|
$objekViews = [
|
|
['label' => 'Tampak Loby', 'index' => 0],
|
|
['label' => 'Tampak Lift', 'index' => 1],
|
|
['label' => 'Tampak Samping Kiri Unit', 'index' => 2],
|
|
['label' => 'Tampak Samping Kanan Unit', 'index' => 3],
|
|
['label' => 'Tampak Depan Unit', 'index' => 4],
|
|
['label' => 'Nomor Unit', 'index' => 5],
|
|
];
|
|
}
|
|
@endphp
|
|
|
|
@if (count($objekViews) > 0)
|
|
@foreach ($objekViews as $view)
|
|
<div class="flex flex-wrap gap-4 {{ !$loop->first ? 'mt-2' : '' }}">
|
|
<div class="flex w-full gap-4">
|
|
<label class="form-label max-w-56"><span
|
|
class="form-label">{{ $view['label'] }}</span>
|
|
</label>
|
|
<div class="w-full grid gap-5">
|
|
@if (isset($fotoJaminan) && isset($fotoJaminan->objekJaminan[$view['index']]))
|
|
<img src="{{ asset('storage/' . $fotoJaminan->objekJaminan[$view['index']]->foto_objek) }}"
|
|
alt="{{ $view['label'] }}" class="mb-2 w-48 h-auto"
|
|
style="width: 12rem;">
|
|
@endif
|
|
<input type="file" name="foto_objek[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*"
|
|
capture="camera">
|
|
<textarea name="name_objek[]" class="textarea" rows="3" placeholder="Deskripsi">{{ isset($fotoJaminan) && isset($fotoJaminan->objekJaminan[$view['index']]) ? str_replace($view['label'] . ': ', '', $fotoJaminan->objekJaminan[$view['index']]->name_objek) : '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
@error('foto_objek.' . $view['index'])
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
@error('name_objek.' . $view['index'])
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div class="p-4">
|
|
<p class="text-gray-500">Tipe analisa tidak valid atau belum dipilih.</p>
|
|
</div>
|
|
@endif
|
|
|
|
|
|
<div class="flex flex-wrap gap-4 w-full">
|
|
<div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between w-full">
|
|
<label class="form-label">
|
|
<span class="form-label">Lantai</span>
|
|
</label>
|
|
<button type="button" id="btnLantai" class="btn btn-primary btn-sm">
|
|
<i class="ki-filled ki-plus text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
@if (isset($fotoJaminan))
|
|
@foreach ($fotoJaminan->lantaiUnit as $item)
|
|
<div id="inputContainerLantai" class="w-full">
|
|
|
|
<div class="flex w-full items-center justify-center gap-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Foto Lantai 1</span>
|
|
</label>
|
|
<div class="w-full grid gap-5">
|
|
@if (isset($fotoJaminan))
|
|
<img src="{{ asset('storage/' . old('foto_lantai_unit', $item->foto_lantai_unit)) }}"
|
|
alt="Gambar Pendamping" style="width: 12rem;">
|
|
@endif
|
|
|
|
|
|
<input type="hidden" name="name_lantai_unit[]" value="lantai">
|
|
<input id="inputLantai" type="file" name="foto_lantai_unit[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*"
|
|
capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@error('foto_lantai_unit.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div id="inputContainerLantai" class="w-full">
|
|
<div class="flex w-full items-center justify-center gap-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Foto Lantai 1</span>
|
|
</label>
|
|
<input type="hidden" name="name_lantai_unit[]" value="lantai">
|
|
<input id="inputLantai" type="file" name="foto_lantai_unit[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*"
|
|
capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
@error('foto_lantai_unit.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endif
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class=" bg-white rounded-lg shadow-md">
|
|
<div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
|
|
<h1 class="text-md font-medium text-gray-900">Lingkungan</h1>
|
|
<button id="btnLingkungan" type="button" class="btn btn-primary btn-sm">
|
|
<i class="ki-filled ki-plus text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
@if (isset($fotoJaminan))
|
|
@foreach ($fotoJaminan->lingkungan as $item)
|
|
<div id="inputContainerLingkungan" style="margin-top: 10px">
|
|
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Lingkungan</span>
|
|
</label>
|
|
<div class="w-full grid gap-5">
|
|
@if (isset($fotoJaminan))
|
|
<img src="{{ asset('storage/' . old('foto_lingkungan', $item->foto_lingkungan)) }}"
|
|
alt="Gambar Pendamping" style="width: 12rem;">
|
|
@endif
|
|
<input type="hidden" name="name_lingkungan[]" value="lingkungan">
|
|
<input id="inputLingkungan" type="file" name="foto_lingkungan[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*"
|
|
capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@error('foto_lingkungan.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
@error('name_lingkungan.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div id="inputContainerLingkungan" style="margin-top: 10px">
|
|
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Lingkungan</span>
|
|
</label>
|
|
<input type="hidden" name="name_lingkungan[]" value="lingkungan">
|
|
<input id="inputLingkungan" type="file" name="foto_lingkungan[]"
|
|
class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
@error('foto_lingkungan.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
@error('name_lingkungan.*')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class=" bg-white rounded-lg shadow-md">
|
|
|
|
|
|
<div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
|
|
<h1 class="text-md font-medium text-gray-900">Pendamping</h1>
|
|
</div>
|
|
<div style="margin-top: 5px">
|
|
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
|
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Pendamping</span>
|
|
</label>
|
|
<div class="w-full grid gap-5">
|
|
@if (isset($fotoJaminan))
|
|
<img src="{{ asset('storage/' . old('pendamping', $fotoJaminan->pendamping)) }}"
|
|
alt="Gambar Pendamping" style="width: 12rem;">
|
|
@endif
|
|
<input id="inputPendamping" type="file" name="pendamping"
|
|
class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
style="display: none;" id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@error('pendamping')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
|
|
<button type="submit" class="btn btn-success">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Generic function to handle adding new input and delete functionality
|
|
function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
|
|
const inputContainer = document.getElementById(containerId);
|
|
const addButton = document.getElementById(buttonId);
|
|
|
|
// Function to update the labels with the correct number
|
|
function updateLabels() {
|
|
const labels = inputContainer.querySelectorAll('.form-label span');
|
|
labels.forEach((label, index) => {
|
|
label.textContent = `${labelText} ${index + 1}`;
|
|
});
|
|
|
|
|
|
}
|
|
|
|
// Function to show or hide delete buttons
|
|
function handleDeleteButtons() {
|
|
const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
|
|
deleteBtns.forEach(btn => {
|
|
btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
// Function to create a new input
|
|
function createNewInput() {
|
|
// Clone the first child (input group) and reset input values
|
|
const newDiv = inputContainer.children[0].cloneNode(true);
|
|
|
|
// Clear the input file value
|
|
const inputFile = newDiv.querySelector(`.${inputDataClass}`);
|
|
if (inputFile) {
|
|
inputFile.value = ''; // Ensure the input field exists before resetting
|
|
}
|
|
|
|
// Find and set up the delete button for the new input group
|
|
const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`);
|
|
if (deleteBtn) { // Ensure the delete button exists before adding the listener
|
|
deleteBtn.addEventListener('click', function() {
|
|
inputContainer.removeChild(newDiv);
|
|
handleDeleteButtons();
|
|
updateLabels();
|
|
});
|
|
} else {
|
|
console.error('Delete button not found in the cloned element.');
|
|
}
|
|
|
|
// Add margin to new inputs
|
|
newDiv.style.marginTop = '10px';
|
|
|
|
// Append the new input group
|
|
inputContainer.appendChild(newDiv);
|
|
updateLabels();
|
|
handleDeleteButtons();
|
|
}
|
|
|
|
// Add event listener for the "Add" button
|
|
if (addButton) { // Ensure the add button exists
|
|
addButton.addEventListener('click', createNewInput);
|
|
} else {
|
|
console.error('Add button not found.');
|
|
}
|
|
|
|
// Initialize delete button on the first input
|
|
const firstDeleteBtn = inputContainer.children[0].querySelector(`.${buttonDeleteClass}`);
|
|
if (firstDeleteBtn) {
|
|
firstDeleteBtn.addEventListener('click', function() {
|
|
if (inputContainer.children.length > 1) {
|
|
inputContainer.removeChild(this.closest('.flex'));
|
|
handleDeleteButtons();
|
|
updateLabels();
|
|
}
|
|
});
|
|
} else {
|
|
console.error('Initial delete button not found.');
|
|
}
|
|
|
|
// Initial update of the labels
|
|
updateLabels();
|
|
}
|
|
|
|
// Call the function for both "Rute Menuju Lokasi" and "Lantai"
|
|
setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input',
|
|
'delete-btn');
|
|
setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input', 'delete-btn');
|
|
setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'linkungan', 'file-input',
|
|
'delete-btn');
|
|
});
|
|
</script>
|
|
@endpush
|