244 lines
12 KiB
PHP
244 lines
12 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="page-header">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">Home</li>
|
|
<li class="breadcrumb-item"><a href="{{ route('warga.index') }}">Data Warga</a></li>
|
|
<li class="breadcrumb-item active">Tambah Warga</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="row gutters">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<div class="card-title">Pendaftaran Penerima Bantuan Sosial</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{{-- Tampilkan Error General jika ada --}}
|
|
@if (session('error'))
|
|
<div class="alert alert-danger">{{ session('error') }}</div>
|
|
@endif
|
|
|
|
<form action="{{ route('warga.store') }}" method="POST" enctype="multipart/form-data" id="formWarga">
|
|
@csrf
|
|
|
|
{{-- SEKSI I: IDENTITAS DIRI --}}
|
|
<div class="row gutters">
|
|
<div class="col-12">
|
|
<h6 class="mb-3 text-success font-weight-bold">I. Identitas Diri</h6>
|
|
</div>
|
|
|
|
<div class="col-md-4 col-12">
|
|
<div class="form-group">
|
|
<label>NIK (16 Digit)</label>
|
|
<input type="text" name="nik"
|
|
class="form-control @error('nik') is-invalid @enderror" value="{{ old('nik') }}"
|
|
placeholder="3512..." required maxlength="16">
|
|
@error('nik')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8 col-12">
|
|
<div class="form-group">
|
|
<label>Nama Lengkap Kepala Keluarga</label>
|
|
<input type="text" name="nama"
|
|
class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama') }}"
|
|
placeholder="Sesuai KTP" required>
|
|
@error('nama')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8 col-12">
|
|
<div class="form-group">
|
|
<label>Alamat Domisili</label>
|
|
<input type="text" name="alamat"
|
|
class="form-control @error('alamat') is-invalid @enderror"
|
|
value="{{ old('alamat') }}" placeholder="Nama Dusun / Jalan" required>
|
|
@error('alamat')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-6">
|
|
<div class="form-group">
|
|
<label>RT</label>
|
|
<input type="text" name="rt"
|
|
class="form-control @error('rt') is-invalid @enderror" value="{{ old('rt') }}"
|
|
placeholder="001" required maxlength="3">
|
|
@error('rt')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-6">
|
|
<div class="form-group">
|
|
<label>RW</label>
|
|
<input type="text" name="rw"
|
|
class="form-control @error('rw') is-invalid @enderror" value="{{ old('rw') }}"
|
|
placeholder="001" required maxlength="3">
|
|
@error('rw')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
{{-- SEKSI II: KRITERIA SELEKSI (DINAMIS DARI DATABASE) --}}
|
|
<div class="row gutters">
|
|
<div class="col-12">
|
|
<h6 class="mb-3 text-success font-weight-bold">II. Variabel Kriteria Seleksi</h6>
|
|
<p class="text-muted small">Silakan pilih kategori yang sesuai untuk warga tersebut.</p>
|
|
</div>
|
|
|
|
@foreach ($kriterias as $k)
|
|
<div class="col-md-6 col-12">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold text-dark">{{ $k->kode }}:
|
|
{{ $k->nama }}</label>
|
|
|
|
<select name="kriteria_{{ $k->id }}"
|
|
class="form-control @error('kriteria_' . $k->id) is-invalid @enderror" required>
|
|
<option value="">-- Pilih {{ $k->nama }} --</option>
|
|
@foreach ($k->subKriterias as $sub)
|
|
<option value="{{ $sub->nama_sub }}"
|
|
{{ old('kriteria_' . $k->id) == $sub->nama_sub ? 'selected' : '' }}>
|
|
{{ $sub->nama_sub }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
@error('kriteria_' . $k->id)
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
{{-- SEKSI III: BERKAS PENDUKUNG --}}
|
|
<div class="row gutters">
|
|
<div class="col-12">
|
|
<h6 class="mb-2 text-success font-weight-bold">III. Berkas Pendukung (Multiple Upload)</h6>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-group p-4 text-center"
|
|
style="border: 2px dashed #32be8f; border-radius: 12px; background: #fafffd;">
|
|
|
|
<div id="file-preview-container" class="row mb-3 justify-content-center"></div>
|
|
|
|
<i class="icon-plus-circle h1 text-success opacity-50 d-block"></i>
|
|
<label class="d-block mt-2 font-weight-bold" style="cursor: pointer;"
|
|
for="file-selector">
|
|
Pilih Dokumen (KTP, KK, Foto Rumah, dll)
|
|
</label>
|
|
|
|
{{-- Input bantuan untuk interaksi user --}}
|
|
<input type="file" id="file-selector" class="form-control-file d-none" multiple
|
|
accept=".jpg,.jpeg,.png,.pdf">
|
|
|
|
{{-- Input asli yang akan dikirim ke Controller --}}
|
|
<input type="file" name="files[]" id="real-file-input" class="d-none" multiple>
|
|
|
|
<small class="text-muted d-block mt-2">Format: JPG, PNG, PDF. Maksimal 2MB per
|
|
file.</small>
|
|
|
|
@error('files')
|
|
<div class="text-danger mt-1 small font-weight-bold">{{ $message }}</div>
|
|
@enderror
|
|
@error('files.*')
|
|
<div class="text-danger mt-1 small font-weight-bold">Salah satu file tidak valid (Cek
|
|
format/ukuran).</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row gutters mt-4">
|
|
<div class="col-12 text-right">
|
|
<a href="{{ route('warga.index') }}"
|
|
class="btn btn-outline-secondary px-4 mr-2">Batal</a>
|
|
<button type="submit" class="btn btn-success px-5"
|
|
style="background-color: #32be8f; border: none;">
|
|
<i class="icon-save"></i> Simpan Data Warga
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SCRIPT UNTUK PREVIEW FILE --}}
|
|
<script>
|
|
const fileSelector = document.getElementById('file-selector');
|
|
const realFileInput = document.getElementById('real-file-input');
|
|
const previewContainer = document.getElementById('file-preview-container');
|
|
|
|
let dataStorage = new DataTransfer();
|
|
|
|
fileSelector.addEventListener('change', function() {
|
|
const files = Array.from(this.files);
|
|
|
|
files.forEach(file => {
|
|
dataStorage.items.add(file);
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-md-2 col-sm-4 col-6 mb-3 position-relative';
|
|
|
|
let icon = file.type === 'application/pdf' ?
|
|
'<i class="icon-file-text text-danger" style="font-size: 40px; margin-top:15px; margin-bottom:15px;"></i>' :
|
|
`<img src="${e.target.result}" class="img-thumbnail" style="height: 80px; width: 100%; object-fit: cover;">`;
|
|
|
|
col.innerHTML = `
|
|
<div class="p-2 border rounded bg-white shadow-sm h-100 d-flex flex-column align-items-center justify-content-center">
|
|
${icon}
|
|
<small class="d-block text-truncate mt-1 w-100 text-center" title="${file.name}">${file.name}</small>
|
|
<button type="button" class="btn btn-danger btn-sm position-absolute rounded-circle btn-remove"
|
|
data-name="${file.name}" style="top: -5px; right: 5px; padding: 0px 6px; z-index:10;">×</button>
|
|
</div>
|
|
`;
|
|
previewContainer.appendChild(col);
|
|
}
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
// Update input file asli
|
|
realFileInput.files = dataStorage.files;
|
|
// Reset selector agar bisa pilih file yang sama jika dihapus
|
|
this.value = '';
|
|
});
|
|
|
|
previewContainer.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('btn-remove')) {
|
|
const fileName = e.target.getAttribute('data-name');
|
|
const newDataTransfer = new DataTransfer();
|
|
|
|
Array.from(dataStorage.files).forEach(file => {
|
|
if (file.name !== fileName) {
|
|
newDataTransfer.items.add(file);
|
|
}
|
|
});
|
|
|
|
dataStorage = newDataTransfer;
|
|
realFileInput.files = dataStorage.files;
|
|
e.target.closest('.col-md-2').remove();
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|