@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;
    $placeholder = $filter['placeholder'] ?? 'Filter';
    $textOperators = [
        'contains' => 'Contains',
        'equals' => 'Equals',
        'starts' => 'Starts with',
        'ends' => 'Ends with',
        'not_contains' => 'Does not contain',
        'not_equals' => 'Not equal',
    ];
    $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 }}"
        hidden
    >
        <div class="erp-column-filter-head">
            <strong>{{ $label }}</strong>
            <button type="button" class="erp-filter-icon-button" data-erp-filter-close aria-label="Close filter">
                <x-ui.icon name="x" size="14" />
            </button>
        </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">
                <select data-erp-filter-operator aria-label="Filter operator">
                    @foreach ($numberOperators as $value => $operatorLabel)
                        <option value="{{ $value }}">{{ $operatorLabel }}</option>
                    @endforeach
                </select>
                <input type="number" step="any" data-erp-filter-value placeholder="{{ $placeholder }}" aria-label="Filter value">
            </div>
        @else
            <div class="erp-filter-stack">
                <select data-erp-filter-operator aria-label="Filter operator">
                    @foreach ($textOperators as $value => $operatorLabel)
                        <option value="{{ $value }}">{{ $operatorLabel }}</option>
                    @endforeach
                </select>
                <input type="search" data-erp-filter-value placeholder="{{ $placeholder }}" aria-label="Filter value">
            </div>
        @endif

        <div class="erp-column-filter-actions">
            <button type="button" class="erp-filter-clear" data-erp-filter-clear>Clear</button>
            <button type="button" class="erp-filter-apply" data-erp-filter-apply>Apply</button>
        </div>
    </div>
@endif