wip

2026-09-13 15:40:30 +02:00
1 parent 08a1522868
commit 26052c6cfd
@@ -0,0 +1,68 @@
+<div class="mx-3 p-3 rounded-2xl col-span-3 grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5 shadow"
+    style="background-image: url({{ asset('images/soccerfield-af.jpg') }});">
+    @foreach ($beschriftung as $boxNumber => $benennung)
+        @if ($benennung)
+            @if (in_array($boxNumber, $lineup))
+                <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-red-500 bg-white/20 ring-2 ring-red-500/50 scale-[1.02]' :
+                        @if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/40'
+                    @elseif (in_array($benennung, ['DM', 'MR', 'MC', 'ML', 'AM'])) 
+                        'border-gray-800 bg-blue-500/40'
+                    @else
+                        'border-gray-800 bg-amber-500/40' @endif"
+                    class="border-2 rounded-xl transition-all px-1 pt-0 flex flex-col justify-start transform inset-shadow-sm inset-shadow-white/50 shadow-lg">
+                    <!-- Box Header -->
+                    <div class="grid grid-cols-6 items-center">
+                        <div></div>
+                        <div
+                            class="w-10 2xl:w-16 text-center mx-auto bg-black text-white p-0.5 2xl:p-1 text-md 2xl:text-xl font-black rounded-b col-span-4">
+                            {{ $benennung }}
+                        </div>
+
+                        @if ($boxes[$boxNumber])
+                            <x-filament::icon-button icon="heroicon-m-trash" color="black"
+                                class="dark:[&_svg]:text-black" size="sm"
+                                wire:click="clearBox({{ $boxNumber }})" />
+                        @endif
+                    </div>
+
+                    <!-- Box Inhalt -->
+                    @if ($boxes[$boxNumber])
+                        <div draggable="true"
+                            x-on:dragstart="e => {
+                                e.dataTransfer.effectAllowed = 'copy';
+                                e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $boxes[$boxNumber]['id'] }} }));
+                            }"
+                            class="cursor-grab active:cursor-grabbing bg-black border border-black hover:border-blue-500 text-white p-0.5 2xl:p-1 m-0.5 rounded leading-4 2xl:leading-5 text-ms">
+                            {{ $boxes[$boxNumber]['name'] }}
+                        </div>
+                    @endif
+                </div>
+            @else
+                <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="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs invisible">
+                </div>
+            @endif
+        @else
+            <div></div>
+        @endif
+    @endforeach
+</div>