@php
    use Illuminate\Support\Facades\Log;
@endphp
<div class="w-full flex flex-row gap-3">
    <div class="dispatcher-board-root w-2xl min-w-2xl">
        {{ $this->table }}
    </div>
    <div class="w-full">
        <div class="relative top-16 rounded col-span-5 grid grid-cols-7 grid-rows-5 p-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5"
            style="background-image: url({{ asset('images/soccerfield-cleand.jpg') }});">
            @foreach ($beschriftung as $boxNumber => $benennung)
                @if ($benennung)
                    <div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
                        @dragleave.prevent="isOver = false"
                        @drop.prevent="
                            isOver = false;
                            const rawData = $event.dataTransfer.getData('text/plain');
                            if (rawData) {
                                const elementData = JSON.parse(rawData);
                                $wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
                            }
                        "
                        :class="isOver ? 'border-primary-500 bg-primary-500/10 ring-2 ring-primary-500/50 scale-[1.02]' :
                            'border-gray-800 bg-white/30'"
                        class="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs transform">
                        <!-- Box Header -->
                        <div class="grid grid-cols-6 items-center p-1">
                            <div></div>
                            <div
                                class="w-16 text-center mx-auto bg-black text-white p-1 text-xl font-black rounded col-span-4">
                                {{ $benennung }}
                            </div>

                            @if ($boxes[$boxNumber])
                                <x-filament::icon-button icon="heroicon-m-trash" color="danger"
                                    wire:click="clearBox({{ $boxNumber }})" />
                            @endif
                        </div>

                        <!-- Box Inhalt -->
                        @if ($boxes[$boxNumber])
                            <div class=" bg-black text-white p-1 m-2 rounded leading-5">
                                {{ $boxes[$boxNumber]['name'] }}
                            </div>
                        @endif
                    </div>
                @else
                    <div></div>
                @endif
            @endforeach
        </div>
    </div>
</div>