@php
$calendarMonth = \Carbon\Carbon::createFromFormat('!Y-m', $month);
$defaultTaskDate = now()->format('Y-m') === $month ? now()->toDateString() : $calendarMonth->toDateString();
@endphp

<section class="overflow-hidden bg-white border shadow-sm month-calendar rounded-xl border-stone-200"
    aria-labelledby="calendar-month-title">
    <header class="flex flex-wrap items-center justify-between gap-4 px-4 py-5 border-b border-stone-200 sm:px-6">
        <div>
            <h1 id="calendar-month-title" class="text-xl font-semibold text-stone-900">
                <time datetime="{{ $month }}">{{ $calendarMonth->locale('tr')->translatedFormat('F Y') }}</time>
            </h1>
            <p class="mt-1 text-xs text-stone-500">Aylık görünüm</p>
        </div>
        <div class="flex items-center gap-3">
            <nav class="inline-flex items-center overflow-hidden border rounded-md shadow-sm border-stone-200"
                aria-label="Month navigation">
                <a href="{{ route('new-week', ['time' => 'this_week', 'view' => 'month', 'month' => $calendarMonth->copy()->subMonth()->format('Y-m')]) }}"
                    class="flex items-center px-2 h-9 text-stone-500 hover:bg-stone-50" aria-label="Previous month"
                    title="Previous month">
                    <span class="text-xl material-symbols-rounded" aria-hidden="true">chevron_left</span>
                </a>
                <a href="{{ route('new-week', ['time' => 'this_week', 'view' => 'month', 'month' => now()->format('Y-m')]) }}"
                    class="flex items-center px-3 text-sm font-semibold h-9 border-x border-stone-200 text-stone-700 hover:bg-stone-50">Today</a>
                <a href="{{ route('new-week', ['time' => 'this_week', 'view' => 'month', 'month' => $calendarMonth->copy()->addMonth()->format('Y-m')]) }}"
                    class="flex items-center px-2 h-9 text-stone-500 hover:bg-stone-50" aria-label="Next month"
                    title="Next month">
                    <span class="text-xl material-symbols-rounded" aria-hidden="true">chevron_right</span>
                </a>
            </nav>
            <button type="button" wire:click="openCreateTaskModal('{{ $defaultTaskDate }}')"
                class="inline-flex items-center gap-1 px-3 text-sm font-semibold text-white rounded-md shadow-sm h-9 bg-sky-600 hover:bg-sky-700">
                <span class="text-lg material-symbols-rounded" aria-hidden="true">add</span>
                <span>New task</span>
            </button>
        </div>
    </header>

    <div class="overflow-x-auto">
        <div class="min-w-[700px]">
            <div
                class="grid grid-cols-7 text-xs font-semibold text-center bg-white border-b border-stone-200 text-stone-700">
                @for ($weekday = 0; $weekday < 7; $weekday++) <div class="py-3">
                    {{ \Carbon\Carbon::parse($start_date)->addDays($weekday)->locale('tr')->translatedFormat('D') }}
            </div>
            @endfor
        </div>
        <div class="grid grid-cols-7 gap-px bg-stone-200">
            @for ($calendarDay = \Carbon\Carbon::parse($start_date);
            $calendarDay->lte(\Carbon\Carbon::parse($end_date)); $calendarDay->addDay())
            @php
            $dayDate = $calendarDay->toDateString();
            $dayExpenses = $paid_totals_by_days[$dayDate] ?? null;
            $dayIncome = $received_totals_by_days[$dayDate] ?? null;
            $inMonth = $calendarDay->format('Y-m') === $month;
            $inCurrentWeek = $calendarDay->between(now()->startOfWeek(), now()->endOfWeek());
            $dayTasks = ($tasks_by_date[$dayDate] ?? collect())->sortBy(
            fn($task) => $task->status === 'completed' ? 1 : 0,
            );
            @endphp
            @if (isset($processCalendarRows[$dayDate]))
            <div class="col-span-7" wire:key="process-week-{{ $dayDate }}">
                @include('livewire.partials.process-calendar-strip', [
                'row' => $processCalendarRows[$dayDate],
                'rowKey' => $dayDate,
                ])
            </div>
            @endif
            <div wire:key="month-day-{{ $dayDate }}" data-calendar-date="{{ $dayDate }}"
                class="month-day drop-zone relative flex flex-col min-w-0 px-2 py-2 sm:px-3 {{ $inCurrentWeek ? 'min-h-[160px] max-h-[220px]' : 'min-h-[100px] max-h-[160px]' }} {{ $inMonth ? 'bg-white' : 'bg-stone-100' }}"
                wire:click="openCreateTaskModal('{{ $dayDate }}')"
                x-on:dragover.prevent="if (draggedTaskId || window.inboxDrag?.emailId) $el.classList.add('drop-zone-hover')"
                x-on:dragleave="if (!$el.contains($event.relatedTarget)) $el.classList.remove('drop-zone-hover')"
                x-on:drop.prevent="handleDrop($event, '{{ $dayDate }}')">
                <div class="flex items-start gap-1 mb-1 shrink-0">
                    <button type="button" wire:click.stop="openCreateTaskModal('{{ $dayDate }}')"
                        aria-label="New task on {{ $calendarDay->format('Y-m-d') }}"
                        class="inline-flex h-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $inMonth ? 'w-7' : 'w-auto px-2' }} {{ $calendarDay->isToday() ? 'bg-sky-600 text-white' : ($inMonth ? 'text-stone-900 hover:bg-stone-100' : 'text-stone-400 hover:bg-stone-200') }}">
                        <time datetime="{{ $dayDate }}" @if ($calendarDay->isToday()) aria-current="date" @endif>{{
                            $calendarDay->day }}{{ $inMonth ? '' : ' ' .
                            $calendarDay->locale('tr')->translatedFormat('F') }}</time>
                    </button>
                    <div class="flex flex-wrap items-center min-w-0 gap-1 pt-1">
                        @if ($dayExpenses !== null)
                        <span data-daily-expenses="{{ $dayDate }}" title="Expenses: {{ $dayExpenses }}"
                            aria-label="Expenses: {{ $dayExpenses }}"
                            class="inline-flex max-w-full items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-4 bg-rose-100 text-rose-700">
                            <span class="text-xs shrink-0 material-symbols-rounded" aria-hidden="true">north_east</span>
                            <span class="truncate">{{ $dayExpenses }}</span>
                        </span>
                        @endif
                        @if ($dayIncome !== null)
                        <span data-daily-collections="{{ $dayDate }}" title="Income: {{ $dayIncome }}"
                            aria-label="Income: {{ $dayIncome }}"
                            class="inline-flex max-w-full items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-4 bg-teal-100 text-teal-700">
                            <span class="text-xs shrink-0 material-symbols-rounded" aria-hidden="true">south_west</span>
                            <span class="truncate">{{ $dayIncome }}</span>
                        </span>
                        @endif
                    </div>
                </div>
                <ol class="flex-1 min-h-0 space-y-1 overflow-y-auto" aria-label="Tasks on {{ $dayDate }}">
                    @foreach ($dayTasks as $task)
                    @php
                    $taskText = \Illuminate\Support\Str::squish(
                    strip_tags(
                    trim($task->title ?? '') !== '' && trim($task->title) !== 'Görev'
                    ? $task->title
                    : $task->note,
                    ),
                    );
                    @endphp
                    <li wire:key="month-task-{{ $task->id }}">
                        <button type="button" draggable="true" data-task-id="{{ $task->id }}"
                            data-task-date="{{ $dayDate }}" x-on:dragstart.stop="startTaskDrag($event, {{ $task->id }})"
                            x-on:dragend="endTaskDrag($event)" wire:click.stop="openTaskModal({{ $task->id }})"
                            title="{{ $taskText }}"
                            class="flex w-full min-w-0 cursor-move items-center gap-1.5 rounded px-1 py-1 text-left text-xs hover:bg-sky-50 {{ $task->status === 'completed' ? 'text-stone-400' : 'font-medium text-stone-700' }}">
                            @if ($task->status === 'completed')
                            <span class="text-base leading-none text-teal-600 shrink-0 material-symbols-rounded"
                                aria-hidden="true">check</span>
                            @elseif ($calendarDay->isToday())
                            <span class="text-base leading-none shrink-0 material-symbols-rounded text-amber-500"
                                aria-hidden="true">play_arrow</span>
                            @else
                            <span class="text-base leading-none shrink-0 material-symbols-rounded text-amber-500"
                                aria-hidden="true">pause</span>
                            @endif
                            <span class="min-w-0 truncate">{{ \Illuminate\Support\Str::limit($taskText, 80) }}</span>
                            @if ($task->status === 'completed')
                            <span class="sr-only">Completed</span>
                            @endif
                        </button>
                        @if ($task->process)
                        <x-process-badge :process="$task->process" class="ml-4" />
                        @endif
                    </li>
                    @endforeach
                </ol>
            </div>
            @endfor
        </div>
    </div>
    </div>
</section>

<style>
    .month-calendar .month-day.drop-zone-active {
        border: 0 !important;
        outline: 2px dashed #ca8a04;
        outline-offset: -3px;
    }

    .month-calendar .month-day.drop-zone-hover {
        border: 0 !important;
        outline: 2px solid #0f9c90;
        outline-offset: -3px;
        background-color: #f0fdfa;
    }
</style>