@extends('layouts.app', ['title' => 'Hasil Diagnosis - Deteksi Dini TB'])

@php
    $mainPercent = max(0, min(100, $penyakitTertinggi['cf_persen']));
    $gaugeOffset = 565 - (565 * $mainPercent / 100);
    $badgeClass = 'badge-' . \Illuminate\Support\Str::slug($penyakitTertinggi['interpretasi']);
    $riskLabel = $mainPercent >= 70 ? 'Risiko Tinggi' : ($mainPercent >= 40 ? 'Risiko Sedang' : 'Risiko Rendah');
    $riskIcon = $mainPercent >= 70 ? 'fa-triangle-exclamation' : ($mainPercent >= 40 ? 'fa-circle-exclamation' : 'fa-circle-check');
@endphp

@section('content')
<section class="result-hero py-5 no-print">
    <div class="container position-relative">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <div class="badge-luxury mb-3"><i class="fas fa-notes-medical"></i><span>Hasil Diagnosis</span></div>
                <h1 class="fw-bold mb-3">Analisis selesai.</h1>
                <p class="text-white-50 mb-0">Berikut hasil perhitungan Certainty Factor berdasarkan gejala dan tingkat keyakinan yang Anda pilih.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="d-inline-flex align-items-center gap-3 p-3 rounded-3" style="background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);">
                    <i class="fas fa-calendar-check text-gradient fa-2x"></i>
                    <div class="text-start">
                        <div class="small text-white-50">Tanggal pemeriksaan</div>
                        <div class="fw-bold">{{ now()->format('d F Y, H:i') }} WIB</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-soft py-5 hasil-print">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="result-card p-4 p-md-5 mb-4">
                    <div class="row align-items-center g-4">
                        <div class="col-md-5 text-center">
                            <div class="gauge-shell" style="--gauge-offset: {{ $gaugeOffset }};">
                                <svg class="gauge-svg" viewBox="0 0 220 220" role="img" aria-label="Gauge CF {{ $mainPercent }} persen">
                                    <defs>
                                        <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stop-color="#00C9A7"/>
                                            <stop offset="100%" stop-color="#0A7EA4"/>
                                        </linearGradient>
                                    </defs>
                                    <circle class="gauge-track" cx="110" cy="110" r="90"></circle>
                                    <circle class="gauge-progress" cx="110" cy="110" r="90"></circle>
                                </svg>
                                <div class="gauge-center">
                                    <div class="gauge-value">{{ $mainPercent }}%</div>
                                    <div class="text-muted small fw-bold">CF Tertinggi</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="risk-badge {{ $badgeClass }} mb-3">
                                <i class="fas {{ $riskIcon }}"></i>
                                {{ $riskLabel }}
                            </div>
                            <h2 class="fw-bold text-primary-custom mb-3">{{ $penyakitTertinggi['nama_penyakit'] }}</h2>
                            <p class="text-muted mb-4">{{ $penyakitTertinggi['deskripsi'] }}</p>
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <span class="badge rounded-pill px-3 py-2 {{ $badgeClass }}">
                                    Tingkat Keyakinan: {{ $penyakitTertinggi['interpretasi'] }}
                                </span>
                                <span class="badge badge-soft rounded-pill px-3 py-2">
                                    CF Akhir: {{ number_format($penyakitTertinggi['cf_akhir'], 4) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="recommendation-card p-4 mb-4">
                    <div class="d-flex gap-4 align-items-start">
                        <div class="tb-type-icon" style="width: 62px; height: 62px;">
                            <i class="fas fa-user-doctor fa-xl"></i>
                        </div>
                        <div>
                            <h4 class="fw-bold text-primary-custom mb-2">Rekomendasi Penanganan</h4>
                            <p class="text-muted mb-0 fw-medium">{{ $penyakitTertinggi['saran'] }}</p>
                        </div>
                    </div>
                </div>

                <div class="medical-report-card mb-4">
                    <div class="p-4 border-bottom">
                        <h5 class="fw-bold mb-1"><i class="fas fa-chart-simple text-gradient me-2"></i>Perbandingan Kemungkinan TB</h5>
                        <p class="text-muted small mb-0">Setiap bar menunjukkan nilai CF dari jenis TB yang diproses sistem.</p>
                    </div>
                    <div class="p-4">
                        <div class="row g-3">
                            @foreach($hasilDiagnosis as $hasil)
                                @php
                                    $percent = max(0, min(100, $hasil['cf_persen']));
                                    $itemClass = 'badge-' . \Illuminate\Support\Str::slug($hasil['interpretasi']);
                                    $itemIcon = $percent >= 70 ? 'fa-triangle-exclamation' : ($percent >= 40 ? 'fa-circle-exclamation' : 'fa-circle-check');
                                @endphp
                                <div class="col-md-6">
                                    <div class="medical-report-card p-3 h-100">
                                        <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                            <div>
                                                <div class="fw-bold text-primary-custom">{{ $hasil['nama_penyakit'] }}</div>
                                                <div class="small text-muted">{{ $hasil['interpretasi'] }}</div>
                                            </div>
                                            <span class="risk-badge {{ $itemClass }}">
                                                <i class="fas {{ $itemIcon }}"></i>{{ $percent }}%
                                            </span>
                                        </div>
                                        <div class="risk-meter" style="--risk: {{ $percent }}%;"><span></span></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="medical-report-card mb-4">
                    <div class="p-4 border-bottom">
                        <h5 class="fw-bold mb-0"><i class="fas fa-list-ul text-gradient me-2"></i>Detail Gejala yang Dipilih</h5>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-premium align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">Gejala</th>
                                    <th class="text-center">CF Pakar</th>
                                    <th class="text-center">Bobot User</th>
                                    <th class="text-center pe-4">CF Individual</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($penyakitTertinggi['detail'] as $det)
                                    @continue((float) $det['bobot_user'] == 0.0)
                                    @php $g = $symptoms[$det['symptom_id']] ?? null; @endphp
                                    <tr>
                                        <td class="ps-4 py-3">
                                            <span class="badge symptom-code rounded-pill me-2">{{ $g->kode ?? '-' }}</span>
                                            <span class="small fw-bold">{{ $g->nama_gejala ?? 'Gejala tidak ditemukan' }}</span>
                                        </td>
                                        <td class="text-center py-3 text-muted small">{{ $det['cf_pakar'] }}</td>
                                        <td class="text-center py-3">
                                            <span class="badge badge-soft rounded-pill px-3 py-2">{{ $det['bobot_user'] }}</span>
                                        </td>
                                        <td class="text-center py-3 pe-4 fw-bold text-gradient">{{ $det['cf_individual'] }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5 text-muted">Tidak ada gejala dengan bobot lebih dari 0.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="medical-report-card p-4 mb-4">
                    <h5 class="fw-bold mb-3"><i class="fas fa-chart-bar text-gradient me-2"></i>Grafik CF</h5>
                    <canvas id="cfBarChart" height="260"></canvas>
                </div>

                <div class="medical-report-card p-4 no-print share-actions">
                    <h5 class="fw-bold mb-3">Bagikan dan Simpan</h5>
                    <div class="d-grid gap-3">
                        <a href="{{ route('konsultasi.print') }}" target="_blank"
                           class="btn btn-primary-custom btn-ripple py-3 fw-bold">
                            <i class="fas fa-print me-2"></i> Cetak Hasil
                        </a>
                        <button onclick="shareWhatsApp()" class="btn py-3 rounded-pill fw-bold" style="background:#25D366;color:white;border:none;">
                            <i class="fab fa-whatsapp me-2"></i> Share WhatsApp
                        </button>
                        <a href="{{ route('konsultasi.reset') }}" class="btn btn-outline-primary py-3 fw-bold bg-white rounded-pill">
                            <i class="fas fa-rotate-right me-2"></i> Konsultasi Baru
                        </a>
                        <a href="{{ route('riwayat.index') }}" class="btn btn-light border py-3 fw-bold text-primary-custom rounded-pill">
                            <i class="fas fa-clock-rotate-left me-2"></i> Lihat Riwayat
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctxBar = document.getElementById('cfBarChart');
    if (!ctxBar || !window.Chart) return;

    new Chart(ctxBar.getContext('2d'), {
        type: 'bar',
        data: {
            labels: @json(array_column($hasilDiagnosis, 'nama_penyakit')),
            datasets: [{
                label: 'CF (%)',
                data: @json(array_column($hasilDiagnosis, 'cf_persen')),
                backgroundColor: @json(array_map(fn($i) => $i === 0 ? '#00C9A7' : '#1A4A7A', array_keys($hasilDiagnosis))),
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, max: 100, grid: { color: 'rgba(10,37,64,0.08)' } },
                x: { grid: { display: false } }
            }
        }
    });
});

function shareWhatsApp() {
    const pesan = 'Hasil Skrining TB Expert\n\n'
        + 'Kemungkinan: {{ addslashes($penyakitTertinggi["nama_penyakit"]) }}\n'
        + 'Keyakinan: {{ $penyakitTertinggi["cf_persen"] }}%\n'
        + 'Status: {{ addslashes($penyakitTertinggi["interpretasi"]) }}\n\n'
        + 'Bukan diagnosis resmi. Konsultasikan ke dokter.';
    window.open('https://wa.me/?text=' + encodeURIComponent(pesan), '_blank');
}
</script>
@endsection