@props([
    'id' => 'ajax-filters',
    'filters' => [],
    'wrapperClass' => 'ajax-filters d-flex flex-wrap align-items-start',
    'itemClass' => 'mr-2 mb-2',
    'labelClass' => 'form-label my_HalfFrame my_HalfFrameSearch-ajax input-group-text',
    'selectClass' => 'form-control',
    'inputClass' => 'form-control',
    'autoBind' => true,
    'eventName' => 'ajax-filters:changed',
    'inputDebounceMs' => 250,
    'emitOnInit' => false,
    'showClearButton' => true,
    'clearButtonTitle' => 'Wyczysc filtry',
    'clearButtonClass' => 'btn btn-secondary btn_table_status btn-outline-secondary',
    'clearButtonIconClass' => 'fas fa-times',
    'showStatusIndicator' => false,
    'statusId' => null,
    'activeText' => 'Filtry aktywne',
    'inactiveText' => 'Filtry wylaczone',
])

@php
    $jsId = preg_replace('/[^A-Za-z0-9_-]/', '_', (string) $id);
    $resolvedStatusId = $statusId ?: ($id . '_status_indicator');
    $hasDefinedFilters = collect((array) $filters)
        ->contains(function ($filter) {
            return trim((string) ($filter['key'] ?? '')) !== '';
        });
@endphp

<div id="{{ $id }}" class="ajax-filters-root {{ $id }}-root">
    @if($showStatusIndicator && $hasDefinedFilters)
        <div class="ajax-filters-status-slot {{ $id }}-status-slot">
            <x-ajax-filters-status-indicator
                :id="$resolvedStatusId"
                :filters-id="$id"
                :active-text="$activeText"
                :inactive-text="$inactiveText"
            />
        </div>
    @endif

    <div class="ajax-filters-controls-row {{ $id }}-controls-row {{ $wrapperClass }}">
        <div class="ajax-filters-items {{ $id }}-items">
            @foreach($filters as $index => $filter)
                @php
                    $type = strtolower((string) ($filter['type'] ?? 'select'));
                    $key = (string) ($filter['key'] ?? '');
                    $filterId = (string) ($filter['id'] ?? ($id . '_filter_' . $index));
                    $name = (string) ($filter['name'] ?? $key);
                    $label = (string) ($filter['label'] ?? '');
                    $placeholder = array_key_exists('placeholder', $filter) ? $filter['placeholder'] : null;
                    $options = (array) ($filter['options'] ?? []);
                    $value = (string) ($filter['value'] ?? '');
                    $currentItemClass = trim((string) ($filter['itemClass'] ?? $itemClass));
                    $currentLabelClass = (string) ($filter['labelClass'] ?? $labelClass);
                    $currentSelectClass = (string) ($filter['selectClass'] ?? $selectClass);
                    $currentInputClass = (string) ($filter['inputClass'] ?? $inputClass);
                @endphp

                <div class="ajax-filter-item {{ $currentItemClass }}">
                    <div class="input-group ajax-filter-group">
                        @if($label !== '')
                            <label class="{{ $currentLabelClass }}" for="{{ $filterId }}">{{ $label }}</label>
                        @endif

                        @if($type === 'select')
                            <select
                                id="{{ $filterId }}"
                                name="{{ $name }}"
                                class="{{ $currentSelectClass }} ajax-filter-control"
                                @if($key !== '') data-filter-key="{{ $key }}" @endif
                            >
                                @if($placeholder !== null)
                                    <option value="">{{ $placeholder }}</option>
                                @endif

                                @foreach($options as $optionKey => $optionLabel)
                                    @php
                                        $resolvedValue = is_array($optionLabel) ? (string) ($optionLabel['value'] ?? '') : (string) $optionKey;
                                        $resolvedLabel = is_array($optionLabel) ? (string) ($optionLabel['label'] ?? $resolvedValue) : (string) $optionLabel;
                                    @endphp
                                    <option value="{{ $resolvedValue }}" {{ ($value !== '' && $value === $resolvedValue) ? 'selected' : '' }}>
                                        {{ $resolvedLabel }}
                                    </option>
                                @endforeach
                            </select>
                        @else
                            <input
                                id="{{ $filterId }}"
                                name="{{ $name }}"
                                type="{{ in_array($type, ['text', 'date', 'number'], true) ? $type : 'text' }}"
                                class="{{ $currentInputClass }} ajax-filter-control"
                                value="{{ $value }}"
                                @if($placeholder !== null) placeholder="{{ (string) $placeholder }}" @endif
                                @if($key !== '') data-filter-key="{{ $key }}" @endif
                            >
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        @if($showClearButton && $hasDefinedFilters)
            <button
                type="button"
                class="{{ $clearButtonClass }} ajax-filters-clear-btn {{ $id }}-clear-btn"
                data-toggle="tooltip"
                title="{{ $clearButtonTitle }}"
                aria-label="{{ $clearButtonTitle }}"
            >
                <i class="{{ $clearButtonIconClass }}" aria-hidden="true"></i>
            </button>
        @endif
    </div>
