From 9f1650572c93b73192828a1f7e586b5fc0efcc95 Mon Sep 17 00:00:00 2001
From: salam <hermann.telser@gmail.com>
Date: Sat, 5 Sep 2026 08:19:49 +0200
Subject: [PATCH] wip

---
 app/Livewire/BoardDispatcher.php              |  98 ++++++--
 .../views/livewire/board-dispatcher.blade.php | 215 +++++++++++-------
 2 files changed, 206 insertions(+), 107 deletions(-)

diff --git a/app/Livewire/BoardDispatcher.php b/app/Livewire/BoardDispatcher.php
index c753ee09..82134b37 100644
--- a/app/Livewire/BoardDispatcher.php
+++ b/app/Livewire/BoardDispatcher.php
@@ -8,21 +8,25 @@ class BoardDispatcher extends Component
 {
     public array $lists = [];
 
+    public string $boardVersion = '';
+
     public function mount()
     {
-        $this->lists['source-attack'] = [
-            ['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-attack'],
-            ['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-attack'],
+        $this->boardVersion = uniqid();
+
+        $this->lists['source-1'] = [
+            ['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-1'],
+            ['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-1'],
         ];
-        $this->lists['source-midfield'] = [
-            ['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-midfield'],
+        $this->lists['source-2'] = [
+            ['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-2'],
         ];
-        $this->lists['source-defence'] = [
-            ['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-defence'],
-            ['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-defence'],
+        $this->lists['source-3'] = [
+            ['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-3'],
+            ['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-3'],
         ];
-        $this->lists['source-goalkeeper'] = [
-            ['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-goalkeeper'],
+        $this->lists['source-4'] = [
+            ['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-4'],
         ];
 
         for ($i = 1; $i <= 21; $i++) {
@@ -35,29 +39,35 @@ class BoardDispatcher extends Component
         $itemId = (string) $itemId;
         $newIndex = (int) $newIndex;
 
-        // Abbrechen falls kein Ziel vorhanden ist oder die Position unverändert blieb
-        if (! $toList || $fromList === $toList) {
+        if (! $toList || $fromList === $toList || ! isset($this->lists[$fromList]) || ! isset($this->lists[$toList])) {
+            $this->boardVersion = uniqid();
+
+            return;
+        }
+
+        // Limit-Guard: Wenn das Ziel bereits ein Element enthält, abbrechen
+        if (count($this->lists[$toList]) >= 1) {
+            $this->boardVersion = uniqid();
+
             return;
         }
 
         $foundItem = null;
 
-        // 1. Element aus der alten Liste entfernen
-        if (isset($this->lists[$fromList])) {
-            foreach ($this->lists[$fromList] as $key => $item) {
-                if ((string) $item['id'] === $itemId) {
-                    $foundItem = $item;
-                    unset($this->lists[$fromList][$key]);
-                    $this->lists[$fromList] = array_values($this->lists[$fromList]); // Array-Keys korrigieren
-                    break;
-                }
+        foreach ($this->lists[$fromList] as $key => $item) {
+            if ((string) $item['id'] === $itemId) {
+                $foundItem = $item;
+                unset($this->lists[$fromList][$key]);
+                $this->lists[$fromList] = array_values($this->lists[$fromList]);
+                break;
             }
         }
 
-        // 2. Element in die neue Zielliste am exakten Index einfügen
-        if ($foundItem && isset($this->lists[$toList])) {
+        if ($foundItem) {
             array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
         }
+
+        $this->boardVersion = uniqid();
     }
 
     public function returnToOrigin($itemId, $currentListId)
@@ -65,6 +75,8 @@ class BoardDispatcher extends Component
         $itemId = (string) $itemId;
 
         if (! isset($this->lists[$currentListId])) {
+            $this->boardVersion = uniqid();
+
             return;
         }
 
@@ -80,8 +92,46 @@ class BoardDispatcher extends Component
         }
 
         if ($foundItem && isset($this->lists[$foundItem['origin']])) {
-            array_unshift($this->lists[$foundItem['origin']], $foundItem);
+            // Nur zurücklegen, wenn die Quelle wirklich frei ist
+            if (count($this->lists[$foundItem['origin']]) < 1) {
+                array_unshift($this->lists[$foundItem['origin']], $foundItem);
+            } else {
+                // Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
+                array_unshift($this->lists[$currentListId], $foundItem);
+            }
         }
+
+        $this->boardVersion = uniqid();
+    }
+
+    public function resetBoard()
+    {
+        // Alle 21 Zielbays durchlaufen
+        for ($i = 1; $i <= 21; $i++) {
+            $bayKey = "dest-{$i}";
+
+            if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+                foreach ($this->lists[$bayKey] as $item) {
+                    $targetOrigin = $item['origin'];
+
+                    // Element zurück in sein Original-Quell-Tab schieben
+                    if (isset($this->lists[$targetOrigin])) {
+                        array_unshift($this->lists[$targetOrigin], $item);
+                    }
+                }
+
+                // Die Zielbucht komplett leeren
+                $this->lists[$bayKey] = [];
+            }
+        }
+
+        // Falls Sie die boardVersion-Logik nutzen, erneuern wir sie hier für den DOM-Refresh:
+        if (property_exists($this, 'boardVersion')) {
+            $this->boardVersion = uniqid();
+        }
+
+        // Falls Sie die Javascript-Event/ignore-Logik nutzen, feuern wir das Refresh-Event:
+        $this->dispatch('refreshBoard', lists: $this->lists);
     }
 
     public function render()
diff --git a/resources/views/livewire/board-dispatcher.blade.php b/resources/views/livewire/board-dispatcher.blade.php
index 37206298..e696bd28 100644
--- a/resources/views/livewire/board-dispatcher.blade.php
+++ b/resources/views/livewire/board-dispatcher.blade.php
@@ -1,112 +1,119 @@
-<!-- Ermittelt dynamisch die erste verfügbare Quelle als Start-Tab -->
 <div class="space-y-6 max-h-[75vh] overflow-y-auto p-1" 
-     x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }">
+     x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }"
+     id="dispatcher-board-root">
     
-    <!-- 🌟 SEKTION 1: DIE 4 SOURCE-CONTAINER IN NATIVEN FILAMENT TABS -->
-    <div wire:key="sources-tab-container">
-        
-        <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4" wire:key="header-split-zone">     
-   
-            <!-- Native Filament Tabs-Leiste -->
-            <x-filament::tabs wire:key="filament-tabs-bar">
+    <!-- 🌟 SPLIT HEADER -->
+    <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
+        <div class="flex-1 overflow-x-auto min-w-0">
+            <x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
                 @foreach($lists as $listId => $items)
                     @if(str_starts_with($listId, 'source-'))
-                        <x-filament::tabs.item icon="heroicon-m-bell"
+                        <x-filament::tabs.item 
                             :alpine-active="'activeTab === \'' . $listId . '\''"
                             x-on:click="activeTab = '{{ $listId }}'"
                             wire:key="tab-button-{{ $listId }}"
-                            class="cursor-pointer">
-                            
-                            <div class="flex items-center space-x-2">
-                                <span>{{ ucwords(str_replace('source-', '', $listId)) }}</span>
-                                <!-- Kleiner Zähler direkt im Tab-Titel -->
-                                <x-filament::badge size="xs" color="gray">
+                            class="cursor-pointer !px-2 !py-1 !min-h-0 text-[11px] font-medium tracking-tight rounded-md">
+                            <div class="flex items-center space-x-1.5 leading-none">
+                                <span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
+                                <span class="inline-flex items-center justify-center px-1 py-0.5 text-[10px] font-mono font-bold bg-primary-500/10 text-primary-600 dark:text-primary-400 rounded-md">
                                     {{ count($items) }}
-                                </x-filament::badge>
+                                </span>
                             </div>
-                            
                         </x-filament::tabs.item>
                     @endif
                 @endforeach
             </x-filament::tabs>
-
-            <div class="flex items-center pl-4 shrink-0" wire:key="modal-close-right-side">
-                <x-filament::icon-button 
-                    icon="heroicon-m-x-mark" 
-                    color="gray" 
-                    size="md"
-                    label="Schließen"
-                    tooltip="Modal schließen"
-                    x-on:click="close()" 
-                    class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
-                />
-            </div>
         </div>
+        <!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
+        <div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
+            
+            <!-- Reset-Button -->
+            <x-filament::icon-button 
+                icon="heroicon-m-arrow-path" 
+                color="warning" 
+                size="md"
+                label="Reset"
+                tooltip="Alle Elemente zurücksetzen"
+                @click.stop="
+                    if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
+                        // 💡 ALLE AKTIVEN SORTABLE-INSTANZEN IM BROWSER ZERSTÖREN, UM DEN CODELOCK ZU LÖSCHEN
+                        document.querySelectorAll('.sortable-zone').forEach(el => {
+                            if (el._sortableInstance) {
+                                try {
+                                    el._sortableInstance.destroy();
+                                    el._sortableInstance = null;
+                                } catch(err) { 
+                                    // Ignoriert verwaiste Instanzen geräuschlos
+                                }
+                            }
+                        });
 
-        <!-- Tab-Inhalte (Die Listen selbst) -->
-        <div class="mt-4" wire:key="sources-lists-loop">
-            @foreach($lists as $listId => $items)
-                @if(str_starts_with($listId, 'source-'))
-                    <div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
-                        <x-filament::section compact>
-                            <!-- SortableJS Container für die aktive Quelle -->
-                            <div x-init="new Sortable($el, {
-                                     group: 'master-board',
-                                     animation: 150,
-                                     onEnd: function(evt) {
-                                         $wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
-                                     }
-                                 })" 
-                                 id="{{ $listId }}"
-                                 class="space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-30 transition duration-200 hover:border-primary-500">
-                                
-                                @foreach($items as $item)
-                                    <div data-id="{{ $item['id'] }}" 
-                                         wire:key="item-source-{{ $item['id'] }}"
-                                         class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing hover:border-primary-500 dark:hover:border-primary-500 transition-all">
-                                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
-                                        <svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
-                                        </svg>
-                                    </div>
-                                @endforeach
-                            </div>
-                        </x-filament::section>
-                    </div>
-                @endif
-            @endforeach
+                        // 💡 ERST JETZT DEN SERVER-RESET AUSFÜHREN
+                        $wire.resetBoard();
+                    }
+                "
+                class="cursor-pointer"
+            />
+
+            <!-- Schließen-Button -->
+            <x-filament::icon-button 
+                icon="heroicon-m-x-mark" 
+                color="gray" 
+                size="md" 
+                label="Schließen" 
+                x-on:click="close()" 
+                class="cursor-pointer" 
+            />
         </div>
     </div>
 
-    <!-- 🌟 SEKTION 2: DIE 21 DESTINATION BAYS -->
-    <div wire:key="destinations-main-container">
+    <!-- 🌟 SEKTION 1: SOURCES -->
+    <div>
+        <div class="text-xs font-bold uppercase tracking-wider text-primary-500 mb-3">Available Sources</div>
+        @foreach($lists as $listId => $items)
+            @if(str_starts_with($listId, 'source-'))
+                <div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
+                    <x-filament::section compact>
+                        <!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
+                        <div id="{{ $listId }}"
+                             class="sortable-zone space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-[120px]">
+                            
+                            @foreach($items as $item)
+                                <div data-id="{{ $item['id'] }}" 
+                                     wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
+                                     class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
+                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
+                                    <svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
+                                    </svg>
+                                </div>
+                            @endforeach
+                        </div>
+                    </x-filament::section>
+                </div>
+            @endif
+        @endforeach
+    </div>
+
+    <!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
+    <div>
         <div class="text-xs font-bold uppercase tracking-wider text-success-500 mb-3">Target Destination Slots (21)</div>
-        
-        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3" wire:key="destations-grid-loop">
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
             @foreach($lists as $listId => $items)
                 @if(str_starts_with($listId, 'dest-'))
                     <div class="bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700/50 rounded-xl p-3 flex flex-col min-h-[140px]" wire:key="box-{{ $listId }}">
                         <div class="flex items-center justify-between mb-2">
                             <span class="text-[11px] font-bold uppercase text-gray-500 dark:text-gray-400">Bay {{ str_replace('dest-', '', $listId) }}</span>
-                            <x-filament::badge color="success" size="xs">
-                                {{ count($items) }}
-                            </x-filament::badge>
+                            <x-filament::badge color="success" size="xs">{{ count($items) }}</x-filament::badge>
                         </div>
 
-                        <!-- SortableJS Container für das Zielgebiet -->
-                        <div x-init="new Sortable($el, {
-                                 group: 'master-board',
-                                 animation: 150,
-                                 onEnd: function(evt) {
-                                     $wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
-                                 }
-                             })" 
-                             id="{{ $listId }}"
-                             class="flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px] transition-colors duration-200 hover:border-success-500">
+                        <!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
+                        <div id="{{ $listId }}"
+                             class="sortable-zone flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px]">
                             
                             @foreach($items as $item)
                                 <div data-id="{{ $item['id'] }}" 
