<x-app-layout>
    <x-slot:heading>Health & Mortality</x-slot:heading>

    <x-page-header title="Health & Mortality" description="Track disease incidents, treatments, and fish deaths.">
        <x-slot:actions>
            <a href="{{ route('health.mortality.create') }}"
               class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                Log Mortality
            </a>
            <a href="{{ route('health.treatment.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">
                Log Treatment
            </a>
        </x-slot:actions>
    </x-page-header>

    <!-- Active withdrawal period alert -->
    @if($activeWithdrawals->isNotEmpty())
    <div class="mb-5 rounded-xl border border-red-200 bg-red-50 p-4">
        <p class="font-semibold text-red-800 mb-2">⚠️ Active Withdrawal Periods — Harvest Blocked</p>
        <div class="space-y-1">
            @foreach($activeWithdrawals as $w)
            <p class="text-sm text-red-700">
                <a href="{{ route('ponds.show', $w->pond) }}" class="font-medium underline">{{ $w->pond->name }}</a>
                — {{ $w->drug_chemical_name }} — Safe to harvest after:
                <strong>{{ $w->harvest_safe_after->format('d M Y') }}</strong>
            </p>
            @endforeach
        </div>
    </div>
    @endif

    <!-- 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>
        <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>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">

        <!-- Mortality logs -->
        <div>
            <h3 class="mb-3 font-semibold text-gray-900">Mortality Logs</h3>
            @if($mortalityLogs->isEmpty())
                <p class="text-sm text-gray-400">No mortality records.</p>
            @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-4 py-3 text-left">Date</th>
                            <th class="px-4 py-3 text-left">Pond</th>
                            <th class="px-4 py-3 text-right">Dead</th>
                            <th class="px-4 py-3 text-left">Cause</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($mortalityLogs as $m)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap font-medium text-gray-900">{{ $m->log_date->format('d M Y') }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('ponds.show', $m->pond) }}" class="text-primary-600 hover:underline">{{ $m->pond->name }}</a>
                            </td>
                            <td class="px-4 py-3 text-right font-bold text-red-600">{{ number_format($m->dead_count) }}</td>
                            <td class="px-4 py-3 text-gray-600 capitalize text-xs">{{ str_replace('_',' ',$m->probable_cause ?? '—') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-3">{{ $mortalityLogs->links() }}</div>
            @endif
        </div>

        <!-- Treatment logs -->
        <div>
            <h3 class="mb-3 font-semibold text-gray-900">Treatment Logs</h3>
            @if($treatmentLogs->isEmpty())
                <p class="text-sm text-gray-400">No treatment records.</p>
            @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-4 py-3 text-left">Date</th>
                            <th class="px-4 py-3 text-left">Pond</th>
                            <th class="px-4 py-3 text-left">Drug</th>
                            <th class="px-4 py-3 text-center">Withdrawal</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($treatmentLogs as $t)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap font-medium text-gray-900">{{ $t->treatment_date->format('d M Y') }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('ponds.show', $t->pond) }}" class="text-primary-600 hover:underline">{{ $t->pond->name }}</a>
                            </td>
                            <td class="px-4 py-3 text-gray-900 text-xs">{{ $t->drug_chemical_name }}</td>
                            <td class="px-4 py-3 text-center">
                                @if($t->isWithdrawalActive())
                                    <x-status-badge status="danger" size="xs" />
                                    <p class="text-xs text-red-600 mt-0.5">{{ $t->harvest_safe_after->format('d M') }}</p>
                                @elseif($t->harvest_safe_after)
                                    <span class="text-xs text-green-600">Cleared</span>
                                @else
                                    <span class="text-xs text-gray-400">—</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-3">{{ $treatmentLogs->links() }}</div>
            @endif
        </div>

    </div>
</x-app-layout>
