@props(['period', 'from', 'to', 'action' => null, 'areas' => [], 'area' => null])
<form method="GET" action="{{ $action }}" class="flex flex-wrap items-center gap-2" x-data="{ p: @js($period) }">
    @if (count($areas) > 0)
        {{-- Area selector (Floor / Bar). Sent with every period button too; the hidden field keeps the period when only the area changes. --}}
        <input type="hidden" name="period" x-bind:value="p">
        <select name="area" class="input !py-1.5 !text-xs w-auto" x-on:change="$el.form.submit()" aria-label="Area">
            @foreach ($areas as $value => $label)
                <option value="{{ $value }}" @selected($area === $value)>{{ $label }}</option>
            @endforeach
        </select>
    @endif
    @foreach (['today' => 'Today', 'week' => 'This week', 'month' => 'This month', 'custom' => 'Custom'] as $key => $label)
        <button
            type="submit" name="period" value="{{ $key }}"
            class="px-3 py-1.5 rounded-full text-xs font-semibold transition"
            :class="p === '{{ $key }}' ? 'bg-primary-500 text-white' : 'bg-ink/5 text-ink-muted hover:bg-ink/10'"
            x-on:click="p = '{{ $key }}'"
        >{{ $label }}</button>
    @endforeach
    <template x-if="p === 'custom'">
        <div class="flex items-center gap-2">
            <input type="date" name="from" value="{{ $from->format('Y-m-d') }}" class="input !py-1.5 !text-xs w-36">
            <span class="text-ink-faint text-xs">to</span>
            <input type="date" name="to" value="{{ $to->format('Y-m-d') }}" class="input !py-1.5 !text-xs w-36">
            <button class="btn-secondary btn-sm">Apply</button>
        </div>
    </template>
</form>