{{-- GÖREV SEPETİ (BEKLEYEN TARİHSİZ GÖREVLER) — SOL ALT KÖŞEDE AÇILIR PENCERE --}}
<div x-data="{ open: false }" @task-basket-toggle.window="open = $event.detail.open" x-show="open" x-cloak
    x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-4"
    x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4"
    class="fixed bottom-20 left-4 z-20 flex flex-col w-[30rem] max-w-[calc(50vw-2rem)] max-h-[60vh] overflow-hidden rounded-xl shadow-2xl ring-1 ring-black/5">
    <div class="p-3 bg-white border rounded-lg border-stone-200">
        <div class="min-h-[30px] rounded grid items-center task-basket drop-zone" x-data="{ isDragOver: false }"
            x-on:dragover.prevent="isDragOver = true" x-on:dragleave.prevent="isDragOver = false"
            x-on:drop.prevent="handleBasketDrop($event)" :class="{ 'border-amber-600': isDragOver }">
            @if ($basket_tasks->count() > 0)
                <div class="flex flex-col gap-2 overflow-y-auto task-list" data-date="null" style="max-height: 240px;">
                    @foreach ($basket_tasks as $task)
                        <div class="relative grid items-center p-2 m-1 rounded-r-lg shadow bg-white border-l-4 {{ $task->color == null ? 'border-stone-200' : 'border-' . $task->color . '-500' }} {{ $task->status === 'completed' ? 'opacity-60' : '' }} cursor-move hover:outline hover:outline-stone-300"
                            wire:key="basket-{{ $task->id }}" draggable="true" data-task-id="{{ $task->id }}"
                            data-task-date="null" x-on:dragstart="startTaskDrag($event, {{ $task->id }})"
                            x-on:dragend="endTaskDrag($event)" wire:click="openTaskModal({{ $task->id }})">
                            <div class="grid items-center text-xs italic text-left gap-y-1 text-stone-800">
                                {{-- ASSIGNED USER BADGE - TOP POSITION --}}
                                @if ($task->assignedUser)
                                    <div>
                                        <span
                                            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-violet-100 text-violet-700 ring-1 ring-inset ring-violet-500/20">
                                            @if (auth()->id() !== $task->user_id && auth()->id() !== $task->assigned_to)
                                                {{ $task->assignedUser->name }}
                                            @endif
                                            @if (auth()->id() == $task->user_id)
                                                Siz<span class="text-xs material-symbols-rounded">arrow_forward</span>
                                                {{ $task->assignedUser->name }}
                                            @endif
                                            @if (auth()->id() == $task->assigned_to)
                                                {{-- Current user is the assigner - show right arrow --}}
                                                {{ $task->creator->name }}
                                                <span class="text-xs material-symbols-rounded">arrow_forward</span>Siz
                                            @endif
                                        </span>
                                    </div>
                                @endif
                                <p>{{ trim($task->title ?? '') !== '' && trim($task->title) !== 'Görev' ? $task->title : $task->note }}
                                </p>
                                <x-process-badge :process="$task->process" />
                                <!-- TASK INFO ICONS -->
                                <div class="flex items-center flex-nowrap px-1 pt-1 gap-x-2.5 text-stone-400">
                                    @if ($task->linkedGmailMessages->isNotEmpty())
                                        <!-- IF MAIL -->
                                        <img class="w-4 h-4" src="https://cdn.apper.com.tr/img/brands/gmail.ico"
                                            alt="">
                                    @endif
                                    @if ($task->notes->isNotEmpty())
                                        <!-- IF NOTE -->
                                        <svg class="size-[18px]" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 640 640">
                                            <path
                                                d="M384 128C384 145.7 369.7 160 352 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L352 96C369.7 96 384 110.3 384 128zM384 384C384 401.7 369.7 416 352 416L128 416C110.3 416 96 401.7 96 384C96 366.3 110.3 352 128 352L352 352C369.7 352 384 366.3 384 384zM96 256C96 238.3 110.3 224 128 224L512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288L128 288C110.3 288 96 273.7 96 256zM544 512C544 529.7 529.7 544 512 544L128 544C110.3 544 96 529.7 96 512C96 494.3 110.3 480 128 480L512 480C529.7 480 544 494.3 544 512z" />
                                        </svg>
                                    @endif
                                    @if ($task->company)
                                        <!-- IF COMPANY -->
                                        <div class="flex items-center shrink-0 gap-x-1.5">
                                            <span title="{{ Str::limit($task->company->name, 10) }}">
                                                <svg class="size-[18px]" fill="currentColor"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                                                    <path
                                                        d="M53.5 245.1L110.3 131.4C121.2 109.7 143.3 96 167.6 96L472.5 96C496.7 96 518.9 109.7 529.7 131.4L586.5 245.1C590.1 252.3 592 260.2 592 268.3C592 295.6 570.8 318 544 319.9L544 512C544 529.7 529.7 544 512 544C494.3 544 480 529.7 480 512L480 320L384 320L384 496C384 522.5 362.5 544 336 544L144 544C117.5 544 96 522.5 96 496L96 319.9C69.2 318 48 295.6 48 268.3C48 260.3 49.9 252.3 53.5 245.1zM160 320L160 432C160 440.8 167.2 448 176 448L304 448C312.8 448 320 440.8 320 432L320 320L160 320z" />
                                                </svg>
                                            </span>
                                            <span class="text-[9px]"
                                                style="white-space:nowrap">{{ Str::limit($task->company->name, 10) }}</span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="flex items-center justify-center text-xs font-normal text-stone-400">
                    Kartları buraya sürükleyin ve daha sonra organize edin.
                </div>
            @endif
        </div>
    </div>
</div>