<div x-data="{
    isAccordionOpen: false,
    openCategory: null,
    toggleCategory(categoryId) {
        // Only allow one category to be open at a time
        if (this.openCategory === categoryId) {
            this.openCategory = null;
        } else {
            this.openCategory = categoryId;
        }
    }
}" class="w-full">

<style>
    [x-cloak] {
        display: none !important;
    }
</style>

    <!-- Accordion Header - Always Visible -->
    <div class="text-center">
        <button
            @click="isAccordionOpen = !isAccordionOpen"
            class="inline-flex items-center text-theme-muted hover:text-theme-primary px-4 ">
            <span class="text-sm ">
                {{ __('Browse categories') }}
            </span>
            <svg
                class="ml-1 w-4 h-4   transition-shadow duration-1000"
                :class="isAccordionOpen ? 'rotate-180' : ''"
                fill="currentColor"
                viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>

        <!-- Accordion Content - Hidden by Default -->
        <div
            x-show="isAccordionOpen"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 max-h-0"
            x-transition:enter-end="opacity-100 max-h-[2000px]"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 max-h-[2000px]"
            x-transition:leave-end="opacity-0 max-h-0"
            x-cloak
            class="overflow-hidden">

            <div class="px-4 pb-4">
                @if($tagCategories && count($tagCategories) > 0)
                    <!-- Top-level categories in horizontal layout -->
                    <div class="mt-4 mb-4">
                        <div class="flex flex-wrap gap-2">
                            @foreach($tagCategories as $category)
                                <div class="relative">
                                    <div class="flex items-center space-x-1">
                                        @if(!empty($category['children']))
                                            <button
                                                x-on:click="toggleCategory({{ $category['id'] }})"
                                                class="bg-{{ $category['color'] }}-400 hover:bg-{{ $category['color'] }}-200 text-black inline-flex items-center rounded-md px-3 py-2 text-sm transition duration-150 ease-in-out cursor-pointer
                                                {{ in_array($category['id'], $selectedCategories) ? 'ring-1 ring-black ring-offset-2' : '' }}"
                                                wire:click="selectCategory({{ $category['id'] }})">
                                                {{ $category['name'] }}
                                                <svg class="ml-1 w-4 h-4" :class="openCategory === {{ $category['id'] }} ? 'rotate-180' : ''" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                        @else
                                            <button
                                                wire:click="selectCategory({{ $category['id'] }})"
                                                class="bg-{{ $category['color'] }}-400 hover:bg-{{ $category['color'] }}-200 text-black inline-flex items-center rounded-md px-3 py-2 text-sm transition duration-150 ease-in-out cursor-pointer
                                                {{ in_array($category['id'], $selectedCategories) ? 'ring-1 ring-black ring-offset-2' : '' }}">
                                                {{ $category['name'] }}
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Subcategories for the single expanded parent category -->
                    @foreach($tagCategories as $category)
                        @if(!empty($category['children']))
                            <div x-show="openCategory === {{ $category['id'] }}"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 transform scale-95"
                                 x-transition:enter-end="opacity-100 transform scale-100"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 transform scale-100"
                                 x-transition:leave-end="opacity-0 transform scale-95"
                                 class="">
                                <div class="flex flex-wrap gap-2">
                                    @include('livewire.partials.category-tree-horizontal-multi', ['categories' => $category['children'], 'level' => 1])
                                </div>
                            </div>
                        @endif
                    @endforeach

                @else
                    <p class="text-theme-muted text-sm mt-4">{{ __('No categories available') }}</p>
                @endif

                @if(!empty($selectedCategories))
                    <div class="mt-4 pt-4">
                        <div class="text-left">
                            <span class="block font-medium text-sm text-theme-primary mb-2">{{ __('Selected categories') }}</span>
                            <div class="flex flex-wrap gap-2">
                                @foreach($selectedCategories as $selectedId)
                                    @php
                                        $selectedCategory = \App\Models\Category::find($selectedId);
                                    @endphp
                                    @if($selectedCategory)
                                        <span class="bg-{{ $selectedCategory->relatedColor }}-400 text-black inline-flex items-center rounded-md px-2 py-1 text-sm font-normal">
                                            {{ $selectedCategory->translation->name }}
                                            <button
                                                wire:click="removeCategory({{ $selectedId }})"
                                                class="ml-1 text-black hover:text-red-600 focus:outline-none">
                                                <svg class="w-2 h-2 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                        </span>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div class="flex items-center justify-end flex-wrap gap-3">
                            <div class="text-xs text-theme-muted">
                                {{ count($selectedCategories) }} {{ count($selectedCategories) === 1 ? __('category selected') : __('categories selected') }}
                            </div>
                            <x-jetstream.button wire:click="showCategoryResults">
                                {{ __('Show') }}
                                @if($total > 0)
                                    {{ $total }}
                                @endif
                            </x-jetstream.button>
                        </div>

                    </div>
                @endif
            </div>
        </div>
    </div>
</div>