{{--
  FILTERS GROUP
  Các variant: search, range-filter, filter-group
  Usage: <x-ui.filters type="search" ... /> hoặc <x-ui.filters type="range-filter" ... />
--}}
@props([
    'type' => 'search', // 'search' | 'range-filter' | 'filter-group'
    
    // search
    'id' => 'search',
    'placeholder' => 'Tìm kiếm...',
    'class' => '',
    
    // range-filter
    'minId' => 'min',
    'maxId' => 'max',
    'minPlaceholder' => 'Từ',
    'maxPlaceholder' => 'Đến',
    
    // filter-group
    'groupLabel' => '',
])

@switch($type)

    @case('search')
        <div class="filter-search-inline {{ $class }}">
            <div class="search-input-icon">
                @svg('fas-search', 'search-icon')
            </div>
            <input
                type="text"
                id="{{ $id }}"
                placeholder="{{ $placeholder }}"
                class="search-input"
            />
        </div>
        @break

    @case('range-filter')
        <div class="range-filter-inputs">
            <input
                type="text"
                id="{{ $minId }}"
                placeholder="{{ $minPlaceholder }}"
                class="range-input numeric-format"
                @input="window.onNumberInput($event)"
            />
            <span class="range-separator">-</span>
            <input
                type="text"
                id="{{ $maxId }}"
                placeholder="{{ $maxPlaceholder }}"
                class="range-input numeric-format"
                @input="window.onNumberInput($event)"
            />
        </div>
        @break

    @case('filter-group')
        <div class="filter-category">
            <div class="filter-category-title">{{ $groupLabel }}</div>
            <div class="filter-group">
                {{ $slot }}
            </div>
        </div>
        @break

@endswitch
