208 lines
9.6 KiB
PHP
208 lines
9.6 KiB
PHP
@extends('admin.layouts.app')
|
|
@section('title', 'Edit Warga')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('admin.warga.index') }}">Data Warga</a></li>
|
|
<li class="breadcrumb-item active">Edit Warga</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h2 class="mb-1"><i class="bi bi-pencil-square me-2"></i>Edit Data Warga</h2>
|
|
<p class="text-muted mb-0">Ubah data warga: <strong>{{ $warga->nama }}</strong></p>
|
|
</div>
|
|
<a href="{{ route('admin.warga.show', $warga) }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-2"></i>Kembali
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Alert Error -->
|
|
@if($errors->any())
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<strong>Terdapat kesalahan:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
@foreach($errors->all() as $e)
|
|
<li>{{ $e }}</li>
|
|
@endforeach
|
|
</ul>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Form Card -->
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-header bg-warning">
|
|
<h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Form Edit Data Warga</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ route('admin.warga.update', $warga) }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row g-4">
|
|
<!-- NIK -->
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">
|
|
NIK <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" name="nik" class="form-control form-control-lg @error('nik') is-invalid @enderror" maxlength="16" placeholder="16 digit NIK" value="{{ old('nik', $warga->nik) }}" required>
|
|
@error('nik')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="text-muted">Nomor Induk Kependudukan (16 digit)</small>
|
|
</div>
|
|
|
|
<!-- Nama -->
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">
|
|
Nama Lengkap <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" name="nama" class="form-control form-control-lg @error('nama') is-invalid @enderror" placeholder="Nama lengkap sesuai KTP" value="{{ old('nama', $warga->nama) }}" required>
|
|
@error('nama')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Alamat -->
|
|
<div class="col-12">
|
|
<label class="form-label fw-bold">
|
|
Alamat <span class="text-danger">*</span>
|
|
</label>
|
|
<textarea name="alamat" class="form-control @error('alamat') is-invalid @enderror" rows="3" placeholder="Contoh: Jl. Mawar No. 15" required>{{ old('alamat', $warga->alamat) }}</textarea>
|
|
@error('alamat')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Dropdown Wilayah -->
|
|
<div class="col-md-8">
|
|
<label class="form-label fw-bold">
|
|
Dusun / RW <span class="text-danger">*</span>
|
|
</label>
|
|
<select name="wilayah_id" id="wilayah_id" class="form-select form-select-lg @error('wilayah_id') is-invalid @enderror" required>
|
|
<option value="">-- Pilih Dusun & RW --</option>
|
|
@foreach($wilayah as $w)
|
|
<option value="{{ $w->id }}" data-lat="{{ $w->latitude }}" data-lng="{{ $w->longitude }}" {{ old('wilayah_id', $warga->wilayah_id) == $w->id ? 'selected' : '' }}>
|
|
Dusun {{ $w->dusun }} — RW {{ $w->rw }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('wilayah_id')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="text-muted">Pilih dusun dan RW tempat tinggal</small>
|
|
</div>
|
|
|
|
<!-- RT -->
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-bold">RT</label>
|
|
<input type="text" name="rt" class="form-control form-control-lg @error('rt') is-invalid @enderror" placeholder="001" maxlength="5" value="{{ old('rt', $warga->rt) }}">
|
|
@error('rt')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="text-muted">Nomor RT (opsional)</small>
|
|
</div>
|
|
|
|
<!-- Info koordinat otomatis -->
|
|
<div class="col-12">
|
|
<div class="alert alert-info py-3 px-4 mb-0 {{ $warga->wilayah_id ? '' : 'd-none' }}" id="info-koordinat">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-geo-alt-fill fs-4 me-3"></i>
|
|
<div>
|
|
<strong>Koordinat otomatis:</strong>
|
|
<span class="font-monospace" id="txt-koordinat">
|
|
{{ $warga->latitude }}, {{ $warga->longitude }}
|
|
</span>
|
|
<br>
|
|
<small class="text-muted">Titik koordinat pusat RW yang dipilih (bukan lokasi rumah spesifik)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Telp -->
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">No. Telepon</label>
|
|
<input type="text" name="no_telp" class="form-control form-control-lg @error('no_telp') is-invalid @enderror" placeholder="08xxxxxxxxxx" value="{{ old('no_telp', $warga->no_telp) }}">
|
|
@error('no_telp')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="text-muted">Nomor telepon yang bisa dihubungi (opsional)</small>
|
|
</div>
|
|
|
|
<!-- Status Aktif (HANYA ADA DI EDIT) -->
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Status Warga</label>
|
|
<div class="card border-warning">
|
|
<div class="card-body py-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" name="is_aktif" id="is_aktif" value="1" {{ old('is_aktif', $warga->is_aktif) ? 'checked' : '' }}>
|
|
<label class="form-check-label fw-bold" for="is_aktif">
|
|
Warga Aktif
|
|
</label>
|
|
</div>
|
|
<small class="text-muted d-block mt-1">
|
|
Nonaktifkan jika warga sudah meninggal atau pindah alamat
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="d-flex justify-content-between mt-5 pt-4 border-top">
|
|
<a href="{{ route('admin.warga.show', $warga) }}" class="btn btn-lg btn-outline-secondary">
|
|
<i class="bi bi-x-circle me-2"></i>Batal
|
|
</a>
|
|
<button type="submit" class="btn btn-lg btn-warning px-5">
|
|
<i class="bi bi-check-circle me-2"></i>Update Data Warga
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
.form-control-lg,
|
|
.form-select-lg {
|
|
font-size: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.form-switch .form-check-input {
|
|
width: 3em;
|
|
height: 1.5em;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.getElementById('wilayah_id').addEventListener('change', function() {
|
|
const opt = this.options[this.selectedIndex];
|
|
const lat = opt.dataset.lat;
|
|
const lng = opt.dataset.lng;
|
|
const info = document.getElementById('info-koordinat');
|
|
const teks = document.getElementById('txt-koordinat');
|
|
|
|
if (this.value) {
|
|
teks.textContent = lat + ', ' + lng;
|
|
info.classList.remove('d-none');
|
|
} else {
|
|
info.classList.add('d-none');
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection |