@props([
    /** Catalog from EntityFilterCatalog::for($type). */
    'catalog'    => [],
    /** ID for the form element (used by toolbar toggle target). */
    'id'         => 'dynamic-filters',
    /** Form action — defaults to current URL. */
    'action'     => null,
    /** Whether the filter panel starts open. Default: closed (toggle). */
    'open'       => false,
    /** Localized search placeholder, optional. */
    'searchPlaceholder' => null,
])

@php
    $action = $action ?? url()->current();

    // Active-filter chip list. Each entry { field, option_id, name, label_name }.
    $activeChips = [];
    foreach ($catalog as $entry) {
        if (empty($entry['selected'])) continue;
        $optionsById = [];
        foreach ($entry['options'] as $opt) {
            $optionsById[(int) $opt['id']] = $opt;
        }
        foreach ($entry['selected'] as $id) {
            $opt = $optionsById[(int) $id] ?? null;
            if (! $opt) continue;
            $activeChips[] = [
                'field'      => $entry['field'],
                'option_id'  => (int) $id,
                'name'       => (string) ($opt['name'] ?? ''),
                'label_name' => (string) ($entry['label_name'] ?? ''),
            ];
        }
    }

    $hasAnyFilters = count($catalog) > 0;
    $searchValue   = (string) request('q', '');
    $hasAnyActive  = $searchValue !== '' || count($activeChips) > 0;

    // Open by default if any filters are already active so the admin can
    // see what's selected; otherwise stay collapsed for a cleaner UI.
    $panelOpen = $open || count($activeChips) > 0;
@endphp

