<x-app-layout>
    <x-slot:heading>Outstanding Receivables</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>Receivables</span>
    </div>
    <div class="mb-4 flex items-center justify-between rounded-xl border border-orange-200 bg-orange-50 px-5 py-4">
        <p class="font-semibold text-orange-800">Total Outstanding</p>
        <p class="text-xl font-bold text-orange-800">₦{{ number_format($totalOutstanding) }}</p>
    </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">Date</th>
                    <th class="px-5 py-3 text-left">Pond</th>
                    <th class="px-5 py-3 text-left">Buyer</th>
                    <th class="px-5 py-3 text-right">Invoice</th>
                    <th class="px-5 py-3 text-right">Received</th>
                    <th class="px-5 py-3 text-right">Balance</th>
                    <th class="px-5 py-3 text-center">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($sales as $s)
                <tr class="hover:bg-gray-50 @if($s->is_overdue) bg-red-50 @endif">
                    <td class="px-5 py-3 text-gray-700">{{ $s->sale_date->format('d M Y') }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ $s->harvest?->pond?->name }}</td>
                    <td class="px-5 py-3 font-medium text-gray-900">{{ $s->buyer_name }}</td>
                    <td class="px-5 py-3 text-right text-gray-900">₦{{ number_format($s->total_amount_naira) }}</td>
                    <td class="px-5 py-3 text-right text-gray-600">₦{{ number_format($s->amount_received_naira) }}</td>
                    <td class="px-5 py-3 text-right font-bold text-red-700">₦{{ number_format($s->balance_owed) }}</td>
                    <td class="px-5 py-3 text-center">
                        <x-status-badge :status="$s->payment_status" size="xs" />
                        @if($s->is_overdue) <p class="text-xs text-red-600 mt-0.5">Overdue</p> @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-5 py-6 text-center text-gray-400">No outstanding receivables.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-app-layout>
