{{-- Status tabs with counts, search, extra filters, sort and page size for
     a client list (App\Support\ClientListFilter). Every control is a plain GET
     form, so a filtered list can be bookmarked or shared.

     action     the list's URL
     tabs       optional ['param' => 'status', 'counts' => [value => n], 'current' => ?string, 'label' => ?callable]
     search     optional ['value' => string, 'placeholder' => string]
     selects    optional list of ['name', 'label', 'options' => [value => label], 'value']
     sorts      optional [key => label], with sort the current key
     paginator  optional LengthAwarePaginator for "Showing x-y of z"
     filtered   whether a filter is applied (shows Reset)
--}}
@php
    $tabs = $tabs ?? null;
    $selects = $selects ?? [];
    $sorts = $sorts ?? [];
    $tabParam = $tabs['param'] ?? 'status';
    $tabLabel = $tabs['label'] ?? fn ($v) => invoice_status_label($v);
    $keep = request()->except(['page', $tabParam]);
    $showTabs = $tabs && (count($tabs['counts']) > 1 || filled($tabs['current']));
@endphp
<div class="pn-list-toolbar">
    @if($showTabs)
    <nav class="pn-list-tabs" aria-label="{{ __('common.table.status') }}">
        <a href="{{ $action.(($k = http_build_query($keep)) ? '?'.$k : '') }}" class="pn-list-tab {{ blank($tabs['current']) ? 'is-active' : '' }}" @if(blank($tabs['current'])) aria-current="true" @endif>
            {{ __('client.list.all') }} <span class="pn-list-count">{{ array_sum($tabs['counts']) }}</span>
        </a>
        @foreach($tabs['counts'] as $value => $count)
        <a href="{{ $action.'?'.http_build_query($keep + [$tabParam => $value]) }}" class="pn-list-tab {{ (string) $tabs['current'] === (string) $value ? 'is-active' : '' }}" @if((string) $tabs['current'] === (string) $value) aria-current="true" @endif>
            {{ $tabLabel($value) }} <span class="pn-list-count">{{ $count }}</span>
        </a>
        @endforeach
    </nav>
    @endif

    <form method="GET" action="{{ $action }}" class="pn-list-form" role="search">
        @if($tabs && filled($tabs['current']))<input type="hidden" name="{{ $tabParam }}" value="{{ $tabs['current'] }}">@endif
        @isset($search)
        <div class="pn-list-search">
            <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="m20 20-3.5-3.5"/></svg>
            <input type="search" name="q" value="{{ $search['value'] }}" placeholder="{{ $search['placeholder'] }}" class="form-control" aria-label="{{ $search['placeholder'] }}" maxlength="100">
        </div>
        @endisset
        @foreach($selects as $select)
        <select name="{{ $select['name'] }}" class="form-control" aria-label="{{ $select['label'] }}" onchange="this.form.submit()">
            <option value="">{{ $select['label'] }}</option>
            @foreach($select['options'] as $value => $label)
            <option value="{{ $value }}" @selected((string) $select['value'] === (string) $value)>{{ $label }}</option>
            @endforeach
        </select>
        @endforeach
        @if(count($sorts) > 1)
        <select name="sort" class="form-control" aria-label="{{ __('client.list.sort') }}" onchange="this.form.submit()">
            @foreach($sorts as $key => $label)
            <option value="{{ $key }}" @selected(($sort ?? null) === $key)>{{ $label }}</option>
            @endforeach
        </select>
        @endif
        @if(isset($paginator) && $paginator->total() > min(\App\Support\ClientListFilter::PER_PAGE))
        <select name="per_page" class="form-control" aria-label="{{ __('client.list.per_page') }}" onchange="this.form.submit()">
            @foreach(\App\Support\ClientListFilter::PER_PAGE as $n)
            <option value="{{ $n }}" @selected($paginator->perPage() === $n)>{{ __('client.list.per_page_option', ['n' => $n]) }}</option>
            @endforeach
        </select>
        @endif
        <button type="submit" class="btn btn-default">{{ __('common.actions.search') }}</button>
        @if($filtered ?? false)
        <a href="{{ $action }}" class="link">{{ __('common.actions.reset') }}</a>
        @endif
    </form>

    @if(isset($paginator) && $paginator->total() > 0 && (($filtered ?? false) || $paginator->hasPages()))
    <div class="pn-list-summary text-muted text-sm">{{ __('client.list.showing', ['from' => $paginator->firstItem(), 'to' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</div>
    @endif
</div>
@once
<style>
    .pn-list-toolbar{margin-bottom:14px}
    .pn-list-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
    .pn-list-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border,#e5e7eb);border-radius:999px;font-size:13px;font-weight:500;color:var(--text,#111);text-decoration:none;background:var(--card,#fff)}
    .pn-list-tab:hover{border-color:var(--primary,#2563eb);color:var(--primary,#2563eb)}
    .pn-list-tab.is-active{background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);color:#fff}
    .pn-list-count{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--bg,#f3f4f6);color:var(--muted,#6b7280)}
    .pn-list-tab.is-active .pn-list-count{background:rgba(255,255,255,.22);color:#fff}
    .pn-list-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    /* app.css sizes every .form-control with !important; these sit in a row. */
    .pn-list-form select.form-control{display:inline-block!important;width:auto!important;max-width:100%;flex:0 0 auto}
    .pn-list-search{position:relative;flex:1 1 240px;max-width:360px}
    .pn-list-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted,#6b7280);pointer-events:none}
    .pn-list-search .form-control{padding-left:32px!important;width:100%!important;height:34px}
    .pn-list-summary{margin-top:8px}
    @media(max-width:600px){.pn-list-search{max-width:none;flex-basis:100%}}
</style>
@endonce