{{--
    Filter UI — rectangular inputs, Select2 multi-selects, show/hide panel.

    Layout:
      Row 1: search input + "Filters" toggle (with count badge)
      Row 2: active filter chips (only when any are active)
      Row 3: panel with one Select2 per label group + Apply/Reset
             (collapsed by default; expands when toggle is clicked)

    Single <form>: every selection submits in one shot to GET. Sort + dir
    are preserved across submissions via hidden inputs.
--}}
<form method="GET" action="{{ $action }}" id="{{ $id }}-form" class="ff"
      x-data="{ open: @js($panelOpen) }"
      x-cloak
      data-ff>

    {{-- Preserve sort/dir across filter submissions. --}}
    @foreach (['sort', 'dir'] as $k)
        @if (filled(request($k)))
            <input type="hidden" name="{{ $k }}" value="{{ request($k) }}">
        @endif
    @endforeach

    {{-- ─── Row 1: search + toggle ─────────────────────────────────── --}}
    <div class="ff-row">
        <label class="ff-search">
            <span class="ff-search__icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </span>
            <input type="text" name="q" value="{{ $searchValue }}"
                   class="ff-input ff-input--search"
                   placeholder="{{ $searchPlaceholder ?? __('admin.filters.search_placeholder') }}"
                   aria-label="{{ $searchPlaceholder ?? __('admin.filters.search_placeholder') }}">
        </label>

        @if ($hasAnyFilters)
            <button type="button"
                    class="ff-toggle"
                    :class="{ 'is-open': open }"
                    @click="open = !open"
                    :aria-expanded="open ? 'true' : 'false'"
                    aria-controls="{{ $id }}-panel">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                </svg>
                <span>{{ __('admin.filters.title') }}</span>
                @if (count($activeChips) > 0)
                    <span class="ff-toggle__count">{{ count($activeChips) }}</span>
                @endif
                <svg class="ff-toggle__chevron" :class="{ 'is-open': open }"
                     width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
        @endif

        @if ($hasAnyActive)
            <a href="{{ $action }}" class="ff-reset-top" title="{{ __('admin.filters.reset') }}">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polyline points="1 4 1 10 7 10"/>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                </svg>
                <span>{{ __('admin.filters.reset') }}</span>
            </a>
        @endif
    </div>

    {{-- ─── Row 2: active filter chips ───────────────────────────────── --}}
    @if (count($activeChips) > 0)
        <div class="ff-chips" role="status" aria-live="polite">
            <span class="ff-chips__label">{{ __('admin.filters.active') }}</span>
            @foreach ($activeChips as $chip)
                @php
                    // Build a URL minus this one (field, option_id).
                    $newSelections = [];
                    foreach ($catalog as $entry) {
                        $kept = array_values(array_filter($entry['selected'], fn ($i) =>
                            ! ($entry['field'] === $chip['field'] && (int) $i === $chip['option_id'])
                        ));
                        if ($kept !== []) {
                            $newSelections[$entry['field']] = $kept;
                        }
                    }
                    $qs = array_merge(
                        request()->only(['q', 'sort', 'dir']),
                        $newSelections,
                    );
                    $qs = array_filter($qs, fn ($v) => $v !== null && $v !== '' && $v !== []);
                    $removeUrl = $action . (empty($qs) ? '' : '?' . http_build_query($qs));
                @endphp
                <a href="{{ $removeUrl }}" class="ff-chip">
                    <span class="ff-chip__name">{{ $chip['label_name'] }}</span>
                    <span class="ff-chip__sep">·</span>
                    <span class="ff-chip__value">{{ $chip['name'] }}</span>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </a>
            @endforeach
        </div>
    @endif

    {{-- ─── Row 3: filter panel (toggleable) ─────────────────────────── --}}
    @if ($hasAnyFilters)
        <div id="{{ $id }}-panel"
             class="ff-panel"
             x-show="open"
             x-transition:enter="ff-panel--enter"
             x-transition:leave="ff-panel--leave"
             :hidden="!open">

            <div class="ff-grid">
                @foreach ($catalog as $entry)
                    <div class="ff-field">
                        <label class="ff-label" for="{{ $id }}-{{ $entry['field'] }}">
                            {{ $entry['label_name'] }}
                            @if (! empty($entry['selected']))
                                <span class="ff-label__count">{{ count($entry['selected']) }}</span>
                            @endif
                        </label>
                        <select multiple
                                id="{{ $id }}-{{ $entry['field'] }}"
                                name="{{ $entry['field'] }}[]"
                                class="ff-select"
                                data-placeholder="{{ __('admin.filters.all') }}"
                                data-allow-clear="true">
                            @foreach ($entry['options'] as $opt)
                                <option value="{{ $opt['id'] }}"
                                        @selected(in_array((int) $opt['id'], $entry['selected'], true))>
                                    {{ $opt['name'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endforeach
            </div>

            <div class="ff-actions">
                <a href="{{ $action }}" class="ff-btn ff-btn--ghost">
                    {{ __('admin.filters.reset') }}
                </a>
                <button type="submit" class="ff-btn ff-btn--primary">
                    {{ __('admin.filters.apply') }}
                </button>
            </div>
        </div>
    @endif
</form>

@once
@push('styles')
<style>
    /* ════════════════════════════════════════════════════════════════════
       Filter component — rectangular inputs, Select2-powered multi-selects,
       toggleable panel.
       ════════════════════════════════════════════════════════════════════ */
    .ff {
        --ff-radius:        8px;
        --ff-radius-pill:   999px;
        --ff-border:        #e2e8f0;
        --ff-border-strong: #cbd5e1;
        --ff-text:          #0f172a;
        --ff-muted:         #64748b;
        --ff-faint:         #94a3b8;
        --ff-primary:       #4f46e5;
        --ff-primary-strong:#4338ca;
        --ff-primary-soft:  #eef2ff;
        --ff-primary-line:  #c7d2fe;
        --ff-shadow-sm:     0 1px 2px rgba(15,23,42,.04);
        --ff-focus-ring:    0 0 0 3px rgba(99,102,241,.18);

        display: grid; gap: 12px; margin-bottom: 0;
    }

    /* ── Row 1: search + toggle ───────────────────────────────────── */
    .ff-row {
        display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    }

    .ff-search {
        flex: 1 1 320px; min-width: 240px;
        position: relative;
        display: flex; align-items: center;
    }
    .ff-search__icon {
        position: absolute; top: 50%; inset-inline-start: 14px;
        transform: translateY(-50%);
        color: var(--ff-faint);
        pointer-events: none;
        display: inline-flex;
    }

    /* Shared rectangular input style (search + select2 surface match). */
    .ff-input {
        height: 42px;
        padding: 0 14px;
        background: #fff; color: var(--ff-text);
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);
        font: inherit; font-size: 14px;
        box-shadow: var(--ff-shadow-sm);
        transition: border-color .15s, box-shadow .15s;
    }
    .ff-input::placeholder { color: var(--ff-faint); }
    .ff-input:focus {
        outline: none;
        border-color: var(--ff-primary);
        box-shadow: var(--ff-focus-ring);
    }
    .ff-input--search {
        width: 100%;
        padding: 0 16px 0 42px;
    }
    :where([dir="rtl"]) .ff-input--search {
        padding: 0 42px 0 16px;
    }

    /* Toggle "Filters" button — rectangular, same height as inputs. */
    .ff-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        height: 42px; padding: 0 16px;
        background: #fff;
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);
        font: inherit; font-size: 13.5px; font-weight: 600;
        color: #334155;
        cursor: pointer;
        box-shadow: var(--ff-shadow-sm);
        transition: all .15s;
        white-space: nowrap;
    }
    .ff-toggle:hover {
        border-color: var(--ff-primary-line);
        color: var(--ff-primary-strong);
    }
    .ff-toggle.is-open {
        background: var(--ff-primary-soft);
        border-color: var(--ff-primary);
        color: var(--ff-primary-strong);
    }
    .ff-toggle__count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px;
        padding: 0 7px;
        background: var(--ff-primary); color: #fff;
        border-radius: 999px;
        font-size: 11px; font-weight: 700;
    }
    .ff-toggle__chevron {
        color: var(--ff-faint);
        transition: transform .2s ease, color .15s;
    }
    .ff-toggle.is-open .ff-toggle__chevron { color: var(--ff-primary); }
    .ff-toggle__chevron.is-open { transform: rotate(180deg); }

    /* Reset-all link in the top row (only when filters are active). */
    .ff-reset-top {
        display: inline-flex; align-items: center; gap: 6px;
        height: 42px; padding: 0 14px;
        background: #fff;
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);
        color: var(--ff-muted);
        font-size: 13px; font-weight: 600;
        text-decoration: none;
        box-shadow: var(--ff-shadow-sm);
        transition: all .15s;
    }
    .ff-reset-top:hover {
        background: #fef2f2; border-color: #fecaca; color: #b91c1c;
    }

    /* ── Row 2: active filter chips ───────────────────────────────── */
    .ff-chips {
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    }
    .ff-chips__label {
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em;
        color: var(--ff-faint);
        margin-inline-end: 4px;
    }
    .ff-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px;
        background: var(--ff-primary-soft);
        border: 1px solid var(--ff-primary-line);
        border-radius: var(--ff-radius-pill);
        color: var(--ff-primary-strong);
        text-decoration: none;
        font-size: 12px;
        transition: all .12s;
    }
    .ff-chip:hover {
        background: #fee2e2; border-color: #fecaca; color: #b91c1c;
    }
    .ff-chip:hover svg { color: #b91c1c; }
    .ff-chip__name { font-weight: 700; }
    .ff-chip__sep  { color: var(--ff-faint); }
    .ff-chip__value { font-weight: 500; }

    /* ── Row 3: filter panel ──────────────────────────────────────── */
    .ff-panel {
        background: #fff;
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);
        box-shadow: var(--ff-shadow-sm);
        overflow: hidden;
    }
    /* Smooth show/hide */
    .ff-panel--enter {
        animation: ff-slide-down .2s ease-out;
        transform-origin: top;
    }
    .ff-panel--leave {
        animation: ff-slide-up .15s ease-in forwards;
        transform-origin: top;
    }
    @keyframes ff-slide-down {
        from { opacity: 0; transform: translateY(-4px) scaleY(.98); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes ff-slide-up {
        from { opacity: 1; transform: none; }
        to   { opacity: 0; transform: translateY(-4px) scaleY(.98); }
    }

    /* Filter layout — flexbox with `flex-wrap` so the LAST ROW's items
       grow to fill the panel width (rather than leaving empty cells on
       the right; operator request 2026-06-14 to eliminate that gap).
       The mechanism:
         flex-grow:1  → unused row width is distributed across items
         flex-basis:200px → target column width (≈5 cols on a ~1100px
                            panel, ≈3 cols at ~700px, ≈2 cols at ~450px)
         flex-shrink:1 → items can collapse below basis if needed
         min-width:200px on the .ff-field below caps the shrink so a
                        Select2 chip stays legible
       Browser-computed column count therefore matches container width
       NATURALLY — no @media breakpoints needed. The last row's items
       expand via flex-grow to occupy the remaining row width. */
    .ff-grid {
        padding: 18px;
        display: flex !important;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
    }
    .ff-grid > .ff-field {
        /* Target 4 columns at any panel width — basis is exactly
           one-quarter of the panel content area minus its share of the
           inter-item gaps (3 gaps × 16px ÷ 4 items = 12px each). With
           `flex-grow: 1`, the LAST ROW's items still stretch to fill
           any leftover width when there are < 4 items in it.
           Falls back to fewer columns naturally on narrower screens
           via the 180px floor (below which the field wraps). */
        flex: 1 1 calc(25% - 12px);
        min-width: 180px;
        max-width: 100%;
    }

    .ff-field {
        display: flex; flex-direction: column; gap: 6px; min-width: 0;
    }
    .ff-label {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 700;
        color: #334155;
        letter-spacing: .01em;
    }
    .ff-label__count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 18px; padding: 0 6px;
        background: var(--ff-primary); color: #fff;
        border-radius: 999px;
        font-size: 10.5px; font-weight: 700;
    }

    /* Native <select> hidden once Select2 takes over; this style is
       a fallback for the rare no-JS case. */
    .ff-select {
        width: 100%;
        min-height: 42px;
        padding: 6px 12px;
        background: #fff; color: var(--ff-text);
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);
        font: inherit; font-size: 14px;
        box-shadow: var(--ff-shadow-sm);
    }

    /* Panel actions footer */
    .ff-actions {
        display: flex; justify-content: flex-end; gap: 10px;
        padding: 14px 18px;
        background: #fafbfc;
        border-top: 1px solid var(--ff-border);
    }
    .ff-btn {
        display: inline-flex; align-items: center; justify-content: center;
        height: 38px; padding: 0 20px;
        font: inherit; font-size: 13.5px; font-weight: 700;
        border-radius: var(--ff-radius);
        cursor: pointer;
        text-decoration: none;
        border: 1px solid transparent;
        transition: all .15s;
    }
    .ff-btn--ghost {
        background: transparent; color: var(--ff-muted);
        border-color: var(--ff-border);
    }
    .ff-btn--ghost:hover {
        background: #f1f5f9; color: var(--ff-text);
    }
    .ff-btn--primary {
        background: var(--ff-primary); color: #fff;
        border: 0;
        box-shadow: 0 1px 2px rgba(79,70,229,.18), 0 4px 8px -3px rgba(79,70,229,.22);
    }
    .ff-btn--primary:hover {
        background: var(--ff-primary-strong);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(67,56,202,.22), 0 6px 12px -4px rgba(67,56,202,.28);
    }

    /* ─── Select2 overrides — rectangular surface, modern chips ───── */
    .ff .select2-container { width: 100% !important; }
    .ff .select2-container--default .select2-selection--multiple {
        background: #fff;
        border: 1px solid var(--ff-border);
        border-radius: var(--ff-radius);            /* rectangular */
        min-height: 42px;
        padding: 4px 8px;
        box-shadow: var(--ff-shadow-sm);
        transition: border-color .15s, box-shadow .15s;
    }
    .ff .select2-container--default.select2-container--focus .select2-selection--multiple,
    .ff .select2-container--default.select2-container--open  .select2-selection--multiple {
        border-color: var(--ff-primary);
        box-shadow: var(--ff-focus-ring);
    }
    /* Chips inside the select2 surface — pill-shaped, matches active-filter chips. */
    .ff .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background: var(--ff-primary-soft);
        border: 1px solid var(--ff-primary-line);
        color: var(--ff-primary-strong);
        border-radius: 999px;
        padding: 3px 12px 3px 28px;
        font-size: 12px; font-weight: 600;
        margin: 3px 4px 3px 0;
        line-height: 1.5;
    }
    .ff .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #6366f1; font-weight: 700;
        margin-right: 4px;
        padding-right: 4px;
        background: transparent; border: 0;
    }
    .ff .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #b91c1c;
    }
    .ff .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        margin-top: 7px; font-size: 13.5px;
        color: var(--ff-text);
    }
    .ff .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
        color: var(--ff-faint);
    }
    /* Dropdown panel — rectangular surface, soft elevation. */
    .select2-dropdown {
        border: 1px solid var(--ff-border) !important;
        border-radius: var(--ff-radius) !important;
        box-shadow: 0 14px 30px -10px rgba(15,23,42,.22), 0 4px 8px -4px rgba(15,23,42,.08) !important;
        overflow: hidden;
    }
    .select2-results__option {
        padding: 9px 14px !important;
        font-size: 13.5px;
        color: var(--ff-text);
    }
    .select2-results__option--highlighted,
    .select2-results__option--highlighted[aria-selected] {
        background: var(--ff-primary-soft) !important;
        color: var(--ff-primary-strong) !important;
    }
    .select2-results__option[aria-selected="true"] {
        background: #f8fafc !important;
        font-weight: 600;
    }
    .select2-search--dropdown .select2-search__field {
        border: 1px solid var(--ff-border) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        font-size: 13.5px !important;
    }
    .select2-search--dropdown .select2-search__field:focus {
        outline: none !important;
        border-color: var(--ff-primary) !important;
        box-shadow: var(--ff-focus-ring) !important;
    }
    /* RTL chip padding flip. */
    :where([dir="rtl"]) .ff .select2-container--default .select2-selection--multiple .select2-selection__choice {
        padding: 3px 28px 3px 12px;
    }

    /* ── Responsive ───────────────────────────────────────────────── */
    @media (max-width: 640px) {
        .ff-row { flex-direction: column; align-items: stretch; }
        .ff-toggle, .ff-reset-top { justify-content: center; }
        .ff-grid { padding: 14px; gap: 14px; }
        /* On phones force single-column stack — overrides the 200px
           basis so a field never sits at <40% of viewport width. */
        .ff-grid > .ff-field { flex: 1 1 100%; }
        .ff-actions {
            flex-direction: column-reverse; gap: 8px;
            padding: 12px 14px;
        }
        .ff-btn { width: 100%; }
    }

    [x-cloak] { display: none !important; }
