@props(['wire', 'categories' => null , 'multiple' => false , 'name' => 'category_id'  ])

<div class="space-y-1">
    @foreach ($categories as $category)
        @php
            $hasChildren  =  !empty($category['children']);
        @endphp
        <div class="{{ $category['parent_id'] == 0 ? 'mb-3' : '' }}" x-data="{ open: false }">
            <label
                for="category-{{$category['id']}}"
                @click="open = !open"
                class="
                    group flex items-center justify-between cursor-pointer
                    p-2 md:p-3 rounded-xl
                    border border-transparent
                    hover:border-gray-200 dark:hover:border-gray-700
                    hover:bg-gray-50 dark:hover:bg-gray-800
                    transition
                "
            >
                {{-- Left --}}
                <div class="flex items-center gap-3">
                    @if($category['image'])
                        <img
                            class="
                            w-9 h-9 md:w-11 md:h-11
                            object-cover rounded-lg
                            bg-gray-100 dark:bg-gray-800
                        "
                            src="{{ $category['image'] ? $category['image'] : '' }}"
                            alt="{{ $category['name'] }}"
                            loading="lazy"
                        >
                    @else
                        <div class="
                            flex-shrink-0 w-8 h-8 md:w-10 md:h-10
                            rounded-lg bg-gray-100 dark:bg-gray-800
                            flex items-center justify-center
                            ring-1 ring-black/5 dark:ring-white/10
                        ">
                            <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M3 7a2 2 0 012-2h3.28a2 2 0 011.42.59l1.58 1.58A2 2 0 0012.72 7.75H19a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                            </svg>
                        </div>
                    @endif

                    <div>
                        <p class="text-sm md:text-base font-medium text-gray-900 dark:text-gray-100">
                            {{ $category['name'] }}
                            @if ($hasChildren)
                                <span class=" flex-shrink-0 text-xs font-medium px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
                                    {{ count($category['children']) }}
                                </span>
                            @endif
                        </p>
                        <p class="text-xs text-gray-500 font-light">
                            {{ $category['description'] ?? '' }}
                        </p>
                    </div>
                </div>

                @if($hasChildren)
                    {{-- Right --}}
                    <x-isax-linear.arrow-left-1
                        class=" w-5 h-5 text-gray-400 dark:text-gray-500 transition-transform" ::class="open ? '-rotate-90' : ''"/>
                @else
                    @if($multiple)
                        <input type="checkbox" id="category-{{$category['id']}}" name="{{ $name }}[]">
                    @else
                        <input
                            @if($wire)
                                wire:model.live="{{$name}}"
                            @endif
                            value="{{ $category['id'] }}"
                            type="radio"
                            id="category-{{$category['id']}}"
                            name="{{ $name }}">
                    @endif
                @endif
            </label>

            @if ($category['children'] !== null && !empty($category['children']))
                <div x-show="open" x-cloak x-collapse
                     class="ms-6 md:ms-10 mt-1 border-r border-gray-200 dark:border-gray-700 ps-3 md:ps-4">
                    <x-alizam.category-tree-input :categories="$category['children']" :$wire/>
                </div>

            @endif

        </div>
    @endforeach
</div>