Update Dinamis header dan form input

This commit is contained in:
2026-11-04 20:25:31 +07:00
parent 8ef4ae1f15
commit fd93e0d265
4 changed files with 60 additions and 64 deletions
@@ -55,13 +55,8 @@
$jumlahPerlu = $semuaItem->where('prioritas', KelengkapanPetani::PERLU)->count();
@endphp
@if ($tab)
@if ($semuaItem->isEmpty())
<div class="alert alert-success d-flex align-items-center py-2 mb-6" role="alert">
<i class="icon-base ti tabler-circle-check me-2"></i>
{{ $tab === 'semua' ? 'Semua isian wajib dan perlu sudah terisi.' : 'Semua isian wajib dan perlu di tab ini sudah terisi.' }}
</div>
@else
{{-- Kartu hanya muncul kalau masih ada yang kosong; tab yang sudah lengkap tidak diberi kotak tambahan. --}}
@if ($tab && $semuaItem->isNotEmpty())
{{-- Klik di mana saja pada kartu untuk membuka/menutup detail (kecuali tombol isian). --}}
<div class="card mb-6 border border-warning kartu-kelengkapan" id="kelengkapan-petani"
role="button" aria-expanded="false" aria-controls="kelengkapan-petani-detail" title="Klik untuk menampilkan/menyembunyikan detail">
@@ -111,7 +106,6 @@
</div>
</div>
</div>
@endif
@once
@push('style')
@@ -15,30 +15,39 @@
$bisaTandai = $petani->bisaDitandaiOleh(auth()->user());
@endphp
<hr class="my-2">
<div class="d-flex justify-content-between align-items-center mb-1">
<h6 class="mb-0" style="font-size: 0.85rem;">Kelengkapan Data</h6>
<span class="badge bg-label-{{ $status->warna() }}">{{ $status->label() }}</span>
</div>
@php
// Rincian dipindah ke tooltip supaya kartu Profil tetap pendek (sejajar kartu ringkasan di kanan).
$rincian = collect([
"{$hitung['terisi']} dari {$hitung['total']} isian terisi",
$hitung['tidak_berlaku'] ? "{$hitung['tidak_berlaku']} isian tidak berlaku untuk petani ini" : null,
$wajibKosong ? "{$wajibKosong} isian wajib masih kosong" : 'Semua isian wajib sudah terisi',
match (true) {
$bisaTandai => null,
$status === StatusDataPetani::DRAFT => 'Hanya enumerator penginput yang dapat menandai lengkap',
$status === StatusDataPetani::LENGKAP => 'Menunggu verifikasi koordinator',
default => null,
},
$bisaTandai && $status === StatusDataPetani::LENGKAP ? 'Mengubah data petani akan mengembalikan status ke Draf' : null,
])->filter()->implode(' · ');
@endphp
<div class="d-flex justify-content-between" style="font-size: 0.75rem;">
<span>{{ $hitung['terisi'] }} dari {{ $hitung['total'] }} isian terisi</span>
<span class="fw-medium">{{ $hitung['persen'] }}%</span>
</div>
<div class="progress my-1" style="height: 6px;">
<hr class="my-2">
<div title="{{ $rincian }}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<div class="d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
<span class="d-flex align-items-center gap-1">
<span class="fw-medium text-heading">Kelengkapan</span>
<span class="badge badge-sm bg-label-{{ $status->warna() }}">{{ $status->label() }}</span>
@if ($wajibKosong)
<span class="badge badge-sm bg-label-danger">{{ $wajibKosong }} wajib</span>
@endif
</span>
<span><span class="text-muted">{{ $hitung['terisi'] }}/{{ $hitung['total'] }}</span> <span class="fw-medium">{{ $hitung['persen'] }}%</span></span>
</div>
<div class="progress mt-1" style="height: 4px;">
<div class="progress-bar {{ $hitung['persen'] >= 100 ? 'bg-success' : '' }}" role="progressbar"
style="width: {{ $hitung['persen'] }}%;" aria-valuenow="{{ $hitung['persen'] }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<p class="mb-0 text-muted" style="font-size: 0.7rem;">
@if ($hitung['tidak_berlaku'])
{{ $hitung['tidak_berlaku'] }} isian tidak berlaku untuk petani ini.
@endif
@if ($wajibKosong)
<span class="text-danger">{{ $wajibKosong }} isian wajib masih kosong.</span>
@else
<span class="text-success">Semua isian wajib sudah terisi.</span>
@endif
</p>
@if ($bisaTandai && $status === StatusDataPetani::DRAFT)
<form method="POST" action="{{ route('petani.status.update', $petani->id) }}" class="form-status-petani mt-2"
@@ -50,7 +59,7 @@
@method('PUT')
<input type="hidden" name="status" value="{{ StatusDataPetani::LENGKAP->value }}">
<input type="hidden" name="pernyataan" value="0">
<button type="submit" class="btn btn-sm btn-primary w-100" @disabled($wajibKosong > 0)
<button type="submit" class="btn btn-xs btn-primary w-100" @disabled($wajibKosong > 0)
@if ($wajibKosong) title="Lengkapi {{ $wajibKosong }} isian wajib terlebih dahulu" @endif>
<i class="icon-base ti tabler-checks icon-sm me-1"></i>Tandai Sudah Lengkap
</button>
@@ -61,15 +70,10 @@
@csrf
@method('PUT')
<input type="hidden" name="status" value="{{ StatusDataPetani::DRAFT->value }}">
<button type="submit" class="btn btn-sm btn-outline-secondary w-100">
<button type="submit" class="btn btn-xs btn-outline-secondary w-100">
<i class="icon-base ti tabler-arrow-back-up icon-sm me-1"></i>Batalkan Tanda Lengkap
</button>
</form>
<p class="mb-0 mt-1 text-muted fst-italic" style="font-size: 0.7rem;">Mengubah data petani akan mengembalikan status ke Draf.</p>
@elseif ($status === StatusDataPetani::DRAFT)
<p class="mb-0 mt-1 text-muted fst-italic" style="font-size: 0.7rem;">Hanya enumerator penginput yang dapat menandai lengkap.</p>
@elseif ($status === StatusDataPetani::LENGKAP)
<p class="mb-0 mt-1 text-muted fst-italic" style="font-size: 0.7rem;">Menunggu verifikasi koordinator.</p>
@endif
@once
@@ -71,27 +71,25 @@
<div class="col-md-9">
<h5 class="pb-4 border-bottom mb-4">Data Pribadi</h5>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-nama">Nama Petani<span class="text-danger">*</span></label>
<input type="text" class="form-control @error('nama') is-invalid @enderror" id="edit-petani-nama" name="nama"
placeholder="Cth: John Doe" value="{{ old('nama', $petani->nama) }}" />
@error('nama')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-ktp">NIK<span class="text-danger">*</span></label>
<input type="text" class="form-control @error('ktp') is-invalid @enderror" id="edit-petani-ktp" name="ktp"
placeholder="Cth: 1234567890" value="{{ old('ktp', $petani->ktp) }}" />
@error('ktp')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-kk">No. KK</label>
<input type="text" class="form-control @error('kk') is-invalid @enderror" id="edit-petani-kk" name="kk"
placeholder="Cth: 1234567890" value="{{ old('kk', $petani->kk) }}" />
@error('kk')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-jenis-kelamin">Jenis Kelamin<span class="text-danger">*</span></label>
<select class="form-control @error('jenis_kelamin') is-invalid @enderror" id="edit-petani-jenis-kelamin" name="jenis_kelamin">
<option value="">Pilih Jenis Kelamin</option>
@@ -100,21 +98,19 @@
</select>
@error('jenis_kelamin')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-tempat-lahir">Tempat Lahir<span class="text-danger">*</span></label>
<input type="text" class="form-control @error('tempat_lahir') is-invalid @enderror" id="edit-petani-tempat-lahir" name="tempat_lahir" placeholder="Cth: Ngada"
value="{{ old('tempat_lahir', $petani->tempat_lahir) }}" />
@error('tempat_lahir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-tanggal-lahir">Tanggal Lahir</label>
<input type="text" class="form-control @error('tanggal_lahir') is-invalid @enderror" id="edit-petani-tanggal-lahir" name="tanggal_lahir"
value="{{ old('tanggal_lahir', $petani->tanggal_lahir?->format('d-m-Y')) }}" />
@error('tanggal_lahir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-pendidikan-terakhir">Pendidikan Terakhir<span class="text-danger">*</span></label>
<select class="form-control @error('pendidikan_terakhir') is-invalid @enderror" id="edit-petani-pendidikan-terakhir" name="pendidikan_terakhir">
<option value="">Pilih Pendidikan Terakhir</option>
@@ -124,7 +120,7 @@
</select>
@error('pendidikan_terakhir')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-status-pernikahan">Status Pernikahan<span class="text-danger">*</span></label>
<select class="form-control @error('status_perkawinan') is-invalid @enderror" id="edit-petani-status-pernikahan" name="status_perkawinan">
<option value="">Pilih Status Pernikahan</option>
@@ -138,7 +134,7 @@
<h5 class="pb-4 border-bottom mb-4 mt-4">Komoditas</h5>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 mb-4 form-control-validation">
<label class="form-label">Komoditas Utama <span class="text-danger">*</span></label>
<select id="edit-petani-komoditas" name="komoditas_id" class="form-select @error('komoditas_id') is-invalid @enderror">
<option value="">Pilih Komoditas</option>
@@ -152,15 +148,21 @@
<h5 class="pb-4 border-bottom mb-4 mt-4">Domisili dan Kontak</h5>
<div class="row">
<div class="col-md-12 mb-4 form-control-validation">
<div class="col-12 col-lg-9 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-alamat">Alamat<span class="text-danger">*</span></label>
<textarea class="form-control @error('alamat') is-invalid @enderror" id="edit-petani-alamat" name="alamat"
rows="2" placeholder="Cth: Jl. Nama Jalan, Nama Dusun">{{ old('alamat', $petani->alamat) }}</textarea>
@error('alamat')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-12 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-nomor-telepon">Nomor Telepon</label>
<input type="text" class="form-control @error('nomor_telepon') is-invalid @enderror" id="edit-petani-nomor-telepon" name="nomor_telepon"
placeholder="Cth: 081234567890" value="{{ old('nomor_telepon', $petani->nomor_telepon) }}" minlength="11" maxlength="13" />
@error('nomor_telepon')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-provinsi">Provinsi<span class="text-danger">*</span></label>
<select class="form-control @error('provinsi_id') is-invalid @enderror" id="edit-petani-provinsi" name="provinsi_id">
<option value="">Pilih Provinsi</option>
@@ -170,7 +172,7 @@
</select>
@error('provinsi_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-kabupaten">Kabupaten/Kota<span class="text-danger">*</span></label>
<select class="form-control @error('kabupaten_id') is-invalid @enderror" id="edit-petani-kabupaten" name="kabupaten_id" >
<option value="">Pilih Kabupaten/Kota</option>
@@ -180,7 +182,7 @@
</select>
@error('kabupaten_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-kecamatan">Kecamatan<span class="text-danger">*</span></label>
<select class="form-control @error('kecamatan_id') is-invalid @enderror" id="edit-petani-kecamatan" name="kecamatan_id" >
<option value="">Pilih Kecamatan</option>
@@ -190,7 +192,7 @@
</select>
@error('kecamatan_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="col-md-3 mb-4 form-control-validation">
<div class="col-12 col-sm-6 col-lg-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
<select class="form-control @error('desa_kelurahan_id') is-invalid @enderror" id="edit-petani-desa" name="desa_kelurahan_id" >
<option value="">Pilih Desa/Kelurahan</option>
@@ -201,14 +203,6 @@
@error('desa_kelurahan_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<div class="row">
<div class="col-md-3 mb-4 form-control-validation">
<label class="form-label" for="edit-petani-nomor-telepon">Nomor Telepon</label>
<input type="text" class="form-control @error('nomor_telepon') is-invalid @enderror" id="edit-petani-nomor-telepon" name="nomor_telepon"
placeholder="Cth: 081234567890" value="{{ old('nomor_telepon', $petani->nomor_telepon) }}" minlength="11" maxlength="13" />
@error('nomor_telepon')<div class="error invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<h5 class="pb-4 border-bottom mb-4 mt-4">Berkas</h5>
<div class="row">
@@ -32,6 +32,10 @@
margin-right: 0.4rem !important;
}
}
/* Kartu ringkasan: teks panjang dipotong (…) di dalam kolomnya, ikon tidak ikut menyusut. */
.card-widget-1 > div:first-child { min-width: 0; }
.card-widget-1 > .avatar { flex-shrink: 0; margin-left: .5rem; }
</style>
<div class="row mb-4">