<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">

    @foreach ($chickens as $chicken)
        <div class="border rounded-xl bg-white shadow-sm hover:shadow-md transition overflow-hidden">
            <div class="p-4 flex items-center justify-between gap-4">
                <div class="font-semibold">
                    {{ $chicken->tag_code }}
                </div>

                <div class="flex items-center justify-end gap-3">
                    <a href="javascript:void(0)" wire:click="decreaseEgg({{ $chicken->id }})"
                        class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-lg hover:bg-gray-50 transition-colors">
                        -
                    </a>

                    <span class="text-sm font-bold w-6 text-center">
                        {{ $this->eggs[$chicken->id] ?? 0 }}
                    </span>

                    <a href="javascript:void(0)" wire:click="addEgg({{ $chicken->id }})"
                        class="w-8 h-8 rounded-full flex items-center justify-center text-white text-lg transition-colors bg-teal-500 hover:bg-teal-600">
                        +
                    </a>
                </div>
            </div>
        </div>
    @endforeach

</div>
