@extends('layouts.app')

@section('content')
<div class="w-full max-w-2xl mx-auto flex flex-col gap-6 text-center py-4">
    <div>
        <span class="inline-flex px-4 py-1.5 bg-secondary text-primary text-xs font-bold rounded-full uppercase tracking-wider border border-[#0B6CF0]/10">
            Hasil Prediksi Selesai
        </span>
        <h2 class="text-4xl font-extrabold text-slate-800 mt-4 tracking-tight leading-none">{{ $scan->diagnosis }}</h2>
        <p class="text-slate-650 font-bold text-sm mt-3.5 flex items-center gap-2 justify-center">
            <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_8px_1.5px_rgba(16,185,129,0.4)] border border-white"></span>
            Tingkat Keyakinan: <span class="text-slate-850 font-extrabold text-base">{{ $scan->confidence_score }}%</span>
        </p>
    </div>

    <!-- Patient Image Card -->
    <div class="rounded-[18px] overflow-hidden border border-[#E5EEF8] max-h-80 bg-slate-50 flex items-center justify-center p-2 shadow-md hover:-translate-y-0.5 transition-all duration-300">
        <img src="{{ asset('storage/' . $scan->image_path) }}" class="object-contain w-full h-full max-h-80 rounded-xl bg-white p-1" alt="Citra Pasien">
    </div>

    <!-- Recommendations Card -->
    <div class="bg-white p-6 md:p-8 rounded-[18px] border border-[#E5EEF8] text-left shadow-lg shadow-slate-100/40 hover:-translate-y-0.5 transition-all duration-300">
        <h3 class="text-lg font-bold text-slate-800 mb-5 pb-3 border-b border-slate-100 flex items-center gap-2">
            <div class="w-8 h-8 rounded-full bg-[#EAF4FF] text-primary flex items-center justify-center">
                <i data-lucide="shield-check" class="w-4.5 h-4.5 stroke-[2]"></i>
            </div>
            Rekomendasi Awal Penanganan
        </h3>
        <ul class="space-y-5">
            @foreach($scan->recommendations as $rec)
                @php
                    [$title, $desc] = explode(': ', $rec, 2);
                @endphp
                <li class="flex gap-4 items-start">
                    <div class="w-9 h-9 rounded-full bg-secondary border border-primary/10 flex items-center justify-center shrink-0">
                        <i data-lucide="check" class="w-4.5 h-4.5 text-primary stroke-[2.5]"></i>
                    </div>
                    <div>
                        <strong class="text-[10px] block text-slate-400 uppercase tracking-wider font-extrabold">{{ $title }}</strong>
                        <p class="text-sm text-slate-700 mt-1 font-semibold leading-relaxed">{{ $desc }}</p>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
    
    <!-- Action buttons -->
    <div class="flex flex-col sm:flex-row justify-center gap-4 mt-2">
        <a href="{{ route('scan.index') }}" class="btn-ripple px-8 py-3.5 bg-primary hover:bg-[#0057D8] rounded-xl text-sm font-bold text-white transition shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 transform hover:-translate-y-0.5 duration-200 text-center relative overflow-hidden">
            Mulai Identifikasi Baru
        </a>
        <a href="{{ route('scan.history') }}" class="px-8 py-3.5 border border-[#DDE7F3] rounded-xl text-sm font-bold text-slate-650 hover:bg-slate-50 hover:text-slate-800 transition text-center">
            Lihat Riwayat Deteksi
        </a>
    </div>
</div>
@endsection