</div>

<style>
    .ajax-filters-root {
        width: 100%;
    }

    .ajax-filters-status-slot {
        display: flex;
        align-items: center;
        margin-bottom: 0.25rem;
    }

    .ajax-filters-controls-row {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .ajax-filters-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.35rem;
    }

    .ajax-filters-items .ajax-filter-item {
        flex: 0 1 32%;
        max-width: 40%;
        min-width: 0;
    }

    .ajax-filters-items .ajax-filter-item .ajax-filter-group {
        width: 100%;
    }

    @media (max-width: 1399.98px) {
        .ajax-filters-items .ajax-filter-item {
            flex-basis: 25%;
            max-width: 25%;
        }
    }

    @media (max-width: 1199.98px) {
        .ajax-filters-items .ajax-filter-item {
            flex-basis: 33.3333%;
            max-width: 33.3333%;
        }
    }

    @media (max-width: 991.98px) {
        .ajax-filters-items .ajax-filter-item {
            flex-basis: 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 575.98px) {
        .ajax-filters-items .ajax-filter-item {
            flex-basis: 100%;
            max-width: 100%;
        }
    }

    .ajax-filters-clear-btn {
        min-width: 2.35rem;
        width: 2.35rem;
        height: 2.35rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
        flex: 0 0 auto;
    }

    .ajax-filters-clear-btn i {
        font-size: 1rem;
    }
</style>

@if($autoBind)
    <script>
        (function () {
            var rootSelector = '#{{ $id }}';
            var clearBtnSelector = rootSelector + ' .{{ $id }}-clear-btn';
            var eventName = '{{ $eventName }}';
            var inputDebounceMs = {{ (int) $inputDebounceMs }};
            var timer = null;

            function resolveKey($el, index) {
                var key = String($el.data('filter-key') || '').trim();
                if (key) {
                    return key;
                }

                var name = String($el.attr('name') || '').trim();
                if (name) {
                    return name;
                }

                var id = String($el.attr('id') || '').trim();
                if (id) {
                    return id;
                }

                return 'filter_' + index;
            }

            function collectValues() {
                var values = {};

                $(rootSelector).find('.ajax-filter-control').each(function (idx) {
                    var $el = $(this);
                    var key = resolveKey($el, idx);
                    values[key] = ($el.val() == null) ? '' : String($el.val());
                });

                return values;
            }

            function isActiveValue(value) {
                if (value === null || value === undefined) {
                    return false;
                }

                return String(value).trim() !== '';
            }

            function hasAnyActiveFilter(values) {
                return Object.keys(values || {}).some(function (key) {
                    return isActiveValue(values[key]);
                });
            }

            function emitStatus(values) {
                var payload = {
                    id: '{{ $id }}',
                    values: values || {},
                    active: hasAnyActiveFilter(values || {})
                };

                $(document).trigger('ajax-filters:statusChanged', [payload]);
                $(document).trigger('{{ $id }}:statusChanged', [payload]);
            }

            function emitChanged() {
                var values = collectValues();
                var payload = {
                    id: '{{ $id }}',
                    values: values
                };

                emitStatus(values);
                $(document).trigger(eventName, [payload]);
                $(document).trigger('{{ $id }}:changed', [payload]);
            }

            $(document).on('change.{{ $jsId }}', rootSelector + ' .ajax-filter-control', function () {
                emitChanged();
            });

            $(document).on('input.{{ $jsId }}', rootSelector + ' input.ajax-filter-control', function () {
                if (inputDebounceMs > 0) {
                    clearTimeout(timer);
                    timer = setTimeout(emitChanged, inputDebounceMs);
                    return;
                }

                emitChanged();
            });

            $(document).on('click.{{ $jsId }}', clearBtnSelector, function () {
                $(rootSelector).find('.ajax-filter-control').each(function () {
                    var $el = $(this);
                    if ($el.is('select')) {
                        $el.prop('selectedIndex', 0).val('');
                    } else {
                        $el.val('');
                    }
                });

                emitChanged();
            });

            $(document).on('{{ $id }}:emit', function () {
                emitChanged();
            });

            $(document).on('{{ $id }}:clear', function () {
                $(clearBtnSelector).trigger('click');
            });

            $(function () {
                emitStatus(collectValues());
                $(clearBtnSelector).tooltip();

                @if($emitOnInit)
                emitChanged();
                @endif
            });
        })();
    </script>
@endif