wip

app/Console/Commands/Grap.php

@@ -69,7 +69,7 @@ class Grap extends Command
                 SetStorage::set(1);
                 // MoveToArchive::move(1);
 
-                // with m just resend
+                // with --m just resend mail
                 if (!self::$options['m']) {
                     Grapper::load(1);
                     MakeExcel::create();
@@ -87,26 +87,21 @@ class Grap extends Command
             case 3:
                 // RANGE
                 SetStorage::set(3);
-
                 Grapper::load(3);
-
                 MakeExcel::create();
 
                 break;
             case 4:
                 // ROSE
-
                 SetStorage::set(4);
-
                 Rose::run();
-
                 MakeExcel::create();
 
                 break;
             case 5:
                 SetStorage::set(5);
-
                 MakeExcel::create();
+
                 break;
             case 6:
                 PlayerPerSeason::run();

app/Livewire/BoardDispatcher.php

@@ -2,224 +2,337 @@
 
 namespace App\Livewire;
 
+use App\Models\SofaScoreRosa;
+use Filament\Actions\Action;
+use Filament\Actions\Concerns\InteractsWithActions;
+use Filament\Actions\Contracts\HasActions;
+use Filament\Schemas\Concerns\InteractsWithSchemas;
+use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
+use Filament\Schemas\Contracts\HasSchemas;
+use Filament\Tables\Columns\ViewColumn;
+use Filament\Tables\Concerns\InteractsWithTable;
+use Filament\Tables\Contracts\HasTable;
+use Filament\Tables\Enums\FiltersLayout;
+use Filament\Tables\Filters\SelectFilter;
+use Filament\Tables\Table;
 use Illuminate\Support\Facades\Log;
+use Livewire\Attributes\On;
 use Livewire\Component;
 
-class BoardDispatcher extends Component
+class BoardDispatcher extends Component implements HasActions, HasSchemas, HasTable
 {
+
+    use InteractsWithActions;
+    use InteractsWithSchemas;
+    use InteractsWithTable;
+    use RestrictsFileUploadsToSchemaComponents;
+
+    public array $sourceRecords = [];
     public array $lists = [];
     public array $results = [];
-    public array $destLabels = ['DR', 'MR', 'RW', 'DC', 'DM', 'MC', 'AM', 'SW', 'DC', 'DM', 'MC', 'AM', 'SM', 'ST', 'DC', 'DM', 'MC', 'AM', 'DL', 'ML', 'LM'];
+    public array $activeBoxes = [2 => 'DR', 4 => 'MR', 6 => 'RW', 9 => 'DC', 10 => 'DM', 11 => 'MC', 12 => 'AM', 15 => 'SW', 16 => 'DC', 17 => 'DM', 18 => 'MC', 19 => 'AM', 20 => 'SM', 21 => 'ST', 23 => 'DC', 24 => 'DM', 25 => 'MC', 26 => 'AM', 30 => 'DL', 32 => 'ML', 34 => 'LM'];
-    public string $boardVersion = '';
     public bool $copyDisabled = true;
     public bool $calculationDisabled = true;
     public string $calculationColor = 'gray';
     public string $copyColor = 'gray';
+    public string $ss_team_name = '';
+
+    public array $boxes = [];
+    public array $beschriftung = [];
 
     public function mount(array $filters)
     {
-        $this->boardVersion = uniqid();
+        $this->ss_team_name = SofaScoreRosa::where('ss_team_id', $filters['team_id'])->value('ss_team_name');
 
-        $this->lists = PlayerCalculator::load($filters);
+        $this->sourceRecords = PlayerCalculator::load($filters);
-
-        $active = [2, 4, 6, 9, 10, 11, 12, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 30, 32, 34];
 
         for ($i = 1; $i <= 35; $i++) {
-            if (in_array($i, $active))
+            $this->boxes[$i] = [];
-                $this->lists["dest-{$i}"] = [];
+            if (isset($this->activeBoxes[$i]))
+                $this->beschriftung[$i] = $this->activeBoxes[$i];
             else
-                $this->lists["blind-{$i}"] = [];
+                $this->beschriftung[$i] = '';
         }
+
+        Log::debug('boxes', $this->boxes);
     }
 
-    public function setCalculationButton()
+    public function table(Table $table): Table
     {
-        $count = 1;
+        return $table
-        for ($i = 1; $i <= 35; $i++) {
+            ->headerActions([
-            $bayKey = "dest-{$i}";
+                Action::make('close')->icon('phosphor-x')->close(),
-
+                Action::make('reset')->icon('phosphor-arrows-clockwise'),
-            if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+                Action::make('calculate')->icon('phosphor-calculator')->color('gray'),
-                $count++;
+                Action::make('download')->icon('phosphor-download')->color('gray'),
-            }
+            ])
-        }
+            /**
-        if ($count > 2) {
+             * WICHTIG: Da Filament v5 zwingend eine Query braucht, nutzen wir ein 
-            $this->calculationDisabled = false;
+             * leeres Modell (z.B. ein beliebiges Basis-Modell deines Projekts) NUR als Dummy-Builder.
-            $this->calculationColor = 'info';
+             * Alternativ kannst du ein anonymes Model nutzen.
-        } else {
+             */
-            $this->calculationDisabled = true;
+            ->query(\App\Models\User::query()->whereRaw('1 = 0')) // Verhindert DB-Abfragen
-            $this->calculationColor = 'gray';
+            ->paginated(false)
-        }
+            // ->striped()
-    }
+            ->defaultSort('name')
-
+            ->columns([
-    public function setCopyButton()
+                ViewColumn::make('drag_card')
-    {
+                    ->columnSpanFull()
-        if (\count($this->results) > 0) {
+                    ->label('Roster of ' . $this->ss_team_name)
-            $this->copyDisabled = false;
+                    ->view('filament.tables.columns.drag-card'),
-            $this->copyColor = 'info';
+            ])
-        } else {
+            ->filters([
-            $this->copyDisabled = true;
+                SelectFilter::make('player_position')
-            $this->copyColor = 'gray';
+                    ->columnSpanFull()
-        }
+                    ->options([
-    }
+                        'attack' => 'Attack',
-
+                        'midfield' => 'Midfield',
-    public function calculate()
+                        'defence' => 'Defence',
-    {
+                        'goalkeeper' => 'Goalkeeper',
-        $this->results = [];
+                    ])
-        for ($i = 1; $i <= 35; $i++) {
+                    ->query(function ($query, array $data) {
-            $bayKey = "dest-{$i}";
+                        return $query;
-
+                    }),
-            if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+            ], layout: FiltersLayout::AboveContent)
-                $this->results[] = $this->lists[$bayKey][0];
+            ->deferFilters(false)
-            }
+            ->records(function () {
-        }
+                $collection = collect($this->sourceRecords);
-
+                $selectedPosition = $this->tableFilters['player_position']['value'] ?? null;
-        $this->setCopyButton();
+                if (!empty($selectedPosition)) {
-    }
+                    $collection = $collection->where('player_position', $selectedPosition);
-
-    public function copyResult()
-    {
-        $copystring = '';
-        foreach ($this->results as $row) {
-            unset($row['origin']);
-            unset($row['pcolor']);
-            unset($row['ecolor']);
-            unset($row['info']);
-            $copystring .= implode("\t", $row) . "\n";
-        }
-        $this->js("navigator.clipboard.writeText(`$copystring`)");
-    }
-
-
-    public function moveItem($itemId, $fromList, $toList, $newIndex)
-    {
-        $itemId = (string) $itemId;
-        $newIndex = (int) $newIndex;
-
-        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;
-
-        foreach ($this->lists[$fromList] as $key => $item) {
-            if ((string) $item['id'] === $itemId) {
-                $item['position'] = $this->positions($toList);
-                $foundItem = $item;
-                unset($this->lists[$fromList][$key]);
-                $this->lists[$fromList] = array_values($this->lists[$fromList]);
-                break;
-            }
-        }
-
-        if ($foundItem) {
-            array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
-        }
-
-        $this->setCalculationButton();
-
-        $this->boardVersion = uniqid();
-    }
-
-    public function positions(string $pos)
-    {
-        $pos = (int) str_replace('dest-', '', $pos);
-        $options = [2 => 'DR', 4 => 'MR', 6 => 'RW', 9 => 'DC', 10 => 'DM', 11 => 'MC', 12 => 'AM', 15 => 'SW', 16 => 'DC', 17 => 'DM', 18 => 'MC', 19 => 'AM', 20 => 'SM', 21 => 'ST', 23 => 'DC', 24 => 'DM', 25 => 'MC', 26 => 'AM', 30 => 'DL', 32 => 'ML', 34 => 'LM'];
-        if (isset($options[$pos]))
-            return $options[$pos];
-        else
-            return $pos;
-    }
-
-    public function returnToOrigin($itemId, $currentListId)
-    {
-        $itemId = (string) $itemId;
-
-        // Log::info($this->boardVersion);
-        // Log::info('itemId, currentListId', [$itemId, $currentListId]);
-        // Log::info('OLD LIST', $this->lists);
-
-        if (! isset($this->lists[$currentListId])) {
-            $this->boardVersion = uniqid();
-
-            return;
-        }
-
-        $foundItem = null;
-
-        foreach ($this->lists[$currentListId] as $key => $item) {
-            if ((string) $item['id'] === $itemId) {
-                $foundItem = $item;
-                unset($this->lists[$currentListId][$key]);
-                $this->lists[$currentListId] = array_values($this->lists[$currentListId]);
-                break;
-            }
-        }
-
-        if ($foundItem && isset($this->lists[$foundItem['origin']])) {
-            // Nur zurücklegen, wenn die Quelle wirklich frei ist
-            array_unshift($this->lists[$foundItem['origin']], $foundItem);
-            // if (count($this->lists[$foundItem['origin']]) < 2) {
-            //     Log::info('origin');
-            //     array_unshift($this->lists[$foundItem['origin']], $foundItem);
-            // } else {
-            //     // Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
-            //     array_unshift($this->lists[$currentListId], $foundItem);
-            //     Log::info('box');
-            // }
-        }
-
-        $this->setCalculationButton();
-
-        $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);
-                    }
                 }
