@props([
    'id' => 'table',
    'searchUrl' => null,
    'searchName' => 'q',
    'searchValue' => null,
    'searchPlaceholder' => 'Search…',
    'columns' => [], // ['product' => 'Product', 'status' => 'Status']
    'filtersOpen' => false,
])
@php
    $searchValue = $searchValue ?? request($searchName);
    $hasActiveFilters = collect(request()->except(['page', $searchName]))->filter(fn ($v) => filled($v))->isNotEmpty();
@endphp
<div {{ $attributes->merge(['class' => 'admin-table-shell']) }} data-admin-table="{{ $id }}">
    <div class="admin-table-toolbar">
        @if($searchUrl)
            <form method="get" action="{{ $searchUrl }}" class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
                @foreach(request()->except([$searchName, 'page']) as $key => $val)
                    @if(is_array($val))
                        @foreach($val as $v)
                            <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                        @endforeach
                    @elseif(filled($val))
                        <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                    @endif
                @endforeach
                <div class="relative min-w-[12rem] flex-1 max-w-md">
                    <i data-lucide="search" class="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[#8c9196]"></i>
                    <input type="search" name="{{ $searchName }}" value="{{ $searchValue }}" placeholder="{{ $searchPlaceholder }}" class="admin-input pl-8">
                </div>
                <button type="submit" class="admin-btn">Search</button>
            </form>
        @else
            <div class="flex-1"></div>
        @endif

        <div class="flex flex-wrap items-center gap-2">
            @isset($toolbar)
                {{ $toolbar }}
            @endisset
            @if(isset($filters))
                <button type="button" class="admin-btn {{ $hasActiveFilters || $filtersOpen ? 'ring-1 ring-[var(--color-gold)]' : '' }}" data-table-filter-toggle aria-expanded="{{ $filtersOpen || $hasActiveFilters ? 'true' : 'false' }}">
                    <i data-lucide="sliders-horizontal" class="h-3.5 w-3.5"></i>
                    Filters
                    @if($hasActiveFilters)<span class="admin-chip">On</span>@endif
                </button>
            @endif
            @if(count($columns))
                <div class="relative">
                    <button type="button" class="admin-btn" data-table-col-toggle>
                        <i data-lucide="columns-3" class="h-3.5 w-3.5"></i>
                        Columns
                    </button>
                    <div class="admin-col-menu hidden" data-table-col-menu>
                        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-[#6d7175]">Show columns</div>
                        @foreach($columns as $key => $label)
                            <label>
                                <input type="checkbox" data-col-check="{{ $key }}" checked>
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    @isset($filters)
        <div class="admin-table-filters {{ $filtersOpen || $hasActiveFilters ? 'is-open' : '' }}" data-table-filters>
            {{ $filters }}
        </div>
    @endisset

    @isset($bulk)
        <div class="flex flex-wrap items-center gap-2 border-b border-[var(--color-admin-border)] bg-[#fafbfb] px-4 py-2.5">
            {{ $bulk }}
        </div>
    @endisset

    <div class="admin-table-wrap">
        <table class="admin-table">
            {{ $slot }}
        </table>
    </div>

    @isset($footer)
        <div class="border-t border-[var(--color-admin-border)] px-4 py-3">
            {{ $footer }}
        </div>
    @endisset
</div>