@php
    use App\Support\AppointmentsMonthCalendarPresenter;

    $calendarMonth = $calendarMonth ?? \App\Support\CalendarMonth::fromRequest(request());
    $appointmentsByDate = $appointmentsByDate ?? collect();
    $salesmanFilterQuery = $salesmanFilterQuery ?? $calendarMonth->queryForMonth();
    $salesTeamCalendarConfig = AppointmentsMonthCalendarPresenter::alpineConfig(
        $appointmentsByDate,
        auth()->id() !== null ? (int) auth()->id() : null,
    );
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('Sales Calendar') }}
    </x-slot>

    <div
        class="py-4 px-3 sm:px-4 md:px-5"
        x-data="salesTeamCalendar(@js($salesTeamCalendarConfig))"
        x-on:keydown.escape.window="onEscapeWindow()"
    >
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-3 sm:p-4 relative w-full">
            <x-sales-calendar-header
                :calendar-month="$calendarMonth"
                :salesmen="$salesmen ?? collect()"
                :selected-salesman-ids="$selectedSalesmanIds ?? []"
                :filter-all-salesmen="$filterAllSalesmen ?? true"
                :salesman-filter-query="$salesmanFilterQuery"
            />

            <x-appointments-month-calendar
                :calendar-month="$calendarMonth"
                :appointments-by-date="$appointmentsByDate"
            />
        </div>
    </div>
</x-app-layout>