@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>