@props([
    'column' => [],
    'tableId' => null,
])

@php
    $filter = $column['filter'] ?? [];
    $key = $column['key'] ?? '';
    $label = $column['label'] ?? $key;
    $type = $filter['type'] ?? 'text';
    $filterId = ($tableId ?: 'erp_table').'_filter_'.$key;
    $triggerId = $filterId.'_trigger';
    $operatorId = $filterId.'_operator';
    $placeholder = $filter['placeholder'] ?? __('kview-ui-data::table.filter');
    $textOperators = [
        'contains' => __('kview-ui-data::table.filters.contains'),
        'equals' => __('kview-ui-data::table.filters.equals'),
        'starts' => __('kview-ui-data::table.filters.starts'),
        'ends' => __('kview-ui-data::table.filters.ends'),
        'not_contains' => __('kview-ui-data::table.filters.not_contains'),
        'not_equals' => __('kview-ui-data::table.filters.not_equals'),
    ];
    $numberOperators = [
        '=' => '=',
        '!=' => '<>',
        '>' => '>',
        '>=' => '>=',
        '<' => '<',
        '<=' => '<=',
    ];
@endphp

@if (($column['filterable'] ?? true) !== false)
    <div
        id="{{ $filterId }}"
        class="erp-column-filter-popover"
        data-erp-filter-popover="{{ $key }}"
        data-erp-filter-type="{{ in_array($type, ['select', 'multiselect'], true) ? 'multiselect' : $type }}"
        role="dialog"
        aria-labelledby="{{ $triggerId }}"
        hidden
    >
        <div class="erp-column-filter-head">
            <strong>{{ $label }}</strong>
            <x-ui.icon-button
                icon="x"
                :label="__('kview-ui-data::table.close_filter')"
                variant="ghost"
                size="sm"
                :tooltip="false"
                data-erp-filter-close
            />
        </div>

        @if (in_array($type, ['select', 'multiselect'], true))
            <div class="erp-filter-checklist">
                @foreach (($filter['options'] ?? []) as $value => $optionLabel)
                    <label class="erp-filter-check">
                        <input type="checkbox" value="{{ $value }}" data-erp-filter-option>
                        <span>{{ $optionLabel }}</span>
                    </label>
                @endforeach
            </div>
        @elseif ($type === 'number')
            <div class="erp-filter-grid">
                <x-ui.dropdown
                    :id="$operatorId"
                    :name="$operatorId"
                    :options="$numberOperators"
                    value="="
                    placeholder=""
                    :select-attributes="[
                        'data-erp-filter-operator' => true,
                        'aria-label' => __('kview-ui-data::table.filter_operator'),
                    ]"
                />
                <input type="number" step="any" data-erp-filter-value placeholder="{{ $placeholder }}" aria-label="{{ __('kview-ui-data::table.filter_value') }}">
            </div>
        @else
            <div class="erp-filter-stack">
                <x-ui.dropdown
                    :id="$operatorId"
                    :name="$operatorId"
                    :options="$textOperators"
                    value="contains"
                    placeholder=""
                    :select-attributes="[
                        'data-erp-filter-operator' => true,
                        'aria-label' => __('kview-ui-data::table.filter_operator'),
                    ]"
                />
                <input type="search" data-erp-filter-value placeholder="{{ $placeholder }}" aria-label="{{ __('kview-ui-data::table.filter_value') }}">
            </div>
        @endif

        <div class="erp-column-filter-actions">
            <button type="button" class="erp-filter-clear" data-erp-filter-clear>{{ __('kview-ui-data::table.clear') }}</button>
            <button type="button" class="erp-filter-apply" data-erp-filter-apply>{{ __('kview-ui-data::table.apply') }}</button>
        </div>
    </div>
@endif