@php
    use Illuminate\Support\Facades\Log;
@endphp
<div class="mt-5 col-span-3 flex flex-col gap-3">
    <div class="flex justify-between">
        <div class="text-3xl font-bold"> {{ $team_name }} <span
                class="text-sm font-light">({{ $player_on_field_counter }})</span></div>
        <div class="flex gap-3">
            <x-filament::button 
                icon="phosphor-user-circle-check" 
                color="success" 
                tooltip="Find best formation and create lineup" 
                wire:click="generateBestLineUp"
                />
            <x-filament::button icon="phosphor-user-switch" tooltip="Create lineup for selected formation" wire:click="generateLineUp()"/>
            <x-filament::button icon="phosphor-x" tooltip="Clear all" wire:click="clearResultTable()" />

            <x-filament::modal id="custom-view-modal" slide-over width="xl">
                <x-slot name="trigger">
                    <x-filament::button icon="phosphor-question-mark" tooltip="Lineup code explanation" />
                </x-slot>
                <x-slot name="header">
                </x-slot>
                @include('filament.modals.position-abbreviation')
                <x-slot name="footer">
                    <div class="flex justify-end gap-x-3">
                        <x-filament::button color="gray"
                            x-on:click="$dispatch('close-modal', { id: 'custom-view-modal' })">
                            Close
                        </x-filament::button>
                    </div>
                </x-slot>
            </x-filament::modal>
            <x-filament::button icon="phosphor-arrows-clockwise" tooltip="Reload" wire:click="loadPlacement()" />
            <x-filament::button icon="phosphor-copy" color="success"
                tooltip="Copy results for pasting into a spread sheet" wire:click="copyResult()" />
            @role('super_admin')
            <x-filament::button icon="phosphor-copy" color="warning" tooltip="Copy calculation variables"
                wire:click="copyDevelopment()" />
            @endrole
            {{--  --}}
        </div>
    </div>
    <div class="border border-gray-500 w-full p-3 rounded grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5 shadow"
        style="background-image: url({{ asset('images/soccerfield-af4.jpg') }});">
        @foreach ($beschriftung as $boxNumber => $benennung)
            @if ($benennung)
                @if (in_array($boxNumber, $lineup))
                    <div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
                        @dragleave.prevent="isOver = false"
                        @drop.prevent="
                        isOver = false;
                        const rawData = $event.dataTransfer.getData('text/plain');
                        if (rawData) {
                            const elementData = JSON.parse(rawData);
                            $wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
                        }
                    "
                        :class="isOver ? 'border-red-500 bg-white/20 ring-2 ring-red-500/50 scale-[1.02]' :
                            @if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/40'
                    @elseif (in_array($benennung, ['DM', 'MR', 'MC', 'ML', 'AM'])) 
                        'border-gray-800 bg-blue-500/40'
                    @else
                        'border-gray-800 bg-amber-500/40' @endif"
                        class="border-2 rounded-xl transition-all px-1 pt-0 flex flex-col justify-start transform inset-shadow-sm inset-shadow-white/50 shadow-lg">
                        <!-- Box Header -->
                        <div class="grid grid-cols-6 items-center">
                            <div></div>
                            <div
                                class="w-10 2xl:w-16 text-center mx-auto bg-black text-white p-0.5 2xl:p-1 text-md 2xl:text-xl font-black rounded-b col-span-4">
                                {{ $benennung }}
                            </div>

                            @if ($boxes[$boxNumber])
                                <x-filament::icon-button icon="heroicon-m-trash" color="black"
                                    class="dark:[&_svg]:text-black" size="sm"
                                    wire:click="clearBox({{ $boxNumber }})" />
                            @endif
                        </div>

                        <!-- Box Inhalt -->
                        @if ($boxes[$boxNumber])
                            <div draggable="true"
                                x-on:dragstart="e => {
                                e.dataTransfer.effectAllowed = 'copy';
                                e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $boxes[$boxNumber]['id'] }} }));
                            }"
                                class="cursor-grab active:cursor-grabbing bg-black border border-black hover:border-blue-500 text-white p-0.5 2xl:p-1 m-0.5 rounded leading-4 2xl:leading-5 text-ms">
                                {{ $boxes[$boxNumber]['name'] }}
                            </div>
                        @endif
                    </div>
                @else
                    <div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
                        @dragleave.prevent="isOver = false"
                        @drop.prevent="
                        isOver = false;
                        const rawData = $event.dataTransfer.getData('text/plain');
                        if (rawData) {
                            const elementData = JSON.parse(rawData);
                            $wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
                        }
                    "
                        class="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs invisible">
                    </div>
                @endif
            @else
                <div></div>
            @endif
        @endforeach
    </div>
</div>