wip

resources/views/filament/modals/player-calculator-modal.blade.php

@@ -0,0 +1 @@
+@livewire('player-calculator', ['filters' => $filters])

resources/views/filament/pages/split-header-action.blade.php

@@ -0,0 +1,15 @@
+<div class="flex flex-rows justify-between gap-4 sm:flex-row sm:items-center">
+    <!-- Left Aligned Actions -->
+    <div class="flex flex-rows items-center gap-3">
+        @foreach ($leftActions as $action)
+            {{ $action }}
+        @endforeach
+    </div>
+
+    <!-- Right Aligned Actions -->
+    <div class="flex flex-rows items-center gap-3 sm:ms-auto">
+        @foreach ($rightActions as $action)
+            {{ $action }}
+        @endforeach
+    </div>
+</div>

resources/views/filament/pages/statistic.blade.php

@@ -3,7 +3,7 @@
         'player_name',
     );
 @endphp
-<x-filament-panels::page>
+<x-filament-panels::page class="gap-0">
 
     <script>
         window.addEventListener('reset-tab', () => {

resources/views/livewire/player-calculator.blade.php

@@ -0,0 +1,68 @@
+@php
+    use Illuminate\Support\HtmlString;
+@endphp
+
+
+<div class="grid grid-cols-6 gap-10" class="drag-and-drop" x-data="{ adding: false, removing: false }">
+    <div class="col-span-2 h-full drag-and-drop__container drag-and-drop__container--from">
+        @foreach ($player as $position => $names)
+            <div class="text-bold py-2"> {{ ucfirst(strtolower($position)) }}</div>
+            <div class="grid grid-cols-2 gap-2 cursor-grab drag-and-drop__items"
+                :class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
+                x-on:drop.prevent="
+                    const target = event.target.closest('div');
+                    const element = document.getElementById(event.dataTransfer.getData('text/plain'));
+                    target.appendChild(element);
+                "
+                x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
+                @foreach ($names as $ss_player_id => $name)
+                    <div color="gray" id="{{ $ss_player_id }}"
+                        class="border border-gray-200 bg-gray-100 p-1 rounded text-xs cursor-grap drag-and-drop__item"
+                        :class="{ 'drag-and-drop__item--dragging': dragging }"
+                        x-on:dragstart.self="
+                            dragging = true;
+                            event.dataTransfer.effectAllowed='move';
+                            event.dataTransfer.setData('text/plain', event.target.id);
+                        "
+                        x-on:dragend="dragging = false" x-data="{ dragging: false }" draggable="true">
+                        {{ new HtmlString($name) }}
+                    </div>
+                @endforeach
+            </div>
+        @endforeach
+    </div>
+    <div class="col-span-3 h-full drag-and-drop__container drag-and-drop__container--to">
+        <div class="drag-and-drop__items grid grid-cols-5 gap-2 justify-center w-130 bg-size-[100%_100%] p-2 border-5 border-green-600"
+            style="background-image:url({{ asset('images/soccerfield.png') }});">
+            @foreach ($positions as $pos)
+                @if ($pos)
+                    <div class="border-5 border-white/30 h-full aspect-square p-1 m-1 rounded-xl"
+                        :class="{ 'drag-and-drop__items--adding': adding }" x-on:drop="adding = false"
+                        x-on:drop.prevent="
+                const target = event.target.closest('ul');
+                const element = document.getElementById(event.dataTransfer.getData('text/plain'));
+                target.appendChild(element);
+            "
+                        x-on:dragover.prevent="adding = true" x-on:dragleave.prevent="adding = false">
+                        <div class="text-white/30 font-black text-center text-xl">
+                            {{ $pos }}
+                        </div>
+                    </div>
+                @else
+                    <div></div>
+                @endif
+            @endforeach
+        </div>
+    </div>
+    <div class="flex flex-col gap-3">
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
+            Reset
+        </x-filament::button>
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-calculator">
+            Calculate
+        </x-filament::button>
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-copy">
+            Copy
+        </x-filament::button>
+    </div>
+</div>