+                return $collection;
+            });
+    }
 
-                // Die Zielbucht komplett leeren
+    #[On('element-dropped-in-box')]
-                $this->lists[$bayKey] = [];
+    public function handleElementDropped(mixed $elementData, mixed $boxNumber): void
+    {
+        $boxNumber = (int) $boxNumber;
+        $player = is_array($elementData) ? $elementData : json_decode($elementData, true);
+
+        if (!$player || !isset($player['id'])) {
+            return;
+        }
+
+        foreach ($this->sourceRecords as $k => $record) {
+            if ($record['id'] == (int) $player['id']) {
+                if ($this->boxes[$boxNumber]) {
+                    $this->clearBox($boxNumber);
+                }
+                $this->boxes[$boxNumber] = $record;
+                $this->sourceRecords[$k]['active'] = 1;
             }
         }
+    }
 
-        // Falls Sie die boardVersion-Logik nutzen, erneuern wir sie hier für den DOM-Refresh:
+    public function clearBox(int $boxNumber): void
-        if (property_exists($this, 'boardVersion')) {
+    {
-            $this->boardVersion = uniqid();
+        if (isset($this->boxes[$boxNumber])) {
+            $tmp = $this->boxes[$boxNumber];
+            $player_id = 0;
+            foreach ($tmp as $key => $value) {
+                if ($key == 'id')
+                    $player_id = $value;
+            }
+            foreach ($this->sourceRecords as $k => $record) {
+                if ($record['id'] == (int) $player_id) {
+                    $this->boxes[$boxNumber] = [];
+                    $this->sourceRecords[$k]['active'] = 0;
+                }
+            }
         }
-
-        // Falls Sie die Javascript-Event/ignore-Logik nutzen, feuern wir das Refresh-Event:
-        $this->dispatch('refreshBoard', lists: $this->lists);
-
-        $this->results = [];
-
-        $this->setCalculationButton();
-
-        $this->setCopyButton();
     }
 
     public function render()
     {
         return view('livewire.board-dispatcher');
     }
+
+
+    // public function setCalculationButton()
+    // {
+    //     $count = 1;
+    //     for ($i = 1; $i <= 35; $i++) {
+    //         $bayKey = "dest-{$i}";
+
+    //         if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+    //             $count++;
+    //         }
+    //     }
+    //     if ($count > 2) {
+    //         $this->calculationDisabled = false;
+    //         $this->calculationColor = 'info';
+    //     } else {
+    //         $this->calculationDisabled = true;
+    //         $this->calculationColor = 'gray';
+    //     }
+    // }
+
+    // public function setCopyButton()
+    // {
+    //     if (\count($this->results) > 0) {
+    //         $this->copyDisabled = false;
+    //         $this->copyColor = 'info';
+    //     } else {
+    //         $this->copyDisabled = true;
+    //         $this->copyColor = 'gray';
+    //     }
+    // }
+
+    // public function calculate()
+    // {
+    //     $this->results = [];
+    //     for ($i = 1; $i <= 35; $i++) {
+    //         $bayKey = "dest-{$i}";
+
+    //         if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+    //             $this->results[] = $this->lists[$bayKey][0];
+    //         }
+    //     }
+
+    //     $this->setCopyButton();
+    // }
+
+    // public function copyResult()
+    // {
+    //     $copystring = '';
+    //     foreach ($this->results as $row) {
+    //         unset($row['origin']);
+    //         unset($row['pcolor']);
+    //         unset($row['ecolor']);
+    //         unset($row['info']);
+    //         $copystring .= implode("\t", $row) . "\n";
+    //     }
+    //     $this->js("navigator.clipboard.writeText(`$copystring`)");
+    // }
+
+
+    // public function moveItem($itemId, $fromList, $toList, $newIndex)
+    // {
+    //     $itemId = (string) $itemId;
+    //     $newIndex = (int) $newIndex;
+
+    //     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;
+
+    //     foreach ($this->lists[$fromList] as $key => $item) {
+    //         if ((string) $item['id'] === $itemId) {
+    //             $item['position'] = $this->positions($toList);
+    //             $foundItem = $item;
+    //             unset($this->lists[$fromList][$key]);
+    //             $this->lists[$fromList] = array_values($this->lists[$fromList]);
+    //             break;
+    //         }
+    //     }
+
+    //     if ($foundItem) {
+    //         array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
+    //     }
+
+    //     $this->setCalculationButton();
+
+    //     $this->boardVersion = uniqid();
+    // }
+
+    // public function positions(string $pos)
+    // {
+    //     $pos = (int) str_replace('dest-', '', $pos);
+    //     $options = [2 => 'DR', 4 => 'MR', 6 => 'RW', 9 => 'DC', 10 => 'DM', 11 => 'MC', 12 => 'AM', 15 => 'SW', 16 => 'DC', 17 => 'DM', 18 => 'MC', 19 => 'AM', 20 => 'SM', 21 => 'ST', 23 => 'DC', 24 => 'DM', 25 => 'MC', 26 => 'AM', 30 => 'DL', 32 => 'ML', 34 => 'LM'];
+    //     if (isset($options[$pos]))
+    //         return $options[$pos];
+    //     else
+    //         return $pos;
+    // }
+
+    // public function returnToOrigin($itemId, $currentListId)
+    // {
+    //     $itemId = (string) $itemId;
+
+    //     // Log::info($this->boardVersion);
+    //     // Log::info('itemId, currentListId', [$itemId, $currentListId]);
+    //     // Log::info('OLD LIST', $this->lists);
+
+    //     if (! isset($this->lists[$currentListId])) {
+    //         $this->boardVersion = uniqid();
+
+    //         return;
+    //     }
+
+    //     $foundItem = null;
+
+    //     foreach ($this->lists[$currentListId] as $key => $item) {
+    //         if ((string) $item['id'] === $itemId) {
+    //             $foundItem = $item;
+    //             unset($this->lists[$currentListId][$key]);
+    //             $this->lists[$currentListId] = array_values($this->lists[$currentListId]);
+    //             break;
+    //         }
+    //     }
+
+    //     if ($foundItem && isset($this->lists[$foundItem['origin']])) {
+    //         // Nur zurücklegen, wenn die Quelle wirklich frei ist
+    //         array_unshift($this->lists[$foundItem['origin']], $foundItem);
+    //         // if (count($this->lists[$foundItem['origin']]) < 2) {
+    //         //     Log::info('origin');
+    //         //     array_unshift($this->lists[$foundItem['origin']], $foundItem);
+    //         // } else {
+    //         //     // Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
+    //         //     array_unshift($this->lists[$currentListId], $foundItem);
+    //         //     Log::info('box');
+    //         // }
+    //     }
+
+    //     $this->setCalculationButton();
+
+    //     $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);
+
+    //     $this->results = [];
+
+    //     $this->setCalculationButton();
+
+    //     $this->setCopyButton();
+    // }
 }

