308 lines
15 KiB
PHP
308 lines
15 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
{{-- CSS Custom untuk Mempercantik Tampilan Detail --}}
|
|
<style>
|
|
.card-custom {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
}
|
|
.info-label {
|
|
font-size: 0.65rem;
|
|
color: #868e96;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.info-value {
|
|
font-size: 0.85rem;
|
|
color: #343a40;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
.kriteria-box {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
height: 100%;
|
|
}
|
|
.kriteria-kode {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
color: #17a2b8;
|
|
margin-bottom: 2px;
|
|
}
|
|
.kriteria-nama {
|
|
font-size: 0.75rem;
|
|
color: #495057;
|
|
margin-bottom: 4px;
|
|
line-height: 1.2;
|
|
}
|
|
.kriteria-nilai {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
}
|
|
.doc-preview {
|
|
transition: transform 0.2s;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.doc-preview:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
|
|
<div class="page-header d-flex justify-content-between align-items-center">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item">Verifikator</li>
|
|
<li class="breadcrumb-item"><a href="{{ route('verifikasi.index') }}">Manajemen Verifikasi</a></li>
|
|
<li class="breadcrumb-item active text-primary font-weight-bold">Detail Warga</li>
|
|
</ol>
|
|
|
|
{{-- Tombol Kembali --}}
|
|
<a href="{{ route('verifikasi.index') }}" class="btn btn-light btn-sm shadow-sm font-weight-bold text-muted border" style="font-size: 0.8rem;">
|
|
<i class="icon-arrow-left mr-1"></i> Kembali ke Daftar
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row gutters mt-3">
|
|
{{-- SISI KIRI: DATA WARGA & KRITERIA --}}
|
|
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-3">
|
|
<div class="card card-custom">
|
|
<div class="card-header bg-white pt-4 pb-2 border-bottom">
|
|
<h6 class="card-title mb-0 font-weight-bold text-dark" style="font-size: 0.95rem;">
|
|
<i class="icon-user text-primary mr-2"></i>Profil Calon Penerima
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
{{-- Info Identitas Dasar --}}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="info-label">Nama Lengkap</div>
|
|
<div class="info-value">{{ $warga->nama }}</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="info-label">Nomor Induk Kependudukan (NIK)</div>
|
|
<div class="info-value"><i class="icon-credit-card text-muted mr-2" style="font-size: 0.8rem;"></i>{{ $warga->nik }}</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="info-label">Alamat Terdaftar</div>
|
|
<div class="info-value">
|
|
{{ $warga->alamat }} <br>
|
|
<span class="badge badge-light border text-muted mt-1" style="font-size: 0.7rem; font-weight: 600;">RT {{ $warga->rt }} / RW {{ $warga->rw }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-3 border-light">
|
|
|
|
{{-- Data Kriteria Dinamis (Looping dari WargaDetail) --}}
|
|
<h6 class="font-weight-bold text-dark mb-3" style="font-size: 0.85rem;">
|
|
<i class="icon-list text-info mr-2"></i>Variabel Penilaian (Kriteria)
|
|
</h6>
|
|
<div class="row gutters">
|
|
@forelse($warga->details as $detail)
|
|
<div class="col-6 mb-3">
|
|
<div class="kriteria-box">
|
|
<div class="kriteria-kode">{{ $detail->kriteria->kode }}</div>
|
|
<div class="kriteria-nama">{{ $detail->kriteria->nama }}</div>
|
|
<div class="kriteria-nilai text-success">
|
|
{{ $detail->subKriteria->nama_sub ?? $detail->nilai_asli ?? '-' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12 text-center py-3 bg-light rounded">
|
|
<span class="text-muted small">Data kriteria tidak ditemukan.</span>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<hr class="my-3 border-light">
|
|
|
|
{{-- LOGIKA TAMPILAN: FORM KEPUTUSAN vs INFO STATUS --}}
|
|
@if($warga->status_verifikasi == 'pending')
|
|
|
|
{{-- JIKA PENDING: Tampilkan Form --}}
|
|
<div class="bg-light p-3 rounded" style="border-left: 4px solid #007bff;">
|
|
<h6 class="font-weight-bold text-primary mb-2" style="font-size: 0.85rem;">Tindakan Verifikasi</h6>
|
|
<form action="{{ route('verifikasi.proses', $warga->id) }}" method="POST" id="formVerifikasi">
|
|
@csrf
|
|
<div class="form-group mb-2">
|
|
<label class="info-label text-dark">Catatan Evaluasi (Opsional)</label>
|
|
<textarea name="catatan" class="form-control form-control-sm" rows="2" style="font-size: 0.8rem;" placeholder="Tulis catatan jika berkas kurang/lengkap..."></textarea>
|
|
</div>
|
|
<div class="d-flex gap-2 mt-3">
|
|
{{-- Tombol diubah tipe menjadi 'button' untuk ditangkap oleh JS SweetAlert --}}
|
|
<button type="button" class="btn btn-success btn-sm flex-grow-1 mr-2 shadow-sm font-weight-bold btn-aksi" data-status="setuju">
|
|
<i class="icon-check-circle mr-1"></i> SETUJU
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-sm flex-grow-1 shadow-sm font-weight-bold btn-aksi" data-status="tolak">
|
|
<i class="icon-x-circle mr-1"></i> TOLAK
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@else
|
|
|
|
{{-- JIKA SUDAH DIPROSES: Tampilkan Banner Info --}}
|
|
@php
|
|
$isSetuju = $warga->status_verifikasi == 'setuju';
|
|
$bgColor = $isSetuju ? '#d4edda' : '#f8d7da';
|
|
$borderColor = $isSetuju ? '#28a745' : '#dc3545';
|
|
$textColor = $isSetuju ? '#155724' : '#721c24';
|
|
$icon = $isSetuju ? 'icon-check-circle' : 'icon-x-circle';
|
|
@endphp
|
|
|
|
<div class="p-3 rounded" style="background-color: {{ $bgColor }}; border-left: 4px solid {{ $borderColor }};">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="{{ $icon }} mr-2" style="font-size: 1.5rem; color: {{ $borderColor }};"></i>
|
|
<div>
|
|
<h6 class="m-0 font-weight-bold" style="color: {{ $textColor }}; font-size: 0.9rem;">
|
|
Dokumen {{ strtoupper($warga->status_verifikasi) }}
|
|
</h6>
|
|
<small style="color: {{ $textColor }}; font-size: 0.7rem;">{{ $warga->updated_at->format('d M Y, H:i') }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-2 rounded shadow-sm mb-2">
|
|
<span class="text-muted d-block" style="font-size: 0.7rem;">Diverifikasi Oleh:</span>
|
|
<span class="font-weight-bold text-dark" style="font-size: 0.8rem;"><i class="icon-user mr-1"></i>{{ $warga->verifikator->nama_lengkap ?? 'Sistem / Verifikator' }}</span>
|
|
</div>
|
|
|
|
<div class="bg-white p-2 rounded shadow-sm">
|
|
<span class="text-muted d-block" style="font-size: 0.7rem;">Catatan:</span>
|
|
<span class="text-dark font-weight-500" style="font-size: 0.8rem;">{{ $warga->catatan ?: 'Tidak ada catatan.' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SISI KANAN: DOKUMEN PENDUKUNG --}}
|
|
<div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12 mb-3">
|
|
<div class="card card-custom">
|
|
<div class="card-header bg-white pt-4 pb-2 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="card-title mb-0 font-weight-bold text-dark" style="font-size: 0.95rem;">
|
|
<i class="icon-folder text-warning mr-2"></i>Lampiran Berkas Warga
|
|
</h6>
|
|
<span class="badge badge-pill badge-primary shadow-sm px-3 py-1" style="font-size: 0.75rem;">
|
|
{{ count($warga->dokumen_pendukung ?? []) }} File Dilampirkan
|
|
</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gutters">
|
|
@forelse($warga->dokumen_pendukung ?? [] as $file)
|
|
<div class="col-md-6 col-sm-12 mb-4">
|
|
<div class="bg-white p-2 border shadow-sm doc-preview">
|
|
@php $ext = pathinfo($file, PATHINFO_EXTENSION); @endphp
|
|
|
|
@if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png']))
|
|
<a href="{{ asset('storage/' . $file) }}" target="_blank">
|
|
<div style="height: 180px; width: 100%; display: flex; align-items: center; justify-content: center; background: #e9ecef; border-radius: 6px; overflow: hidden; margin-bottom: 8px;">
|
|
<img src="{{ asset('storage/' . $file) }}" alt="Preview" style="max-width: 100%; max-height: 100%; object-fit: contain;">
|
|
</div>
|
|
</a>
|
|
@else
|
|
<div style="height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e9ecef; border-radius: 6px; margin-bottom: 8px;">
|
|
<i class="icon-file-text text-danger mb-2" style="font-size: 3rem;"></i>
|
|
<span class="font-weight-bold text-secondary text-uppercase" style="font-size: 0.8rem;">{{ $ext }} FILE</span>
|
|
</div>
|
|
@endif
|
|
|
|
<a href="{{ asset('storage/' . $file) }}" target="_blank" class="btn btn-outline-primary btn-sm btn-block font-weight-bold rounded" style="font-size: 0.75rem;">
|
|
<i class="icon-external-link mr-1"></i> Buka Layar Penuh
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12 text-center py-5">
|
|
<div class="d-flex flex-column align-items-center justify-content-center">
|
|
<div class="bg-white rounded-circle shadow-sm d-flex justify-content-center align-items-center mb-3" style="width: 70px; height: 70px;">
|
|
<i class="icon-folder-minus text-muted" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<h6 class="font-weight-bold text-dark" style="font-size: 0.9rem;">Tidak Ada Lampiran</h6>
|
|
<p class="text-muted" style="font-size: 0.8rem;">Warga ini tidak menyertakan dokumen pendukung.</p>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
{{-- Include library SweetAlert2 --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Ambil semua tombol dengan class .btn-aksi
|
|
const actionButtons = document.querySelectorAll('.btn-aksi');
|
|
const form = document.getElementById('formVerifikasi');
|
|
|
|
actionButtons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Ambil status (setuju/tolak) dari atribut data-status
|
|
const status = this.getAttribute('data-status');
|
|
|
|
// Atur konfigurasi alert berdasarkan status
|
|
let swalTitle, swalText, swalIcon, swalColor;
|
|
|
|
if (status === 'setuju') {
|
|
swalTitle = "Setujui Dokumen?";
|
|
swalText = "Apakah Anda yakin dokumen ini VALID dan DISETUJUI?";
|
|
swalIcon = "success";
|
|
swalColor = "#28a745";
|
|
} else {
|
|
swalTitle = "Tolak Dokumen?";
|
|
swalText = "Apakah Anda yakin dokumen ini TIDAK LENGKAP dan DITOLAK?";
|
|
swalIcon = "warning";
|
|
swalColor = "#dc3545";
|
|
}
|
|
|
|
// Tampilkan SweetAlert
|
|
Swal.fire({
|
|
title: swalTitle,
|
|
text: swalText,
|
|
icon: swalIcon,
|
|
showCancelButton: true,
|
|
confirmButtonColor: swalColor,
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: 'Ya, Lanjutkan!',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Jika dikonfirmasi, tambahkan input hidden untuk status dan submit form
|
|
const inputStatus = document.createElement('input');
|
|
inputStatus.type = 'hidden';
|
|
inputStatus.name = 'status';
|
|
inputStatus.value = status;
|
|
|
|
form.appendChild(inputStatus);
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|