MIF_E31230680/resources/views/perankingan/show.blade.php

147 lines
8.3 KiB
PHP

@extends('layout.app')
@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('perangkingan.index') }}">Hasil Perangkingan</a></li>
<li class="breadcrumb-item active">Detail Keputusan Warga</li>
</ol>
<div class="d-print-none">
<button onclick="window.print()" class="btn btn-outline-primary btn-sm rounded-pill font-weight-bold shadow-sm">
<i class="icon-printer"></i> Cetak Lembar Keputusan
</button>
</div>
</div>
<div class="row gutters">
{{-- KARTU BIODATA & HASIL AKHIR --}}
<div class="col-xl-4 col-lg-4 col-md-12 mb-4">
<div class="card shadow-sm border-0 h-100 border-top-info" style="border-top: 4px solid #17a2b8 !important;">
<div class="card-header bg-white">
<h6 class="mb-0 text-info font-weight-bold"><i class="icon-user"></i> Profil Penerima Bantuan</h6>
</div>
<div class="card-body">
<div class="text-center mb-4">
<div class="ui-icon-wrap bg-light border text-info mx-auto mb-2" style="width: 60px; height: 60px; border-radius: 50%; line-height: 60px; font-size: 24px;">
<i class="icon-user"></i>
</div>
<h5 class="font-weight-bold text-dark mb-0">{{ $warga->nama }}</h5>
<span class="text-muted small">NIK. {{ $warga->nik }}</span>
</div>
<div class="mb-3 border-bottom pb-2">
<small class="text-muted d-block text-uppercase">Alamat Lengkap</small>
<span class="font-weight-bold text-dark">{{ $warga->alamat }}</span><br>
<span class="text-muted small">RT {{ $warga->rt }} / RW {{ $warga->rw }}</span>
</div>
<div class="mb-3 border-bottom pb-2">
<small class="text-muted d-block text-uppercase">Diverifikasi Oleh</small>
<span class="text-dark">{{ $warga->verifikator->name ?? 'Sistem / Admin' }}</span>
</div>
<div class="mt-4 pt-2 text-center bg-light rounded p-3 border">
<small class="text-muted d-block mb-1 text-uppercase font-weight-bold">Skor Akhir Keputusan</small>
<h1 class="text-primary font-weight-bold mb-0" style="font-size: 2.5rem;">{{ number_format($totalSkorAkhir * 100, 2) }}<span style="font-size: 1.2rem;">%</span></h1>
<span class="text-muted d-block mb-2">Nilai Desimal: {{ number_format($totalSkorAkhir, 4) }}</span>
@if($totalSkorAkhir >= 0.65)
<span class="badge badge-success px-4 py-2 mt-1 w-100" style="font-size: 0.9rem;">LAYAK MENERIMA BANSOS</span>
@else
<span class="badge badge-secondary px-4 py-2 mt-1 w-100" style="font-size: 0.9rem;">TIDAK LAYAK</span>
@endif
</div>
</div>
</div>
</div>
{{-- KARTU TABEL MATRIKS PERHITUNGAN --}}
<div class="col-xl-8 col-lg-8 col-md-12 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<h6 class="mb-0 font-weight-bold"><i class="icon-calculator"></i> Matriks Keputusan & Pembobotan (Hybrid)</h6>
</div>
<div class="card-body p-0">
<div class="p-3 bg-light border-bottom small text-dark">
<strong>Formula Hybrid SPK:</strong> Tahap penilaian alternatif ini menggunakan kombinasi logika pembobotan dan normalisasi. Skor kondisi riil warga dinormalisasi dengan membaginya menggunakan nilai skor maksimal (Skor Maksimal = 5), kemudian dikalikan dengan bobot prioritas kriteria hasil perhitungan Fuzzy AHP.
{{-- PERBAIKAN RUMUS (TANPA $$ LATEX) --}}
<div class="mt-3 text-center p-3 border bg-white rounded shadow-sm">
<span class="font-weight-bold" style="font-size: 1.1rem;">
<i class="text-primary">Nilai<sub>akhir</sub></i> = &Sigma; ( <i class="text-info">Skor<sub>desa</sub></i> / <i class="text-danger">Skor<sub>maksimal</sub></i> ) &times; <i>Bobot<sub>kriteria</sub></i>
</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover table-sm mb-0 text-center align-middle" style="font-size: 0.85rem;">
<thead class="table-light">
<tr>
<th width="60">Kode</th>
<th class="text-left">Kriteria Penilaian</th>
<th class="text-left">Kondisi Riil Lapangan</th>
<th width="80" class="text-info">Skor Desa</th>
<th width="100">Normalisasi</th>
<th width="100">Bobot (W)</th>
<th width="100" class="bg-light text-primary">Nilai Preferensi</th>
</tr>
</thead>
<tbody>
@foreach($perhitungan as $kode => $det)
<tr>
<td class="font-weight-bold bg-light">{{ $kode }}</td>
<td class="text-left font-weight-bold">{{ $det['nama'] }}</td>
<td class="text-left text-muted font-italic">{{ $det['riil'] }}</td>
<td class="font-weight-bold text-info" style="font-size: 1rem;">{{ $det['skor'] }}</td>
<td>{{ number_format($det['normalisasi'], 2) }}</td>
<td>{{ number_format($det['bobot'], 4) }}</td>
<td class="bg-light font-weight-bold text-primary">{{ number_format($det['hasil'], 4) }}</td>
</tr>
@endforeach
</tbody>
<tfoot class="table-light border-top">
<tr>
<td colspan="5" class="text-right font-weight-bold text-muted text-uppercase pt-3 pb-3">Total Akumulasi Skor</td>
<td class="font-weight-bold text-success pt-3 pb-3">&Sigma; 1.0000</td>
<td class="font-weight-bold text-primary bg-white border-primary pt-3 pb-3" style="font-size: 1.2rem; border-width: 2px !important;">
{{ number_format($totalSkorAkhir, 4) }}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card-footer bg-white text-muted small">
* Skor Desa merujuk pada rentang nilai (1-5) yang telah divalidasi oleh instansi desa terkait.
</div>
</div>
</div>
</div>
<style>
/* Konsistensi Font */
body, .card-header h6, .table, .breadcrumb-item, .alert, .badge {
font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}
.ui-icon-wrap {
display: inline-block;
text-align: center;
}
/* Penyesuaian Cetak PDF / Printer */
@media print {
.page-header, .sidebar-wrapper, .app-header, .d-print-none, .breadcrumb {
display: none !important;
}
.main-container { margin: 0 !important; padding: 0 !important; }
.card { border: 1px solid #ddd !important; box-shadow: none !important; margin-bottom: 25px !important; }
.table-responsive { overflow: visible !important; }
.card-header { background-color: #f1f1f1 !important; color: #000 !important; border-bottom: 1px solid #ddd !important; }
.badge-success { border: 2px solid #28a745 !important; color: #28a745 !important; background: transparent !important; }
.badge-secondary { border: 2px solid #6c757d !important; color: #6c757d !important; background: transparent !important; }
body { background: white !important; color: black !important; }
}
</style>
@endsection