perbaikan foto dan penambahan basic data foto objek jaminan, print-out
This commit is contained in:
majid
@@ -78,86 +78,21 @@
|
||||
<input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
|
||||
<input type="hidden" name="dokument_id" value="{{ request('dokument') }}">
|
||||
|
||||
<div class="card bg-white rounded-lg shadow-md">
|
||||
<div class="card rounded-lg shadow-md">
|
||||
<div class="card-body">
|
||||
<div class=" text-white py-4 flex items-center justify-between">
|
||||
<div class=" py-4 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($formFoto['rute_menuju_lokasi']))
|
||||
@foreach ($formFoto['rute_menuju_lokasi'] as $index => $photo)
|
||||
<div id="inputContainerRute" style="margin-top: 10px">
|
||||
<div class="flex w-full items-center justify-center gap-4 mb-4"
|
||||
id="photoContainer-{{ $index }}">
|
||||
<label class="form-label max-w-56">
|
||||
<span class="form-label">Foto Rute Menuju Lokasi {{ $index + 1 }}</span>
|
||||
</label>
|
||||
<div class="input-group w-full flex flex-col gap-2">
|
||||
<div class="preview-container">
|
||||
<img id="foto_rute-preview-{{ $index }}"
|
||||
src="{{ asset('storage/' . $photo['foto_rute']) }}"
|
||||
alt="Foto Rute {{ $index }}" class="mt-2 h-auto"
|
||||
style="display: block; width: 30rem;">
|
||||
</div>
|
||||
<div class="input-group w-full gap-2">
|
||||
<input class="name_rute" type="hidden" name="name_rute[]"
|
||||
value="rute_{{ $index }}">
|
||||
<input id="inputRute-{{ $index }}" type="file" name="foto_rute[]"
|
||||
class="file-input file-input-bordered w-full" accept="image/*"
|
||||
capture="camera"
|
||||
onchange="previewImage(this, 'foto_rute-preview-{{ $index }}')">
|
||||
|
||||
<div id="inputContainerRute" style="margin-top: 10px">
|
||||
|
||||
|
||||
<button type="button" id="btnCamera-{{ $index }}" class="btn btn-light"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete button to remove photo -->
|
||||
<button type="button" class="btn btn-danger btn-sm delete-btn" id="btnDelete">
|
||||
<i class="ki-filled ki-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="input-group w-full flex flex-col gap-2">
|
||||
<div class="preview-container">
|
||||
<img id="foto_rute-preview" src="" alt="Foto Rute" class="mt-2 h-auto"
|
||||
style="display: none; width: 30rem;">
|
||||
</div>
|
||||
<div class="input-group w-full gap-2">
|
||||
<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" onchange="previewImage(this, 'foto_rute-preview')">
|
||||
<button type="button" id="btnCamera" class="btn btn-light"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span class="alert text-danger text-sm"></span>
|
||||
</div>
|
||||
@endif
|
||||
<div id="inputContainerGerbang" style="margin-top: 10px">
|
||||
<div class="flex w-full items-center justify-center gap-4 mb-4">
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap w-full gap-4 mb-4">
|
||||
<label class="form-label max-w-56">
|
||||
<span class="form-label">Foto Gerbang & Nama Perumahan</span>
|
||||
</label>
|
||||
@@ -183,12 +118,11 @@
|
||||
<div id="ruteLainnya" style="margin-top: 10px">
|
||||
@if (isset($formFoto['foto_rute_lainnya']) && is_array($formFoto['foto_rute_lainnya']))
|
||||
@foreach ($formFoto['foto_rute_lainnya'] as $index => $photo)
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5"
|
||||
id="photoContainer">
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5" id="photoContainer">
|
||||
<label class="form-label max-w-56">
|
||||
Masukkan nama rute lainnya {{ $index + 1 }}
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<div class="flex flex-wrap items-baseline w-full gap-4">
|
||||
<img id="foto_rute_lainnya-preview-{{ $index }}"
|
||||
src="{{ asset('storage/' . $photo['foto_rute_lainnya']) }}" alt="Foto Rute "
|
||||
class="mt-2 max-w-full h-auto" style="width: 30rem;">
|
||||
@@ -220,16 +154,19 @@
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="btnAddMore" style="margin-top: 10px">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="btnAddMore"
|
||||
style="margin-top: 10px">
|
||||
<i class="ki-outline ki-plus text-2sm"></i> Lainnya
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-white rounded-lg shadow-md">
|
||||
<div class="card rounded-lg shadow-md">
|
||||
<div class="card-body">
|
||||
<div class="text-white py-4 flex items-center justify-between">
|
||||
<div class=" py-4 flex items-center justify-between">
|
||||
<h1 class="text-md font-medium text-gray-900">Objek Jaminan</h1>
|
||||
</div>
|
||||
|
||||
@@ -250,113 +187,56 @@
|
||||
|
||||
@if (is_array($formKategori))
|
||||
@foreach ($formKategori as $kategori)
|
||||
@php
|
||||
$fotoObjekJaminanFiltered = $fotoObjekJaminan->filter(function ($item) use (
|
||||
$kategori,
|
||||
) {
|
||||
return $item->kategori === $kategori;
|
||||
});
|
||||
@endphp
|
||||
|
||||
@if (!in_array($kategori, $processedCategories))
|
||||
@php
|
||||
$objekViews = [];
|
||||
if ($kategori === 'tanah') {
|
||||
$objekViews = [
|
||||
['label' => 'Tampak Depan Objek', 'index' => 0],
|
||||
['label' => 'Tampak Samping Kiri', 'index' => 1],
|
||||
['label' => 'Tampak Samping Kanan', 'index' => 2],
|
||||
['label' => 'Nomor Rumah/Unit', 'index' => 3],
|
||||
];
|
||||
} elseif ($kategori === 'apartemen-kantor') {
|
||||
$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],
|
||||
];
|
||||
} elseif ($kategori === 'kendaraan') {
|
||||
$objekViews = [
|
||||
['label' => 'Tampak Depan Objek', 'index' => 0],
|
||||
['label' => 'Tampak Kanan Objek', 'index' => 1],
|
||||
['label' => 'Tampak Samping Kiri Objek', 'index' => 2],
|
||||
['label' => 'Tampak Belakang Objek', 'index' => 3],
|
||||
['label' => 'Tampak Bagian Dalam', 'index' => 4],
|
||||
['label' => 'Nomor Panel Instrument', 'index' => 5],
|
||||
['label' => 'Tampak Odometer', 'index' => 6],
|
||||
['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
|
||||
['label' => 'Tampak Nomor Rangka', 'index' => 8],
|
||||
['label' => 'Tampak Nomor Mesin', 'index' => 9],
|
||||
[
|
||||
'label' => 'Tampak Penilai dan Pendamping di lapangan',
|
||||
'index' => 10,
|
||||
],
|
||||
];
|
||||
} elseif ($kategori === 'kapal') {
|
||||
$objekViews = [
|
||||
['label' => 'Tampak Depan', 'index' => 0],
|
||||
['label' => 'Tampak Kanan', 'index' => 1],
|
||||
['label' => 'Tampak Samping Kiri', 'index' => 2],
|
||||
['label' => 'Tampak Belakang', 'index' => 3],
|
||||
['label' => 'Tampak Bagian Dalam', 'index' => 4],
|
||||
['label' => 'Nomor Panel Instrument', 'index' => 5],
|
||||
['label' => 'Tampak Hours Meters', 'index' => 6],
|
||||
['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
|
||||
['label' => 'Tampak Nomor Rangka', 'index' => 8],
|
||||
['label' => 'Tampak Nomor Mesin', 'index' => 9],
|
||||
[
|
||||
'label' => 'Tampak Penilai dan Pendamping di lapangan',
|
||||
'index' => 10,
|
||||
],
|
||||
];
|
||||
} elseif ($kategori === 'mesin') {
|
||||
$objekViews = [
|
||||
['label' => 'Tampak Depan', 'index' => 0],
|
||||
['label' => 'Tampak Kanan', 'index' => 1],
|
||||
['label' => 'Tampak Samping Kiri', 'index' => 2],
|
||||
['label' => 'Tampak Belakang', 'index' => 3],
|
||||
['label' => 'Tampak Bagian Dalam', 'index' => 4],
|
||||
['label' => 'Nomor Panel Instrument', 'index' => 5],
|
||||
['label' => 'Tampak Hours Meters', 'index' => 6],
|
||||
['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
|
||||
['label' => 'Tampak Nomor Rangka', 'index' => 8],
|
||||
['label' => 'Tampak Nomor Mesin', 'index' => 9],
|
||||
[
|
||||
'label' => 'Foto Tampak Aksesoris Tambahan Lainnya',
|
||||
'index' => 10,
|
||||
],
|
||||
[
|
||||
'label' => 'Tampak Penilai dan Pendamping di lapangan',
|
||||
'index' => 10,
|
||||
],
|
||||
];
|
||||
}
|
||||
@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>
|
||||
@if ($fotoObjekJaminanFiltered->count() > 0)
|
||||
@foreach ($fotoObjekJaminanFiltered as $item)
|
||||
<div
|
||||
class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 {{ !$loop->first ? 'mt-2' : '' }}">
|
||||
<div
|
||||
class="flex items-baseline flex-wrap lg:flex-nowrap w-full gap-4">
|
||||
<label class="form-label max-w-56">
|
||||
<span class="form-label">{{ $item->name }}</span>
|
||||
</label>
|
||||
<input type="hidden" class="form-control"
|
||||
name="name_objek[]" value="{{ $view['label'] }}" />
|
||||
name="name_objek[]" value="{{ $item->name }}" />
|
||||
<div class="w-full grid gap-5">
|
||||
<img id="foto_object_jaminan_preview_{{ $view['index'] }}"
|
||||
src="{{ isset($formFoto['object_jaminan'][$view['index']]['foto_objek']) ? asset('storage/' . $formFoto['object_jaminan'][$view['index']]['foto_objek']) : '' }}"
|
||||
alt="{{ $view['label'] }}" class="mb-2 h-auto"
|
||||
style="{{ isset($formFoto['object_jaminan'][$view['index']]['foto_objek']) ? 'width: 30rem;' : 'display: none;' }}"
|
||||
@php
|
||||
$matchedFoto =
|
||||
collect(
|
||||
$formFoto['object_jaminan'] ?? [],
|
||||
)->firstWhere('name_objek', $item->name) ?? [];
|
||||
@endphp
|
||||
|
||||
<img id="foto_object_jaminan_preview_{{ $loop->index }}"
|
||||
src="{{ isset($matchedFoto['foto_objek']) ? asset('storage/' . $matchedFoto['foto_objek']) : '' }}"
|
||||
alt="{{ $item->name }}" class="mb-2 h-auto"
|
||||
style="{{ !empty($matchedFoto['foto_objek']) ? 'width: 30rem;' : 'display: none;' }}"
|
||||
onerror="this.style.display='none';" />
|
||||
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<input type="file" name="foto_objek[]"
|
||||
class="file-input file-input-bordered w-full"
|
||||
accept="image/*" capture="camera"
|
||||
onchange="previewImage(this, 'foto_object_jaminan_preview_{{ $view['index'] }}')">
|
||||
onchange="previewImage(this, 'foto_object_jaminan_preview_{{ $loop->index }}')">
|
||||
<button type="button" id="btnCamera"
|
||||
class="btn btn-light"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
<i class="ki-outline ki-abstract-33"></i>
|
||||
Camera
|
||||
</button>
|
||||
</div>
|
||||
<textarea name="deskripsi_objek[]" class="textarea" rows="3" placeholder="Deskripsi">{{ isset($formFoto['object_jaminan'][$view['index']]) ? str_replace($view['label'] . ': ', '', $formFoto['object_jaminan'][$view['index']]['deskripsi_objek']) : '' }}</textarea>
|
||||
<textarea name="deskripsi_objek[]" class="textarea" rows="3" placeholder="Deskripsi">{{ $matchedFoto['deskripsi_objek'] ?? '' }}</textarea>
|
||||
</div>
|
||||
<span class="alert text-danger text-sm"></span>
|
||||
</div>
|
||||
<span class="alert text-danger text-sm"></span>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
@@ -371,185 +251,83 @@
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if (isset($formFoto['foto_lantai_unit']))
|
||||
<div class="flex flex-wrap gap-4 w-full">
|
||||
<div class="w-full">
|
||||
<div class="text-white py-4 flex items-center justify-between w-full">
|
||||
<label class="form-label">
|
||||
<span class="form-label">Lantai</span>
|
||||
</label>
|
||||
<button type="button" id="btnAddLantai" class="btn btn-primary btn-sm">
|
||||
<i class="ki-filled ki-plus text-lg"></i> Tambah Lantai
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 w-full">
|
||||
<div class="w-full">
|
||||
<div class=" py-4 flex items-center justify-between w-full">
|
||||
<label class="form-label">
|
||||
<span class="form-label">Lantai</span>
|
||||
</label>
|
||||
|
||||
<div id="lantaiContainer" class="w-full">
|
||||
@foreach ($formFoto['foto_lantai_unit'] as $lantaiKey => $lantaiFotos)
|
||||
<div class="lantai-item w-full mb-4">
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<label class="form-label">Lantai {{ $lantaiKey }}</label>
|
||||
<button type="button" class="btn btn-danger btn-sm btnRemoveLantai"
|
||||
style="{{ $lantaiKey == 1 ? 'display: none;' : '' }}">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropzone w-full border-2 border-dashed border-gray-400 rounded-lg p-4 mt-2"
|
||||
ondrop="handleDrop(event)" ondragover="allowDrop(event)">
|
||||
<div class="preview-container grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
@foreach ($lantaiFotos as $foto)
|
||||
@if (is_array($foto) && isset($foto['path']) && isset($foto['name']))
|
||||
<div class="preview-item relative">
|
||||
<img src="{{ asset('storage/' . $foto['path']) }}"
|
||||
alt="{{ $foto['name'] }}"
|
||||
class="w-full h-40 object-cover rounded-lg">
|
||||
<button type="button"
|
||||
class="absolute top-2 right-2 btn btn-sm btn-danger btn-icon btnRemoveFoto"
|
||||
data-path="{{ $foto['path'] }}">
|
||||
<i class="ki-solid ki-cross"></i>
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<p>Invalid photo data.</p>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<input type="file" name="foto_lantai_unit[{{ $lantaiKey }}][]"
|
||||
class="file-input hidden" multiple accept="image/*"
|
||||
onchange="handleFileInput(this)" data-lantai="{{ $lantaiKey }}">
|
||||
<button type="button" class="btn btn-light btn-sm btnUploadFiles mt-2">
|
||||
<i class="ki-outline ki-upload"></i> Unggah Gambar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lantaiContainer" class="w-full">
|
||||
</div>
|
||||
<div class="py-4 flex items-center justify-end w-full">
|
||||
<button type="button" id="btnAddLantai" class="btn btn-primary btn-sm">
|
||||
<i class="ki-filled ki-plus text-lg"></i> Tambah Lantai
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-wrap gap-4 w-full">
|
||||
<div class="w-full">
|
||||
<div class="text-white py-4 flex items-center justify-between w-full">
|
||||
<label class="form-label">
|
||||
<span class="form-label">Lantai</span>
|
||||
</label>
|
||||
<button type="button" id="btnAddLantai" class="btn btn-primary btn-sm">
|
||||
<i class="ki-filled ki-plus text-lg"></i> Tambah Lantai
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="lantaiContainer" class="w-full">
|
||||
<!-- Template Lantai -->
|
||||
<div class="lantai-item w-full mb-4">
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<label class="form-label">Lantai 1</label>
|
||||
<button type="button" class="btn btn-danger btn-sm btnRemoveLantai"
|
||||
style="display: none;">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropzone w-full border-2 border-dashed border-gray-400 rounded-lg p-4 mt-2"
|
||||
ondrop="handleDrop(event)" ondragover="allowDrop(event)">
|
||||
<div class="preview-container grid grid-cols-2 md:grid-cols-4 gap-4"></div>
|
||||
<input type="file" name="foto_lantai_unit[1][]" class="file-input hidden"
|
||||
multiple accept="image/*" onchange="handleFileInput(this)"
|
||||
data-lantai="1">
|
||||
<button type="button" class="btn btn-light btn-sm btnUploadFiles mt-2">
|
||||
<i class="ki-outline ki-upload"></i> Unggah Gambar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-white rounded-lg shadow-md">
|
||||
<div class="card-body">
|
||||
<div class="text-white py-4 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($formFoto['lingkungan']) && is_array($formFoto['lingkungan']) && count($formFoto['lingkungan']) > 0)
|
||||
@foreach ($formFoto['lingkungan'] as $key => $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 {{ $key + 1 }}</span>
|
||||
</label>
|
||||
<div class="w-full grid gap-5">
|
||||
<img id="foto_lingkungan_preview_{{ $key }}"
|
||||
src="{{ asset('storage/' . old('foto_lingkungan.' . $key, $item['foto_lingkungan'])) }}"
|
||||
alt="Gambar Lingkungan" style="width: 30rem;">
|
||||
<input type="hidden" name="name_lingkungan[]" value="lingkungan">
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<input id="inputLingkungan_{{ $key }}" type="file"
|
||||
name="foto_lingkungan[]" class="file-input file-input-bordered w-full"
|
||||
accept="image/*" capture="camera"
|
||||
onchange="previewImage(this, 'foto_lingkungan_preview_{{ $key }}')">
|
||||
<button type="button" id="btnCamera" class="btn btn-light"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<span class="alert text-danger text-sm"></span>
|
||||
</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>
|
||||
<div id="inputContainerBasement" class="w-full" style="margin-top: 10px">
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap w-full gap-4">
|
||||
<label class="form-label max-w-56">
|
||||
<span class="form-label">Basement</span>
|
||||
</label>
|
||||
<div class="input-group w-full flex flex-col gap-2">
|
||||
<input type="hidden" name="name_basement" value="basement">
|
||||
<img id="foto_basement_preview"
|
||||
src="{{ isset($formFoto['foto_basement']) ? asset('storage/' . old('foto_basement', $formFoto['foto_basement'])) : '#' }}"
|
||||
alt="Gambar foto_basement" style="width: 30rem;" onerror="this.style.display='none';"
|
||||
onchange="previewImage(this, 'foto_basement_preview')">
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<input type="hidden" name="name_lingkungan[]" value="lingkungan">
|
||||
<img id="foto_lingkungan_preview_0"
|
||||
src="{{ isset($formFoto['lingkungan']) ? asset('storage/' . old('lingkungan', $formFoto['lingkungan'])) : '#' }}"
|
||||
alt="Gambar Lingkungan" style="width: 30rem;"
|
||||
onerror="this.style.display='none';">
|
||||
<input id="inputLingkungan_0" type="file" name="foto_lingkungan[]"
|
||||
class="file-input file-input-bordered w-full" accept="image/*" capture="camera"
|
||||
onchange="previewImage(this, 'foto_lingkungan_preview_0')">
|
||||
<input id="inputBasement" type="file" name="foto_basement"
|
||||
class="file-input file-input-bordered w-full" accept="image/*"
|
||||
onchange="previewImage(this, 'foto_basement_preview')" capture="camera">
|
||||
<button type="button" id="btnCamera" class="btn btn-light"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<span class="alert text-danger text-sm"></span>
|
||||
<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>
|
||||
@endif
|
||||
<span id="alertBasement" class="alert text-danger text-sm"></span>
|
||||
</div>
|
||||
|
||||
<div id="lantaiLainnya" style="margin-top: 10px"></div>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-sm" id="btnAddMoreObject"
|
||||
style="margin-top: 10px">
|
||||
<i class="ki-outline ki-plus text-2sm"></i>
|
||||
Lainnya
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-white rounded-lg shadow-md">
|
||||
<div class="card rounded-lg shadow-md">
|
||||
<div class="card-body">
|
||||
<div class=" text-white py-4 flex items-center justify-between">
|
||||
<div class=" py-4 flex items-center justify-between">
|
||||
<h1 class="text-md font-medium text-gray-900">Lingkungan</h1>
|
||||
</div>
|
||||
|
||||
<div id="inputContainerLingkungan" style="margin-top: 10px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card rounded-lg shadow-md">
|
||||
<div class="card-body">
|
||||
<div class=" py-4 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="flex items-baseline flex-wrap lg:flex-nowrap w-full gap-4 mb-4">
|
||||
<div class="w-full grid gap-5">
|
||||
|
||||
<img id="pendamping"
|
||||
src="{{ isset($formFoto['pendamping']) ? asset('storage/' . old('pendamping', $formFoto['pendamping'])) : '#' }}"
|
||||
alt="Gambar Pendamping" style="width: 30rem;" onerror="this.style.display='none';"
|
||||
@@ -579,17 +357,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
|
||||
<button type="button" class="btn btn-success" id="saveButtonFoto" onclick="submitFoto()">
|
||||
<span id="saveButtonFotoText">Save</span>
|
||||
<div class="spinner-border spinner-border-sm text-light" role="status" style="display: none;"
|
||||
id="saveButtonSpinner">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -602,167 +374,86 @@
|
||||
@push('scripts')
|
||||
<script>
|
||||
// console.log('@json($formFoto)');
|
||||
|
||||
|
||||
// Inisialisasi saat dokumen siap
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const lantaiContainer = document.getElementById("lantaiContainer");
|
||||
const btnAddLantai = document.getElementById("btnAddLantai");
|
||||
// Transform and initialize files for each category
|
||||
|
||||
const updateRemoveButtonVisibility = () => {
|
||||
const lantaiItems = lantaiContainer.querySelectorAll(".lantai-item");
|
||||
lantaiItems.forEach((item, index) => {
|
||||
const btnRemove = item.querySelector(".btnRemoveLantai");
|
||||
const labelLantai = item.querySelector(".form-label");
|
||||
// Foto Lantai Unit
|
||||
const existingFilesLantai = @json($formFoto['foto_lantai_unit'] ?? []);
|
||||
const processedFilesLantai = Object.entries(existingFilesLantai || {}).flatMap(([lantaiIndex, files]) =>
|
||||
files.map(file => ({
|
||||
...file,
|
||||
item: lantaiIndex,
|
||||
url: file.path ? `/storage/${file.path}` : null
|
||||
}))
|
||||
);
|
||||
|
||||
// Update label lantai
|
||||
labelLantai.textContent = `Lantai ${index + 1}`;
|
||||
|
||||
// Tampilkan tombol hapus jika lebih dari 1 lantai
|
||||
btnRemove.style.display = lantaiItems.length > 1 ? "inline-block" : "none";
|
||||
});
|
||||
};
|
||||
|
||||
const attachEventListeners = (lantaiItem) => {
|
||||
// Event listener untuk tombol Hapus
|
||||
lantaiItem.querySelector(".btnRemoveLantai").addEventListener("click", () => {
|
||||
lantaiItem.remove();
|
||||
updateRemoveButtonVisibility();
|
||||
});
|
||||
|
||||
// Event listener untuk tombol Unggah Gambar
|
||||
lantaiItem.querySelector(".btnUploadFiles").addEventListener("click", () => {
|
||||
lantaiItem.querySelector(".file-input").click();
|
||||
});
|
||||
};
|
||||
|
||||
// Tambahkan lantai baru
|
||||
btnAddLantai.addEventListener("click", () => {
|
||||
const lantaiCount = lantaiContainer.children.length + 1;
|
||||
|
||||
const lantaiItem = document.createElement("div");
|
||||
lantaiItem.classList.add("lantai-item", "w-full", "mb-4");
|
||||
lantaiItem.innerHTML = `
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<label class="form-label">Lantai ${lantaiCount}</label>
|
||||
<button type="button" class="btn btn-danger btn-sm btnRemoveLantai">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropzone w-full border-2 border-dashed border-gray-400 rounded-lg p-4 mt-2"
|
||||
ondrop="handleDrop(event)"
|
||||
ondragover="allowDrop(event)">
|
||||
<div class="preview-container grid grid-cols-2 md:grid-cols-4 gap-4"></div>
|
||||
<input type="file"
|
||||
name="foto_lantai_unit[${lantaiCount}][]"
|
||||
class="file-input hidden"
|
||||
multiple
|
||||
accept="image/*"
|
||||
data-lantai="${lantaiCount}"
|
||||
onchange="handleFileInput(this)">
|
||||
<button type="button" class="btn btn-light btn-sm btnUploadFiles">
|
||||
<i class="ki-outline ki-upload"></i> Unggah Gambar
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
lantaiContainer.appendChild(lantaiItem);
|
||||
attachEventListeners(lantaiItem);
|
||||
updateRemoveButtonVisibility();
|
||||
const lantaiUploader = new DynamicFileUploader({
|
||||
containerId: 'lantaiContainer',
|
||||
addButtonId: 'btnAddLantai',
|
||||
name: 'Lantai',
|
||||
fileInputName: 'foto_lantai_unit',
|
||||
existingFiles: processedFilesLantai,
|
||||
maxFiles: 10,
|
||||
accept: 'image/*',
|
||||
});
|
||||
|
||||
window.handleFileInput = (input) => {
|
||||
const lantaiNomor = input.getAttribute('data-lantai');
|
||||
const previewContainer = input.closest(".dropzone").querySelector(".preview-container");
|
||||
// Foto Lingkungan
|
||||
const existingFilesLingkungan = @json($formFoto['foto_lingkungan']['foto_lingkungan'] ?? []);
|
||||
const processedFilesLingkungan = existingFilesLingkungan.flatMap(files =>
|
||||
files.map(file => ({
|
||||
...file,
|
||||
url: file.path ? `/storage/${file.path}` : null
|
||||
}))
|
||||
);
|
||||
|
||||
// Tidak reset preview, tambahkan gambar baru
|
||||
Array.from(input.files).forEach((file) => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const imgWrapper = document.createElement("div");
|
||||
imgWrapper.classList.add("relative", "preview-item");
|
||||
const lingkunganUploader = new DynamicFileUploader({
|
||||
containerId: 'inputContainerLingkungan',
|
||||
fileInputName: 'foto_lingkungan',
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
img.alt = `Foto Lantai ${lantaiNomor}`;
|
||||
img.classList.add("rounded", "w-full", "h-40", "object-cover");
|
||||
|
||||
// Tombol hapus gambar
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.innerHTML = '<i class="ki-outline ki-trash"></i>';
|
||||
removeBtn.classList.add(
|
||||
"absolute", "top-0", "right-0",
|
||||
"btn", "btn-danger", "text-white",
|
||||
"rounded-full", "w-6", "h-6",
|
||||
"flex", "items-center", "justify-center"
|
||||
);
|
||||
removeBtn.addEventListener("click", () => {
|
||||
removeImageFromPreview(input, imgWrapper, file);
|
||||
});
|
||||
|
||||
imgWrapper.appendChild(img);
|
||||
imgWrapper.appendChild(removeBtn);
|
||||
previewContainer.appendChild(imgWrapper);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function removeImageFromPreview(input, imgWrapper, fileToRemove) {
|
||||
// Hapus dari preview
|
||||
imgWrapper.remove();
|
||||
|
||||
// Hapus file dari input
|
||||
const dataTransfer = new DataTransfer();
|
||||
Array.from(input.files)
|
||||
.filter(file => file !== fileToRemove)
|
||||
.forEach(file => dataTransfer.items.add(file));
|
||||
|
||||
input.files = dataTransfer.files;
|
||||
}
|
||||
|
||||
window.handleDrop = (event) => {
|
||||
event.preventDefault();
|
||||
const dropzone = event.target.closest(".dropzone");
|
||||
const fileInput = dropzone.querySelector(".file-input");
|
||||
const previewContainer = dropzone.querySelector(".preview-container");
|
||||
const dataTransfer = new DataTransfer();
|
||||
|
||||
// Tambahkan file yang sudah ada di input
|
||||
Array.from(fileInput.files).forEach((file) => dataTransfer.items.add(file));
|
||||
|
||||
// Tambahkan file baru yang di-drop
|
||||
Array.from(event.dataTransfer.files).forEach((file) => {
|
||||
// Cek duplikasi
|
||||
const isDuplicate = Array.from(fileInput.files).some(
|
||||
existFile => existFile.name === file.name && existFile.size === file.size
|
||||
);
|
||||
|
||||
if (!isDuplicate) {
|
||||
dataTransfer.items.add(file);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.files = dataTransfer.files;
|
||||
handleFileInput(fileInput);
|
||||
};
|
||||
existingFiles: processedFilesLingkungan,
|
||||
maxFiles: 10,
|
||||
accept: 'image/*',
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Inisialisasi lantai pertama
|
||||
const initialLantaiItem = lantaiContainer.querySelector(".lantai-item");
|
||||
if (initialLantaiItem) {
|
||||
attachEventListeners(initialLantaiItem);
|
||||
}
|
||||
|
||||
updateRemoveButtonVisibility();
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Rute Menuju Lokasi
|
||||
const existingFilesRute = @json($formFoto['rute_menuju_lokasi']['rute_menuju_lokasi'] ?? []);
|
||||
const processedFilesRute = existingFilesRute.flatMap(files =>
|
||||
files.map(file => ({
|
||||
...file,
|
||||
url: file.path ? `/storage/${file.path}` : null
|
||||
}))
|
||||
);
|
||||
|
||||
const ruteUploader = new DynamicFileUploader({
|
||||
containerId: 'inputContainerRute',
|
||||
fileInputName: 'rute_menuju_lokasi',
|
||||
existingFiles: processedFilesRute,
|
||||
maxFiles: 10,
|
||||
accept: 'image/*',
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
function submitFoto() {
|
||||
showLoadingSwal('Mengirim data ke server...');
|
||||
|
||||
const formElement = $('#formFoto')[0];
|
||||
const formData = new FormData(formElement);
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value instanceof File) {
|
||||
console.log(`${key}: File name = ${value.name}, File size = ${value.size}, File type = ${value.type}`);
|
||||
} else {
|
||||
console.log(`${key}: ${value}`);
|
||||
}
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '{{ route('surveyor.storeFoto') }}',
|
||||
@@ -784,8 +475,8 @@
|
||||
confirmButtonText: 'OK'
|
||||
}).then((response) => {
|
||||
if (response.isConfirmed) {
|
||||
window.location.href =
|
||||
'{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
|
||||
// window.location.href =
|
||||
// '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
|
||||
}
|
||||
console.log(response);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user