@props([
    'categories' => [],
    'selected'   => [],
    'label'      => __('Categorias de serviços'),
    'hint'       => __('Selecione tudo o que o seu estabelecimento oferece.'),
])

@php
    $selected = array_map('intval', (array) $selected);
    $list     = array_map(fn($c) => (object)(array) $c, (array) $categories);
@endphp

<div class="flex flex-col gap-3">
    <div>
        <p class="text-xs font-bold uppercase tracking-widest text-brand-green m-0">{{ $label }}</p>
        <p class="text-gray-500 text-xs mt-1 m-0">{{ $hint }}</p>
    </div>

    @if (count($list) > 0)
        <div class="flex flex-wrap gap-2">
            @foreach ($list as $category)
                @php $isOn = in_array((int) $category->idcategory, $selected, true); @endphp
                <label class="category-chip inline-flex items-center gap-2 px-3.5 py-2 rounded-xl border cursor-pointer transition-all duration-200 select-none
                    {{ $isOn
                        ? 'border-brand-green/60 bg-brand-green/10 text-white'
                        : 'border-white/10 bg-white/3 text-gray-400 hover:border-white/25 hover:text-white' }}">
                    <input type="checkbox" name="categories[]" value="{{ $category->idcategory }}"
                        @checked($isOn)
                        onchange="toggleCategoryChip(this)"
                        class="accent-brand-green w-3.5 h-3.5 shrink-0">
                    <span class="text-sm font-medium">{{ $category->name }}</span>
                </label>
            @endforeach
        </div>
    @else
        <p class="text-gray-500 text-xs">{{ __('Nenhuma categoria disponível no momento.') }}</p>
    @endif
</div>

@once
<script>
    const CATEGORY_CHIP_ON  = 'category-chip inline-flex items-center gap-2 px-3.5 py-2 rounded-xl border cursor-pointer transition-all duration-200 select-none border-brand-green/60 bg-brand-green/10 text-white';
    const CATEGORY_CHIP_OFF = 'category-chip inline-flex items-center gap-2 px-3.5 py-2 rounded-xl border cursor-pointer transition-all duration-200 select-none border-white/10 bg-white/3 text-gray-400 hover:border-white/25 hover:text-white';

    function toggleCategoryChip(input) {
        input.closest('.category-chip').className = input.checked ? CATEGORY_CHIP_ON : CATEGORY_CHIP_OFF;
    }

    function selectedCategories() {
        return Array.from(document.querySelectorAll('input[name="categories[]"]:checked')).map(el => el.value);
    }
</script>
@endonce