@extends('layout.app')

@section('content')
<div class="page-header">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('seleksi.index') }}">Hasil Seleksi</a></li>
        <li class="breadcrumb-item active">Rincian Kelayakan</li>
    </ol>
</div>

<div class="row gutters">
    {{-- CARD KIRI: IDENTITAS WARGA --}}
    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-dark text-white text-center py-3">
                <h5 class="mb-0">Profil Kepala Keluarga</h5>
            </div>
            <div class="card-body text-center">
                <div class="user-profile mb-3">
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($result->warga->nama) }}&background=random&size=128" class="rounded-circle shadow-sm" alt="Avatar">
                </div>
                <h4 class="font-weight-bold text-dark">{{ $result->warga->nama }}</h4>
                <p class="text-muted small">NIK: <code>{{ $result->warga->nik }}</code></p>
                <hr>

                <div class="text-left">
                    <div class="mb-3">
                        <label class="small text-uppercase font-weight-bold text-muted d-block">Status Keputusan</label>
                        @if($result->status_keputusan == 'Layak Prioritas Utama')
                            <div class="p-2 rounded bg-success text-white text-center font-weight-bold">LAYAK PRIORITAS UTAMA</div>
                        @elseif($result->status_keputusan == 'Layak Cadangan')
                            <div class="p-2 rounded bg-info text-white text-center font-weight-bold">LAYAK CADANGAN</div>
                        @else
                            <div class="p-2 rounded bg-danger text-white text-center font-weight-bold">TIDAK LAYAK</div>
                        @endif
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <label class="small text-uppercase font-weight-bold text-muted">Peringkat</label>
                            <h3 class="text-dark font-weight-bold">#{{ $result->ranking }}</h3>
                        </div>
                        <div class="col-6 border-left">
                            <label class="small text-uppercase font-weight-bold text-muted">Skor Akhir</label>
                            <h3 class="text-primary font-weight-bold">{{ number_format($result->skor_akhir, 4) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-light">
                <a href="{{ route('seleksi.index') }}" class="btn btn-outline-secondary btn-block">
                    <i class="icon-arrow-left"></i> Kembali ke Daftar
                </a>
            </div>
        </div>
    </div>

    {{-- CARD KANAN: RINCIAN SKOR KRITERIA --}}
    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
        <div class="card shadow-sm border-0 border-top-primary">
            <div class="card-header bg-white pt-3">
                <h5 class="mb-0 text-dark font-weight-bold">Transparansi Perhitungan Fuzzy AHP</h5>
                <small class="text-muted">Rumus: Skor = Bobot Global (W) &times; Bobot Lokal (w)</small>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="bg-light text-center">
                            <tr>
                                <th class="text-left">Kriteria Seleksi</th>
                                <th width="150">Bobot Global (W)</th>
                                <th width="150">Bobot Lokal (w)</th>
                                <th width="150" class="bg-yellow-light">Skor Akhir (V)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $totalHitung = 0; @endphp
                            @foreach($result->warga->details as $d)
                            @php
                                $bobotW = $d->kriteria->bobot_global ?? 0;
                                $bobotwLokal = $d->subKriteria->bobot_lokal ?? 0;
                                $v = $bobotW * $bobotwLokal;
                                $totalHitung += $v;
                            @endphp
                            <tr class="text-center">
                                <td class="text-left">
                                    <div class="font-weight-bold text-dark text-uppercase">{{ $d->kriteria->nama_kriteria }}</div>
                                    <small class="text-muted">Kondisi: <strong>{{ $d->subKriteria->nama_sub }}</strong></small>
                                </td>
                                <td>{{ number_format($bobotW, 4) }}</td>
                                <td>{{ number_format($bobotwLokal, 4) }}</td>
                                <td class="font-weight-bold text-success">{{ number_format($v, 4) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light font-weight-bold">
                            <tr>
                                <td colspan="3" class="text-right py-3 pr-4 text-uppercase">Total Akumulasi Skor (V = &sum; W &times; w)</td>
                                <td class="text-center text-primary py-3" style="font-size: 1.4rem;">
                                    {{ number_format($totalHitung, 4) }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="alert alert-warning border-0 mt-4">
                    <h6 class="font-weight-bold mb-1"><i class="icon-info"></i> Analisis Sistem:</h6>
                    <p class="mb-0 small">
                        Warga atas nama <strong>{{ $result->warga->nama }}</strong> mendapatkan skor akhir
                        <strong>{{ number_format($result->skor_akhir, 4) }}</strong>. Berdasarkan perangkingan seluruh populasi warga,
                        keluarga ini masuk ke dalam kategori <strong>{{ $result->status_keputusan }}</strong>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .border-top-primary { border-top: 4px solid #3085d6 !important; }
    .bg-yellow-light { background-color: #fffde7; }
    .table thead th { vertical-align: middle; text-transform: uppercase; font-size: 11px; }
    .card { border-radius: 12px; }
</style>
@endsection