@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