{{-- Modern Condition Filter Component --}}
@props(['availableConditions', 'selectedConditions' => []])

<div class="px-5 py-4" x-data="{ open: true }">
    <button
        @click="open = !open"
        class="flex items-center justify-between w-full text-left group"
    >
        <div class="flex items-center gap-2">
            <h3 class="text-sm font-semibold text-zinc-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Condition</h3>
            @if(is_array($selectedConditions) && count($selectedConditions) > 0)
                <span class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-xs font-bold text-white bg-indigo-600 rounded-full">
                    {{ count($selectedConditions) }}
                </span>
            @endif
        </div>
        <div class="w-6 h-6 rounded-lg bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center group-hover:bg-indigo-100 dark:group-hover:bg-indigo-900/30 transition-colors">
            <svg class="w-3.5 h-3.5 text-zinc-500 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-all duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
    </button>

    <div x-show="open" x-collapse class="mt-4 space-y-1">
        @foreach($availableConditions as $condition)
            <label class="flex items-center gap-3 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900/20 p-2 rounded-xl transition-all group/item">
                <div class="relative flex items-center">
                    <input
                        type="checkbox"
                        wire:click="toggleCondition({{ $condition->id }})"
                        @if(is_array($selectedConditions) && in_array($condition->id, $selectedConditions)) checked @endif
                        class="peer sr-only"
                    >
                    <div class="w-5 h-5 rounded-lg border-2 border-zinc-300 dark:border-zinc-600 peer-checked:border-indigo-600 peer-checked:bg-indigo-600 transition-all flex items-center justify-center">
                        <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <span class="text-sm text-zinc-700 dark:text-zinc-300 group-hover/item:text-indigo-600 dark:group-hover/item:text-indigo-400 transition-colors">
                        {{ $condition->display_name }}
                    </span>
                </div>
                <span class="text-xs text-zinc-400 dark:text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-full">
                    {{ $condition->items_count }}
                </span>
            </label>
        @endforeach
    </div>
</div>