From 2e829b984fd4af87bd3cd001ad0f42058ed8f202 Mon Sep 17 00:00:00 2001
From: salam <hermann.telser@gmail.com>
Date: Fri, 4 Sep 2026 20:14:14 +0200
Subject: [PATCH] wip

---
 resources/views/livewire/backup.txt | 151 ++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 resources/views/livewire/backup.txt

diff --git a/resources/views/livewire/backup.txt b/resources/views/livewire/backup.txt
new file mode 100644
index 00000000..63abff6e
--- /dev/null
+++ b/resources/views/livewire/backup.txt
@@ -0,0 +1,151 @@
+{{-- 
+<div class="h-full grid grid-cols-10 gap-3" x-data="{
+    activeTab: 'tab1';
+
+    // Übergibt das PHP Array sicher an JavaScript
+    sources: [
+        { id: 'source-1', name: 'Kader', items: @js($players) }
+    ],
+    dropzones: Array.from({ length: 21 }, (_, i) => ({ id: i + 1 })),
+
+    init() {
+        this.$nextTick(() => {
+            const allContainers = this.$el.querySelectorAll('.drag-container');
+            const drake = dragula(Array.from(allContainers), { revertOnSpill: true });
+
+            drake.on('drop', (el, target, source) => {
+                const playerId = el.getAttribute('data-item-id');
+                const targetZone = target.getAttribute('data-container-id');
+                console.log('Spieler ID ' + playerId + ' ist jetzt in Zone ' + targetZone);
+
+                // Optional: Sende die Daten zurück an PHP/Livewire
+                // $wire.updatePlayerPosition(playerId, targetZone);
+            });
+        });
+    }
+}">
+    <div class="col-span-4 bg-gray-100 p-3 border border-gray-300">
+        <!-- Tab Navigation -->
+        <x-filament::tabs label="Content tabs">
+            <x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
+                ATTACK
+            </x-filament::tabs.item>
+            <x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
+                MIDFIELD
+            </x-filament::tabs.item>
+            <x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
+                DEFENCE
+            </x-filament::tabs.item>
+            <x-filament::tabs.item alpine-active="activeTab === 'tab4'" x-on:click="activeTab = 'tab4'">
+                GOALKEEPER
+            </x-filament::tabs.item>
+        </x-filament::tabs>
+
+        <!-- Tab Content -->
+        <div class="mt-4">
+            <div x-show="activeTab === 'tab1'" class="grid grid-cols-4 gap-1 h-full justify-center"
+                x-ref="drag-container">
+                <!-- Die Filament-Komponente rendert das HTML, Alpine bindet die ID dynamisch -->
+                <template x-for="player in sources[0].items" :key="player.player_id">
+                    <!-- Der Wrapper, den Dragula greift -->
+                    <div class="drag-item mb-2" :data-item-id="player.player_id">
+                        <!-- Die Filament-Komponente für das Styling -->
+                        <x-filament::button size="sm" color="gray"
+                            class="w-full pointer-events-none text-left justify-start">
+                            ⚽️ <span x-text="player.player_name"></span>
+                        </x-filament::button>
+                    </div>
+                </template>
+                {{-- @foreach ($grid as $key => $ele)
+                    @if (isset($ele['player_id']) && $ele['position'] == 'ATTACK')
+                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
+                            tooltip="{{ $ele['info'] }}">
+                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
+                                {{ $ele['position'] }}
+                            </div>
+                            <div class="text-wrap font-bold mt-5">
+                                {{ $ele['name'] }}
+                            </div>
+                        </x-filament::button>
+                    @endif
+                @endforeach --}}
+</div>
+<div x-show="activeTab === 'tab2'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
+    {{-- @foreach ($grid as $key => $ele)
+                    @if (isset($ele['player_id']) && $ele['position'] == 'MIDFIELD')
+                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
+                            tooltip="{{ $ele['info'] }}">
+                            <div
+                                class="dragable absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
+                                {{ $ele['position'] }}</div>
+                            <div class="text-wrap font-bold mt-5">
+                                {{ $ele['name'] }}
+                            </div>
+                        </x-filament::button>
+                    @endif
+                @endforeach --}}
+</div>
+<div x-show="activeTab === 'tab3'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
+    {{-- @foreach ($grid as $key => $ele)
+                    @if (isset($ele['player_id']) && $ele['position'] == 'DEFENCE')
+                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
+                            tooltip="{{ $ele['info'] }}">
+                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
+                                {{ $ele['position'] }}</div>
+                            <div class="text-wrap font-bold mt-5">
+                                {{ $ele['name'] }}
+                            </div>
+                        </x-filament::button>
+                    @endif
+                @endforeach --}}
+</div>
+<div x-show="activeTab === 'tab4'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
+    {{-- @foreach ($grid as $key => $ele)
+                    @if (isset($ele['player_id']) && $ele['position'] == 'GOALKEEPER')
+                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-24" tooltip="{{ $ele['info'] }}">
+                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
+                                {{ $ele['position'] }}</div>
+                            <div class="text-wrap font-bold mt-5">
+                                {{ $ele['name'] }}
+                            </div>
+                        </x-filament::button>
+                    @endif
+                @endforeach --}}
+</div>
+</div>
+</div>
+<div class="col-span-6 h-full flex flex-col gap-5">
+    <div class="py-2 w-full text-center">
+        <x-filament::button color="gray" icon="phosphor-arrows-counter-clockwise">
+            Reset
+        </x-filament::button>
+        <x-filament::button color="gray" icon="phosphor-copy">
+            Copy
+        </x-filament::button>
+        <x-filament::button color="gray" icon="phosphor-calculator">
+            Calculate
+        </x-filament::button>
+        <x-filament::button color="gray" icon="phosphor-floppy-disk">
+            Store
+        </x-filament::button>
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
+            Close
+        </x-filament::button>
+    </div>
+    <div class="grid grid-cols-5 grid-rows-7 w-full bg-cover bg-center border h-full"
+        style="background-image:url({{ asset('svg/soccerfield.svg') }})">
+        {{-- first row --}}
+        <div></div>
+        <div></div>
+        <div x-ref="drag-container" :data-container-id="a1" class="dropper">SW</div>
+        <div></div>
+        <div></div>
+        {{-- second row --}}
+        <div x-ref="drag-container" :data-container-id="b1" class="dropper">DR</div>
+        <div x-ref="drag-container" :data-container-id="b2" class="dropper">DC</div>
+        <div x-ref="drag-container" :data-container-id="b3" class="dropper">DC</div>
+        <div x-ref="drag-container" :data-container-id="b4" class="dropper">DC</div>
+        <div x-ref="drag-container" :data-container-id="b5" class="dropper">DL</div>
+    </div>
+</div>
+</div> --}}