<x-app-layout>
    <x-slot:heading>Feeding</x-slot:heading>

    <x-page-header title="Feeding Logs" description="Daily feed records for all active ponds.">
        <x-slot:actions>
            <a href="{{ route('feeding.create') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Log Feeding
            </a>
        </x-slot:actions>
    </x-page-header>

    <!-- Today's summary -->
    <div class="mb-6">
        <p class="mb-2 text-sm font-semibold text-gray-700">Today — {{ today()->format('d M Y') }}</p>
        @if($pondsWithNoFeedingToday->isNotEmpty())
        <div class="mb-3 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
            <div>
                <p class="font-semibold text-amber-800">No feeding logged today</p>
                <p class="text-sm text-amber-700">
                    {{ $pondsWithNoFeedingToday->pluck('name')->join(', ') }}
                </p>
            </div>
        </div>
        @endif

        @if($todaySummary->isNotEmpty())
        <div class="flex flex-wrap gap-2">
            @foreach($todaySummary as $s)
            <div class="rounded-lg border border-green-100 bg-green-50 px-3 py-2 text-sm">
                <span class="font-medium text-green-800">{{ $s->pond->name }}</span>
                <span class="text-green-600"> — {{ number_format($s->total_kg, 1) }} kg</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <!-- Filters -->
    <form method="GET" class="mb-4 flex flex-wrap gap-3">
        <select name="pond_id" class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
            <option value="">All ponds</option>
            @foreach($ponds as $p)
                <option value="{{ $p->id }}" @selected(request('pond_id') == $p->id)>{{ $p->name }}</option>
            @endforeach
        </select>
        <input type="date" name="date_from" value="{{ request('date_from') }}"
               class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
        <input type="date" name="date_to" value="{{ request('date_to') }}"
               class="rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
        <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Filter</button>
    </form>

    <!-- Logs table -->
    @if($logs->isEmpty())
        <x-empty-state title="No feeding logs yet">
            <x-slot:icon><svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082"/></svg></x-slot:icon>
        </x-empty-state>
    @else
    <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">Date & Time</th>
                    <th class="px-5 py-3 text-left">Pond</th>
                    <th class="px-5 py-3 text-left">Feed</th>
                    <th class="px-5 py-3 text-right">Quantity</th>
                    <th class="px-5 py-3 text-center">Response</th>
                    <th class="px-5 py-3 text-left">Logged by</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($logs as $log)
                <tr class="hover:bg-gray-50">
                    <td class="px-5 py-3 whitespace-nowrap">
                        <p class="font-medium text-gray-900">{{ $log->feed_date->format('d M Y') }}</p>
                        <p class="text-xs text-gray-400 capitalize">{{ $log->feed_time }}</p>
                    </td>
                    <td class="px-5 py-3">
                        <a href="{{ route('ponds.show', $log->pond) }}" class="font-medium text-primary-600 hover:underline">
                            {{ $log->pond->name }}
                        </a>
                    </td>
                    <td class="px-5 py-3">
                        <p class="text-gray-900">{{ $log->feed_brand }}</p>
                        <p class="text-xs text-gray-400">{{ $log->feed_type }}</p>
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-900">{{ $log->quantity_kg }} kg</td>
                    <td class="px-5 py-3 text-center">
                        @if($log->feeding_response)
                        @php
                            $rc = match($log->feeding_response) {
                                'excellent' => 'bg-green-100 text-green-800',
                                'good' => 'bg-blue-100 text-blue-800',
                                'poor' => 'bg-amber-100 text-amber-800',
                                'refused' => 'bg-red-100 text-red-800',
                            };
                        @endphp
                        <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $rc }} capitalize">{{ $log->feeding_response }}</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-gray-500 text-xs">{{ $log->logger?->name }}</td>
                    <td class="px-5 py-3 text-right">
                        @if(auth()->user()->hasRole(['admin','manager']))
                        <form method="POST" action="{{ route('feeding.destroy', $log) }}"
                              onsubmit="return confirm('Delete this feeding log?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-xs text-red-400 hover:text-red-600">Delete</button>
                        </form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $logs->links() }}</div>
    @endif
</x-app-layout>
