{{--
    Saved-view toolbar: view selector, status tabs, quick search, ad-hoc filters, column chooser.
    Expects: $grid (SavedViewGrid), $views, $fieldOptions, $columns, $route (list route name), $page ('loandata'|'contact').
--}}
@php
    $state = $grid->stateParams();
    $isAdmin = auth()->user()->isAdmin();
    $statusUrl = fn ($s) => route($route, array_filter(array_merge($state, ['status' => $s, 'view' => $grid->view?->id ?? ''])));
@endphp

<div class="space-y-3 border-b border-ink-100 p-4 dark:border-ink-800">
    <div class="flex flex-wrap items-center gap-3">
        {{-- View selector --}}
        <form method="GET" action="{{ route($route) }}" class="flex min-w-[260px] flex-1 items-center gap-2 sm:flex-none">
            <div class="relative w-full sm:w-80">
                <x-heroicon-o-rectangle-stack class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-ink-400" />
                <select name="view" onchange="this.form.submit()" class="form-input pl-9" aria-label="Saved view">
                    <option value="">All records (default columns)</option>
                    @foreach ($views as $v)
                        <option value="{{ $v->id }}" @selected($grid->view?->id === $v->id)>{{ $v->report_name }}@if (str_contains((string) $v->module_name, ',')) · with activities @endif</option>
                    @endforeach
                </select>
            </div>
        </form>
        @if ($isAdmin)
            <div class="flex items-center gap-1">
                @if ($grid->view)
                    <a href="{{ route('saved-views.edit', $grid->view->id) }}" class="btn btn-secondary btn-sm" title="Edit this view"><x-heroicon-m-pencil-square class="h-4 w-4" /> Edit view</a>
                @endif
                <a href="{{ route('saved-views.create', ['return' => $page]) }}" class="btn btn-ghost btn-sm"><x-heroicon-m-plus class="h-4 w-4" /> New view</a>
            </div>
        @endif

        <form method="GET" action="{{ route($route) }}" class="relative ml-auto w-full sm:w-72">
            @foreach (array_diff_key($state, ['q' => 1, 'f' => 1]) as $k => $v)
                <input type="hidden" name="{{ $k }}" value="{{ $v }}">
            @endforeach
            @foreach ($grid->filters as $i => $f)
                <input type="hidden" name="f[{{ $i }}][field]" value="{{ $f['field'] }}">
                <input type="hidden" name="f[{{ $i }}][op]" value="{{ $f['op'] }}">
                <input type="hidden" name="f[{{ $i }}][value]" value="{{ $f['value'] }}">
            @endforeach
            <x-heroicon-o-magnifying-glass class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-ink-400" />
            <input type="search" name="q" value="{{ $grid->search }}" placeholder="Name, mobile, reg. no or #id…" class="form-input pl-9" title="Numbers match the start of the mobile, registration numbers match the start of the reg. no, anything else searches the name.">
        </form>
    </div>

    <div class="flex flex-wrap items-center gap-2">
        {{-- Status tabs --}}
        <div class="flex flex-wrap items-center gap-1 rounded-xl bg-ink-100/70 p-1 dark:bg-ink-800/60">
            @foreach (['' => 'All'] + \App\Services\Crm\SavedViewQuery::STATUSES as $key => $label)
                @continue($key === 'not_allocated' && $grid->module === 'activity,loandata')
                <a href="{{ $statusUrl($key) }}"
                   @class(['rounded-lg px-3 py-1.5 text-xs font-medium transition',
                           'bg-white text-ink-900 shadow-sm dark:bg-ink-900 dark:text-white' => (string) $grid->status === (string) $key,
                           'text-ink-500 hover:text-ink-900 dark:hover:text-white' => (string) $grid->status !== (string) $key])>{{ $label }}</a>
            @endforeach
        </div>

        <div class="ml-auto flex items-center gap-2">
            {{-- Ad-hoc filters --}}
            <div x-data="{ open: {{ $grid->filters ? 'true' : 'false' }} }" class="contents">
                <button type="button" class="btn btn-secondary btn-sm" @click="open = !open; $dispatch('crm-filters', open)">
                    <x-heroicon-m-funnel class="h-4 w-4" /> Filters
                    @if ($grid->filters)<span class="badge badge-amber">{{ count($grid->filters) }}</span>@endif
                </button>
            </div>

            {{-- Column chooser --}}
            <div x-data="{ open: false }" class="relative">
                <button type="button" class="btn btn-secondary btn-sm" @click="open = !open" @click.outside="open = false">
                    <x-heroicon-m-view-columns class="h-4 w-4" /> Columns
                </button>
                <div x-cloak x-show="open" x-transition.origin.top.right class="absolute right-0 z-30 mt-2 max-h-80 w-64 overflow-y-auto rounded-xl border border-ink-200 bg-white p-2 shadow-xl dark:border-ink-700 dark:bg-ink-900">
                    <p class="px-2 pb-1 text-[11px] font-semibold tracking-wider text-ink-400 uppercase">Show columns</p>
                    @foreach ($columns as $name => $c)
                        <label class="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-ink-50 dark:hover:bg-ink-800">
                            <input type="checkbox" class="form-checkbox" :checked="!isHidden(@js($name))" @change="toggleCol(@js($name))">
                            <span class="truncate">{{ $c['label'] }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Ad-hoc filter rows (ANDed with the view) --}}
    <form method="GET" action="{{ route($route) }}" x-data="{ show: {{ $grid->filters ? 'true' : 'false' }} }" @crm-filters.window="show = $event.detail" x-show="show" x-cloak
          class="rounded-xl border border-dashed border-ink-200 bg-ink-50/50 p-3 dark:border-ink-700 dark:bg-ink-900/40">
        @foreach (array_diff_key($state, ['f' => 1]) as $k => $v)
            <input type="hidden" name="{{ $k }}" value="{{ $v }}">
        @endforeach
        <div x-data="crmCriteria({ rows: @js($grid->filters ?: [['field' => '', 'op' => 'is', 'value' => '']]), valueless: @js(\App\Services\Crm\SavedViewSchema::VALUELESS) })" class="space-y-2">
            <template x-for="(row, i) in rows" :key="i">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="w-10 text-right text-xs font-medium text-ink-400" x-text="i === 0 ? 'Where' : 'and'"></span>
                    <select class="form-input form-input-sm w-56" :name="`f[${i}][field]`" x-model="row.field" @change="loadOptions(row)">
                        <option value="">Choose field…</option>
                        @foreach ($fieldOptions as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select class="form-input form-input-sm w-44" :name="`f[${i}][op]`" x-model="row.op">
                        @foreach (\App\Services\Crm\SavedViewSchema::OPERATORS as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <input type="text" class="form-input form-input-sm w-56" :name="`f[${i}][value]`" x-model="row.value" x-show="needsValue(row)"
                           :list="`crm-f-${i}`" placeholder="Value (comma = any of)" maxlength="255">
                    <datalist :id="`crm-f-${i}`"><template x-for="o in row.options" :key="o"><option :value="o"></option></template></datalist>
                    <button type="button" class="btn-icon" @click="remove(i)" title="Remove filter"><x-heroicon-m-x-mark class="h-4 w-4" /></button>
                </div>
            </template>
            <div class="flex flex-wrap items-center gap-2 pl-12">
                <button type="button" class="btn btn-ghost btn-sm" @click="add()"><x-heroicon-m-plus class="h-4 w-4" /> Add filter</button>
                <button class="btn btn-primary btn-sm"><x-heroicon-m-funnel class="h-4 w-4" /> Apply</button>
                @if ($grid->filters)
                    <a href="{{ route($route, array_diff_key($state, ['f' => 1]) + ['view' => $grid->view?->id ?? '']) }}" class="btn btn-secondary btn-sm">Clear filters</a>
                @endif
            </div>
        </div>
    </form>

    @if ($grid->view && $grid->viewCriteria)
        <div class="flex flex-wrap items-center gap-1.5 text-xs text-ink-500">
            <span class="font-medium text-ink-600 dark:text-ink-300">View criteria:</span>
            @foreach ($grid->viewCriteria as $c)
                @if (! $loop->first)<span class="font-semibold {{ $c['join'] === 'OR' ? 'text-violet-600' : 'text-ink-400' }}">{{ $c['join'] }}</span>@endif
                <span class="rounded-md bg-ink-100 px-2 py-0.5 dark:bg-ink-800">{{ \App\Services\Crm\SavedViewSchema::label($c['field']) }} <span class="text-ink-400">{{ \App\Services\Crm\SavedViewSchema::OPERATORS[$c['op']] }}</span> {{ \Illuminate\Support\Str::limit($c['value'], 40) }}</span>
            @endforeach
        </div>
    @endif
</div>