@props([
    'name' => 'status-filter',
    'options' => [],
    'enum' => null,
    'allLabel' => null
])

@php
    $items = $enum ? $enum::options() : $options;
@endphp

<div class="status-filter-container d-flex flex-wrap gap-1 {{ $name }}" role="group">
    <input type="hidden" name="{{ $name }}" value="">
    <button type="button" value="" class="btn btn-sm status-filter {{ $name }} active">
        {{ $allLabel ?? __('dashboard.all') }}
    </button>
    @foreach($items as $option)
        <button type="button" value="{{ $option['value'] }}" class="btn btn-sm status-filter {{ $name }}">
            {{ $option['label'] }}
        </button>
    @endforeach
</div>

@pushOnce('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.status-filter-container').forEach(function(container) {
        var hiddenInput = container.querySelector('input[type="hidden"]');
        var buttons = container.querySelectorAll('button.status-filter');

        buttons.forEach(function(btn) {
            btn.addEventListener('click', function() {
                buttons.forEach(function(b) { b.classList.remove('active'); });
                btn.classList.add('active');
                if (hiddenInput) {
                    hiddenInput.value = btn.getAttribute('value') || '';
                }
            });
        });
    });
});
</script>
@endPushOnce