Filter Bar code

@props([
    'action' => null,
    'method' => 'GET',
    'search' => false,
    'searchName' => 'search',
    'searchValue' => null,
    'searchPlaceholder' => 'Search...',
    'sticky' => false,
])

@php
    /*
    | Reusable filter/search/action strip for index pages and cards.
    |
    | Usage:
    |   <x-ui.filter-bar search :action="route('admin.users.index')">
    |       <x-ui.select name="role" :options="['admin' => 'Admin']" />
    |   </x-ui.filter-bar>
    */
    $method = strtoupper($method);
    $formMethod = in_array($method, ['GET', 'POST'], true) ? $method : 'POST';
    $tag = $action ? 'form' : 'div';
    $searchValue = $searchValue ?? request($searchName, '');
@endphp

<{{ $tag }}
    @if ($action) method="{{ $formMethod }}" action="{{ $action }}" @endif
    {{ $attributes->merge([
        'class' => trim('rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900 '.($sticky ? 'sticky top-4 z-20 backdrop-blur' : '')),
    ]) }}
>
    @if ($action && ! in_array($method, ['GET', 'POST'], true))
        @csrf
        @method($method)
    @endif

    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div class="flex flex-1 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
            @if ($search)
                <div class="w-full sm:max-w-xs">
                    <x-ui.input
                        type="search"
                        :name="$searchName"
                        size="sm"
                        icon="magnifying-glass"
                        :placeholder="$searchPlaceholder"
                        :value="$searchValue"
                    />
                </div>
            @endif

            {{ $slot }}
        </div>

        <div class="flex shrink-0 items-center gap-2">
            @isset($actions)
                {{ $actions }}
            @elseif ($action)
                <x-ui.button type="submit" variant="outline" size="sm" icon="funnel-simple">Apply filters</x-ui.button>
            @endisset
        </div>
    </div>
</{{ $tag }}>