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

@section('content')
<section class="consult-hero py-5 no-print">
    <div class="container py-3">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <div class="badge-luxury mb-3"><i class="fas fa-clock-rotate-left"></i><span>Riwayat Konsultasi</span></div>
                <h1 class="fw-bold mb-3">Jejak skrining Anda.</h1>
                <p class="text-white-50 mb-0">Lihat kembali hasil konsultasi sebelumnya dan buka detail gejala yang pernah dipilih.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ route('konsultasi.index') }}" class="btn btn-register-premium btn-ripple px-4 py-3 fw-bold">
                    <i class="fas fa-plus me-2"></i>Konsultasi Baru
                </a>
            </div>
        </div>
    </div>
</section>

<section class="section-soft py-5 min-vh-100 hasil-print">
    <div class="container">
        @if($history->isEmpty())
        <div class="history-panel p-5 text-center">
            <svg class="empty-illustration" viewBox="0 0 220 150" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <rect x="30" y="34" width="160" height="92" rx="8" fill="#EBF4FF" stroke="#B8D6F3"/>
                <path d="M55 58h70M55 78h110M55 98h82" stroke="#64748B" stroke-width="6" stroke-linecap="round"/>
                <circle cx="165" cy="54" r="18" fill="#00C9A7" opacity=".22"/>
                <path d="M156 54l7 7 13-16" stroke="#00C9A7" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20 126h180" stroke="#D7E4EF" stroke-width="5" stroke-linecap="round"/>
            </svg>
            <h3 class="fw-bold text-primary-custom mb-2">Belum ada riwayat konsultasi</h3>
            <p class="text-muted mb-4">Mulai skrining pertama Anda untuk melihat hasilnya tersimpan di sini.</p>
            <a href="{{ route('konsultasi.index') }}" class="btn btn-primary-custom btn-ripple px-4 py-3 fw-bold">
                <i class="fas fa-stethoscope me-2"></i>Mulai Konsultasi
            </a>
        </div>
        @else
        <div class="history-timeline">
            @foreach($history as $row)
                @php $badgeClass = 'badge-' . \Illuminate\Support\Str::slug($row->interpretasi); @endphp
                <div class="history-item">
                    <span class="history-dot" aria-hidden="true"></span>
                    <div class="history-card p-4">
                        <div class="row align-items-center g-3">
                            <div class="col-lg-3">
                                <div class="fw-bold text-primary-custom">{{ $row->created_at->format('d M Y') }}</div>
                                <div class="small text-muted">{{ $row->created_at->format('H:i') }} WIB</div>
                            </div>
                            <div class="col-lg-4">
                                <div class="small text-muted mb-1">Hasil diagnosis</div>
                                <h5 class="fw-bold mb-0">{{ $row->disease->nama ?? 'Tidak ditemukan indikasi TB' }}</h5>
                            </div>
                            <div class="col-lg-2">
                                <div class="small text-muted mb-1">CF</div>
                                <div class="fw-bold text-gradient fs-4">{{ $row->cf_persen }}%</div>
                            </div>
                            <div class="col-lg-3 text-lg-end">
                                <span class="badge rounded-pill px-3 py-2 {{ $badgeClass }}">
                                    {{ $row->interpretasi }}
                                </span>
                                <div class="history-actions mt-3 no-print">
                                    <a href="{{ route('riwayat.detail', $row->id) }}" class="btn btn-sm btn-primary-custom btn-ripple px-4 fw-bold">
                                        <i class="fas fa-eye me-1"></i> Detail
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endsection