-                                     wire:key="item-dest-{{ $item['id'] }}"
+                                     wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
                                      class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs rounded-md p-2 flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing hover:border-danger-500 transition-all">
                                     
                                     <span class="truncate font-medium text-gray-900 dark:text-gray-100 flex-1">
@@ -114,16 +121,15 @@
                                     </span>
 
                                     <div class="flex items-center space-x-1 shrink-0">
-                                        <!-- Return Button -->
+                                        <!-- Zuverlässiger, direkter Livewire-Löschcall -->
                                         <button type="button"
                                                 title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
-                                                @click.stop="$wire.returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
+                                                wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
                                                 class="p-1 rounded text-gray-400 hover:text-danger-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
                                             <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                             </svg>
                                         </button>
-
                                         <svg class="h-3.5 w-3.5 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
                                         </svg>
@@ -137,3 +143,46 @@
         </div>
     </div>
 </div>
+
+<!-- 🌟 ZENTRALE AUTOMATISCHE INITIALISIERUNG NACH JEDEM RENDERING -->
+@script
+<script>
+    function setupSortableZones() {
+        document.querySelectorAll('.sortable-zone').forEach(el => {
+            // Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
+            if (el._sortableInstance) {
+                el._sortableInstance.destroy();
+            }
+
+            el._sortableInstance = new Sortable(el, {
+                group: {
+                    name: 'master-board',
+                    // Striktes Limit: Maximal 1 Kind-Element pro Box zulassen
+                    put: function(to, from) {
+                        if (from.el !== to.el) {
+                            return to.el.children.length < 1;
+                        }
+                        return true;
+                    }
+                },
+                animation: 150,
+                onEnd: function(evt) {
+                    if (evt.from.id !== evt.to.id) {
+                        // Triggert den Server-Call absolut fehlerfrei
+                        $wire.call('moveItem', evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
+                    }
+                }
+            });
+        });
+    }
+
+    // Initialer Aufruf beim Laden
+    setupSortableZones();
+
+    // 💡 DER ENTSCHEIDENDE FIX: Jedes Mal, wenn Livewire das DOM nach einer Array-Änderung (Löschen/Verschieben) aktualisiert,
+    // binden wir SortableJS sofort wieder frisch an alle 25 Container an!
+    Livewire.hook('morph.updated', () => {
+        setupSortableZones();
+    });
+</script>
+@endscript