@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="page-header">
        <div><span class="eyebrow">Ringkasan Peternakan</span><h1>Selamat datang</h1><p>Berikut kondisi peternakan Anda hari ini, {{ now()->translatedFormat('l, d F Y') }}.</p></div>
        <div class="header-actions"><span class="sample-note">● Data peternakan tersimpan di database</span></div>
    </div>
    <div class="stats-grid">
        <div class="stat-card"><div class="stat-icon green">♧</div><div class="stat-copy"><span>Total Sapi</span><strong>{{ number_format($cattleCount) }}</strong><small>Populasi terdaftar</small></div></div>
        <div class="stat-card"><div class="stat-icon sage">✓</div><div class="stat-copy"><span>Sapi Sehat</span><strong>{{ number_format($healthyCount) }}</strong><small>{{ $cattleCount ? number_format($healthyCount / $cattleCount * 100, 1) : 0 }}% dari populasi</small></div></div>
        <div class="stat-card"><div class="stat-icon brown">♡</div><div class="stat-copy"><span>Pemeriksaan Hari Ini</span><strong>{{ number_format($checkupsToday) }}</strong><small>Catatan pemeriksaan</small></div></div>
        <div class="stat-card"><div class="stat-icon amber">▤</div><div class="stat-copy"><span>Pakan Menipis</span><strong>{{ number_format($lowStockCount) }}</strong><small>Perlu segera diperiksa</small></div></div>
    </div>
    <div class="dashboard-grid">
        <section class="card">
            <div class="card-header"><div><h2>Status Kesehatan Sapi</h2><p>Distribusi kondisi seluruh populasi</p></div><a class="text-button" href="{{ route('health-records.index') }}">Lihat detail ›</a></div>
            @php
                $healthyPercent = $cattleCount ? $healthyCount / $cattleCount * 100 : 0;
                $careCount = (int) ($healthCounts['Perawatan'] ?? 0);
                $sickCount = (int) ($healthCounts['Sakit'] ?? 0);
                $carePercent = $cattleCount ? $careCount / $cattleCount * 100 : 0;
            @endphp
            <div class="donut-layout">
                <div class="donut" style="background:conic-gradient(var(--forest) 0 {{ $healthyPercent }}%,var(--amber) {{ $healthyPercent }}% {{ min(100, $healthyPercent + $carePercent) }}%,var(--red) {{ min(100, $healthyPercent + $carePercent) }}% 100%)">
                    <div><strong>{{ number_format($healthyPercent, 0) }}%</strong><span>sehat</span></div>
                </div>
                <div class="legend">
                    <div><i class="legend-green"></i><span>Sehat</span><strong>{{ $healthyCount }}</strong></div>
                    <div><i class="legend-amber"></i><span>Perawatan</span><strong>{{ $careCount }}</strong></div>
                    <div><i class="legend-red"></i><span>Sakit</span><strong>{{ $sickCount }}</strong></div>
                </div>
            </div>
        </section>
        <section class="card">
            <div class="card-header"><div><h2>Jadwal Pakan Hari Ini</h2><p>{{ $todaySchedules->count() }} kegiatan terjadwal</p></div><a class="text-button" href="{{ route('schedules.index') }}">Lihat jadwal ›</a></div>
            @forelse($todaySchedules as $schedule)
                <div class="timeline-item"><div class="timeline-check {{ $schedule->status === 'Selesai' ? 'done' : 'next' }}">{{ $schedule->status === 'Selesai' ? '✓' : '◷' }}</div><time>{{ $schedule->scheduled_at->format('H:i') }}</time><div><strong>{{ $schedule->feed->name }}</strong><span>{{ $schedule->target }} · {{ number_format($schedule->quantity_kg, 0) }} kg</span></div></div>
            @empty
                <div class="empty-state" style="min-height:160px"><p>Belum ada jadwal pakan hari ini.</p><a class="btn btn-primary btn-link" href="{{ route('schedules.create') }}">Buat jadwal</a></div>
            @endforelse
        </section>
    </div>
    <div class="bottom-grid">
        <section class="card">
            <div class="card-header"><div><h2>Perlu Perhatian</h2><p>Persediaan yang berada di bawah batas minimum</p></div><a class="text-button" href="{{ route('feeds.index') }}">Lihat stok ›</a></div>
            <div class="alert-list">
                @forelse($lowStockFeeds as $feed)
                    <div class="alert-item {{ $feed->stock_kg <= 0 ? 'danger' : 'warning' }}"><span aria-hidden="true">!</span><div><strong>{{ $feed->name }} {{ $feed->stock_kg <= 0 ? 'habis' : 'menipis' }}</strong><span>Stok {{ number_format($feed->stock_kg, 0) }} {{ $feed->unit }} · minimum {{ number_format($feed->minimum_stock_kg, 0) }} {{ $feed->unit }}</span></div><a href="{{ route('feeds.index') }}">Cek stok</a></div>
                @empty
                    <div class="empty-state" style="min-height:130px"><p>Semua stok pakan dalam kondisi aman.</p></div>
                @endforelse
            </div>
        </section>
        <section class="card">
            <div class="card-header"><div><h2>Pemeriksaan Terbaru</h2><p>Catatan kesehatan sapi terkini</p></div><a class="text-button" href="{{ route('health-records.index') }}">Semua data ›</a></div>
            @forelse($recentHealthRecords as $record)
                <div class="timeline-item"><div class="timeline-check {{ $record->status === 'Selesai' ? 'done' : 'next' }}">♡</div><time>{{ $record->examined_at->format('d/m') }}</time><div><strong>{{ $record->cattle?->name ?? 'Data sapi dihapus' }}</strong><span>{{ $record->symptoms }}</span></div></div>
            @empty
                <div class="empty-state" style="min-height:130px"><p>Belum ada catatan pemeriksaan.</p></div>
            @endforelse
        </section>
    </div>
@endsection