@props([
    'action',
    'selectedMonth',
    'selectedYear',
    'preserve' => [],
    'variant' => 'light',
])

@php
    $labelClass = $variant === 'dark'
        ? 'whitespace-nowrap text-[10px] font-medium leading-none text-slate-400'
        : 'whitespace-nowrap text-[10px] font-medium leading-none text-gray-500';
@endphp

@php
    $monthSelectOptions = \App\Support\ReportingPeriod::monthSelectOptions();
    $yearSelectOptions = \App\Support\ReportingPeriod::yearSelectOptions();
@endphp

<form
    method="GET"
    action="{{ $action }}"
    x-on:change="$el.submit()"
    {{ $attributes->merge(['class' => 'flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-x-2 gap-y-1']) }}
>
    @foreach ($preserve as $key)
        @if (request()->filled($key))
            <input type="hidden" name="{{ $key }}" value="{{ request()->query($key) }}">
        @endif
    @endforeach

    {{ $slot }}

    <div class="flex shrink-0 items-center gap-1">
        <label for="reporting_period_month" class="{{ $labelClass }}">Month</label>
        <div class="relative h-7 w-max shrink-0">
            <x-styled-select
                name="month"
                id="reporting_period_month"
                :selected="(string) (int) $selectedMonth"
                :options="$monthSelectOptions"
                compact
                class="h-full"
            />
        </div>
    </div>
    <div class="flex shrink-0 items-center gap-1">
        <label for="reporting_period_year" class="{{ $labelClass }}">Year</label>
        <div class="relative h-7 w-max shrink-0">
            <x-styled-select
                name="year"
                id="reporting_period_year"
                :selected="(string) (int) $selectedYear"
                :options="$yearSelectOptions"
                compact
                class="h-full"
            />
        </div>
    </div>
</form>