stuck with livewire mapchecker

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

@@ -1,14 +1,19 @@
 <li class="bg-white dark:bg-gray-900  w-full h-full overflow-hidden p-1 cursor-grab flex space-x-10 drag-and-drop__item"
-    mapper="left" id={{ $record->id }}
+    x-data="{ moveoverleft: false }" id={{ $record->id }}
     x-on:dragstart.self="
-                    dragging = true;
-                    event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text/plain', event.target.id);"
+        dragging = true;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', event.target.id);"
+    x-on:dragover.prevent="moveoverleft = true" x-on:dragleave.prevent="moveoverleft = false"
+    x-on:drop="moveoverleft = false" :class="moveoverleft ? 'bg-green-500/10!' : ''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
-        console.log('left', id, target.id, target.getAttribute('mapper'));"
-    draggable="true">
+        {{-- console.log(document.getElementById(id).getAttribute('mapper'), id, target.id, target.getAttribute('mapper')); --}}
+        if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
+        $dispatch('mapchecker', { event_id: id, match_id:target.id });"
+    draggable="true" mapper="left">
+    {{-- @livewire('child', ['matchid' => id])" --}}
 
     <div class="w-6 flex-none mx-auto my-auto">
         @if ($record->country->iso2)
@@ -19,24 +24,23 @@
     </div>
 
     <div class="flex-1 flex flex-col justify-center space-y-0">
-        <div class="flex justify-center text-primary-500">{{ $record->starttime }}</div>
+        <div class="flex justify-around text-gray-600 dark:text-gray-500">
+            <div>{{ $record->starttime }}</div>
+            <div>{{ $record->id }}</div>
+        </div>
         <div class="flex justify-center space-x-4">
             <div class="text-right font-bold">{{ $record->home->name }}</div>
             <div class="w-6 text-center">-</div>
             <div class="text-left font-bold">{{ $record->away->name }}</div>
         </div>
-        <div class="flex justify-center space-x-4">
+        <div class="flex justify-center space-x-4 text-gray-600 dark:text-gray-500">
             <div>{{ $record->country?->name }}</div>
             <div>{{ $record->competition_group->name }}</div>
-            <x-filament::badge>
-                {{ $record->id }}
-            </x-filament::badge>
         </div>
+
     </div>
 
     <div class="w-6 flex-none my-auto">
         <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
     </div>
 </li>
-{{-- if(target.mapper =='left') --}}
-{{-- $dispatch('map-checker',{ 'id': id, 'target':target.id });" --}}

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

@@ -1,36 +1,38 @@
-<li class="bg-white dark:bg-gray-900  w-full h-full overflow-hidden p-1 cursor-grab flex space-x-10 drag-and-drop__item"
-    mapper="right" id={{ $record->event_id }}
+<li class="bg-white dark:bg-gray-900 w-full h-full overflow-hidden p-1 cursor-grab flex
+    space-x-10 drag-and-drop__item"
+    x-data="{ moveoverright: false }" id={{ $record->event_id }}
     x-on:dragstart.self="
-                    dragging = true;
-                    event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text/plain', event.target.id);
-                "
+        dragging = true;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', event.target.id);"
+    x-on:dragover.prevent="moveoverright = true" x-on:dragleave.prevent="moveoverright = false"
+    x-on:drop="moveoverright = false" :class="moveoverright ? 'bg-blue-500/10!' : ''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
-        console.log('right', id, target.id, target.getAttribute('mapper'));"
-    draggable="true">
+        {{-- console.log(document.getElementById(id).getAttribute('mapper'), id, target.id, target.getAttribute('mapper'));" --}}
+        if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
+        $dispatch('mapchecker', { match_id: id, event_id:target.id });"
+    draggable="true" mapper="right">
+    {{-- $dispatch('map-checker', { match_id: id, event_id:target.id });" --}}
 
     <div class="w-6 flex-none my-auto">
         <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
     </div>
     <div class="flex-1 flex flex-col justify-center space-y-0">
-        <div class="flex justify-center text-primary-500">
-            {{ $record->starttime }}
+        <div class="flex justify-around text-gray-600 dark:text-gray-500">
+            <div>{{ $record->starttime }}</div>
+            <div>{{ $record->event_id }}</div>
         </div>
         <div class="flex justify-center space-x-4">
             <div class="text-right font-bold">{{ $record->home }}</div>
             <div class="w-6 text-center">-</div>
             <div class="text-left font-bold">{{ $record->away }}</div>
         </div>
-        <div class="flex justify-center space-x-4">
+        <div class="flex justify-center space-x-4 text-gray-600 dark:text-gray-500">
             <div>{{ $record->country_betsapi?->name }}</div>
             <div>{{ $record->group }}</div>
-            <x-filament::badge>
-                {{ $record->event_id }}
-            </x-filament::badge>
         </div>
-
     </div>
 
     <div class="w-6 flex-none mx-auto my-auto">
@@ -39,5 +41,3 @@
         @endif
     </div>
 </li>
-{{-- if(target.mapper =='right') --}}
-{{-- $dispatch('map-checker',{ 'target': id, 'id':target.id });" --}}

resources/views/livewire/map-checker.blade.php

@@ -1,3 +0,0 @@
-<div>
-    {{ $this->table }}
-</div>

resources/views/livewire/mapchecker.blade.php

@@ -0,0 +1,5 @@
+<div @mapchecker.window="console.log('match_id', $event.detail.match_id, 'event_id', $event.detail.event_id);">
+    {{ $this->table }}
+</div>
+{{-- @notify="alert($event.detail.message)" --}}
+{{-- @wire.set --}}

resources/views/livewire/mapper-left.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <ul class="drag-and-drop__items" x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
+    <ul class="drag-and-drop__items">
         {{ $this->table }}
     </ul>
 </div>

resources/views/livewire/mapper-right.blade.php

@@ -1,5 +1,5 @@
 <div>
-    <ul class="drag-and-drop__items" x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
+    <ul class="drag-and-drop__items">
         {{ $this->table }}
     </ul>
 </div>

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

@@ -20,7 +20,7 @@
                 Event Mapper
             </x-slot>
 
-            <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ adding: false, removing: false }">
+            <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ event_id: 0, match_id: 0, overleftcolumn: false, overrightcolumn: false }">
                 <div>
                     @livewire('mapper-left')
                 </div>
@@ -32,8 +32,8 @@
 
 
         {{-- START MAP CHECKER MODAL --}}
-        <x-filament::modal @map-checker.window="isOpen = true">
-            @livewire('map-checker')
+        <x-filament::modal @mapchecker.window="isOpen = true">
+            @livewire('mapchecker', ['match_id' => $event . detail . match_id])
         </x-filament::modal>
         {{-- END MAP CHECKER MODAL --}}