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

@php
    $cfVal = (float) $consultation->cf_persen;
    $badgeClass = 'badge-' . \Illuminate\Support\Str::slug($consultation->interpretasi);
    $gaugeOffset = 565 - (565 * max(0, min(100, $cfVal)) / 100);
    $visibleDetails = $details->filter(fn ($detail) => (float) $detail->bobot_user > 0);
@endphp

@section('content')
<section class="consult-hero py-5 no-print">
    <div class="container py-3">
        <a href="{{ route('riwayat.index') }}" class="btn btn-glass rounded-pill mb-4">
            <i class="fas fa-arrow-left me-2"></i>Kembali ke Riwayat
        </a>
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <div class="badge-luxury mb-3"><i class="fas fa-file-medical"></i><span>Detail Riwayat</span></div>
                <h1 class="fw-bold mb-3">Konsultasi #{{ $consultation->id }}</h1>
                <p class="text-white-50 mb-0">{{ $consultation->created_at->format('d M Y, H:i') }} WIB</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <span class="risk-badge {{ $badgeClass }}">{{ $consultation->interpretasi }}</span>
            </div>
        </div>
    </div>
</section>

<section class="section-soft py-5 min-vh-100">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="result-card p-4 text-center">
                    <div class="gauge-shell mb-3" style="--gauge-offset: {{ $gaugeOffset }};">
                        <svg class="gauge-svg" viewBox="0 0 220 220" role="img" aria-label="Gauge CF {{ $cfVal }} 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">{{ $consultation->cf_persen }}%</div>
                            <div class="text-muted small fw-bold">Nilai CF</div>
                        </div>
                    </div>
                    <h3 class="fw-bold text-primary-custom">{{ $consultation->disease->nama ?? 'Tidak ditemukan indikasi TB' }}</h3>
                    <p class="text-muted mb-0">Hasil konsultasi tersimpan dari riwayat akun Anda.</p>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="medical-report-card mb-4">
                    <div class="p-4 border-bottom d-flex align-items-center justify-content-between gap-3">
                        <div>
                            <h5 class="fw-bold mb-1"><i class="fas fa-list-ul text-gradient me-2"></i>Gejala yang Dipilih</h5>
                            <p class="text-muted small mb-0">{{ $visibleDetails->count() }} gejala tersimpan pada konsultasi ini.</p>
                        </div>
                        <span class="badge badge-soft rounded-pill px-3 py-2">{{ $visibleDetails->count() }} data</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-premium align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">#</th>
                                    <th>Gejala</th>
                                    <th class="text-center">Bobot User</th>
                                    <th class="text-center pe-4">CF Individual</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($visibleDetails as $d)
                                <tr>
                                    <td class="ps-4 py-3 text-muted small">{{ $loop->iteration }}</td>
                                    <td class="py-3">
                                        <span class="badge symptom-code rounded-pill me-2">{{ $d->symptom->kode ?? '?' }}</span>
                                        <span class="small fw-bold">{{ $d->symptom->nama_gejala ?? 'Gejala tidak ditemukan' }}</span>
                                    </td>
                                    <td class="py-3 text-center">
                                        <span class="badge badge-soft rounded-pill px-3 py-2">{{ $d->bobot_user }}</span>
                                    </td>
                                    <td class="py-3 text-center pe-4 fw-bold text-gradient">{{ $d->cf_individual }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">Tidak ada data gejala tersimpan.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="recommendation-card p-4">
                    <div class="d-flex gap-3">
                        <i class="fas fa-circle-info text-gradient fa-xl mt-1"></i>
                        <p class="text-muted mb-0">Hasil konsultasi ini hanya skrining awal berbasis sistem pakar. Konsultasikan dengan dokter atau tenaga kesehatan untuk diagnosis resmi.</p>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-3 flex-wrap no-print">
                    <a href="{{ route('riwayat.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                        <i class="fas fa-arrow-left me-2"></i> Kembali
                    </a>
                    <a href="{{ route('konsultasi.reset') }}" class="btn btn-primary-custom rounded-pill px-4">
                        <i class="fas fa-redo-alt me-2"></i> Konsultasi Baru
                    </a>
                    <a href="{{ route('riwayat.print', $consultation->id) }}" target="_blank"
                       class="btn btn-outline-primary rounded-pill px-4 bg-white">
                        <i class="fas fa-print me-2"></i> Cetak
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection