Files
lpj/resources/views/surveyor/components/bangunan.blade.php
2024-11-13 22:12:51 +07:00

252 lines
14 KiB
PHP

<div class="card w-full bg-white rounded-lg shadow-md overflow-hidden">
<div class="card-body">
<div class="">
<h1 class="text-md font-medium text-gray-900">Analisa Bangunan</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">Luas Tanah</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-3 text-nowrap">
<input type="radio" class="radio" name="luas_tanah_bagunan" value="sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['luas_tanah_bagunan'] ?? '') == 'sesuai' ? 'checked' : '' }}>
<span class="ml-2">Sesuai</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="luas_tanah_bagunan" value="tidak sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['luas_tanah_bagunan'] ?? '') == 'tidak sesuai' ? 'checked' : '' }}>
<span class="ml-2">Tidak Sesuai</span>
</label>
</div>
<em id="error-luas_tanah_bagunan" class="alert text-danger text-sm"></em>
</div>
</div>
<!-- Jenis Bangunan -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Jenis Bangunan</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4">
@if (isset($jenisBangunan))
@foreach ($jenisBangunan as $item)
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="jenis_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ old('jenis_bangunan') == $item->name || isset($forminspeksi['jenis_bangunan']) == $item->name ? 'checked' : '' }} />
{{ $item->name }}
</label>
@if (strcasecmp($item->name, 'lainnya') == 0)
<div class="flex items-center">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="jenis_bangunan[]" type="checkbox"
value="{{ $item->name }}" />
{{ $item->name }}
</label>
<input type="text" name="jenis_bangunan" class="input mt-2"
id="bentukTanahInput" placeholder="Masukkan Jenis Bangunan...">
</div>
@endif
@endforeach
@endif
</div>
<em id="error-jenis_bangunan" class="alert text-danger text-sm"></em>
</div>
</div>
<!-- Kondisi Bangunan -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Kondisi Bangunan</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4">
@if (isset($kondisiBangunan))
@foreach ($kondisiBangunan as $item)
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="kondisi_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
@if (strcasecmp($item->name, 'lainnya') == 0)
<div class="flex items-center">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="kondisi_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="kondisi_bangunan_lainnya" class="input mt-2"
id="bentukTanahInput" placeholder="Masukkan Kondisi Bangunan..."
value="{{ old('kondisi_bangunan_lainnya', $forminspeksi['kondisi_bangunan_lainnya'] ?? '') }}">
</div>
@endif
@endforeach
@endif
</div>
<em id="error-kondisi_bangunan" class="alert text-danger text-sm"></em>
</div>
</div>
<!-- Sifat Bangunan -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Sifat Bangunan</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4">
@if (isset($sifatBangunan))
@foreach ($sifatBangunan as $item)
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56 gap-2.5" style="width: 500px">
<input class="checkbox" name="sifat_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('sifat_bangunan', $forminspeksi['sifat_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="sifat_bangunan_input[]" class="input w-full"
id="sifat_bangunan" placeholder="Masukkan {{ $item->name }}..."
value="{{ old('sifat_bangunan_input.' . $loop->index, $forminspeksi['sifat_bangunan_input'][$loop->index] ?? '') }}">
</div>
@endforeach
@endif
</div>
<em id="error-sifat_bangunan" class="alert text-danger text-sm"></em>
</div>
</div>
<!-- Spek Bangunan -->
<div class="gap-2.5">
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Spek Bangunan</label>
<div class="flex flex-wrap items-baseline w-full" id="spek-bangunan-container">
<div class="spek-bangunan w-full gap-4">
<input type="hidden" name="nama_bagunan[]" value="Bangunan">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
@if (@isset($spekKategoriBagunan))
@foreach ($spekKategoriBagunan as $item)
<div>
<input type="hidden" name="spek_kategori_bangunan[]"
value="{{ $item->name }}">
<label
class="form-label flex items-center gap-3 text-nowrap">{{ $item->name }}</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4" style="margin-top: 10px">
@foreach ($spekBangunan as $spek)
@if ($spek->spek_kategori_bangunan_id == $item->id)
<label class="form-label flex items-center gap-2.5">
<input class="checkbox"
name="spek_bangunan_{{ $item->name }}[]"
type="checkbox" value="{{ $spek->name }}" />
{{ $spek->name }}
</label>
@endif
@endforeach
</div>
<em id="error-spek_bangunan_{{ $item->name }}"
class="alert text-danger text-sm"></em>
</div>
</div>
@endforeach
@endif
</div>
<button type="button"
class="mt-2 btn btn-danger btn-outline btn-xs delete-button">Hapus</button>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="btn btn-xs btn-primary" type="button" id="addBagunan">
tambah bangunan
<i class="ki-filled ki-plus"></i>
</button>
</div>
</div>
<!-- Sarana pelengkap -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Sarana pelengkap</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4">
@if (isset($saranaPelengkap))
@foreach ($saranaPelengkap as $item)
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56 gap-2.5" style="width: 500px">
<input class="checkbox" name="sarana_pelengkap[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('sarana_pelengkap', $forminspeksi['sarana_pelengkap'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="sarana_pelengkap_input[]" class="input w-full"
id="bentukTanahInput" placeholder="Masukkan {{ $item->name }}..."
value="{{ old('sarana_pelengkap_input.' . $loop->index, $forminspeksi['sarana_pelengkap_input'][$loop->index] ?? '') }}">
</div>
@endforeach
@endif
</div>
<em id="error-sarana_pelengkap" class="alert text-danger text-sm"></em>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
const spekBangunanContainer = document.getElementById('spek-bangunan-container');
function updateDeleteButtonsVisibility() {
const allDeleteButtons = spekBangunanContainer.querySelectorAll('.delete-button');
// Only show the delete buttons if there are more than one form
allDeleteButtons.forEach(button => {
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
button.style.display = 'inline-block';
} else {
button.style.display = 'none';
}
});
}
document.getElementById('addBagunan').addEventListener('click', function() {
const newDiv = spekBangunanContainer.querySelector('.spek-bangunan').cloneNode(true);
// Clear the selected values of the cloned input fields
newDiv.querySelectorAll('select').forEach(select => {
select.value = '';
});
// Append the cloned div to the container
spekBangunanContainer.appendChild(newDiv);
// Add event listener to the delete button in the cloned div
newDiv.querySelector('.delete-button').addEventListener('click', function() {
spekBangunanContainer.removeChild(newDiv);
updateDeleteButtonsVisibility();
});
// Update delete buttons visibility
updateDeleteButtonsVisibility();
});
// Initial delete button visibility
updateDeleteButtonsVisibility();
// Add delete functionality to the initial form
spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
button.addEventListener('click', function() {
const spekBangunan = this.closest('.spek-bangunan');
// Make sure not to delete the last remaining form
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
spekBangunan.remove();
updateDeleteButtonsVisibility();
}
});
});
</script>
@endpush