{{-- The Opportunities search and filter bar. Included by index.blade.php and sharing its
     variables ($select, $chips, $shown, $filtersOn, $members, $types, $sources, $priorities). --}}
{{-- Search and filters: one bar, the rarely-used filters behind "Filters", and a chip per filter that is on. --}}
@php
    $pill = 'inline-flex h-10 items-center gap-1.5 whitespace-nowrap rounded-xl border px-3 text-sm font-medium transition';
    $quiet = 'rounded-xl border-slate-200 bg-slate-50 py-2 pl-3 pr-9 text-sm text-slate-700 shadow-sm transition focus:border-indigo-500 focus:bg-white focus:ring-indigo-500';
    $fieldLabel = 'mb-1 block text-[11px] font-semibold uppercase tracking-wider text-slate-400';
    $dueOptions = ['' => __('Any'), 'overdue' => __('Overdue'), 'today' => __('Today'), 'week' => __('7 days'), 'none' => __('None')];
@endphp
<x-card class="p-3 sm:p-4" x-data="{ open: @js(count(array_diff_key($chips, ['search' => 1])) > 0) }">
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
        <div class="relative min-w-0 flex-1">
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                <x-icon name="magnifying-glass" class="h-5 w-5" />
            </span>
            <input type="search" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search by title, organisation or next action…') }}"
                aria-label="{{ __('Search opportunities') }}"
                class="block h-10 w-full rounded-xl border-slate-200 bg-slate-50 pl-11 pr-10 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
            @if (trim($search) !== '')
                <button type="button" wire:click="removeFilter('search')" class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600" aria-label="{{ __('Clear search') }}">
                    <x-icon name="x-mark" class="h-4 w-4" />
                </button>
            @endif
        </div>

        <div class="flex flex-wrap items-center gap-2">
            <select wire:model.live="owner" class="{{ $quiet }}" aria-label="{{ __('Owner') }}">
                <option value="mine">{{ __('Mine and shared with me') }}</option>
                <option value="all">{{ __('Everyone') }}</option>
                @foreach ($members as $member)
                    <option value="{{ $member->id }}">{{ __('Owned by :name', ['name' => $member->name]) }}</option>
                @endforeach
            </select>
            <select wire:model.live="sort" class="{{ $quiet }}" aria-label="{{ __('Sort') }}">
                <option value="">{{ __('Next action first') }}</option>
                <option value="score">{{ __('Lead score, highest first') }}</option>
            </select>
            @if ($view === 'list')
                <select wire:model.live="group" class="{{ $quiet }}" aria-label="{{ __('Group by') }}">
                    <option value="none">{{ __('No grouping') }}</option>
                    <option value="stage">{{ __('Group by stage') }}</option>
                    <option value="owner">{{ __('Group by owner') }}</option>
                    <option value="organisation">{{ __('Group by organisation') }}</option>
                </select>
            @else
                <label class="{{ $pill }} cursor-pointer border-slate-200 bg-white text-slate-600 has-[:checked]:border-indigo-300 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                    <input type="checkbox" wire:model.live="closed" class="h-3.5 w-3.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    {{ __('Won, Lost and Deferred') }}
                </label>
            @endif
            <button type="button" @click="open = !open" :aria-expanded="open"
                class="{{ $pill }} border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900"
                :class="open && 'border-indigo-300 bg-indigo-50 text-indigo-700'">
                <x-icon name="adjustments-horizontal" class="h-4 w-4" />
                {{ __('Filters') }}
                @if (count($chips) > 0)
                    <span class="ml-0.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-indigo-600 px-1.5 text-[11px] font-bold text-white">{{ count($chips) }}</span>
                @endif
                <x-icon name="chevron-down" class="h-3 w-3 transition" ::class="open && 'rotate-180'" />
            </button>
        </div>
    </div>

    <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-150" x-transition:enter-start="-translate-y-1 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
        class="mt-4 border-t border-slate-100 pt-4">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 {{ $view === 'list' ? 'xl:grid-cols-7' : 'xl:grid-cols-6' }}">
            <div class="sm:col-span-2 lg:col-span-3 xl:col-span-2">
                <span class="{{ $fieldLabel }}">{{ __('Next action') }}</span>
                <div class="inline-flex w-full items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                    @foreach ($dueOptions as $key => $label)
                        <button type="button" wire:click="$set('due', '{{ $key }}')"
                            class="flex-1 whitespace-nowrap rounded-lg px-2 py-1.5 transition {{ $due === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                            {{ $label }}
                        </button>
                    @endforeach
                </div>
            </div>
            @if ($view === 'list')
                <div>
                    <label for="filter-stage" class="{{ $fieldLabel }}">{{ __('Stage') }}</label>
                    <select id="filter-stage" wire:model.live="stage" class="{{ $select }}">
                        <option value="">{{ __('Every stage') }}</option>
                        <option value="open">{{ __('Open stages') }}</option>
                        <option value="closed">{{ __('Won, Lost and Deferred') }}</option>
                        @foreach (\App\Models\Opportunity::STAGES as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div>
                <label for="filter-type" class="{{ $fieldLabel }}">{{ __('Type') }}</label>
                <select id="filter-type" wire:model.live="type" class="{{ $select }}">
                    <option value="">{{ __('Every type') }}</option>
                    @foreach ($types as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="filter-source" class="{{ $fieldLabel }}">{{ __('Source') }}</label>
                <select id="filter-source" wire:model.live="source" class="{{ $select }}">
                    <option value="">{{ __('Every source') }}</option>
                    @foreach ($sources as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="filter-priority" class="{{ $fieldLabel }}">{{ __('Priority') }}</label>
                <select id="filter-priority" wire:model.live="priority" class="{{ $select }}">
                    <option value="">{{ __('Any priority') }}</option>
                    @foreach ($priorities as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="filter-value" class="{{ $fieldLabel }}">{{ __('Estimate') }}</label>
                <select id="filter-value" wire:model.live="value" class="{{ $select }}">
                    <option value="">{{ __('Estimated or not') }}</option>
                    <option value="estimated">{{ __('Estimated') }}</option>
                    <option value="not_estimated">{{ __('Not estimated') }}</option>
                </select>
            </div>
        </div>
    </div>

    <div class="mt-3 flex flex-wrap items-center gap-2 text-xs">
        <span class="font-medium text-slate-500">
            {{ $view === 'board'
                ? trans_choice(':n opportunity on the board|:n opportunities on the board', $shown, ['n' => number_format($shown)])
                : trans_choice(':n opportunity|:n opportunities', $shown, ['n' => number_format($shown)]) }}
        </span>
        @foreach ($chips as $name => $chip)
            <span wire:key="chip-{{ $name }}" class="inline-flex items-center gap-1 rounded-full border border-indigo-100 bg-indigo-50 py-1 pl-2.5 pr-1 font-medium text-indigo-700">
                <span class="text-indigo-400">{{ $chip['label'] }}:</span> {{ $chip['value'] }}
                <button type="button" wire:click="removeFilter('{{ $name }}')" class="flex h-5 w-5 items-center justify-center rounded-full text-indigo-400 transition hover:bg-indigo-100 hover:text-indigo-700" aria-label="{{ __('Remove the :label filter', ['label' => $chip['label']]) }}">
                    <x-icon name="x-mark" class="h-3 w-3" />
                </button>
            </span>
        @endforeach
        @if ($filtersOn)
            <button type="button" wire:click="clearFilters" class="font-semibold text-slate-500 underline-offset-2 hover:text-slate-800 hover:underline">{{ __('Clear all') }}</button>
        @endif
    </div>
</x-card>