app/Livewire/PlayerCalculator.php

@@ -88,62 +88,50 @@ class PlayerCalculator extends Component
             $colorlevel = round($matches->count() / 3);
 
             if (in_array($val['player_position'], $positions_map['MIDFIELD'])) {
-                $origin = 'source-midfield';
+                $player_position = 'midfield';
-                $pcolor = 'info';
+                $player_color = 'info';
             } elseif (in_array($val['player_position'], $positions_map['DEFENCE'])) {
-                $origin = 'source-defence';
+                $player_position = 'defence';
-                $pcolor = 'success';
+                $player_color = 'success';
             } elseif (in_array($val['player_position'], $positions_map['ATTACK'])) {
-                $origin = 'source-attack';
+                $player_position = 'attack';
-                $pcolor = 'warning';
+                $player_color = 'warning';
             } elseif (in_array($val['player_position'], $positions_map['GOALKEEPER'])) {
-                $origin = 'source-goalkeeper';
+                $player_position = 'goalkeeper';
-                $pcolor = 'gray';
+                $player_color = 'gray';
             } else {
-                $origin = 'NO SPECIFIC POSITION';
+                $player_position = 'NO SPECIFIC POSITION';
-                $pcolor = '';
+                $player_color = 'danger';
             }
 
-            $name = $val['player_name'];
-            $preferred_foot = $val['preferred_foot'] ?? '-';
             $everage_minutes = 0;
