<x-app-layout>
    <x-slot:heading>Bulk Log</x-slot:heading>

    <div class="mb-6 flex items-center gap-2 text-sm">
        <a href="{{ route('ponds.index') }}" class="text-gray-400 hover:text-gray-600">Ponds</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-700">Bulk Log</span>
    </div>

    <div class="mb-5 flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50 px-5 py-4">
        <svg class="mt-0.5 h-5 w-5 shrink-0 text-blue-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
        </svg>
        <p class="text-sm text-blue-700">
            Select one or more active ponds, choose an operation type, fill in the details once,
            and the same record will be created for every selected pond.
        </p>
    </div>

    @if($ponds->isEmpty())
    <div class="rounded-xl border border-dashed border-gray-200 bg-white p-10 text-center">
        <p class="text-gray-400">No active ponds found. Ponds must have status "active" to bulk-log.</p>
        <a href="{{ route('ponds.index') }}" class="mt-3 inline-flex text-sm font-medium text-primary-600 hover:underline">
            ← Back to ponds
        </a>
    </div>
    @else
    <div x-data="{
            operation: '{{ old('operation', 'feeding') }}',
            selectedPonds: {{ old('pond_ids') ? json_encode(array_map('intval', old('pond_ids'))) : '[]' }},
            togglePond(id) {
                const idx = this.selectedPonds.indexOf(id);
                idx === -1 ? this.selectedPonds.push(id) : this.selectedPonds.splice(idx, 1);
            },
            selectAll(ids) { this.selectedPonds = ids.slice(); },
            clearAll() { this.selectedPonds = []; }
         }">

        <form method="POST" action="{{ route('ponds.bulk-log.store') }}">
            @csrf

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

                {{-- LEFT: pond selection ──────────────────────────────── --}}
                <div class="lg:col-span-2">
                    <div class="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between border-b border-gray-50 px-5 py-4">
                            <h2 class="font-semibold text-gray-900">Select Ponds</h2>
                            <div class="flex items-center gap-3 text-xs">
                                <button type="button"
                                        @click="selectAll({{ $ponds->pluck('id')->toJson() }})"
                                        class="font-medium text-primary-600 hover:underline">All</button>
                                <span class="text-gray-300">|</span>
                                <button type="button"
                                        @click="clearAll()"
                                        class="font-medium text-gray-500 hover:text-gray-700">Clear</button>
                            </div>
                        </div>

                        <div class="divide-y divide-gray-50">
                            @foreach($ponds as $pond)
                            @php
                                $cycle = $pond->activeCycle;
                                $species = $cycle
                                    ? $cycle->stockingRecords->map(fn($sr) => $sr->fish_local_name ?: $sr->species)->join(' · ')
                                    : null;
                            @endphp
                            <label class="flex cursor-pointer items-start gap-3 px-5 py-4 hover:bg-gray-50 transition-colors"
                                   :class="selectedPonds.includes({{ $pond->id }}) ? 'bg-primary-50 hover:bg-primary-50' : ''">
                                <input type="checkbox"
                                       name="pond_ids[]"
                                       value="{{ $pond->id }}"
                                       :checked="selectedPonds.includes({{ $pond->id }})"
                                       @change="togglePond({{ $pond->id }})"
                                       class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2">
                                        <span class="font-medium text-gray-900 text-sm">{{ $pond->name }}</span>
                                        <span class="font-mono text-xs text-gray-400">{{ $pond->pond_code }}</span>
                                    </div>
                                    @if($species)
                                    <p class="mt-0.5 text-xs text-gray-500 truncate">{{ $species }}</p>
                                    @endif
                                    @if($cycle)
                                    <p class="text-xs text-primary-600">Cycle #{{ $cycle->cycle_number }} · Day {{ $cycle->days_elapsed }}</p>
                                    @endif
                                </div>
                            </label>
                            @endforeach
                        </div>

                        <div class="border-t border-gray-50 bg-gray-50 px-5 py-3">
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold text-primary-700" x-text="selectedPonds.length"></span>
                                pond(s) selected
                            </p>
                        </div>
                    </div>
                    @error('pond_ids')
                    <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- RIGHT: operation + form ───────────────────────────── --}}
                <div class="lg:col-span-3 space-y-5">

                    {{-- Operation type selector --}}
                    <div class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
                        <h2 class="mb-4 font-semibold text-gray-900">Operation Type</h2>
                        <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                            @foreach([
                                ['feeding',       '🐟', 'Feeding',      'bg-green-50  border-green-200  text-green-700',  'border-green-500  bg-green-50'],
                                ['water_quality', '🔬', 'Water Quality', 'bg-blue-50   border-blue-200   text-blue-700',   'border-blue-500   bg-blue-50'],
                                ['water_change',  '💧', 'Water Change',  'bg-cyan-50   border-cyan-200   text-cyan-700',   'border-cyan-500   bg-cyan-50'],
                                ['mortality',     '🏥', 'Mortality',     'bg-red-50    border-red-200    text-red-700',    'border-red-500    bg-red-50'],
                            ] as [$val, $icon, $label, $baseCss, $activeCss])
                            <label class="flex cursor-pointer flex-col items-center gap-1.5 rounded-xl border-2 px-3 py-4 text-center transition-all text-xs font-medium"
                                   :class="operation === '{{ $val }}' ? '{{ $activeCss }}' : 'border-gray-100 bg-gray-50 text-gray-600 hover:border-gray-200'">
                                <input type="radio" name="operation" value="{{ $val }}"
                                       x-model="operation" class="sr-only">
                                <span class="text-2xl">{{ $icon }}</span>
                                {{ $label }}
                            </label>
                            @endforeach
                        </div>
                        @error('operation')
                        <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ── FEEDING fields ── --}}
                    <div x-show="operation === 'feeding'" x-cloak
                         class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm space-y-4">
                        <h3 class="font-semibold text-gray-900">🐟 Feeding Details</h3>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Date *</label>
                                <input type="date" name="feed_date"
                                       value="{{ old('feed_date', today()->toDateString()) }}"
                                       max="{{ today()->toDateString() }}"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('feed_date') border-red-300 @enderror">
                                @error('feed_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Time *</label>
                                <select name="feed_time" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                                    @foreach(['morning','afternoon','evening'] as $t)
                                    <option value="{{ $t }}" @selected(old('feed_time') === $t)>{{ ucfirst($t) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Feed Brand *</label>
                                <input type="text" name="feed_brand" value="{{ old('feed_brand') }}"
                                       placeholder="e.g. Skretting, Coppens"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('feed_brand') border-red-300 @enderror">
                                @error('feed_brand')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Feed Type *</label>
                                <input type="text" name="feed_type" value="{{ old('feed_type') }}"
                                       placeholder="e.g. 2mm pellet, grower"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('feed_type') border-red-300 @enderror">
                                @error('feed_type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Quantity per Pond (kg) *</label>
                                <input type="number" name="quantity_kg" step="0.01" min="0.1"
                                       value="{{ old('quantity_kg') }}"
                                       placeholder="e.g. 2.50"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('quantity_kg') border-red-300 @enderror">
                                @error('quantity_kg')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Feeding Response</label>
                                <select name="feeding_response" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                                    <option value="">— Not recorded —</option>
                                    @foreach(['excellent','good','poor','refused'] as $r)
                                    <option value="{{ $r }}" @selected(old('feeding_response') === $r)>{{ ucfirst($r) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-gray-700">Notes</label>
                            <textarea name="notes" rows="2" placeholder="Any observations…"
                                      class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">{{ old('notes') }}</textarea>
                        </div>
                    </div>

                    {{-- ── WATER QUALITY fields ── --}}
                    <div x-show="operation === 'water_quality'" x-cloak
                         class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm space-y-4">
                        <h3 class="font-semibold text-gray-900">🔬 Water Quality Reading</h3>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Reading Date *</label>
                                <input type="date" name="reading_date"
                                       value="{{ old('reading_date', today()->toDateString()) }}"
                                       max="{{ today()->toDateString() }}"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('reading_date') border-red-300 @enderror">
                                @error('reading_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Time *</label>
                                <input type="time" name="reading_time"
                                       value="{{ old('reading_time', now()->format('H:i')) }}"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('reading_time') border-red-300 @enderror">
                                @error('reading_time')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">pH *</label>
                                <input type="number" name="ph" step="0.1" min="0" max="14"
                                       value="{{ old('ph') }}" placeholder="7.2"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('ph') border-red-300 @enderror">
                                @error('ph')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">DO (mg/L) *</label>
                                <input type="number" name="dissolved_oxygen_mgl" step="0.1" min="0"
                                       value="{{ old('dissolved_oxygen_mgl') }}" placeholder="5.5"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('dissolved_oxygen_mgl') border-red-300 @enderror">
                                @error('dissolved_oxygen_mgl')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Temp (°C) *</label>
                                <input type="number" name="temperature_c" step="0.1" min="0" max="50"
                                       value="{{ old('temperature_c') }}" placeholder="28"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('temperature_c') border-red-300 @enderror">
                                @error('temperature_c')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Ammonia (ppm)</label>
                                <input type="number" name="ammonia_ppm" step="0.001" min="0"
                                       value="{{ old('ammonia_ppm') }}" placeholder="0.025"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Corrective Action</label>
                                <input type="text" name="corrective_action" value="{{ old('corrective_action') }}"
                                       placeholder="If any…"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                            </div>
                        </div>
                    </div>

                    {{-- ── WATER CHANGE fields ── --}}
                    <div x-show="operation === 'water_change'" x-cloak
                         class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm space-y-4">
                        <h3 class="font-semibold text-gray-900">💧 Water Change Details</h3>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Date *</label>
                                <input type="date" name="change_date"
                                       value="{{ old('change_date', today()->toDateString()) }}"
                                       max="{{ today()->toDateString() }}"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('change_date') border-red-300 @enderror">
                                @error('change_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Type *</label>
                                <select name="change_type" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                                    <option value="partial" @selected(old('change_type','partial')==='partial')>Partial</option>
                                    <option value="full" @selected(old('change_type')==='full')>Full</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">% Changed</label>
                                <input type="number" name="percentage_changed" step="1" min="1" max="100"
                                       value="{{ old('percentage_changed') }}" placeholder="30"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Reason</label>
                                <input type="text" name="reason" value="{{ old('reason') }}"
                                       placeholder="Routine, High ammonia…"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                            </div>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-gray-700">Notes</label>
                            <textarea name="notes" rows="2" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">{{ old('notes') }}</textarea>
                        </div>
                    </div>

                    {{-- ── MORTALITY fields ── --}}
                    <div x-show="operation === 'mortality'" x-cloak
                         class="rounded-xl border border-gray-100 bg-white p-5 shadow-sm space-y-4">
                        <h3 class="font-semibold text-gray-900">🏥 Mortality Details</h3>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Date *</label>
                                <input type="date" name="log_date"
                                       value="{{ old('log_date', today()->toDateString()) }}"
                                       max="{{ today()->toDateString() }}"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('log_date') border-red-300 @enderror">
                                @error('log_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Dead Count (per pond) *</label>
                                <input type="number" name="dead_count" min="1"
                                       value="{{ old('dead_count') }}" placeholder="e.g. 5"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 @error('dead_count') border-red-300 @enderror">
                                @error('dead_count')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Est. Avg Weight (g)</label>
                                <input type="number" name="estimated_avg_weight_g" step="0.1" min="0"
                                       value="{{ old('estimated_avg_weight_g') }}" placeholder="e.g. 250"
                                       class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-gray-700">Probable Cause</label>
                                <select name="probable_cause" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">
                                    <option value="">— Unknown —</option>
                                    @foreach(['disease','water_quality','predator','injury','unknown'] as $c)
                                    <option value="{{ $c }}" @selected(old('probable_cause')===$c)>{{ ucwords(str_replace('_',' ',$c)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-gray-700">Notes / Symptoms</label>
                            <textarea name="notes" rows="2" class="w-full rounded-lg border-gray-200 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500">{{ old('notes') }}</textarea>
                        </div>
                    </div>

                    {{-- Submit bar --}}
                    <div class="flex items-center justify-between rounded-xl border border-gray-100 bg-white px-5 py-4 shadow-sm">
                        <div class="text-sm text-gray-600">
                            Logging
                            <span class="font-semibold text-primary-700" x-text="operation.replace('_', ' ')"></span>
                            for
                            <span class="font-semibold text-primary-700" x-text="selectedPonds.length"></span>
                            pond(s)
                        </div>
                        <div class="flex items-center gap-3">
                            <a href="{{ route('ponds.index') }}"
                               class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                                Cancel
                            </a>
                            <button type="submit"
                                    :disabled="selectedPonds.length === 0"
                                    :class="selectedPonds.length === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-700'"
                                    class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm transition-colors">
                                Submit Bulk Log
                            </button>
                        </div>
                    </div>
                </div>
            </div>{{-- /grid --}}
        </form>
    </div>{{-- /x-data --}}
    @endif
</x-app-layout>
