@extends('layouts.main')

@section('title', 'Dashboard - Rice Leaf AI')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-10">

    <div class="mb-10">
        <h1 class="text-3xl font-extrabold text-gray-800">Dashboard Overview</h1>
        <p class="text-gray-500 mt-2">Ringkasan data klasifikasi dan performa model Artificial Intelligence.</p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-5 gap-6 mb-10">
        @foreach(['Total Prediksi' => [$totalPrediksi, 'blue'], 'Blast' => [$blast, 'red'], 'Blight' => [$blight, 'yellow'], 'Healthy' => [$healthy, 'green'], 'Tungro' => [$tungro, 'orange']] as $label => $data)
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group relative overflow-hidden">
            <div class="absolute -right-6 -top-6 bg-{{$data[1]}}-50 w-20 h-20 rounded-full"></div>
            <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider relative z-10">{{ $label }}</h2>
            <p class="text-4xl font-extrabold text-{{$data[1]}}-500 mt-2 relative z-10">{{ $data[0] }}</p>
        </div>
        @endforeach
    </div>

    <div class="grid lg:grid-cols-2 gap-10 mb-10">
        <div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
            <h2 class="text-xl font-bold text-gray-800 mb-6">Statistik Penyakit</h2>
            <div class="h-64"><canvas id="chartPenyakit"></canvas></div>
        </div>

    <div class="mt-10">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-gray-800">Prediksi Terbaru</h3>
            <a href="/riwayat" class="text-sm font-semibold text-green-600 hover:text-green-700">Lihat Semua →</a>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50 text-gray-400 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4 font-semibold">Gambar</th>
                        <th class="px-6 py-4 font-semibold">Hasil Diagnosa</th>
                        <th class="px-6 py-4 font-semibold">Confidence</th>
                        <th class="px-6 py-4 font-semibold text-right">Tanggal</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($terbaru as $item)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4"><img src="{{ asset('uploads/' . $item->gambar) }}" class="w-12 h-12 rounded-lg object-cover shadow-sm"></td>
                        <td class="px-6 py-4 font-bold text-gray-700">{{ $item->penyakit }}</td>
                        <td class="px-6 py-4"><span class="bg-green-50 text-green-600 px-3 py-1 rounded-lg text-sm font-bold">{{ $item->confidence }}%</span></td>
                        <td class="px-6 py-4 text-right text-gray-500 text-sm">{{ $item->created_at->format('d M Y, H:i') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    new Chart(document.getElementById('chartPenyakit'), {
        type: 'bar',
        data: {
            labels: ['Blast', 'Blight', 'Healthy', 'Tungro'],
            datasets: [{
                data: [{{ $blast }}, {{ $blight }}, {{ $healthy }}, {{ $tungro }}],
                backgroundColor: ['#ef4444', '#eab308', '#22c55e', '#f97316'],
                borderRadius: 6
            }]
        },
        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
    });
</script>
@endpush