433 lines
21 KiB
PHP
433 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Validasi Penduduk</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<style>
|
|
body {
|
|
color: #566787;
|
|
background: #f5f5f5;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table-responsive {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.table-wrapper {
|
|
background: #fff;
|
|
padding: 20px 25px;
|
|
border-radius: 8px;
|
|
min-width: 1000px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.table-title {
|
|
padding-bottom: 15px;
|
|
background: #3b5998;
|
|
color: #fff;
|
|
padding: 16px 30px;
|
|
min-width: 100%;
|
|
margin: -20px -25px 10px;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.table-title h2 {
|
|
margin: 5px 0 0;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-custom-small {
|
|
padding: 8px 15px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
background-color: #28a745;
|
|
color: white !important;
|
|
float: right;
|
|
}
|
|
|
|
.btn-custom-small i {
|
|
font-size: 18px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
table.table tr th,
|
|
table.table tr td {
|
|
border-color: #e9e9e9;
|
|
padding: 12px 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.btn-lihat {
|
|
background-color: #3b60e4;
|
|
color: white !important;
|
|
border-radius: 4px;
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="d-flex">
|
|
@include('sidebar')
|
|
|
|
<div class="content flex-fill p-4">
|
|
<div class="container-xl">
|
|
<div class="table-responsive">
|
|
<div class="table-wrapper">
|
|
<div class="table-title mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6">
|
|
<h2>Data <b>Validasi Penduduk</b></h2>
|
|
</div>
|
|
<div class="col-sm-6 text-end">
|
|
<button type="button" class="btn-custom-small" data-bs-toggle="modal" data-bs-target="#addValidasiModal">
|
|
<i class="material-icons">add_circle</i>
|
|
<span>Tambah Data KTP</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>NIK</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>L/P</th>
|
|
<th>Pekerjaan</th>
|
|
<th>Foto KTP</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse ($dataValidasi as $index => $item)
|
|
<tr>
|
|
<td>{{ $index + $dataValidasi->firstItem() }}</td>
|
|
<td><b>{{ $item->nik }}</b></td>
|
|
<td>{{ $item->nama_lengkap }}</td>
|
|
<td>{{ $item->jenis_kelamin == 'LAKI-LAKI' ? 'L' : 'P' }}</td>
|
|
<td>{{ $item->pekerjaan ?? '-' }}</td>
|
|
<td>
|
|
@if ($item->foto_ktp)
|
|
<a href="{{ asset('foto_ktp/' . $item->foto_ktp) }}" target="_blank" class="btn btn-sm btn-outline-info">
|
|
<i class="material-icons" style="font-size:16px; vertical-align: middle;">image</i> Lihat
|
|
</a>
|
|
@else
|
|
<span class="text-muted small">Tidak Ada Foto</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
@if($item->status == 'DISETUJUI')
|
|
<span class="badge bg-success">DISETUJUI</span>
|
|
@elseif($item->status == 'DITOLAK')
|
|
<span class="badge bg-danger">DITOLAK</span>
|
|
@else
|
|
<span class="badge bg-warning text-dark">MENUNGGU</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<div class="d-flex" style="gap: 5px;">
|
|
<button class="btn btn-sm editValidasiBtn" data-json='@json($item)' style="background-color:#FFC107; color:#fff;">
|
|
<i class="material-icons" style="font-size:18px;">edit</i>
|
|
</button>
|
|
<button class="btn btn-sm deleteValidasiBtn" data-nik="{{ $item->nik }}" style="background-color:#F44336; color:#fff;">
|
|
<i class="material-icons" style="font-size:18px;">delete</i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="8" class="text-center text-muted p-4">Data penduduk tidak ada</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="hint-text text-muted small">
|
|
Menampilkan <b>{{ $dataValidasi->firstItem() ?? 0 }}</b> sampai <b>{{ $dataValidasi->lastItem() ?? 0 }}</b> dari <b>{{ $dataValidasi->total() }}</b> data
|
|
</div>
|
|
<div>{{ $dataValidasi->links() }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addValidasiModal" class="modal fade" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form action="{{ route('validasi.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Input Data Validasi KTP</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">NIK (16 Digit) <span class="text-danger">*</span></label>
|
|
<input type="text" name="nik" class="form-control" maxlength="16" minlength="16" placeholder="Masukkan 16 digit NIK" required oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
|
|
<input type="text" name="nama_lengkap" class="form-control" placeholder="Nama sesuai KTP" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Tempat Lahir <span class="text-danger">*</span></label>
|
|
<input type="text" name="tempat_lahir" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
|
|
<input type="date" name="tanggal_lahir" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
|
|
<select name="jenis_kelamin" class="form-control" required>
|
|
<option value="">-- Pilih --</option>
|
|
<option value="LAKI-LAKI">LAKI-LAKI</option>
|
|
<option value="PEREMPUAN">PEREMPUAN</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-8 mb-3">
|
|
<label class="form-label">Alamat <span class="text-danger">*</span></label>
|
|
<input type="text" name="alamat" class="form-control" placeholder="Nama Jalan/Dusun" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">RT/RW <span class="text-danger">*</span></label>
|
|
<input type="text" name="rt_rw" class="form-control" placeholder="001/002" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Desa/Kelurahan <span class="text-danger">*</span></label>
|
|
<input type="text" name="desa_kelurahan" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Kecamatan <span class="text-danger">*</span></label>
|
|
<input type="text" name="kecamatan" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Agama</label>
|
|
<input type="text" name="agama" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Status Perkawinan <span class="text-danger">*</span></label>
|
|
<input type="text" name="status_perkawinan" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label">Pekerjaan</label>
|
|
<input type="text" name="pekerjaan" class="form-control" placeholder="Contoh: Wiraswasta">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Kewarganegaraan <span class="text-danger">*</span></label>
|
|
<input type="text" name="kewarganegaraan" class="form-control" value="WNI" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Foto KTP (Image) <span class="text-danger">*</span></label>
|
|
<input type="file" name="foto_ktp" class="form-control" accept="image/*" required>
|
|
<small class="text-muted">Format: JPG, PNG (Maks 2MB)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-success">Simpan Data</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editValidasiModal" class="modal fade" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<form id="editValidasiForm" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Data & Validasi Status</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label class="form-label">NIK (Tidak dapat diubah)</label>
|
|
<input type="text" id="edit_nik_display" class="form-control" disabled>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" id="edit_nama" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Pekerjaan</label>
|
|
<input type="text" name="pekerjaan" id="edit_pekerjaan" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-3">
|
|
<label class="form-label">Alamat</label>
|
|
<textarea name="alamat" id="edit_alamat" class="form-control" rows="2" required></textarea>
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-3">
|
|
<label class="form-label font-weight-bold">Status Validasi <span class="text-danger">*</span></label>
|
|
<select name="status" id="edit_status" class="form-select" required>
|
|
<option value="MENUNGGU">MENUNGGU</option>
|
|
<option value="DISETUJUI">DISETUJUI</option>
|
|
<option value="DITOLAK">DITOLAK</option>
|
|
</select>
|
|
<small class="text-muted">Pilih 'DISETUJUI' jika data sudah benar.</small>
|
|
</div>
|
|
|
|
<div class="col-md-12 mb-3">
|
|
<label class="form-label">Upload Ulang Foto KTP (Opsional)</label>
|
|
<input type="file" name="foto_ktp" class="form-control" accept="image/jpeg,image/png,image/jpg">
|
|
<small class="text-info">Biarkan kosong jika tidak ingin mengganti foto.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="deleteValidasiForm" method="POST" style="display:none;">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// 1. Handle Tombol Tambah (Buka Modal)
|
|
$('#btnTambahValidasi').on('click', function() {
|
|
$('#addValidasiModal').modal('show');
|
|
});
|
|
|
|
// 2. Animasi Loading Saat Tambah Data (Submit Form Tambah)
|
|
// Pastikan ID form di modal tambah Anda adalah #formTambahValidasi
|
|
$('#formTambahValidasi').on('submit', function() {
|
|
Swal.fire({
|
|
title: 'Sedang Memproses...',
|
|
text: 'Mohon tunggu sebentar data sedang disimpan',
|
|
allowOutsideClick: false,
|
|
showConfirmButton: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 3. Handle Tombol Edit (Pre-fill Data)
|
|
$('.editValidasiBtn').on('click', function() {
|
|
let data = $(this).data('json');
|
|
|
|
$('#edit_nama').val(data.nama_lengkap);
|
|
$('#edit_pekerjaan').val(data.pekerjaan || '');
|
|
$('#edit_alamat').val(data.alamat);
|
|
$('#edit_status').val(data.status);
|
|
|
|
// Set action URL secara dinamis
|
|
$('#editValidasiForm').attr('action', '/validasi/update/' + data.nik);
|
|
$('#editValidasiModal').modal('show');
|
|
});
|
|
|
|
// 4. Handle Tombol Hapus dengan Konfirmasi Keren
|
|
$('.deleteValidasiBtn').on('click', function() {
|
|
let nik = $(this).data('nik');
|
|
let url = '/validasi/destroy/' + nik;
|
|
|
|
Swal.fire({
|
|
title: 'Hapus Data?',
|
|
text: "Data NIK " + nik + " akan dihapus permanen dari sistem!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: '<i class="fa fa-trash"></i> Ya, Hapus Sekarang!',
|
|
cancelButtonText: 'Batalkan',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
Swal.fire({
|
|
title: 'Menghapus...',
|
|
allowOutsideClick: false,
|
|
showConfirmButton: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
$('#deleteValidasiForm').attr('action', url).submit();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 5. Notifikasi Sukses (Tambah/Update/Hapus)
|
|
@if(session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: '{{ session("success") }}',
|
|
showConfirmButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
timer: 3000,
|
|
timerProgressBar: true // Ada bar loading di bawah notifikasi
|
|
});
|
|
@endif
|
|
|
|
// 6. Notifikasi Error Validasi
|
|
@if($errors->any())
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Periksa Kembali Inputan!',
|
|
html: '<div style="text-align: left;"><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>',
|
|
confirmButtonColor: '#d33'
|
|
});
|
|
@endif
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |