<x-app-layout>
    <x-slot:heading>Feed Usage Report</x-slot:heading>
    <div class="mb-4 flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('reports.index') }}" class="hover:text-gray-700">Reports</a>
        <svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
        <span>Feed Usage</span>
    </div>

    <div class="mb-4 text-sm text-gray-600">
        {{ \Carbon\Carbon::parse($dateFrom)->format('d M Y') }} — {{ \Carbon\Carbon::parse($dateTo)->format('d M Y') }}
        &nbsp;·&nbsp; Total: <strong>{{ number_format($totalKg, 1) }} kg</strong>
    </div>

    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-xs uppercase tracking-wider text-gray-500">
                <tr>
                    <th class="px-5 py-3 text-left">Brand</th>
                    <th class="px-5 py-3 text-left">Type</th>
                    <th class="px-5 py-3 text-right">Total (kg)</th>
                    <th class="px-5 py-3 text-right">Sessions</th>
                    <th class="px-5 py-3 text-right">% of total</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($feedData as $f)
                <tr>
                    <td class="px-5 py-3 font-medium text-gray-900">{{ $f->feed_brand }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ $f->feed_type }}</td>
                    <td class="px-5 py-3 text-right font-semibold">{{ number_format($f->total_kg, 1) }}</td>
                    <td class="px-5 py-3 text-right text-gray-500">{{ $f->sessions }}</td>
                    <td class="px-5 py-3 text-right text-gray-500">{{ $totalKg > 0 ? number_format($f->total_kg / $totalKg * 100, 1) : 0 }}%</td>
                </tr>
                @empty
                <tr><td colspan="5" class="px-5 py-6 text-center text-gray-400">No feeding data for this period.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-app-layout>