</style>
@endpush

@push('scripts')
<script>
/**
 * Initialise Select2 on every `.ff-select` once the DOM is ready, AND
 * any time a filter panel becomes visible (Select2 measures width 0 in
 * a hidden parent, so re-init after the panel expands).
 *
 * Select2 + jQuery are loaded globally in the admin layout — we don't
 * pull them in from here. Bound once per page.
 */
(function () {
    if (window.__ffSelect2Bound) return;
    window.__ffSelect2Bound = true;

    function isReady() {
        return typeof window.jQuery !== 'undefined'
            && typeof window.jQuery.fn !== 'undefined'
            && typeof window.jQuery.fn.select2 !== 'undefined';
    }

    function initSelect2(scope) {
        if (!isReady()) return;
        var $   = window.jQuery;
        var rtl = document.documentElement.getAttribute('dir') === 'rtl';
        var root = scope || document;

        root.querySelectorAll('select.ff-select').forEach(function (el) {
            // Skip if already initialised on this element.
            if ($(el).hasClass('select2-hidden-accessible')) return;

            // Skip if any ancestor is hidden — Select2 mis-measures inside
            // display:none parents. We'll re-init when the panel toggles open.
            var hidden = el.closest('[hidden]') || el.closest('[style*="display: none"]');
            if (hidden) return;

            $(el).select2({
                width:         '100%',
                placeholder:   el.getAttribute('data-placeholder') || '',
                allowClear:    el.getAttribute('data-allow-clear') === 'true',
                dir:           rtl ? 'rtl' : 'ltr',
                closeOnSelect: false,
                dropdownParent: $(el).closest('.ff-panel') || $(document.body),
            });
        });
    }

    // First-pass init.
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { initSelect2(); });
    } else {
        initSelect2();
    }

    // Re-init whenever a filter panel becomes visible. Alpine flips the
    // `hidden` attribute via `:hidden="!open"`; we observe attribute
    // mutations to catch the transition without polling.
    var observer = new MutationObserver(function (mutations) {
        for (var i = 0; i < mutations.length; i++) {
            var m = mutations[i];
            if (m.attributeName === 'hidden' || m.attributeName === 'style') {
                var target = m.target;
                if (target && target.classList && target.classList.contains('ff-panel')
                    && !target.hidden) {
                    initSelect2(target);
                }
            }
        }
    });
    document.querySelectorAll('.ff-panel').forEach(function (panel) {
        observer.observe(panel, { attributes: true, attributeFilter: ['hidden', 'style'] });
        // If the panel is already visible at load time, init now.
        if (!panel.hidden) initSelect2(panel);
    });
})();
</script>
@endpush
@endonce