@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