@props([
    'calendarMonth',
    'salesmen',
    'selectedSalesmanIds' => [],
    'filterAllSalesmen' => true,
    'salesmanFilterQuery' => [],
])

@php
    $calendarMonth = $calendarMonth instanceof \App\Support\CalendarMonth
        ? $calendarMonth
        : \App\Support\CalendarMonth::fromRequest(request());
    $selectedSalesmanIds = array_map('intval', $selectedSalesmanIds ?? []);
    $salesmanFilterQuery = $salesmanFilterQuery ?? $calendarMonth->queryForMonth();

    $prevMonth = $calendarMonth->date->copy()->subMonth();
    $nextMonth = $calendarMonth->date->copy()->addMonth();
    $prevQuery = (new \App\Support\CalendarMonth($prevMonth))->queryForMonth($salesmanFilterQuery);
    $nextQuery = (new \App\Support\CalendarMonth($nextMonth))->queryForMonth($salesmanFilterQuery);

    if ($filterAllSalesmen) {
        $filterButtonLabel = 'All salespeople';
    } elseif (count($selectedSalesmanIds) === 1) {
        $one = $salesmen->firstWhere('id', $selectedSalesmanIds[0]);
        $filterButtonLabel = $one
            ? trim($one->name.' '.$one->surname)
            : '1 salesperson';
    } else {
        $filterButtonLabel = count($selectedSalesmanIds).' salespeople';
    }
@endphp

<div
    class="grid grid-cols-3 items-center gap-2 mb-3"
    x-data="{
        filterOpen: false,
        allSalesmen: @js($filterAllSalesmen),
        toggleAll(checked) {
            this.allSalesmen = checked;
        },
        onSalesmanChange() {
            const anyChecked = this.$refs.filterForm?.querySelectorAll('.salesman-filter-cb:checked').length > 0;
            if (anyChecked) {
                this.allSalesmen = false;
            }
        },
    }"
    @click.outside="filterOpen = false"
>
    <div aria-hidden="true"></div>

    <nav class="flex items-center justify-center gap-2 sm:gap-3 min-w-0 col-start-2" aria-label="Calendar month">
        <a
            href="{{ route('sales-calendar.index', $prevQuery) }}"
            class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 hover:text-[var(--dealer-accent-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
            aria-label="Previous month"
        >
            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
        <h2 class="text-sm sm:text-base font-semibold text-gray-900 text-center min-w-[8rem] sm:min-w-[10rem] truncate">
            {{ $calendarMonth->date->format('F Y') }}
        </h2>
        <a
            href="{{ route('sales-calendar.index', $nextQuery) }}"
            class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 hover:text-[var(--dealer-accent-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
            aria-label="Next month"
        >
            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
    </nav>

    <div class="flex shrink-0 items-center justify-end gap-2 col-start-3">
        @can('dashboard.sales_appointments.view')
            <a
                href="{{ route('sales-appointments.index') }}"
                class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm whitespace-nowrap hover:border-[var(--dealer-accent-color)] hover:text-[var(--dealer-accent-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
            >
                Go to All Sales Appointments
            </a>
        @endcan

        <div class="relative">
        <button
            type="button"
            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:border-[var(--dealer-accent-color)] hover:text-[var(--dealer-accent-color)]"
            @click="filterOpen = !filterOpen"
            x-bind:aria-expanded="filterOpen"
            aria-haspopup="true"
        >
            <span class="max-w-[10rem] truncate">{{ $filterButtonLabel }}</span>
            <svg class="h-4 w-4 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>

        <div
            x-show="filterOpen"
            x-cloak
            x-transition
            class="absolute right-0 z-20 mt-1 w-[min(100vw-2rem,18rem)] rounded-xl border border-gray-200 bg-white py-3 shadow-lg"
            role="dialog"
            aria-label="Filter salespeople"
        >
            <form
                method="GET"
                action="{{ route('sales-calendar.index') }}"
                x-ref="filterForm"
                @submit="filterOpen = false"
            >
                <input type="hidden" name="year" value="{{ $calendarMonth->year }}">
                <input type="hidden" name="month" value="{{ $calendarMonth->month }}">

                <div class="px-3 pb-2 border-b border-gray-100">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input
                            type="checkbox"
                            name="all_salesmen"
                            value="1"
                            class="rounded border-gray-300 text-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                            x-model="allSalesmen"
                            @change="toggleAll($event.target.checked)"
                        >
                        <span class="text-sm font-medium text-gray-800">All salespeople</span>
                    </label>
                </div>

                @if ($salesmen->isNotEmpty())
                    <div class="max-h-48 overflow-y-auto px-3 py-2 space-y-2">
                        @foreach ($salesmen as $salesman)
                            @php
                                $salesmanName = trim($salesman->name.' '.$salesman->surname) ?: 'Salesperson #'.$salesman->id;
                            @endphp
                            <label class="flex items-center gap-2 cursor-pointer" :class="allSalesmen ? 'opacity-50' : ''">
                                <input
                                    type="checkbox"
                                    name="salesmen[]"
                                    value="{{ (int) $salesman->id }}"
                                    class="rounded border-gray-300 text-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] salesman-filter-cb"
                                    @checked(! $filterAllSalesmen && in_array((int) $salesman->id, $selectedSalesmanIds, true))
                                    :disabled="allSalesmen"
                                    @change="onSalesmanChange()"
                                >
                                <span class="text-sm text-gray-700">{{ $salesmanName }}</span>
                            </label>
                        @endforeach
                    </div>
                @else
                    <p class="px-3 py-2 text-sm text-gray-500">No active salespeople.</p>
                @endif

                <div class="px-3 pt-2 border-t border-gray-100">
                    <button
                        type="submit"
                        class="w-full inline-flex justify-center rounded-md bg-[var(--dealer-accent-color)] px-3 py-2 text-xs font-semibold text-[var(--dealer-accent-text-color)] hover:opacity-95"
                    >
                        Apply
                    </button>
                </div>
            </form>
        </div>
        </div>
    </div>
</div>