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

170 lines
8.6 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="#">Home</a></li>
<li class="breadcrumb-item active">Hasil Perangkingan Bansos</li>
</ol>
</div>
<div class="row gutters">
{{-- Tombol Aksi --}}
<div class="col-12 text-right mb-3 d-print-none">
<a href="{{ route('ranking.excel') }}" class="btn btn-success rounded-pill shadow-sm px-3">
<i class="icon-file-text"></i> Ekspor Excel
</a>
<a href="{{ route('ranking.pdf') }}" class="btn btn-danger rounded-pill shadow-sm px-3 mx-1">
<i class="icon-file-pdf"></i> Ekspor PDF
</a>
<button class="btn btn-primary rounded-pill shadow-sm px-3" onclick="window.print()">
<i class="icon-printer"></i> Cetak Browser
</button>
</div>
<div class="col-12">
<div class="card shadow-sm border-0">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0 font-weight-bold"><i class="icon-award"></i> Daftar Prioritas Penerima Bantuan</h5>
</div>
<div class="card-body">
{{-- Informasi Sistem --}}
<div class="card bg-light mb-4 border-left-primary d-print-none shadow-sm">
<div class="card-body py-3">
<h6 class="text-primary font-weight-bold mb-2"><i class="icon-info"></i> Panduan Status Keputusan:</h6>
<div class="row small text-dark">
<div class="col-md-4 mb-2 mb-md-0">
<span class="badge badge-success px-2 py-1 mr-1">LAYAK</span>
Skor akhir &ge; <strong>{{ $threshold * 100 }}%</strong>.
</div>
<div class="col-md-4 mb-2 mb-md-0">
<span class="text-success font-weight-bold mr-1"><i class="icon-star"></i> Prioritas Utama</span>
Warga di urutan Rank 1 - 3.
</div>
<div class="col-md-4">
<span class="text-info font-weight-bold mr-1">Cadangan</span>
Warga Layak di luar 3 besar.
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered mb-0 align-middle">
<thead class="table-light text-center">
<tr>
<th width="70">Rank</th>
<th class="text-left">Biodata Warga</th>
<th width="120">RT/RW</th>
<th width="140" class="text-primary font-weight-bold">Skor Akhir</th>
<th width="120">Status</th>
<th width="150">Keterangan</th>
{{-- Kolom Aksi (Disembunyikan saat di-print) --}}
<th width="100" class="d-print-none">Aksi</th>
</tr>
</thead>
<tbody>
@forelse($hasilRanking as $index => $h)
<tr>
<td class="text-center align-middle">
<div class="rank-number {{ $index < 3 && $h['status'] == 'LAYAK' ? 'rank-top shadow-sm' : '' }}">
{{ $index + 1 }}
</div>
</td>
<td class="align-middle text-left">
<span class="font-weight-bold d-block text-dark" style="font-size: 1.05rem;">{{ $h['nama'] }}</span>
<small class="text-muted"><i class="icon-credit-card"></i> NIK: {{ $h['nik'] }}</small>
</td>
<td class="text-center align-middle text-muted">{{ $h['rt_rw'] }}</td>
<td class="text-center align-middle font-weight-bold text-primary" style="background-color: rgba(0,123,255,0.03); font-size: 1.1rem;">
{{ number_format($h['skor_akhir'] * 100, 2) }}%
</td>
<td class="text-center align-middle">
@if($h['status'] == 'LAYAK')
<span class="badge badge-pill badge-success px-3 py-2 shadow-sm">LAYAK</span>
@else
<span class="badge badge-pill badge-secondary px-3 py-2 shadow-sm">TIDAK LAYAK</span>
@endif
</td>
<td class="text-center align-middle">
@if($index < 3 && $h['status'] == 'LAYAK')
<span class="text-success font-weight-bold">
<i class="icon-star"></i> Prioritas
</span>
@elseif($h['status'] == 'LAYAK')
<span class="text-info font-weight-bold">Cadangan</span>
@else
<span class="text-muted small font-italic">Bukan Prioritas</span>
@endif
</td>
{{-- Tombol Detail ke Halaman show.blade.php --}}
<td class="text-center align-middle d-print-none">
<a href="{{ route('ranking.show', $h['id']) }}" class="btn btn-sm btn-outline-info rounded-pill px-3 shadow-sm" title="Lihat Rincian Perhitungan">
<i class="icon-eye"></i> Detail
</a>
</td>
</tr>
@empty
<tr>
<td colspan="7" class="text-center py-5">
<i class="icon-folder text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
<p class="text-muted mt-2 mb-0">Belum ada data warga yang terverifikasi.</p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<style>
/* Konsistensi Font */
body, .card-header h5, .table, .breadcrumb-item, .alert, .badge {
font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}
/* Styling Penomoran Ranking */
.rank-number {
width: 38px;
height: 38px;
line-height: 38px;
background: #f8f9fa;
color: #495057;
font-weight: bold;
border-radius: 50%;
margin: auto;
border: 2px solid #dee2e6;
font-size: 1.1rem;
}
.rank-top {
background: #28a745; /* Diubah menjadi hijau agar melambangkan prioritas/sukses */
color: #fff;
border-color: #28a745;
transform: scale(1.1);
transition: 0.2s ease-in-out;
}
/* Perbaikan Alert Informasi */
.border-left-primary {
border-left: 4px solid #007bff !important;
}
/* Mode Cetak (Print) */
@media print {
.page-header, .d-print-none, .breadcrumb, .btn { display: none !important; }
.card { border: none !important; box-shadow: none !important; }
.table { width: 100% !important; border-collapse: collapse !important; }
.table-bordered th, .table-bordered td { border: 1px solid #333 !important; }
.rank-number { border: 1px solid #333 !important; color: #000 !important; background: transparent !important; }
.badge { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }
body { background: white !important; color: black !important; }
.text-primary, .text-success, .text-info { color: #000 !important; } /* Hitam putih saat print */
}
</style>
@endsection