-            $ecolor = '';
+            $timed_color = '';
             if ($events_played) {
                 $everage_minutes = round($minues_played / $events_played);
                 if ($colorlevel > 1 && $events_played < $colorlevel) {
-                    $ecolor = 'danger';
+                    $timed_color = 'danger';
                 } elseif ($events_played < $colorlevel * 2) {
-                    $ecolor = 'info';
+                    $timed_color = 'info';
                 } else {
-                    $ecolor = 'success';
+                    $timed_color = 'success';
                 }
             }
 
-            $info = [];
+            $result[] = [
-            if ($events_played == 1) {
-                $info[] = '1 Event';
-            } else if ($events_played > 1) {
-                $info[] = $events_played . ' Events';
-            } else {
-                $info[] = 'None';
-            }
-            if ($preferred_foot) {
-                $info[] =  $preferred_foot . ' Foot';
-            }
-            if ($everage_minutes) {
-                $info[] = ' Ø ' . $everage_minutes . 'min';
-            }
-
-            $result[$origin][] = [
                 'id' => $player_id,
-                'name' => $name,
+                'name' => $val['player_name'],
-                'origin' => $origin,
+                'preferred_foot' => $val['preferred_foot'],
-                'pcolor' => $pcolor,
+                'player_position' => $player_position,
-                'ecolor' => $ecolor,
+                'player_color' => $player_color,
-                'info' => implode(', ', $info),
+                'timed_color' => $timed_color,
+                'events_played' => $events_played,
+                'everage_minutes' => $everage_minutes,
+                'active' => 0,
             ];
         }
 
+        $sort = array_column($result, 'player_position');
+
         return $result;
     }
 }

app/Livewire/backup.txt

