@extends('layouts.app')

@section('title', 'Riwayat Diagnosa')
@section('page-title', 'Riwayat Diagnosa')

@section('content')
<div class="bg-white rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">

    <!-- Header -->
    <div class="flex items-center justify-between p-6" style="border-bottom:1px solid #ede8df;">
        <h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
            Semua Riwayat Diagnosa
        </h3>
        <a href="{{ route('diagnosis.create') }}"
           class="px-4 py-2 rounded-xl text-sm font-semibold text-white transition"
           style="background:#2d6a4f;">
            <i class="fas fa-plus mr-1"></i> Diagnosa Baru
        </a>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr style="border-bottom:2px solid #ede8df;">
                    <th class="text-left py-3 px-6" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Tanggal</th>
                    <th class="text-left py-3 px-6" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Nama Tanaman</th>
                    <th class="text-left py-3 px-6" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Penyakit</th>
                    <th class="text-left py-3 px-6" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Akurasi</th>
                    <th class="text-left py-3 px-6" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($diagnoses as $diagnosis)
                <tr style="border-bottom:1px solid rgba(237,232,223,.6);" class="hover:bg-[#d8f3dc]/20 transition">
                    <td class="py-4 px-6 text-sm" style="color:#5a7a67;">{{ $diagnosis->created_at->format('d/m/Y') }}</td>
                    <td class="py-4 px-6 text-sm font-medium" style="color:#1a3a2a;">{{ $diagnosis->plant_name }}</td>
                    <td class="py-4 px-6 text-sm" style="color:#1a3a2a;">{{ $diagnosis->disease_name }}</td>
                    <td class="py-4 px-6">
                        <span class="px-3 py-1 rounded-full text-sm font-semibold" style="background:#d8f3dc;color:#2d6a4f;">
                            {{ $diagnosis->confidence }}%
                        </span>
                    </td>
                    <td class="py-4 px-6">
                        <a href="{{ route('diagnosis.result', $diagnosis->id) }}"
                           class="text-sm font-medium px-3 py-1 rounded-lg transition"
                           style="color:#2d6a4f;background:#f0fdf4;">
                            <i class="fas fa-eye mr-1"></i> Detail
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-16" style="color:#8fa89a;">
                        <i class="fas fa-clipboard text-4xl mb-3 block" style="color:#c8d8cc;"></i>
                        Belum ada riwayat diagnosa
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($diagnoses->hasPages())
    <div class="p-6" style="border-top:1px solid #ede8df;">
        {{ $diagnoses->links() }}
    </div>
    @endif
</div>
@endsection