<x-app-layout>
    <x-slot:heading>Log Water Change</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">Log Water Change</span>
    </div>

    <div class="mx-auto max-w-xl">
        <div class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
            <div class="mb-6 flex items-center gap-3">
                <span class="text-3xl">💧</span>
                <div>
                    <h2 class="font-semibold text-gray-900 text-lg">Water Change Log</h2>
                    <p class="text-sm text-gray-500">Record a water change event for a pond</p>
                </div>
            </div>

            <form method="POST" action="{{ route('water-changes.store') }}" class="space-y-5">
                @csrf

                {{-- Pond selector --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">Pond <span class="text-red-500">*</span></label>
                    <select name="pond_id" required
                            class="w-full rounded-lg border-gray-200 shadow-sm text-sm focus:border-primary-500 focus:ring-primary-500 @error('pond_id') border-red-300 @enderror">
                        <option value="">— Select pond —</option>
                        @foreach($ponds as $pond)
                        <option value="{{ $pond->id }}"
                                @selected(old('pond_id', $selectedPondId) == $pond->id)>
                            {{ $pond->pond_code }} — {{ $pond->name }}
                            @if($pond->activeCycle)
                                (Cycle #{{ $pond->activeCycle->cycle_number }})
                            @endif
                        </option>
                        @endforeach
                    </select>
                    @error('pond_id')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Date --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">Date <span class="text-red-500">*</span></label>
                    <input type="date" name="change_date" required
                           value="{{ old('change_date', today()->toDateString()) }}"
                           max="{{ today()->toDateString() }}"
                           class="w-full rounded-lg border-gray-200 shadow-sm text-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>

                {{-- Change type --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">Type <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 gap-3">
                        @foreach(['partial' => 'Partial Change', 'full' => 'Full Change'] as $val => $label)
                        <label class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 hover:border-blue-300 hover:bg-blue-50 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
                            <input type="radio" name="change_type" value="{{ $val }}"
                                   @checked(old('change_type', 'partial') === $val)
                                   class="text-blue-600 focus:ring-blue-500">
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ $label }}</p>
                                <p class="text-xs text-gray-500">
                                    @if($val === 'partial') Replace part of the water @else Replace all water @endif
                                </p>
                            </div>
                        </label>
                        @endforeach
                    </div>
                    @error('change_type')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Percentage --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">% Changed (optional)</label>
                    <div class="relative">
                        <input type="number" name="percentage_changed" step="1" min="1" max="100"
                               value="{{ old('percentage_changed') }}"
                               placeholder="e.g. 30"
                               class="w-full rounded-lg border-gray-200 pr-10 shadow-sm text-sm focus:border-primary-500 focus:ring-primary-500 @error('percentage_changed') border-red-300 @enderror">
                        <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">%</span>
                    </div>
                    @error('percentage_changed')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Reason --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">Reason</label>
                    <input type="text" name="reason" value="{{ old('reason') }}"
                           placeholder="e.g. Routine, High ammonia, Pre-treatment…"
                           class="w-full rounded-lg border-gray-200 shadow-sm text-sm focus:border-primary-500 focus:ring-primary-500">
                </div>

                {{-- Notes --}}
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700">Notes</label>
                    <textarea name="notes" rows="3"
                              placeholder="Any additional observations…"
                              class="w-full rounded-lg border-gray-200 shadow-sm text-sm focus:border-primary-500 focus:ring-primary-500">{{ old('notes') }}</textarea>
                </div>

                <div class="flex items-center justify-between gap-3 pt-2">
                    <a href="{{ url()->previous() }}"
                       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"
                            class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white hover:bg-blue-700 shadow-sm">
                        💧 Save Water Change
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
