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

510 lines
27 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 border border-agi-100 min-w-full">
<div class="card border border-agi-100 min-w-full">
<div class="card-header bg-agi-50">
<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 border border-agi-100 bg-white 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">Rute Menuju Lokasi</h1>
</div>
<div id="inputContainerRute" style="margin-top: 10px">
</div>
<div id="inputContainerGerbang" style="margin-top: 10px">
<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>
<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 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;">
<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 border border-agi-100 bg-white 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">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)
@php
$fotoObjekJaminanFiltered = $fotoObjekJaminan->filter(function ($item) use (
$kategori,
) {
return $item->kategori === $kategori;
});
@endphp
@if (!in_array($kategori, $processedCategories))
@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="{{ $item->name }}" />
<div class="w-full grid gap-5">
@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_{{ $loop->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">{{ $matchedFoto['deskripsi_objek'] ?? '' }}</textarea>
</div>
<span class="alert text-danger text-sm"></span>
</div>
</div>
@endforeach
@endif
@php
$processedCategories[] = $kategori;
@endphp
@endif
@endforeach
@endif
@endif
@endif
@endforeach
<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>
<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>
</div>
<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 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>
</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 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 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">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 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';"
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>
</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)');
// Inisialisasi saat dokumen siap
document.addEventListener("DOMContentLoaded", () => {
// Transform and initialize files for each category
// 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
}))
);
const lantaiUploader = new DynamicFileUploader({
containerId: 'lantaiContainer',
addButtonId: 'btnAddLantai',
name: 'Lantai',
fileInputName: 'foto_lantai_unit',
existingFiles: processedFilesLantai,
maxFiles: 10,
accept: 'image/*',
});
// 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
}))
);
const lingkunganUploader = new DynamicFileUploader({
containerId: 'inputContainerLingkungan',
fileInputName: 'foto_lingkungan',
existingFiles: processedFilesLingkungan,
maxFiles: 10,
accept: 'image/*',
});
});
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') }}',
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