<x-app-layout>
    <x-slot:heading>Harvest — {{ $harvest->pond->name }}</x-slot:heading>

    <div class="mb-4 flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('harvest.index') }}" class="hover:text-gray-700">Harvest</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 class="text-gray-900">{{ $harvest->pond->name }} — {{ $harvest->harvest_date->format('d M Y') }}</span>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="space-y-5 lg:col-span-2">

            <!-- Harvest stats -->
            <div class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
                <h3 class="font-semibold text-gray-900 mb-4">Harvest Details</h3>
                <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                    <div>
                        <p class="text-xs text-gray-500">Total Weight</p>
                        <p class="text-xl font-bold text-gray-900">{{ number_format($harvest->total_weight_kg, 1) }} kg</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Fish Harvested</p>
                        <p class="text-xl font-bold text-gray-900">{{ number_format($harvest->total_fish_harvested) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Avg Weight</p>
                        <p class="text-xl font-bold text-gray-900">{{ number_format($harvest->avg_weight_g) }}g</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Type</p>
                        <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium {{ $harvest->harvest_type === 'full_harvest' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800' }}">
                            {{ ucwords(str_replace('_',' ',$harvest->harvest_type)) }}
                        </span>
                    </div>
                </div>
                @if($harvest->harvest_notes)
                <p class="mt-4 text-sm text-gray-600 border-t border-gray-50 pt-4">{{ $harvest->harvest_notes }}</p>
                @endif
            </div>

            <!-- Sales records -->
            <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
                <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
                    <h3 class="font-semibold text-gray-900">Sales</h3>
                    <a href="{{ route('sales.create', ['harvest_id' => $harvest->id]) }}"
                       class="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:underline">
                        + Add Sale
                    </a>
                </div>

                @if($harvest->salesRecords->isEmpty())
                <p class="px-5 py-6 text-center text-sm text-gray-400">No sales recorded yet.</p>
                @else
                <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">Buyer</th>
                            <th class="px-5 py-3 text-right">Qty (kg)</th>
                            <th class="px-5 py-3 text-right">Price/kg</th>
                            <th class="px-5 py-3 text-right">Total</th>
                            <th class="px-5 py-3 text-center">Payment</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($harvest->salesRecords as $sale)
                        <tr class="hover:bg-gray-50">
                            <td class="px-5 py-3 text-gray-700">{{ $sale->sale_date->format('d M Y') }}</td>
                            <td class="px-5 py-3 font-medium text-gray-900">{{ $sale->buyer_name }}</td>
                            <td class="px-5 py-3 text-right text-gray-700">{{ number_format($sale->quantity_kg, 1) }}</td>
                            <td class="px-5 py-3 text-right text-gray-700">₦{{ number_format($sale->price_per_kg_naira) }}</td>
                            <td class="px-5 py-3 text-right font-semibold text-gray-900">₦{{ number_format($sale->total_amount_naira) }}</td>
                            <td class="px-5 py-3 text-center">
                                <x-status-badge :status="$sale->payment_status" size="xs" />
                                @if($sale->payment_status !== 'paid')
                                <p class="text-xs text-red-600 mt-0.5">Balance: ₦{{ number_format($sale->balance_owed) }}</p>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-gray-50 border-t border-gray-100">
                        <tr>
                            <td colspan="4" class="px-5 py-3 font-semibold text-gray-700 text-right">Total Revenue</td>
                            <td class="px-5 py-3 text-right font-bold text-green-700">₦{{ number_format($harvest->total_revenue) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                @endif
            </div>

        </div>

        <div>
            <div class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Pond</dt>
                        <dd><a href="{{ route('ponds.show', $harvest->pond) }}" class="font-medium text-primary-600 hover:underline">{{ $harvest->pond->name }}</a></dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Cycle</dt>
                        <dd><a href="{{ route('cycles.show', [$harvest->pond, $harvest->cycle]) }}" class="font-medium text-primary-600 hover:underline">Cycle #{{ $harvest->cycle->cycle_number }}</a></dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Mortality during cycle</dt>
                        <dd class="font-medium text-gray-900">{{ number_format($harvest->total_mortality_count) }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Logged by</dt>
                        <dd class="font-medium text-gray-900">{{ $harvest->logger?->name }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</x-app-layout>
