403 lines
20 KiB
PHP
403 lines
20 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
{{-- CSS Custom untuk Mempercantik Tampilan & Mengecilkan Font --}}
|
|
<style>
|
|
.card-custom {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.table-modern td,
|
|
.table-modern th {
|
|
vertical-align: middle !important;
|
|
border-top: none !important;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
padding: 0.8rem 0.75rem;
|
|
/* Padding diperkecil agar tidak terlalu renggang */
|
|
}
|
|
|
|
.table-modern thead th {
|
|
color: #6c757d;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
/* Font header tabel dikecilkan */
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid #e9ecef !important;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.table-modern tbody td {
|
|
font-size: 0.85rem;
|
|
/* Font isi tabel dikecilkan */
|
|
}
|
|
|
|
.badge-status {
|
|
padding: 0.4em 0.7em;
|
|
font-size: 0.75rem;
|
|
/* Font badge dikecilkan */
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Animasi munculnya panel massal */
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="page-header">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">Verifikator</li>
|
|
<li class="breadcrumb-item active text-primary font-weight-bold">Manajemen Verifikasi</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="row gutters">
|
|
<div class="col-12">
|
|
<div class="card card-custom">
|
|
|
|
{{-- HEADER CARD (Bukan Tab Lagi) --}}
|
|
<div class="card-header bg-white pt-4 pb-3 border-bottom">
|
|
<h6 class="m-0 font-weight-bold text-dark">
|
|
@if ($tab == 'pending')
|
|
<i class="icon-clock text-warning mr-2"></i> Antrean Pending
|
|
@if ($wargas->total() > 0)
|
|
<span class="badge badge-warning ml-2" style="font-size: 0.75rem;">{{ $wargas->total() }}
|
|
Data</span>
|
|
@endif
|
|
@else
|
|
<i class="icon-history text-success mr-2"></i> Riwayat Verifikasi
|
|
@endif
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
{{-- AREA KONTROL (Tombol Riwayat & Paginasi Dropdown) --}}
|
|
<div class="d-flex flex-wrap justify-content-between align-items-end mb-3">
|
|
|
|
{{-- Tombol Navigasi (Kiri) --}}
|
|
<div>
|
|
@if ($tab == 'pending')
|
|
<a href="{{ route('verifikasi.index', ['tab' => 'riwayat']) }}"
|
|
class="btn btn-outline-success btn-sm shadow-sm rounded-pill">
|
|
<i class="icon-history mr-1"></i> Buka Riwayat Verifikasi
|
|
</a>
|
|
@else
|
|
<a href="{{ route('verifikasi.index', ['tab' => 'pending']) }}"
|
|
class="btn btn-outline-warning btn-sm shadow-sm rounded-pill text-dark border-warning">
|
|
<i class="icon-arrow-left mr-1"></i> Kembali ke Antrean
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Form Pilihan Baris (Kanan) --}}
|
|
{{-- Form Pilihan Baris & Pencarian (Kanan) --}}
|
|
<form action="{{ route('verifikasi.index') }}" method="GET" class="form-inline mt-2 mt-md-0">
|
|
<input type="hidden" name="tab" value="{{ $tab }}">
|
|
|
|
{{-- Kolom Pencarian --}}
|
|
<div class="input-group input-group-sm mr-3 shadow-sm" style="border-radius: 6px; overflow: hidden;">
|
|
<input type="text" name="search" class="form-control border-info" placeholder="Cari Nama / NIK..." value="{{ request('search') }}">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-info" type="submit">
|
|
<i class="icon-search"></i> Cari
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Dropdown Paginasi --}}
|
|
<label class="mr-2 text-muted font-weight-bold" style="font-size: 0.8rem;">Tampilkan:</label>
|
|
<select name="per_page"
|
|
class="form-control form-control-sm border-info text-info font-weight-bold shadow-sm"
|
|
onchange="this.form.submit()" style="border-radius: 6px; font-size: 0.8rem;">
|
|
<option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10 Baris</option>
|
|
<option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20 Baris</option>
|
|
<option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 Baris</option>
|
|
<option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100 Baris</option>
|
|
<option value="500" {{ request('per_page') == 500 ? 'selected' : '' }}>500 Baris</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- FORM MASSAL (Membungkus Tabel) --}}
|
|
@if ($tab == 'pending')
|
|
<form action="{{ route('verifikasi.massal') }}" method="POST" id="formMassal">
|
|
@csrf
|
|
@endif
|
|
|
|
{{-- PANEL AKSI MASSAL (Awalnya Sembunyi, Muncul via JS) --}}
|
|
@if ($tab == 'pending' && $wargas->total() > 0)
|
|
<div id="bulkActionContainer" class="d-none mb-3 p-2 bg-light rounded fade-in"
|
|
style="border-left: 4px solid #17a2b8;">
|
|
<span class="mr-3 ml-2 text-dark font-weight-bold" style="font-size: 0.85rem;">
|
|
Aksi Massal (<span id="selectedCount" class="text-info">0</span> data):
|
|
</span>
|
|
<button type="button" id="btnSetujuMassal" class="btn btn-success btn-sm shadow-sm mr-2"
|
|
style="font-size: 0.8rem;">
|
|
<i class="icon-check mr-1"></i> Setuju Terpilih
|
|
</button>
|
|
<button type="button" id="btnTolakMassal" class="btn btn-danger btn-sm shadow-sm"
|
|
style="font-size: 0.8rem;">
|
|
<i class="icon-x mr-1"></i> Tolak Terpilih
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- TABEL DATA --}}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-modern m-0">
|
|
<thead>
|
|
<tr>
|
|
@if ($tab == 'pending')
|
|
<th width="40" class="text-center">
|
|
{{-- Checkbox Select All --}}
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" id="selectAll"
|
|
{{ $wargas->total() == 0 ? 'disabled' : '' }}>
|
|
<label class="custom-control-label" for="selectAll"></label>
|
|
</div>
|
|
</th>
|
|
@endif
|
|
<th width="40">No</th>
|
|
<th>Profil Warga</th>
|
|
<th>Alamat Terdaftar</th>
|
|
<th>{{ $tab == 'pending' ? 'Tanggal Pengajuan' : 'Status & Verifikator' }}</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($wargas as $index => $w)
|
|
<tr>
|
|
{{-- Checkbox Satuan (Tab Pending) --}}
|
|
@if ($tab == 'pending')
|
|
<td class="text-center align-middle">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input check-item"
|
|
id="check{{ $w->id }}" name="warga_ids[]"
|
|
value="{{ $w->id }}">
|
|
<label class="custom-control-label"
|
|
for="check{{ $w->id }}"></label>
|
|
</div>
|
|
</td>
|
|
@endif
|
|
|
|
{{-- Nomor Urut --}}
|
|
<td class="align-middle">{{ $wargas->firstItem() + $index }}</td>
|
|
|
|
<td class="align-middle">
|
|
<strong class="d-block text-dark"
|
|
style="font-size: 0.85rem;">{{ $w->nama }}</strong>
|
|
<small class="text-muted" style="font-size: 0.75rem;"><i
|
|
class="icon-credit-card mr-1"></i>{{ $w->nik }}</small>
|
|
</td>
|
|
|
|
<td class="align-middle">
|
|
<span class="text-dark"
|
|
style="font-size: 0.85rem;">{{ $w->alamat }}</span><br>
|
|
<small class="text-muted" style="font-size: 0.75rem;">RT {{ $w->rt }} /
|
|
RW {{ $w->rw }}</small>
|
|
</td>
|
|
|
|
<td class="align-middle">
|
|
@if ($tab == 'pending')
|
|
<span class="badge badge-light text-muted border px-2 py-1"
|
|
style="font-size: 0.75rem;">
|
|
<i class="icon-calendar mr-1"></i>{{ $w->created_at->format('d M Y') }}
|
|
</span>
|
|
@else
|
|
{{-- Tampilan Status untuk Tab Riwayat --}}
|
|
@if ($w->status_verifikasi == 'setuju')
|
|
<span class="badge badge-success badge-status"><i
|
|
class="icon-check mr-1"></i>Disetujui</span>
|
|
@else
|
|
<span class="badge badge-danger badge-status"><i
|
|
class="icon-x mr-1"></i>Ditolak</span>
|
|
@endif
|
|
<br>
|
|
<small class="text-muted d-block mt-1" style="font-size: 0.75rem;">
|
|
<i
|
|
class="icon-user mr-1"></i>{{ $w->verifikator->nama_lengkap ?? 'Sistem' }}
|
|
</small>
|
|
@endif
|
|
</td>
|
|
|
|
<td class="text-center align-middle">
|
|
@if ($tab == 'pending')
|
|
<a href="{{ route('verifikasi.show', $w->id) }}"
|
|
class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm"
|
|
style="font-size: 0.75rem;">
|
|
<i class="icon-search mr-1"></i> Periksa
|
|
</a>
|
|
@else
|
|
<a href="{{ route('verifikasi.show', $w->id) }}"
|
|
class="btn btn-outline-info btn-sm rounded-pill px-3"
|
|
style="font-size: 0.75rem;">
|
|
<i class="icon-file-text mr-1"></i> Lihat Data
|
|
</a>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="{{ $tab == 'pending' ? 6 : 5 }}" class="text-center py-5">
|
|
<div class="d-flex flex-column align-items-center justify-content-center">
|
|
<div class="bg-light rounded-circle d-flex justify-content-center align-items-center mb-3"
|
|
style="width: 80px; height: 80px;">
|
|
<i class="{{ $tab == 'pending' ? 'icon-check text-success' : 'icon-inbox text-muted' }}"
|
|
style="font-size: 2.5rem;"></i>
|
|
</div>
|
|
<h5 class="font-weight-bold text-dark">
|
|
{{ $tab == 'pending' ? 'Antrean Kosong!' : 'Belum Ada Riwayat' }}
|
|
</h5>
|
|
<p class="text-muted" style="font-size: 0.85rem;">
|
|
{{ $tab == 'pending' ? 'Semua dokumen warga telah diverifikasi. Pekerjaan Anda selesai.' : 'Anda belum melakukan verifikasi dokumen apapun.' }}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if ($tab == 'pending')
|
|
</form> {{-- Menutup Tag Form Massal --}}
|
|
@endif
|
|
|
|
{{-- PAGINATION LINKS --}}
|
|
<div class="mt-4 d-flex justify-content-center">
|
|
{{ $wargas->links('pagination::bootstrap-4') }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const selectAllCheckbox = document.getElementById('selectAll');
|
|
const itemCheckboxes = document.querySelectorAll('.check-item');
|
|
const bulkActionContainer = document.getElementById('bulkActionContainer');
|
|
const selectedCountText = document.getElementById('selectedCount');
|
|
|
|
// Fungsi untuk mengontrol MUNCUL/HILANG panel massal
|
|
function toggleBulkActions() {
|
|
if (!bulkActionContainer) return;
|
|
|
|
const checkedCount = document.querySelectorAll('.check-item:checked').length;
|
|
const isAnyChecked = checkedCount > 0;
|
|
|
|
if (isAnyChecked) {
|
|
// Munculkan panel
|
|
bulkActionContainer.classList.remove('d-none');
|
|
bulkActionContainer.classList.add('d-flex', 'align-items-center');
|
|
selectedCountText.innerText = checkedCount;
|
|
} else {
|
|
// Sembunyikan panel total
|
|
bulkActionContainer.classList.add('d-none');
|
|
bulkActionContainer.classList.remove('d-flex', 'align-items-center');
|
|
}
|
|
}
|
|
|
|
// Event saat "Select All" diklik
|
|
if (selectAllCheckbox) {
|
|
selectAllCheckbox.addEventListener('change', function() {
|
|
itemCheckboxes.forEach(checkbox => {
|
|
checkbox.checked = selectAllCheckbox.checked;
|
|
});
|
|
toggleBulkActions();
|
|
});
|
|
|
|
// Event saat kotak satuan diklik
|
|
itemCheckboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
const allChecked = document.querySelectorAll('.check-item:checked')
|
|
.length === itemCheckboxes.length;
|
|
selectAllCheckbox.checked = allChecked;
|
|
toggleBulkActions();
|
|
});
|
|
});
|
|
}
|
|
|
|
function prosesMassal(actionValue) {
|
|
// Buat input hidden untuk mengirimkan aksi (setuju/tolak)
|
|
const inputAction = document.createElement('input');
|
|
inputAction.type = 'hidden';
|
|
inputAction.name = 'action';
|
|
inputAction.value = actionValue;
|
|
formMassal.appendChild(inputAction);
|
|
|
|
// Submit form
|
|
formMassal.submit();
|
|
}
|
|
|
|
// Tombol Setuju Terpilih
|
|
const btnSetujuMassal = document.getElementById('btnSetujuMassal');
|
|
if (btnSetujuMassal) {
|
|
btnSetujuMassal.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
title: 'Konfirmasi Persetujuan',
|
|
text: 'Yakin ingin MENYETUJUI semua data yang dicentang?',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#28a745', // Hijau success
|
|
cancelButtonColor: '#6c757d', // Abu-abu secondary
|
|
confirmButtonText: '<i class="icon-check mr-1"></i> Ya, Setujui!',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
prosesMassal('setuju');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Tombol Tolak Terpilih
|
|
const btnTolakMassal = document.getElementById('btnTolakMassal');
|
|
if (btnTolakMassal) {
|
|
btnTolakMassal.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
title: 'Konfirmasi Penolakan',
|
|
text: 'Yakin ingin MENOLAK semua data yang dicentang?',
|
|
icon: 'error',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#dc3545', // Merah danger
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: '<i class="icon-x mr-1"></i> Ya, Tolak!',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
prosesMassal('tolak');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|