{{-- 
<div class="h-full grid grid-cols-10 gap-3" x-data="{
    activeTab: 'tab1';

    // Übergibt das PHP Array sicher an JavaScript
    sources: [
        { id: 'source-1', name: 'Kader', items: @js($players) }
    ],
    dropzones: Array.from({ length: 21 }, (_, i) => ({ id: i + 1 })),

    init() {
        this.$nextTick(() => {
            const allContainers = this.$el.querySelectorAll('.drag-container');
            const drake = dragula(Array.from(allContainers), { revertOnSpill: true });

            drake.on('drop', (el, target, source) => {
                const playerId = el.getAttribute('data-item-id');
                const targetZone = target.getAttribute('data-container-id');
                console.log('Spieler ID ' + playerId + ' ist jetzt in Zone ' + targetZone);

                // Optional: Sende die Daten zurück an PHP/Livewire
                // $wire.updatePlayerPosition(playerId, targetZone);
            });
        });
    }
}">
    <div class="col-span-4 bg-gray-100 p-3 border border-gray-300">
        <!-- Tab Navigation -->
        <x-filament::tabs label="Content tabs">
            <x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
                ATTACK
            </x-filament::tabs.item>
            <x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
                MIDFIELD
            </x-filament::tabs.item>
            <x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
                DEFENCE
            </x-filament::tabs.item>
            <x-filament::tabs.item alpine-active="activeTab === 'tab4'" x-on:click="activeTab = 'tab4'">
                GOALKEEPER
            </x-filament::tabs.item>
        </x-filament::tabs>

        <!-- Tab Content -->
        <div class="mt-4">
            <div x-show="activeTab === 'tab1'" class="grid grid-cols-4 gap-1 h-full justify-center"
                x-ref="drag-container">
                <!-- Die Filament-Komponente rendert das HTML, Alpine bindet die ID dynamisch -->
                <template x-for="player in sources[0].items" :key="player.player_id">
                    <!-- Der Wrapper, den Dragula greift -->
                    <div class="drag-item mb-2" :data-item-id="player.player_id">
                        <!-- Die Filament-Komponente für das Styling -->
                        <x-filament::button size="sm" color="gray"
                            class="w-full pointer-events-none text-left justify-start">
                            ⚽️ <span x-text="player.player_name"></span>
                        </x-filament::button>
                    </div>
                </template>
                {{-- @foreach ($grid as $key => $ele)
                    @if (isset($ele['player_id']) && $ele['position'] == 'ATTACK')
                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
                            tooltip="{{ $ele['info'] }}">
                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
                                {{ $ele['position'] }}
                            </div>
                            <div class="text-wrap font-bold mt-5">
                                {{ $ele['name'] }}
                            </div>
                        </x-filament::button>
                    @endif
                @endforeach --}}
</div>
<div x-show="activeTab === 'tab2'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
    {{-- @foreach ($grid as $key => $ele)
                    @if (isset($ele['player_id']) && $ele['position'] == 'MIDFIELD')
                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
                            tooltip="{{ $ele['info'] }}">
                            <div
                                class="dragable absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
                                {{ $ele['position'] }}</div>
                            <div class="text-wrap font-bold mt-5">
                                {{ $ele['name'] }}
                            </div>
                        </x-filament::button>
                    @endif
                @endforeach --}}
</div>
<div x-show="activeTab === 'tab3'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
    {{-- @foreach ($grid as $key => $ele)
                    @if (isset($ele['player_id']) && $ele['position'] == 'DEFENCE')
                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
                            tooltip="{{ $ele['info'] }}">
                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
                                {{ $ele['position'] }}</div>
                            <div class="text-wrap font-bold mt-5">
                                {{ $ele['name'] }}
                            </div>
                        </x-filament::button>
                    @endif
                @endforeach --}}
</div>
<div x-show="activeTab === 'tab4'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
    {{-- @foreach ($grid as $key => $ele)
                    @if (isset($ele['player_id']) && $ele['position'] == 'GOALKEEPER')
                        <x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-24" tooltip="{{ $ele['info'] }}">
                            <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">
                                {{ $ele['position'] }}</div>
                            <div class="text-wrap font-bold mt-5">
                                {{ $ele['name'] }}
                            </div>
                        </x-filament::button>
                    @endif
                @endforeach --}}
</div>
</div>
</div>
<div class="col-span-6 h-full flex flex-col gap-5">
    <div class="py-2 w-full text-center">
        <x-filament::button color="gray" icon="phosphor-arrows-counter-clockwise">
            Reset
        </x-filament::button>
        <x-filament::button color="gray" icon="phosphor-copy">
            Copy
        </x-filament::button>
        <x-filament::button color="gray" icon="phosphor-calculator">
            Calculate
        </x-filament::button>
        <x-filament::button color="gray" icon="phosphor-floppy-disk">
            Store
        </x-filament::button>
        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
            Close
        </x-filament::button>
    </div>
    <div class="grid grid-cols-5 grid-rows-7 w-full bg-cover bg-center border h-full"
        style="background-image:url({{ asset('svg/soccerfield.svg') }})">
        {{-- first row --}}
        <div></div>
        <div></div>
        <div x-ref="drag-container" :data-container-id="a1" class="dropper">SW</div>
        <div></div>
        <div></div>
        {{-- second row --}}
        <div x-ref="drag-container" :data-container-id="b1" class="dropper">DR</div>
        <div x-ref="drag-container" :data-container-id="b2" class="dropper">DC</div>
        <div x-ref="drag-container" :data-container-id="b3" class="dropper">DC</div>
        <div x-ref="drag-container" :data-container-id="b4" class="dropper">DC</div>
        <div x-ref="drag-container" :data-container-id="b5" class="dropper">DL</div>
    </div>
</div>
</div> --}}