@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/riwayat.css') }}">
@endpush

@section('content')
<div class="riwayat-wrap">

    <div class="riwayat-header">
        <h2 class="riwayat-title">Riwayat Prediksi</h2>
        <p class="riwayat-subtitle">Daftar hasil prediksi yang pernah kamu lakukan</p>
    </div>

    @if($riwayat->isEmpty())
        <div class="riwayat-empty">
            <div class="empty-icon">🩺</div>
            <p>Belum ada riwayat prediksi.</p>
            <a href="{{ route('halaman.prediksi') }}" class="btn-cek">Mulai Prediksi</a>
        </div>

    @else
        <div class="riwayat-list">
            @foreach($riwayat as $item)
            <div class="riwayat-card">

                {{-- Header card --}}
                <div class="riwayat-card-header">
                    <div class="riwayat-hasil-badge {{ strtolower(str_replace(' ', '-', $item->hasil)) }}">
                        {{ $item->hasil }}
                    </div>
                    <span class="riwayat-tanggal">
                        <i class="fa-regular fa-clock"></i>
                        {{ $item->created_at->format('d M Y, H:i') }}
                    </span>
                </div>

                {{-- Data diri --}}
                <div class="riwayat-section">
                    <div class="riwayat-row">
                        <span class="riwayat-key">Nama</span>
                        <span class="riwayat-val">{{ $item->nama }}</span>
                    </div>
                </div>

                {{-- Gejala --}}
                <div class="riwayat-section">
                    <p class="riwayat-section-label">Gejala</p>
                    <div class="riwayat-gejala-wrap">
                        @php
                            $gejalaMap = [
                                'g1' => 'Nyeri Ulu Hati',
                                'g2' => 'Kembung',
                                'g3' => 'Heartburn',
                                'g4' => 'BAB Berdarah',
                                'g5' => 'Nafsu Makan Turun',
                                'g6' => 'Penurunan Berat Badan',
                            ];
                        @endphp
                        @foreach($item->gejala as $g)
                            <span class="gejala-tag">{{ $gejalaMap[$g] ?? $g }}</span>
                        @endforeach
                    </div>
                </div>

                {{-- Gaya hidup --}}
                <div class="riwayat-section">
                    <p class="riwayat-section-label">Gaya Hidup</p>
                    <div class="riwayat-gayahidup-wrap">
                        <span class="gayahidup-tag {{ $item->stres == 'ya' ? 'aktif' : 'tidak' }}">
                            Stres: {{ ucfirst($item->stres) }}
                        </span>
                        <span class="gayahidup-tag {{ $item->merokok == 'ya' ? 'aktif' : 'tidak' }}">
                            Merokok: {{ ucfirst($item->merokok) }}
                        </span>
                        <span class="gayahidup-tag {{ $item->alkohol == 'ya' ? 'aktif' : 'tidak' }}">
                            Alkohol: {{ ucfirst($item->alkohol) }}
                        </span>
                        <span class="gayahidup-tag {{ $item->obat == 'ya' ? 'aktif' : 'tidak' }}">
                            Obat Anti Inflamasi: {{ ucfirst($item->obat) }}
                        </span>
                    </div>
                </div>

                {{-- Indikasi Lain --}}
                @if(!empty($item->indikasi) && count($item->indikasi) > 0)
                <div class="riwayat-section">
                    <p class="riwayat-section-label">Indikasi Lain</p>
                    <div class="riwayat-indikasi-wrap">
                        @foreach($item->indikasi as $ind)
                            <span class="indikasi-tag">{{ $ind }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>
            @endforeach
        </div>
    @endif

</div>
@endsection