<x-app-layout>
    <x-slot:heading>Start New Cycle — {{ $pond->name }}</x-slot:heading>

    <div class="mb-4 flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('ponds.index') }}" class="hover:text-gray-700">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>
        <a href="{{ route('ponds.show', $pond) }}" class="hover:text-gray-700">{{ $pond->name }}</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">Start Cycle #{{ $nextCycleNumber }}</span>
    </div>

    <div class="max-w-2xl">
        <div class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
            <form method="POST" action="{{ route('cycles.store', $pond) }}" x-data="stockingForm()" class="space-y-6">
                @csrf

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stocking Date <span class="text-red-500">*</span></label>
                    <input type="date" name="stocking_date" value="{{ old('stocking_date', today()->toDateString()) }}"
                           max="{{ today()->toDateString() }}"
                           class="w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500 @error('stocking_date') border-red-300 @enderror">
                    @error('stocking_date') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Species rows -->
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="text-sm font-medium text-gray-700">Species <span class="text-red-500">*</span></label>
                        <button type="button" @click="addSpecies()"
                                class="text-xs font-medium text-primary-600 hover:underline">+ Add Species</button>
                    </div>
                    <p class="mb-3 text-xs text-gray-400">Add one row per species (polyculture supported).</p>

                    <template x-for="(sp, i) in species" :key="i">
                        <div class="mb-4 rounded-xl border border-gray-100 bg-gray-50 p-4 relative">
                            <button type="button" x-show="species.length > 1" @click="removeSpecies(i)"
                                    class="absolute right-3 top-3 text-gray-300 hover:text-red-500">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                            <p class="text-xs font-semibold text-gray-500 mb-3" x-text="'Species ' + (i+1)"></p>

                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="text-xs text-gray-600">Species Name *</label>
                                    <input type="text" :name="'species['+i+'][name]'" x-model="sp.name"
                                           list="species-list"
                                           class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                           placeholder="e.g. Catfish">
                                    <datalist id="species-list">
                                        @foreach($species as $s)
                                            <option value="{{ $s }}">
                                        @endforeach
                                    </datalist>
                                </div>
                                <div>
                                    <label class="text-xs text-gray-600">Strain / Variety</label>
                                    <input type="text" :name="'species['+i+'][strain_variety]'" x-model="sp.strain"
                                           class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500"
                                           placeholder="e.g. Cameroon">
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="text-xs text-gray-600">Quantity (fingerlings) *</label>
                                    <input type="number" :name="'species['+i+'][quantity]'" x-model.number="sp.quantity"
                                           min="1" class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-600">Avg Weight (g) *</label>
                                    <input type="number" :name="'species['+i+'][avg_weight_g]'" x-model.number="sp.avgWeight"
                                           step="0.1" min="0.1" class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="text-xs text-gray-600">Cost/Fingerling (₦) *</label>
                                    <input type="number" :name="'species['+i+'][cost_per_fingerling]'" x-model.number="sp.costPerFingerling"
                                           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">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-600">Transport Cost (₦)</label>
                                    <input type="number" :name="'species['+i+'][transport_cost]'" x-model.number="sp.transportCost"
                                           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">
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="text-xs text-gray-600">Supplier Name *</label>
                                    <input type="text" :name="'species['+i+'][supplier_name]'" x-model="sp.supplierName"
                                           class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-600">Supplier Contact</label>
                                    <input type="text" :name="'species['+i+'][supplier_contact]'" x-model="sp.supplierContact"
                                           class="mt-1 w-full rounded-lg border-gray-200 text-sm focus:border-primary-500 focus:ring-primary-500">
                                </div>
                            </div>

                            <div class="rounded-lg bg-white border border-gray-100 px-3 py-2 text-xs text-gray-600">
                                Total: <span class="font-semibold text-gray-900"
                                    x-text="sp.quantity && sp.costPerFingerling ? '₦' + (sp.quantity * sp.costPerFingerling + (sp.transportCost||0)).toLocaleString() : '—'"></span>
                                &nbsp;·&nbsp;
                                Biomass: <span class="font-semibold text-gray-900"
                                    x-text="sp.quantity && sp.avgWeight ? (sp.quantity * sp.avgWeight / 1000).toFixed(1) + ' kg' : '—'"></span>
                            </div>
                        </div>
                    </template>
                </div>

                <div class="flex items-center gap-3 border-t border-gray-100 pt-5">
                    <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">
                        Start Cycle
                    </button>
                    <a href="{{ route('ponds.show', $pond) }}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>

@push('scripts')
<script>
function stockingForm() {
    return {
        species: [{name:'', strain:'', quantity: null, avgWeight: null, costPerFingerling: null, transportCost: null, supplierName:'', supplierContact:''}],
        addSpecies() {
            this.species.push({name:'', strain:'', quantity: null, avgWeight: null, costPerFingerling: null, transportCost: null, supplierName:'', supplierContact:''});
        },
        removeSpecies(i) {
            this.species.splice(i, 1);
        }
    }
}
</script>
@endpush
