Files
lpj/resources/views/surveyor/components/form-inspeksi.blade.php
2024-10-16 16:41:39 +07:00

601 lines
26 KiB
PHP

@push('scripts')
{{-- <script src="https://cdn.tailwindcss.com"></script> --}}
@endpush
<form id="debiturForm" action="{{ isset($debitur->id) ? route('debitur.update', $debitur->id) : route('debitur.store') }}" method="POST"
class="grid gap-5">
@if (isset($debitur->id))
<input type="hidden" name="id" value="{{ $debitur->id }}">
@method('PUT')
@endif
@csrf
@if (false)
@include('lpj::surveyor.components.apartemen-kantor')
@else
@include('lpj::surveyor.components.tanah-bangunan')
@endif
<div class=" bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-green-600 text-white py-4 px-6">
<h1 class="text-md font-medium text-gray-900">Analisis Lingkungan</h1>
</div>
<div class="grid gap-5">
<!-- Jarak dari Objek Utama -->
<div class="bg-gray-50 rounded-lg">
<div class="grid grid-cols-3 gap-5">
<div>
<label class="block text-sm font-medium text-gray-700">Jarak Dari Jalan Utama</label>
<input type="text" class="input mt-2" name="jarakDariJalan" placeholder="Km">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Jarak ke CBD Point</label>
<input type="text" class="input mt-2" name="jarakkeCbdPoint" placeholder="Km">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Lebar Perkerasan Jalan Depan
objek</label>
<input type="text" name="lebarPerkerasanJalan" class="input mt-2" placeholder="Meter">
</div>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Perkerasan Jalan</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('perkerasanJalan') border-danger bg-danger-light @enderror"
name="perkerasanJalan">
<option value="">Select Perkerasan Jalan</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('perkerasanJalan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Lalulintas -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Lalulintas Depan Lokasi</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('laluLintasDepanLoaksi') border-danger bg-danger-light @enderror"
name="laluLintasDepanLoaksi">
<option value="">Select PLalulintas Depan Lokasi</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('laluLintasDepanLoaksi')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Golongan Hidup Sekitar -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Golongan Hidup Sekitar</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('golHidupSekitar') border-danger bg-danger-light @enderror"
name="golHidupSekitar">
<option value="">Select Golongan Hidup Sekitar</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('golHidupSekitar')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Tingkat Keramaian -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Tingkat Keramaian</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('tingkatKeramaian') border-danger bg-danger-light @enderror"
name="tingkatKeramaian">
<option value="">Select Tingkat Keramaian</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('tingkatKeramaian')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Tataletak di Area -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Tataletak di Area</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('tataLetakArea') border-danger bg-danger-light @enderror"
name="tataLetakArea">
<option value="">Select Tataletak di Area</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('tataLetakArea')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Struktru tata letak -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Struktru tata letak</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 gap-4">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="checkbox" class="checkbox" name="telahAdaBagunan" value="komersial">
<span class="ml-2">Telah Ada Bangunan</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="checkbox" class="checkbox" name="telahAdaBagunan" value="komersial">
<span class="ml-2">Belum Ada Bangunan</span>
</label>
</div>
@error('telahAdaBagunan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Dekat Makam -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Dekat Makamh</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 gap-4 mt-2">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="dekatMakam" value="ya">
<span class="ml-2">Ya</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="dekatMakam" value="tidak">
<span class="ml-2">Tidak</span>
</label>
</div>
@error('bentuk_tanah')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Dekat Tps</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 gap-4 mt-2">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="dekatTps" value="ya">
<span class="ml-2">Ya</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="dekatTps" value="tidak">
<span class="ml-2">Tidak</span>
</label>
</div>
@error('bentuk_tanah')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Merupakan daerah</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('merupakanDaerah') border-danger bg-danger-light @enderror"
name="merupakanDaerah">
<option value="">Select Merupakan daerah</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('merupakanDaerah')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<!-- Fasilitas Umum Sekitar -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Fasilitas Umum dekat Object</label>
<div class="flex flex-wrap items-baseline w-full">
<select
class="input tomselect w-full @error('fasilitasUmumDekat') border-danger bg-danger-light @enderror"
name="fasilitasUmumDekat">
<option value="">Select Fasilitas Umum Ddekat Object</option>
@if (isset($konturTanah))
@foreach ($konturTanah as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
@error('fasilitasUmumDekat')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
</div>
</div>
<div class=" bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-blue-600 text-white py-4 px-6">
<h1 class="text-md font-medium text-gray-900">Analisis Fakta</h1>
</div>
<div class="grid gap-5">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Faktor Positif</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="faktorPositif" rows="3"></textarea>
@error('faktorPositif')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Faktor Negatif</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="faktorNegatif" rows="3"></textarea>
@error('faktorNegatif')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Rute Menuju</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="ruteMenuju" rows="3"></textarea>
@error('ruteMenuju')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Batas batas</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 gap-4 items-center w-full">
<div>
<select class="select mt-2" name="BatasBatas">
@if (isset($arahMataAngin))
@foreach ($arahMataAngin as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
@endif
</select>
</div>
<div>
<input name="keteranganBatas" type="text" class="input mt-2">
</div>
</div>
@error('kondisiFisikTanah')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Kondisi lain terkait lingkungan</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="kondisiLainTerkaitLingkungan" rows="3"></textarea>
@error('kondisiLainTerkaitLingkungan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Kondisi lain terkait Bangunan</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="kondisiLainTerkaitBangunan" rows="3"></textarea>
@error('kondisiLainTerkaitBangunan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Informasi Terkait Dokumen</label>
<div class="flex flex-wrap items-baseline w-full">
<textarea class="textarea mt-2" name="informasiTerkaitDokumen" rows="3"></textarea>
@error('informasiTerkaitDokumen')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
</div>
</div>
<div class="container mx-auto ">
<!-- Header -->
<div class="bg-blue-600 text-white py-4 px-6">
<h1 class="text-md font-medium text-gray-900">Informasi Dinas Tata Ruang</h1>
</div>
<!-- Informasi Tata Ruang Form -->
<div class="grid gap-5">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Peruntukan</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="peruntukan" class="input" placeholder="Masukkan Peruntukan">
@error('peruntukan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">KDB</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="kdb" class="input" placeholder="Masukkan KDB">
@error('kdb')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">KDH</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="kdh" class="input" placeholder="Masukkan KDH">
@error('kdh')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">GSB</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="gsb" class="input" placeholder="Masukkan GSB">
@error('gsb')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Max Lantai</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="maxLantai" class="input" placeholder="Masukkan Max Lantai">
@error('maxLantai')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">KLB</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="klb" class="input" placeholder="Masukkan KLB">
@error('klb')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">GSS</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="gss" class="input" placeholder="Masukkan GSS">
@error('gss')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Pelebaran Jalan</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="pelebaranJalan" class="input"
placeholder="Masukkan Pelebaran Jalan">
@error('pelebaranJalan')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Nama Petugas TK</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="petugasTK" class="input" placeholder="Masukkan Petugas TK">
@error('petugasTK')
<em class="alert text-danger text-sm">{{ $message }}</em>
@enderror
</div>
</div>
</div>
<!-- Peta Section -->
<div class="mt-2">
<div class="bg-info border p-6 rounded-lg shadow-lg flex items-center justify-center" style="height: 300px">
<iframe id="mapFrame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
<!-- Upload Photo Button -->
<div class=" flex w-full mt-2">
<div class="input-group w-full">
<input class="file-input" name="foto" type="file" />
</div>
</div>
<!-- Notes Section -->
<div class="mt-2">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h4 class="block text-sm font-medium text-gray-700 mt-2">Catatan yang Perlu Diperhatikan</h4>
<textarea name="notes" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3"></textarea>
</div>
</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>
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
@push('scripts')
<script>
// Fungsi untuk mengambil lokasi pengguna
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert("Geolocation tidak didukung oleh browser ini.");
}
}
// Fungsi untuk menampilkan posisi
function showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var mapUrl = `https://www.google.com/maps?q=${lat},${lng}&z=15&output=embed`;
document.getElementById('mapFrame').src = mapUrl;
}
// Fungsi untuk menangani error jika lokasi tidak bisa diambil
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("Pengguna menolak permintaan geolokasi.");
break;
case error.POSITION_UNAVAILABLE:
alert("Informasi lokasi tidak tersedia.");
break;
case error.TIMEOUT:
alert("Permintaan lokasi pengguna berakhir.");
break;
case error.UNKNOWN_ERROR:
alert("Terjadi kesalahan yang tidak diketahui.");
break;
}
}
window.onload = getUserLocation;
</script>
<script>
// Fungsi untuk menyimpan data ke localStorage saat ada perubahan input
const formElement = document.getElementById('debiturForm');
// Mengambil nilai dari localStorage saat halaman dimuat
window.onload = () => {
const storedData = localStorage.getItem('debiturData');
if (storedData) {
const formData = JSON.parse(storedData);
// Mengisi nilai untuk elemen select
for (const [key, value] of Object.entries(formData)) {
const inputElement = formElement.querySelector(`[name="${key}"]`);
if (inputElement) {
if (inputElement.tagName === 'SELECT') {
inputElement.value = value; // Atur nilai select
} else if (inputElement.type === 'radio') {
const radioButton = document.getElementById(`${key}${value.charAt(0).toUpperCase() + value.slice(1)}`);
if (radioButton) {
radioButton.checked = true; // Atur radio button yang sesuai sebagai checked
}
}
}
}
}
};
// Simpan data ke localStorage dalam bentuk JSON
formElement.addEventListener('change', () => {
const formData = {};
const inputs = formElement.querySelectorAll('input, select');
inputs.forEach(input => {
if (input.type === 'radio' && input.checked) {
formData[input.name] = input.value; // Hanya ambil nilai radio yang terpilih
} else if (input.type !== 'radio') {
formData[input.name] = input.value; // Ambil nilai dari elemen lain
}
});
localStorage.setItem('debiturData', JSON.stringify(formData)); // Simpan objek sebagai JSON
});
// Opsi: Reset localStorage saat form disubmit
formElement.onsubmit = () => {
localStorage.removeItem('debiturData'); // Menghapus data spesifik dari localStorage
};
// Opsi: Reset localStorage saat form disubmit
document.getElementById('debiturForm').onsubmit = (event) => {
event.preventDefault(); // Mencegah pengiriman form
// Menyimpan semua input ke localStorage
inputs.forEach(input => {
localStorage.setItem(input.name, input.value);
});
// Opsional: Tampilkan pesan bahwa data telah disimpan
alert('Data telah disimpan ke localStorage!');
// Jika ingin menghapus localStorage, uncomment baris di bawah
// localStorage.clear();
};
</script>
@endpush