<x-app-layout>
    <x-slot:heading>Record Water Quality Reading</x-slot:heading>

    <div class="max-w-xl">
        <div class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
            <form method="POST" action="{{ route('water-quality.store') }}" class="space-y-5">
                @csrf

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Pond <span class="text-red-500">*</span></label>
                        <select name="pond_id" class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                            <option value="">Select pond…</option>
                            @foreach($ponds as $pond)
                                <option value="{{ $pond->id }}" @selected($selectedPondId == $pond->id)>{{ $pond->name }}</option>
                            @endforeach
                        </select>
                        @error('pond_id') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Date <span class="text-red-500">*</span></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 focus:border-primary-500 focus:ring-primary-500">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Time <span class="text-red-500">*</span></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 focus:border-primary-500 focus:ring-primary-500">
                </div>

                <div class="rounded-xl bg-gray-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-3">Parameters</p>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label class="text-xs text-gray-600">pH <span class="text-red-500">*</span></label>
                            <input type="number" name="ph" value="{{ old('ph') }}" step="0.01" min="0" max="14"
                                   class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                   placeholder="6.5–8.5">
                            @error('ph') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">DO mg/L <span class="text-red-500">*</span></label>
                            <input type="number" name="dissolved_oxygen_mgl" value="{{ old('dissolved_oxygen_mgl') }}"
                                   step="0.01" min="0"
                                   class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                   placeholder=">4.0">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Temp °C <span class="text-red-500">*</span></label>
                            <input type="number" name="temperature_c" value="{{ old('temperature_c') }}"
                                   step="0.1" min="0" max="50"
                                   class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                   placeholder="25–30">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Ammonia ppm</label>
                            <input type="number" name="ammonia_ppm" value="{{ old('ammonia_ppm') }}"
                                   step="0.0001" min="0"
                                   class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                   placeholder="<0.05">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Nitrite ppm</label>
                            <input type="number" name="nitrite_ppm" value="{{ old('nitrite_ppm') }}"
                                   step="0.0001" min="0"
                                   class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                   placeholder="<0.1">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Turbidity</label>
                            <select name="turbidity" class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                <option value="">—</option>
                                @foreach(['clear','slightly_turbid','turbid','very_turbid'] as $t)
                                    <option value="{{ $t }}" @selected(old('turbidity') === $t)>{{ ucwords(str_replace('_',' ',$t)) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="text-xs text-gray-600">Water Colour</label>
                        <input type="text" name="water_colour" value="{{ old('water_colour') }}"
                               class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                               placeholder="e.g. green-brown, clear">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Corrective Action Taken</label>
                    <textarea name="corrective_action" rows="2"
                              class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                              placeholder="e.g. Added 2kg lime, partial water change…">{{ old('corrective_action') }}</textarea>
                </div>

                <!-- Safe-range reference -->
                <div class="rounded-xl border border-blue-100 bg-blue-50 p-3 text-xs text-blue-700">
                    <p class="font-semibold mb-1">Safe Ranges (Catfish)</p>
                    <div class="grid grid-cols-2 gap-1">
                        <span>pH: 6.5 – 8.5</span>
                        <span>DO: &gt; 4.0 mg/L</span>
                        <span>Temp: 25 – 30°C</span>
                        <span>Ammonia: &lt; 0.05 ppm</span>
                    </div>
                </div>

                <div class="flex items-center gap-3 border-t border-gray-100 pt-4">
                    <button type="submit"
                            class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white hover:bg-primary-700">
                        Save Reading
                    </button>
                    <a href="{{ route('water-quality.index') }}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
