<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <title>Hasil SPK - {{ $siswa->user->nama ?? '-' }}</title>

    @php
        $namaSiswa = $siswa->user->nama ?? '-';

        $tinggiBadan = (float) $tesTerakhir->tinggi_badan;
        $beratBadan  = (float) $tesTerakhir->berat_badan;
        $tinggiMeter = $tinggiBadan / 100;
        $bmi         = $tinggiMeter > 0 ? round($beratBadan / ($tinggiMeter * $tinggiMeter), 1) : 0;

        if ($bmi < 18.5)       $bmiKategori = 'Kurang';
        elseif ($bmi < 25)     $bmiKategori = 'Normal';
        elseif ($bmi < 30)     $bmiKategori = 'Lebih';
        else                   $bmiKategori = 'Obesitas';

        $rataRataAkademik = round((
            (float) $tesTerakhir->nilai_matematika +
            (float) $tesTerakhir->nilai_bahasa_indonesia +
            (float) $tesTerakhir->nilai_bahasa_inggris +
            (float) $tesTerakhir->nilai_ipa
        ) / 4, 2);

        $rekomendasi = $hasilList->first();
        $maxNilai    = $hasilList->max('nilai_preferensi') ?? 0;
    @endphp

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: #1a2540;
            background: #fff;
        }

        .wrapper { padding: 28px 32px; }

        /* ── HEADER ── */
        .header-table {
            width: 100%;
            border-bottom: 3px solid #1a3c6e;
            padding-bottom: 12px;
            margin-bottom: 20px;
        }
        .header-table td { vertical-align: middle; }
        .logo-cell { width: 64px; }
        .logo-box {
            width: 56px;
            height: 56px;
            text-align: center;
        }
        .logo-box img {
            width: 56px;
            height: 56px;
            object-fit: contain;
        }
        .school-cell { padding-left: 12px; }
        .school-name {
            font-size: 15px;
            font-weight: 800;
            color: #1a3c6e;
        }
        .school-sub {
            font-size: 10px;
            color: #6b7a8d;
            margin-top: 2px;
        }
        .title-cell { text-align: right; }
        .title-cell h2 {
            font-size: 13px;
            font-weight: 800;
            color: #1a3c6e;
        }
        .title-cell p {
            font-size: 10px;
            color: #6b7a8d;
            margin-top: 2px;
        }

        /* ── SECTION TITLE ── */
        .section-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #1a3c6e;
            border-bottom: 2px solid #e8a020;
            padding-bottom: 4px;
            margin-top: 16px;
            margin-bottom: 10px;
        }

        /* ── INFO CARDS ── */
        .info-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 6px;
        }
        .info-card {
            background: #f0f4fa;
            border-radius: 6px;
            padding: 8px 10px;
            vertical-align: top;
        }
        .card-label {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #6b7a8d;
            margin-bottom: 3px;
        }
        .card-value {
            font-size: 13px;
            font-weight: 800;
            color: #1a2540;
        }
        .card-sub {
            font-size: 9px;
            color: #6b7a8d;
            margin-top: 2px;
        }

        /* ── REKOMENDASI BOX ── */
        .rec-box {
            background: #1a3c6e;
            border-radius: 10px;
            padding: 18px 20px;
            margin-bottom: 4px;
            text-align: center;
            color: #fff;
        }
        .rec-label {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255,255,255,.6);
            margin-bottom: 6px;
        }
        .rec-name {
            font-size: 20px;
            font-weight: 900;
            color: #f4b942;
            margin-bottom: 6px;
        }
        .rec-score {
            font-size: 11px;
            color: rgba(255,255,255,.75);
            margin-bottom: 8px;
        }
        .rec-badge {
            display: inline-block;
            border: 1px solid #f4b942;
            border-radius: 50px;
            padding: 3px 14px;
            font-size: 11px;
            font-weight: 700;
            color: #f4b942;
        }

        /* ── RANKING TABLE ── */
        .ranking-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 4px;
        }
        .ranking-table th {
            background: #1a3c6e;
            color: #fff;
            padding: 8px 10px;
            text-align: left;
            font-size: 10px;
            font-weight: 700;
        }
        .ranking-table td {
            padding: 8px 10px;
            border-bottom: 1px solid #e8edf5;
            font-size: 11px;
            vertical-align: middle;
        }
        .ranking-table .row-even td { background: #f8fafc; }
        .ranking-table .row-best td {
            background: #fff8e7;
            color: #7c5c10;
            font-weight: 700;
        }

        /* rank badge */
        .rank-badge {
            display: inline-block;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 50%;
            text-align: center;
            font-weight: 800;
            font-size: 12px;
        }
        .rank-1 { background: #f4b942; color: #111; }
        .rank-2 { background: #c0c0c0; color: #111; }
        .rank-3 { background: #cd7f32; color: #fff; }
        .rank-n { background: #e5eaf3; color: #6b7a8d; }

        /* progress bar */
        .bar-outer {
            background: #e5eaf3;
            border-radius: 6px;
            height: 7px;
            width: 90px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
            overflow: hidden;
        }
        .bar-inner {
            height: 100%;
            border-radius: 6px;
            background: #e8a020;
        }

        /* ── FOOTER ── */
        .footer-table {
            width: 100%;
            margin-top: 28px;
            padding-top: 10px;
            border-top: 1px solid #e5eaf3;
            font-size: 9px;
            color: #9ca3af;
        }
    </style>
</head>
<body>
<div class="wrapper">

    {{-- ── HEADER ── --}}
    <table class="header-table" cellpadding="0" cellspacing="0">
        <tr>
            <td class="logo-cell">
                <div class="logo-box">
                    @php
                        $logoPath = public_path('Assets/Logo_SMKN2Jember.png');
                        $logoBase64 = 'data:image/png;base64,' . base64_encode(file_get_contents($logoPath));
                    @endphp

                    <img src="{{ $logoBase64 }}" alt="">
                </div>
            </td>
            <td class="school-cell">
                <div class="school-name">SMK Negeri 2 Jember</div>
                <div class="school-sub">Sistem Pendukung Keputusan Pemilihan Jurusan</div>
            </td>
            <td class="title-cell">
                <h2>Hasil Tes Rekomendasi Jurusan</h2>
                <p>Metode Simple Additive Weighting (SAW)</p>
                <p>{{ now()->format('d F Y') }}</p>
            </td>
        </tr>
    </table>

    {{-- ── DATA SISWA ── --}}
    <div class="section-title">Data Siswa</div>
    <table class="info-table" cellpadding="0" cellspacing="0">
        <tr>
            <td class="info-card" style="width:34%">
                <div class="card-label">Nama Siswa</div>
                <div class="card-value">{{ $namaSiswa }}</div>
            </td>
            <td class="info-card" style="width:33%">
                <div class="card-label">Tanggal Tes</div>
                <div class="card-value">{{ optional($tesTerakhir->created_at)->format('d M Y') ?? '-' }}</div>
            </td>
            <td class="info-card" style="width:33%">
                <div class="card-label">Skor Minat Bakat</div>
                <div class="card-value">{{ $tesTerakhir->skor_minat_bakat }}%</div>
            </td>
        </tr>
    </table>

    {{-- ── NILAI AKADEMIK ── --}}
    <div class="section-title">Nilai Akademik</div>
    <table class="info-table" cellpadding="0" cellspacing="0">
        <tr>
            <td class="info-card" style="width:25%">
                <div class="card-label">Matematika</div>
                <div class="card-value">{{ $tesTerakhir->nilai_matematika }}</div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">Bhs. Indonesia</div>
                <div class="card-value">{{ $tesTerakhir->nilai_bahasa_indonesia }}</div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">Bhs. Inggris</div>
                <div class="card-value">{{ $tesTerakhir->nilai_bahasa_inggris }}</div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">IPA</div>
                <div class="card-value">{{ $tesTerakhir->nilai_ipa }}</div>
            </td>
        </tr>
        <tr>
            <td class="info-card" colspan="2">
                <div class="card-label">Rata-rata Akademik</div>
                <div class="card-value">{{ number_format($rataRataAkademik, 2) }}</div>
                <div class="card-sub">Rata-rata dari 4 mata pelajaran</div>
            </td>
            <td class="info-card" colspan="2">
                <div class="card-label">Jumlah Mapel Dinilai</div>
                <div class="card-value">4 Mata Pelajaran</div>
                <div class="card-sub">Matematika, B. Indonesia, B. Inggris, IPA</div>
            </td>
        </tr>
    </table>

    {{-- ── DATA FISIK ── --}}
    <div class="section-title">Data Fisik &amp; Kesehatan</div>
    <table class="info-table" cellpadding="0" cellspacing="0">
        <tr>
            <td class="info-card" style="width:25%">
                <div class="card-label">Tinggi Badan</div>
                <div class="card-value">{{ $tesTerakhir->tinggi_badan }} <span style="font-size:9px;font-weight:400;color:#6b7a8d">cm</span></div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">Berat Badan</div>
                <div class="card-value">{{ $tesTerakhir->berat_badan }} <span style="font-size:9px;font-weight:400;color:#6b7a8d">kg</span></div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">BMI</div>
                <div class="card-value">{{ $bmi }}</div>
                <div class="card-sub">{{ $bmiKategori }}</div>
            </td>
            <td class="info-card" style="width:25%">
                <div class="card-label">Buta Warna</div>
                <div class="card-value" style="color:{{ $tesTerakhir->buta_warna ? '#c0392b' : '#27ae60' }}">
                    {{ $tesTerakhir->buta_warna ? 'Ya' : 'Tidak' }}
                </div>
            </td>
        </tr>
        <tr>
            <td class="info-card" colspan="4">
                <div class="card-label">Penyakit</div>
                <div class="card-value">{{ $tesTerakhir->penyakit?->nama_penyakit ?? 'Tidak ada' }}</div>
            </td>
        </tr>
    </table>

    {{-- ── REKOMENDASI ── --}}
    <div class="section-title">Rekomendasi Jurusan</div>
    @if($rekomendasi)
        @php $skorRek = max(0, min(100, ($rekomendasi->nilai_preferensi ?? 0) * 100)); @endphp
        <div class="rec-box">
            <div class="rec-label">Jurusan Terbaik Untukmu</div>
            <div class="rec-name">{{ $rekomendasi->jurusan->nama_jurusan ?? '-' }}</div>
            <div class="rec-score">Nilai Preferensi SAW Tertinggi</div>
            <div class="rec-badge">Skor: {{ number_format($skorRek, 2) }}%</div>
        </div>
    @else
        <div class="rec-box">
            <div class="rec-label">Data Belum Tersedia</div>
            <div class="rec-name">Hasil SAW belum tersimpan</div>
        </div>
    @endif

    {{-- ── RANKING TABLE ── --}}
    <div class="section-title">Ranking Semua Jurusan (SAW)</div>
    <table class="ranking-table" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th style="width:46px; text-align:center">Rank</th>
                <th>Nama Jurusan</th>
                <th style="width:150px">Visualisasi Skor</th>
                <th style="width:110px">Nilai Preferensi</th>
                <th style="width:70px">Skor (%)</th>
            </tr>
        </thead>
        <tbody>
            @forelse($hasilList as $i => $hasil)
                @php
                    $isFirst  = $i === 0;
                    $rowClass = $isFirst ? 'row-best' : ($i % 2 === 0 ? '' : 'row-even');
                    $numClass = $isFirst ? 'rank-1' : ($i === 1 ? 'rank-2' : ($i === 2 ? 'rank-3' : 'rank-n'));
                    $nilai    = $hasil->nilai_preferensi ?? 0;
                    $barPct   = $maxNilai > 0 ? max(0, min(100, round(($nilai / $maxNilai) * 100))) : 0;
                    $skorPct  = max(0, min(100, $nilai * 100));
                @endphp
                <tr class="{{ $rowClass }}">
                    <td style="text-align:center">
                        <span class="rank-badge {{ $numClass }}">{{ $hasil->peringkat ?? ($i + 1) }}</span>
                    </td>
                    <td>{{ $hasil->jurusan->nama_jurusan ?? '-' }}</td>
                    <td>
                        <div class="bar-outer">
                            <div class="bar-inner" style="width:{{ $barPct }}%"></div>
                        </div>
                        {{ number_format($skorPct, 2) }}%
                    </td>
                    <td style="font-weight:700">{{ number_format($nilai, 6) }}</td>
                    <td style="font-weight:800; color:{{ $isFirst ? '#7c5c10' : '#374151' }}">
                        {{ number_format($skorPct, 2) }}%
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" style="text-align:center; padding:18px; color:#6b7a8d">
                        Data hasil SAW belum tersedia.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    {{-- ── FOOTER ── --}}
    <table class="footer-table" cellpadding="0" cellspacing="0">
        <tr>
            <td>SMK Negeri 2 Jember — Sistem Pendukung Keputusan Pemilihan Jurusan</td>
            <td style="text-align:right">Dicetak: {{ now()->format('d F Y, H:i') }} WIB</td>
        </tr>
    </table>

</div>
</body>
</html>