{{--
    "Calendrier mensuel" — one cell per day (full weeks, Monday-start),
    showing the count of task/meeting/milestone elements relevant to the
    current person on that day. A day with elements opens a click-triggered
    dropdown (not a hover tooltip — those don't allow reliably clicking
    through their own content) listing them, each row opening the Aperçu
    panel on that element.

    $this->calendarMonth / previousMonth() / nextMonth() / calendarDays()
    all come from the page class (Dashboard.php).
--}}
<x-filament::section :heading="ucfirst($this->calendarMonth->translatedFormat('F Y'))">
    <x-slot name="afterHeader">
        <div class="flex items-center gap-1">
            <button
                type="button"
                wire:click="previousMonth"
                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
            >
                <x-filament::icon icon="heroicon-o-chevron-left" class="h-4 w-4" />
            </button>
            <button
                type="button"
                wire:click="nextMonth"
                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
            >
                <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
            </button>
        </div>
    </x-slot>

    <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-gray-400 dark:text-gray-500">
        @foreach (['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'] as $label)
            <div class="py-1">{{ $label }}</div>
        @endforeach
    </div>

    <div class="mt-1 grid grid-cols-7 gap-1">
        @foreach ($this->calendarDays() as $day)
            @php
                $isToday = $day->date->isToday();
                $count = $day->elements->count();
            @endphp
            <div wire:key="calendar-day-{{ $day->date->toDateString() }}" class="aspect-square">
                @if ($count > 0)
                    <x-filament::dropdown placement="bottom-start" width="64">
                        <x-slot name="trigger">
                            <button
                                type="button"
                                @class([
                                    'flex h-full w-full flex-col items-center justify-center gap-0.5 rounded-md text-sm',
                                    'text-gray-300 dark:text-gray-600' => ! $day->inCurrentMonth,
                                    'font-bold text-primary-600 dark:text-primary-400' => $isToday,
                                    'font-semibold text-gray-700 dark:text-gray-200' => $day->inCurrentMonth && ! $isToday,
                                    'ring-1 ring-primary-500' => $isToday,
                                ])
                            >
                                {{ $day->date->day }}
                                <span class="rounded-full bg-primary-50 px-1.5 text-[10px] font-bold text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                                    {{ $count }}
                                </span>
                            </button>
                        </x-slot>
                        <x-filament::dropdown.list>
                            @foreach ($day->elements as $element)
                                <x-filament::dropdown.list.item
                                    wire:click="openApercuElement({{ $element->id }})"
                                    :icon="$this->typeIcon($element->type->code)"
                                    :color="$this->typeColor($element->type->code)"
                                >
                                    {{ $element->title }}
                                </x-filament::dropdown.list.item>
                            @endforeach
                        </x-filament::dropdown.list>
                    </x-filament::dropdown>
                @else
                    <div
                        @class([
                            'flex h-full w-full items-center justify-center rounded-md text-sm',
                            'text-gray-300 dark:text-gray-600' => ! $day->inCurrentMonth,
                            'font-bold text-primary-600 ring-1 ring-primary-500' => $isToday,
                            'text-gray-500 dark:text-gray-400' => $day->inCurrentMonth && ! $isToday,
                        ])
                    >
                        {{ $day->date->day }}
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</x-filament::section>