grapper betsapi ok

resources/views/filament/tables/columns/mapper-left-column.blade.php

@@ -10,7 +10,7 @@
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
         if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
-        $wire.mountAction('left', { event_id: id, match_id: target.id });"
+        $wire.mountAction('left', { event_id: id, id: target.id });"
     draggable="true" mapper="left">
 
     <div class="w-10 flex-none mx-auto my-auto">

resources/views/filament/tables/columns/mapper-right-column.blade.php

@@ -1,6 +1,6 @@
-<li class="h-full overflow-hidden p-1 cursor-grab flex
-    space-x-4 drag-and-drop__item px-4" x-data="{ moveoverright: false }"
-    id={{ $record->event_id }}
+<li class="w-full h-full overflow-hidden p-1 cursor-grab flex
+    space-x-4 drag-and-drop__item px-4"
+    x-data="{ moveoverright: false }" id={{ $record->event_id }}
     x-on:dragstart.self="
         dragging = true;
         event.dataTransfer.effectAllowed = 'move';
@@ -11,7 +11,7 @@
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
         if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
-        $wire.mountAction('right', { match_id: id, event_id: target.id });"
+        $wire.mountAction('right', { id: id, event_id: target.id });"
     draggable="true" mapper="right">
 
     @include('filament.tables.columns.parts.move-botton')

resources/views/livewire/confirm-mapping.blade.php

@@ -1,22 +1,80 @@
+@php
+    use Illuminate\Support\Carbon;
+
+    $e = Carbon::parse($event->starttime);
+    $m = Carbon::parse($mapper->starttime);
+
+    $seconds = $e->diffInSeconds($m);
+
+    $diff = gmdate('H:i:s', $seconds);
+
+    if ($seconds == 0) {
+        $color = 1;
+    } elseif ($seconds < 1800) {
+        $color = 2;
+    } elseif ($seconds < 7200) {
+        $color = 3;
+    } else {
+        $color = 4;
+    }
+
+@endphp
+
 <div>
-    <div class="grid grid-cols-3 gap-4 text-center">
-        <div>{{ $event->home->name }}</div>
+    <div class="grid grid-cols-3 gap-4 text-center mt-4 mb-10">
+        <div></div>
+        <div>Startime Difference</div>
+        <div></div>
+        <div class="bg-gray-100 p-1 border rounded-lg">{{ $e->format('d-m-y H:i') }}</div>
+        @switch($color)
+            @case(1)
+                <div class="bg-green-100 text-green-500 p-1 border rounded-lg">{{ $diff }}</div>
+            @break
+
+            @case(2)
+                <div class="bg-blue-100 text-blue-500 p-1 border rounded-lg">{{ $diff }}</div>
+            @break
+
+            @case(3)
+                <div class="bg-amber-100 text-amber-500 p-1 border rounded-lg">{{ $diff }}</div>
+            @break
+
+            @case(4)
+                <div class="bg-red-100 text-red-500 p-1 border rounded-lg">{{ $diff }}</div>
+            @break
+        @endswitch
+        <div class="bg-gray-100 p-1 border rounded-lg">{{ $m->format('d-m-y H:i') }}</div>
+        <div class="col-span-3 flex justify-center gap-2 mt-6">
+            <div>
+                @if ($event->country?->iso2)
+                    <x-icon name="flag-country-{{ $event->country->iso2 }}" class="h5 w-5 mt-1" />
+                @elseif($event->country?->icon)
+                    <x-icon name="{{ $event->country->icon }}" class="h5 w-5 mt-1" />
+                @endif
+            </div>
+            <div>{{ $event->country?->name }}</div>
+            <div>{{ $event->competition_group->name }}</div>
+        </div>
+
+        <div class="pt-2 font-bold text-right">{{ $event->home->name }}</div>
+
         <div class="row-span-2 text-center py-auto">
-            <div x-data="{ open: false, toggle() { this.open = !this.open } }" x-init="open = true">
-                <x-filament::button color="gray" outlined @click="toggle()">
-                    <div x-show="open">
-                        <x-icon-paralell class="h-16 w-16 mx-auto" />
+            <div x-data="{ elements_swopped: false, toggle() { this.elements_swopped = !this.elements_swopped } }" x-init="elements_swopped = true">
+                <x-filament::button color="gray" outlined @click="toggle()" wire:click="toggle()">
+                    <div x-show="elements_swopped">
+                        <x-icon-paralell class="h-14 w-14 mx-auto" />
                     </div>
-                    <div x-show="!open">
-                        <x-icon-crossed class="h-16 w-16 mx-auto" />
+                    <div x-show="!elements_swopped">
+                        <x-icon-crossed class="h-14 w-14 mx-auto" />
                     </div>
                 </x-filament::button>
             </div>
         </div>
-        <div>{{ $mapper->home }}</div>
 
-        <div>{{ $event->away->name }}</div>
+        <div class="pt-2 font-bold text-left">{{ $mapper->home }}</div>
 
-        <div>{{ $mapper->away }}</div>
+        <div class="mb-2 font-bold text-right">{{ $event->away->name }}</div>
+
+        <div class="pb-2 font-bold text-left">{{ $mapper->away }}</div>
     </div>
 </div>

resources/views/livewire/top-menu-items.blade.php

@@ -74,7 +74,8 @@
 
         {{-- Event Mapper --}}
 
-        <x-filament::modal width="7xl" icon="heroicon-o-squares-2x2">
+        <x-filament::modal width="7xl" icon="heroicon-o-squares-2x2" :close-by-clicking-away="false" :close-by-escaping="false"
+            :close-button="true">
             <x-slot name="trigger">
                 <x-filament::button outlined icon="heroicon-o-squares-2x2" color="gray">
                     Event Mapper