843 lines
50 KiB
PHP
843 lines
50 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">
|
|
<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')]) }}" class="btn btn-xs btn-info">
|
|
<i class="ki-filled ki-exit-left"></i> Back
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body grid gap-5 grid-cols-2">
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">Nama Debitur</label>
|
|
<div class="flex flex-wrap items-baseline w-full">
|
|
@if (isset($permohonan->debiture))
|
|
<p class="text-2sm text-gray-700">{{ $permohonan->debiture->name }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">Alamat Object</label>
|
|
<div class="flex flex-wrap items-baseline w-full">
|
|
@foreach ($permohonan->debiture->documents as $dokumen)
|
|
<span class="text-2sm text-gray-700">
|
|
{{ formatAlamat($dokumen->pemilik) }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">Nomor Registrasi</label>
|
|
<div class="flex flex-wrap items-base line w-full">
|
|
<p class="text-2sm text-gray-700">{{ $permohonan->nomor_registrasi }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">Cab/Direktorat</label>
|
|
<div class="flex flex-wrap items-baseline w-full">
|
|
@if (isset($permohonan->branch))
|
|
<p class="text-2sm text-gray-700">{{ $permohonan->branch->name }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">Nomor Laporan</label>
|
|
<div class="flex flex-wrap items-base line w-full">
|
|
<p class="text-2sm text-gray-700">{{ $permohonan->nomor_registrasi }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label class="form-label max-w-56">AO</label>
|
|
<div class="flex flex-wrap items-baseline w-full">
|
|
@if (isset($permohonan->user))
|
|
<p class="text-2sm text-gray-700">{{ $permohonan->user->name }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="formFoto" method="POST" class="grid gap-5" enctype="multipart/form-data">
|
|
<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-body">
|
|
<div class=" text-white 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 }}')">
|
|
|
|
|
|
<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 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">
|
|
<label class="form-label max-w-56">
|
|
<span class="form-label">Foto Gerbang & Nama Perumahan</span>
|
|
</label>
|
|
<div class="input-group w-full flex flex-col gap-2">
|
|
<input class="name_gerbang" type="hidden" name="name_gerbang" value="gerbang">
|
|
<img id="foto_gerbang-preview"
|
|
src="{{ isset($formFoto['foto_gerbang']) ? asset('storage/' . $formFoto['foto_gerbang']) : '' }}"
|
|
alt="Foto Gerbong" class="mt-2 max-w-full h-auto"
|
|
style="{{ isset($formFoto['foto_gerbang']) ? '' : 'display: none;' }} width: 30rem;">
|
|
<div class="input-group w-full flex gap-2">
|
|
<input id="inputRute" type="file" name="foto_gerbang"
|
|
class="file-input file-input-bordered w-full" accept="image/*" capture="camera"
|
|
onchange="previewImage(this, 'foto_gerbang-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>
|
|
</div>
|
|
<span class="alert text-danger text-sm"></span>
|
|
</div>
|
|
<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">
|
|
<label class="form-label max-w-56">
|
|
Masukkan nama rute lainnya {{ $index + 1 }}
|
|
</label>
|
|
<div class="flex flex-wrap items-baseline w-full">
|
|
<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;">
|
|
<div class="flex flex-col lg:flex-row gap-2 w-full">
|
|
|
|
<div class="flex flex-wrap items-baseline px-2">
|
|
<input class="input" type="text" name="name_rute_lainnya[]"
|
|
value="{{ $photo['name_rute_lainnya'] }}">
|
|
</div>
|
|
<div class="input-group w-full flex flex-col gap-2">
|
|
|
|
<div class="input-group w-full flex gap-2">
|
|
<input type="file" name="foto_rute_lainnya[]"
|
|
class="file-input file-input-bordered w-full"
|
|
value="{{ $photo['foto_rute_lainnya'] }}" accept="image/*"
|
|
onchange="previewImage(this, 'foto_rute_lainnya-preview-{{ $index }}')">
|
|
<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>
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
|
id="btnDelete">
|
|
<i class="ki-filled ki-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
<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-body">
|
|
<div class="text-white py-4 flex items-center justify-between">
|
|
<h1 class="text-md font-medium text-gray-900">Objek Jaminan</h1>
|
|
</div>
|
|
|
|
@php
|
|
$processedCategories = [];
|
|
@endphp
|
|
|
|
@foreach ($permohonan->debiture->documents as $dokumen)
|
|
@if ($dokumen->jenisJaminan)
|
|
@php
|
|
$formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
|
|
@endphp
|
|
@if (isset($formKategori) && $formKategori)
|
|
<input type="hidden" name="action"
|
|
value="{{ is_array($formKategori) ? implode(',', $formKategori) : $formKategori }}">
|
|
<input type="hidden" name="type"
|
|
value="{{ is_array($formKategori) ? implode(',', $formKategori) : $formKategori }}">
|
|
|
|
@if (is_array($formKategori))
|
|
@foreach ($formKategori as $kategori)
|
|
@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>
|
|
<input type="hidden" class="form-control"
|
|
name="name_objek[]" value="{{ $view['label'] }}" />
|
|
<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;' }}"
|
|
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'] }}')">
|
|
<button type="button" id="btnCamera"
|
|
class="btn btn-light"
|
|
data-modal-toggle="#cameraModal">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<span class="alert text-danger text-sm"></span>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
|
|
@php
|
|
$processedCategories[] = $kategori;
|
|
@endphp
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
@endif
|
|
@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 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)
|
|
<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>
|
|
@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>
|
|
@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 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')">
|
|
<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>
|
|
</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">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">
|
|
|
|
<img id="pendamping"
|
|
src="{{ isset($formFoto['pendamping']) ? asset('storage/' . old('pendamping', $formFoto['pendamping'])) : '#' }}"
|
|
alt="Gambar Pendamping" style="width: 30rem;" onerror="this.style.display='none';"
|
|
onchange="previewImage(this, 'pendamping')">
|
|
|
|
|
|
<div class="input-group w-full flex gap-2">
|
|
<input id="inputPendamping" type="file" name="pendamping"
|
|
class="file-input file-input-bordered w-full" accept="image/*"
|
|
onchange="previewImage(this, 'pendamping')" 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>
|
|
</div>
|
|
@error('pendamping')
|
|
<span class="alert text-danger text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Modal Kamera -->
|
|
@include('lpj::surveyor.components.modal-kamera')
|
|
@endsection
|
|
|
|
@include('lpj::surveyor.js.fotojs')
|
|
@include('lpj::surveyor.js.utils')
|
|
@push('scripts')
|
|
<script>
|
|
|
|
console.log('@json($formFoto)');
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const lantaiContainer = document.getElementById("lantaiContainer");
|
|
const btnAddLantai = document.getElementById("btnAddLantai");
|
|
|
|
const updateRemoveButtonVisibility = () => {
|
|
const lantaiItems = lantaiContainer.querySelectorAll(".lantai-item");
|
|
lantaiItems.forEach((item, index) => {
|
|
const btnRemove = item.querySelector(".btnRemoveLantai");
|
|
const labelLantai = item.querySelector(".form-label");
|
|
|
|
// 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();
|
|
});
|
|
|
|
window.handleFileInput = (input) => {
|
|
const lantaiNomor = input.getAttribute('data-lantai');
|
|
const previewContainer = input.closest(".dropzone").querySelector(".preview-container");
|
|
|
|
// 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 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);
|
|
};
|
|
|
|
|
|
|
|
// Inisialisasi lantai pertama
|
|
const initialLantaiItem = lantaiContainer.querySelector(".lantai-item");
|
|
if (initialLantaiItem) {
|
|
attachEventListeners(initialLantaiItem);
|
|
}
|
|
|
|
updateRemoveButtonVisibility();
|
|
});
|
|
|
|
function submitFoto() {
|
|
showLoadingSwal('Mengirim data ke server...');
|
|
|
|
const formElement = $('#formFoto')[0];
|
|
const formData = new FormData(formElement);
|
|
|
|
const lantaiInputs = document.querySelectorAll('.lantai-input');
|
|
lantaiInputs.forEach((input, index) => {
|
|
const files = input.files;
|
|
if (files.length > 0) {
|
|
// Gunakan dot notation sesuai Laravel
|
|
Array.from(files).forEach((file, fileIndex) => {
|
|
formData.append(`foto_lantai_unit.${index}`, file);
|
|
|
|
// Nama lantai unit
|
|
const namaLantai = document.querySelector(`[name="name_lantai_unit.${index}"]`);
|
|
if (namaLantai && namaLantai.value) {
|
|
formData.append(`name_lantai_unit.${index}`, namaLantai.value);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log(formData.value);
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: '{{ route('surveyor.storeFoto') }}',
|
|
type: 'POST',
|
|
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
hideLoadingSwal();
|
|
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]) }}';
|
|
}
|
|
// console.log(response);
|
|
|
|
});
|
|
} else {
|
|
hideLoadingSwal();
|
|
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]);
|
|
});
|
|
}
|
|
hideLoadingSwal();
|
|
toastrErrorBuild(error);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@include('lpj::surveyor.js.camera-editor')
|
|
@endpush
|