@@ -0,0 +1,284 @@
+<?php
+
+namespace App\Livewire;
+
+use Filament\Actions\Action;
+use Filament\Actions\Concerns\InteractsWithActions;
+use Filament\Actions\Contracts\HasActions;
+use Filament\Schemas\Concerns\InteractsWithSchemas;
+use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
+use Filament\Schemas\Contracts\HasSchemas;
+use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Concerns\InteractsWithTable;
+use Filament\Tables\Contracts\HasTable;
+use Filament\Tables\Table;
+use Livewire\Component;
+
+class BoardDispatcher extends Component implements HasActions, HasSchemas, HasTable
+{
+
+    use InteractsWithActions;
+    use InteractsWithSchemas;
+    use InteractsWithTable;
+    use RestrictsFileUploadsToSchemaComponents;
+
+    public array $filters = [];
+    public array $lists = [];
+    public array $results = [];
+    public array $destLabels = ['DR', 'MR', 'RW', 'DC', 'DM', 'MC', 'AM', 'SW', 'DC', 'DM', 'MC', 'AM', 'SM', 'ST', 'DC', 'DM', 'MC', 'AM', 'DL', 'ML', 'LM'];
+    public string $boardVersion = '';
+    public bool $copyDisabled = true;
+    public bool $calculationDisabled = true;
+    public string $calculationColor = 'gray';
+    public string $copyColor = 'gray';
+
+    public function mount(array $filters)
+    {
+        $this->boardVersion = uniqid();
+
+        $this->filters = $filters;
+
+        $active = [2, 4, 6, 9, 10, 11, 12, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 30, 32, 34];
+
+        for ($i = 1; $i <= 35; $i++) {
+            if (in_array($i, $active))
+                $this->lists["dest-{$i}"] = [];
+            else
+                $this->lists["blind-{$i}"] = [];
+        }
+    }
+
+    /*
+            'id' => $player_id,
+            'name' => $val['player_name'],
+            'preferred_foot' => $val['preferred_foot'],
+            'player_position' => $player_position,
+            'player_color' => $player_color,
+            'timed_color' => $timed_color,
+            'events_played' => $events_played,
+            'everage_minutes' => $everage_minutes,
+        */
+    public function table(Table $table): Table
+    {
+        return $table
+            ->headerActions([
+                Action::make('Close')->icon('phosphor-x')->close()
+            ])
+            ->records(fn(): array => PlayerCalculator::load($this->filters))
+            ->paginated(false)
+            ->striped()
+            ->columns([
+                TextColumn::make('name')
+                    ->sortable()
+                    // ->searchable()
+                    ->icon('icon-soccerplayer')
+                    ->extraAttributes(fn($record) => [
+                        'data-id' => $record['id'],
+                        'class' => 'sortable-zone',
+                        'style' => 'padding: 4px !important; cursor:pointer; user-select: none;',
+                        'wire:key' => "item-src-" . $record['id'] . "-v-" . $this->boardVersion
+                    ]),
+            ])
+            ->filters([
+                // ...
+            ])
+            ->recordActions([
+                // ...
+            ])
+            ->toolbarActions([
+                // ...
+            ]);
+    }
+
+    public function render()
+    {
+        return view('livewire.board-dispatcher');
+    }
+
+
+    public function setCalculationButton()
+    {
+        $count = 1;
+        for ($i = 1; $i <= 35; $i++) {
+            $bayKey = "dest-{$i}";
+
+            if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+                $count++;
+            }
+        }
+        if ($count > 2) {
+            $this->calculationDisabled = false;
+            $this->calculationColor = 'info';
+        } else {
+            $this->calculationDisabled = true;
+            $this->calculationColor = 'gray';
+        }
+    }
+
+    public function setCopyButton()
+    {
+        if (\count($this->results) > 0) {
+            $this->copyDisabled = false;
+            $this->copyColor = 'info';
+        } else {
+            $this->copyDisabled = true;
+            $this->copyColor = 'gray';
+        }
+    }
+
+    public function calculate()
+    {
+        $this->results = [];
+        for ($i = 1; $i <= 35; $i++) {
+            $bayKey = "dest-{$i}";
+
+            if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
+                $this->results[] = $this->lists[$bayKey][0];
+            }
+        }
+
+        $this->setCopyButton();
+    }
+
+    public function copyResult()
+    {
+        $copystring = '';
+        foreach ($this->results as $row) {
+            unset($row['origin']);
+            unset($row['pcolor']);
+            unset($row['ecolor']);
+            unset($row['info']);
+            $copystring .= implode("\t", $row) . "\n";
+        }
+        $this->js("navigator.clipboard.writeText(`$copystring`)");
+    }
+
+
+    public function moveItem($itemId, $fromList, $toList, $newIndex)
+    {
+        $itemId = (string) $itemId;
+        $newIndex = (int) $newIndex;
+
+        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;
+
+        foreach ($this->lists[$fromList] as $key => $item) {
+            if ((string) $item['id'] === $itemId) {
+                $item['position'] = $this->positions($toList);
+                $foundItem = $item;
+                unset($this->lists[$fromList][$key]);
+                $this->lists[$fromList] = array_values($this->lists[$fromList]);
+                break;
+            }
+        }
+
+        if ($foundItem) {
+            array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
+        }
+
+        $this->setCalculationButton();
+
+        $this->boardVersion = uniqid();
+    }
+
+    public function positions(string $pos)
+    {
+        $pos = (int) str_replace('dest-', '', $pos);
+        $options = [2 => 'DR', 4 => 'MR', 6 => 'RW', 9 => 'DC', 10 => 'DM', 11 => 'MC', 12 => 'AM', 15 => 'SW', 16 => 'DC', 17 => 'DM', 18 => 'MC', 19 => 'AM', 20 => 'SM', 21 => 'ST', 23 => 'DC', 24 => 'DM', 25 => 'MC', 26 => 'AM', 30 => 'DL', 32 => 'ML', 34 => 'LM'];
+        if (isset($options[$pos]))
+            return $options[$pos];
+        else
+            return $pos;
+    }
+
+    public function returnToOrigin($itemId, $currentListId)
+    {
+        $itemId = (string) $itemId;
+
+        // Log::info($this->boardVersion);
+        // Log::info('itemId, currentListId', [$itemId, $currentListId]);
+        // Log::info('OLD LIST', $this->lists);
+
+        if (! isset($this->lists[$currentListId])) {
+            $this->boardVersion = uniqid();
+
+            return;
+        }
+
+        $foundItem = null;
+
+        foreach ($this->lists[$currentListId] as $key => $item) {
+            if ((string) $item['id'] === $itemId) {
+                $foundItem = $item;
+                unset($this->lists[$currentListId][$key]);
+                $this->lists[$currentListId] = array_values($this->lists[$currentListId]);
+                break;
+            }
+        }
+
+        if ($foundItem && isset($this->lists[$foundItem['origin']])) {
+            // Nur zurücklegen, wenn die Quelle wirklich frei ist
+            array_unshift($this->lists[$foundItem['origin']], $foundItem);
+            // if (count($this->lists[$foundItem['origin']]) < 2) {
+            //     Log::info('origin');
+            //     array_unshift($this->lists[$foundItem['origin']], $foundItem);
+            // } else {
+            //     // Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
+            //     array_unshift($this->lists[$currentListId], $foundItem);
+            //     Log::info('box');
+            // }
+        }
+
+        $this->setCalculationButton();
+
+        $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);
+
+        $this->results = [];
+
+        $this->setCalculationButton();
+
+        $this->setCopyButton();
+    }
+}

resources/views/filament/tables/columns/drag-card.blade.php

@@ -0,0 +1,71 @@
+@php
+    $record = $getRecord();
+    /*
+        'id' => $player_id,
+        'name' => $val['player_name'],
+        'preferred_foot' => $val['preferred_foot'],
+        'player_position' => $player_position,
+        'player_color' => $player_color,
+        'timed_color' => $timed_color,
+        'events_played' => $events_played,
+        'everage_minutes' => $everage_minutes,
+    */
+@endphp
+@if ($record['active'])
+    <div draggable="false"
+        class="w-full mt-1 p-1 cursor-grab active:cursor-grabbing border border-gray-300 rounded hover:border-primary-500 transition-colors grid grid-cols-7 items-center gap-1"
+        style="opacity:0.25 !important;">
+        <div>
+            <x-filament::badge color="{{ $record['player_color'] }}">
+                {{ strtoupper($record['player_position']) }}
+            </x-filament::badge>
+        </div>
+        <div class="text-left font-medium dark:text-white col-span-3">
+            {{ $record['name'] }}
+        </div>
+        <div class="text-xs">
+            {{ $record['preferred_foot'] }},
+            Ev {{ $record['events_played'] }},
+            Av {{ $record['everage_minutes'] }}min
+        </div>
+        <div class="flex justify-end row-span-2">
+            <x-phosphor-arrows-out-cardinal class="h-4 w-4" />
+        </div>
+        <div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
+        <div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
+        <div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
+    </div>
+@else
+    <div draggable="true"
+        x-on:dragstart="e => {
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $record['id'] }} }));
+    }"
+        class="w-full mt-1 p-1 cursor-grab active:cursor-grabbing border border-gray-300 rounded hover:border-primary-500 transition-colors grid grid-cols-7 items-center gap-1">
+        <div>
+            <x-filament::badge color="{{ $record['player_color'] }}">
+                {{ strtoupper($record['player_position']) }}
+            </x-filament::badge>
+        </div>
+        <div class="text-left font-medium dark:text-white col-span-3">
+            {{ $record['name'] }}
+        </div>
+        <div class="text-xs col-span-2">
+            {{ $record['preferred_foot'] }},
+            Ev {{ $record['events_played'] }},
+            Av {{ $record['everage_minutes'] }}min
+        </div>
+        <div class="flex justify-end row-span-2 p-1">
+            <x-phosphor-dots-six-vertical class="h-5 w-5" />
+        </div>
+        <div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
+        <div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
+        <div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
+        <div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
+    </div>
+@endif

resources/views/livewire/board-dispatcher.blade.php

@@ -1,172 +1,52 @@
-<div class="h-full p-1" x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }" id="dispatcher-board-root">
+@php
-
+    use Illuminate\Support\Facades\Log;
-    <!-- 🌟 SPLIT HEADER -->
+@endphp
-    <div class="flex items-center justify-between drop-shadow py-2 mb-4 ">
+<div class="grid grid-cols-3 gap-3 p-10">
-        <div class="flex-1 overflow-x-auto min-w-0 ">
+    <div class="dispatcher-board-root">
-            <x-filament::tabs class="border-gray-200">
+        {{ $this->table }}
-                @foreach ($lists as $listId => $items)
-                    @if (str_starts_with($listId, 'source-'))
-                        <x-filament::tabs.item :alpine-active="'activeTab === \'' . $listId . '\''" x-on:click="activeTab = '{{ $listId }}'"
-                            wire:key="tab-button-{{ $listId }}" class="cursor-pointer"
-                            icon="icon-soccerplayer-{{ str_replace('source-', '', $listId) }}">
-                            <span class="uppercase">{{ str_replace('source-', '', $listId) }}</span>
-                            <x-filament::badge size="xs">
-                                {{ count($items) }}
-                            </x-filament::badge>
-                        </x-filament::tabs.item>
-                    @endif
-                @endforeach
-            </x-filament::tabs>
-        </div>
-        <!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
-        <div class="flex items-right space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
-
-            <!-- Copy-Button -->
-            <x-filament::button icon="heroicon-o-clipboard-document-list" size="md" tooltip="Copy"
-                :disabled="$copyDisabled" class="cursor-pointer" color="{{ $copyColor }}" x-on:click="$wire.copyResult()" />
-
-            <!-- Calculate-Button -->
-            <x-filament::button icon="heroicon-o-calculator" size="md" tooltip="Calculate" :disabled="$calculationDisabled"
-                x-on:click="$wire.calculate()" class="cursor-pointer" color="{{ $calculationColor }}" />
-
-            <!-- Reset-Button -->
-            <x-filament::button icon="heroicon-o-arrow-path" size="md" tooltip="Reset"
-                x-on:click="$wire.resetBoard()" class="cursor-pointer" />
-
-            <!-- Schließen-Button -->
-            <x-filament::button icon="heroicon-o-x-mark" size="md" x-on:click="close()" tooltip="Close"
-                class="cursor-pointer" />
-        </div>
     </div>
-
+    <div class="col-span-2">
-    <!-- 🌟 SEKTION 1: SOURCES -->
+        <div class="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"
-    <div>
+            style="background-image: url({{ asset('images/soccerfield-middle.jpg') }});">
-        @foreach ($lists as $listId => $items)
+            @foreach ($beschriftung as $boxNumber => $benennung)
-            @if (str_starts_with($listId, 'source-'))
+                @if ($benennung)
-                <div x-show="activeTab === '{{ $listId }}'" class="transition-all"
+                    <div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
-                    wire:key="tab-panel-{{ $listId }}">
+                        @dragleave.prevent="isOver = false"
-                    <!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
+                        @drop.prevent="
-
+                            isOver = false;
-                    <div id="{{ $listId }}" class="sortable-zone grid grid-cols-5 gap-2 space-y-1 min-h-12">
+                            const rawData = $event.dataTransfer.getData('text/plain');
-                        @foreach ($items as $item)
+                            if (rawData) {
-                            <x-filament::badge color="{{ $item['pcolor'] }}" data-id="{{ $item['id'] }}"
+                                const elementData = JSON.parse(rawData);
-                                icon="phosphor-dots-six-vertical" icon-position="after"
+                                $wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
-                                wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
+                            }
-                                class="flex flex-row gap-0 items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
+                        "
-                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}
+                        :class="isOver ? 'border-primary-500 bg-primary-500/10 ring-2 ring-primary-500/50 scale-[1.02]' :
-                                </div>
+                            'border-gray-800 bg-white/30'"
-                                <x-filament::badge size="sm" color="{{ $item['ecolor'] }}">
+                        class="border rounded-xl p-2 transition-all flex flex-col justify-start shadow-2xs transform">
-                                    {{ $item['info'] }}
+                        <!-- Box Header -->
-                                </x-filament::badge>
-                            </x-filament::badge>
-                        @endforeach
-                    </div>
-                </div>
-            @endif
-        @endforeach
-    </div>
-
-    <!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
-    <div class="mt-7 w-full grid grid-cols-7 gap-3">
-        <div class="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 max-w-4xl"
-            style="background-image: url({{ asset('images/soccerfield-reduced.jpg') }});">
-            @foreach ($lists as $listId => $items)
-                @if (str_starts_with($listId, 'dest-'))
-                    <div class="relative rounded-xl flex flex-col bg-white/30 backdrop-blur-none drop-shadow-xl"
-                        wire:key="box-{{ $listId }}">
                         <div
-                            class="fixed h-6 z-5 top-0 right-0 left-0 pl-2 pt-0.5 font-black text-blue-600 text-sm bg-white/30 rounded-t-2xl">
+                            class="flex justify-between items-center border-b border-gray-100 dark:border-gray-800 p-1">
-                            {{ $pos = array_shift($destLabels) }}
+                            <div class="border bg-white p-1 text-md m-1 rounded">
+                                {{ $benennung }}
+                            </div>
+
+                            @if ($boxes[$boxNumber])
+                                <x-filament::icon-button icon="heroicon-m-trash" color="danger"
+                                    wire:click="clearBox({{ $boxNumber }})" />
+                            @endif
                         </div>
 
-                        <!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
+                        <!-- Box Inhalt -->
-                        <div id="{{ $listId }}" class="sortable-zone flex-1 rounded-b-lg p-1 ">
+                        @if ($boxes[$boxNumber])
-
+                            <div class="border bg-white p-1 m-1 rounded leading-5">
-                            @foreach ($items as $item)
+                                {{ $boxes[$boxNumber]['name'] }}
-                                <div data-id="{{ $item['id'] }}" tooltip="{{ $item['info'] }}"
+                            </div>
-                                    wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
+                        @endif
-                                    class="static m-1 pt-4 text-sm cursor-grab active:cursor-grabbing transition-all">
-                                    <x-filament::button icon="phosphor-x" size="xs"
-                                        class="absolute top-0.5 right-1 z-10 p-0.5"
-                                        wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')" />
-                                    <x-filament::badge size="xs" color="{{ $item['pcolor'] }}">
-                                        {{ ucfirst(str_replace('source-', '', $item['origin'])) }}
-                                    </x-filament::badge>
-                                    <div
-                                        class="text-black text-wrap leading-4 tracking-tighter text-shadow-lg bg-white/50 drop-shadow p-0.5 rounded">
-                                        {{ $item['name'] }}
-                                    </div>
-                                </div>
-                            @endforeach
-                        </div>
                     </div>
-                @elseif (str_starts_with($listId, 'blind-'))
+                @else
-                    <div class=""></div>
+                    <div></div>
                 @endif
             @endforeach
         </div>
-        <div class="col-span-2">
-            <div class="rounded bg-gray-50 p-2 border border-gray-200 grid grid-cols-7 space-y-1 text-xs items-center">
-                @foreach ($results as $k => $result)
-                    @if ($k < 11)
-                        <x-filament::badge color="success" size="sm">
-                            {{ $k + 1 }}
-                        </x-filament::badge>
-                    @else
-                        <x-filament::badge color="danger" size="sm">
-                            {{ $k + 1 }}
-                        </x-filament::badge>
-                    @endif
-                    <span class="font-bold col-span-4 px-2">{{ $result['name'] }}</span>
-                    <span class="font-bold px-2">{{ $result['position'] ?? 'none' }}</span>
-                    <span class="font-bold text-blue-500 p-1">{{ number_format(mt_rand(1, 100) / 100, 2) }}</span>
-                @endforeach
-            </div>
-        </div>
     </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

resources/views/livewire/kanban-board.blade.php

@@ -0,0 +1,103 @@
+<x-filament-panels::page>
+    <!-- Zentraler Alpine-Zustand für das Modal-Handling -->
+    <div x-data="{ isOpen: false }" @open-kanban-modal.window="isOpen = true" class="space-y-6">
+
+        <!-- Steuerungsbar -->
+        <div
+            class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white dark:bg-gray-900 p-5 rounded-xl border border-gray-200 dark:border-gray-800 shadow-xs">
+            <div>
+                <h2 class="text-base font-bold text-gray-900 dark:text-white">Elemente-Kopierer (v5)</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-400">Ziehe einen Eintrag aus der Tabelle. Das Ziel-Modal
+                    öffnet sich synchron beim Ziehen.</p>
+            </div>
+
+            <x-filament::button type="button" icon="heroicon-o-squares-2x2" @click="isOpen = true">
+                Slots manuell öffnen (21 Boxen)
+            </x-filament::button>
+        </div>
+
+        <!-- Filament v5 Datenquelle -->
+        <div class="bg-white dark:bg-gray-900 rounded-xl shadow-xs border border-gray-200 dark:border-gray-800 p-4">
+            {{ $this->table }}
+        </div>
+
+        <!-- Filament v5 Modal-Komponente -->
+        <x-filament::modal id="kanban-boxes-modal" x-model="isOpen" width="7xl">
+            <x-slot name="heading">
+                <div class="flex items-center gap-2 text-gray-900 dark:text-white">
+                    <x-heroicon-o-tray class="h-5 w-5 text-gray-400" />
+                    <span>Ziel-Matrix (21 Slots)</span>
+                </div>
+            </x-slot>
+
+            <x-slot name="description">
+                Lass das gezogene Element über der gewünschten Box los, um eine Kopie zuzuweisen.
+            </x-slot>
+
+            <!-- 21 Boxen Grid (Verwendet optimierte Responsive-Spalten) -->
+            <div
+                class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-3 my-4 max-h-[65vh] overflow-y-auto p-1">
+                @foreach ($boxes as $boxNumber => $items)
+                    <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);
+                                // Nutzt die direkte Livewire v4 Brücke über das Proxy-Objekt ($wire)
+                                $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.03]' :
+                            'border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-950/50'"
+                        class="border rounded-xl p-3 min-h-[110px] transition-all flex flex-col justify-between shadow-2xs transform">
+                        <!-- Box Kopfzeile -->
+                        <div
+                            class="flex justify-between items-center border-b border-gray-200/50 dark:border-gray-800 pb-1 mb-2">
+                            <span
+                                class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 text-gray-500 dark:text-gray-400">
+                                Box {{ $boxNumber }}
+                            </span>
+
+                            @if (count($items) > 0)
+                                <button type="button" wire:click="clearBox({{ $boxNumber }})"
+                                    class="text-[10px] text-danger-600 hover:text-danger-500 font-semibold transition-colors">
+                                    Leeren
+                                </button>
+                            @endif
+                        </div>
+
+                        <!-- Listen-Inhalt der Box -->
+                        <div class="space-y-1 flex-grow overflow-y-auto max-h-[80px]">
+                            @forelse($items as $item)
+                                <div
+                                    class="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800/80 rounded shadow-3xs text-[10px] flex flex-col">
+                                    <span class="font-medium text-gray-800 dark:text-gray-200 truncate">
+                                        {{ $item['title'] }}
+                                    </span>
+                                    <span class="text-[9px] text-gray-400 dark:text-gray-500">ID:
+                                        {{ $item['id'] }}</span>
+                                </div>
+                            @empty
+                                <div
+                                    class="h-full flex items-center justify-center py-4 text-center text-gray-400 dark:text-gray-600 text-[10px] italic">
+                                    Bereit
+                                </div>
+                            @endforelse
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+
+            <x-slot name="footer">
+                <div class="flex justify-end">
+                    <x-filament::button color="gray" @click="isOpen = false">
+                        Schließen
+                    </x-filament::button>
+                </div>
+            </x-slot>
+        </x-filament::modal>
+
+    </div>
+</x-filament-panels::page>