{{-- 
    "id" => 1218016
    "name" => "Walter Nuñez"
    "pos" => "LW"
    "foot" => "Right"
    "tot_evt" => 2
    "tot_min" => 102
    "ave_min" => 51
    "gls" => 0
    "fls" => 3
    "ofs" => 0
    "crd" => 0
    "snt" => 0
    "tsh" => 0
    "color_evt" => "success"
    "area" => "attack"
    "color_pos" => "warning"
--}}
<div class="relative w-full">
    <div class="fixed left-0 top-0 h-screen dispatcher-board-root w-146 max-w-146  overflow-y-auto no-scrollbar">
        {{ $this->table }}
    </div>
    <div class="fixed left-147 top-5 right-0 bottom-0 h-screen max-w-4xl">
        <div>
            <div class="font-black text-2xl text-center">{{ $team_name }}</div>
            <div class="grid grid-cols-4 items-center">
                <div class="m-4 col-span-2">{{ $this->form }}</div>
                <div class="text-center pt-4">Player on field: {{ $player_on_field_counter }}</div>
                <div class="w-56 max-w-56 mx-auto p-4" x-data="{ x_value: {{ $x_value }} }">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm font-medium">
                            Factor X
                        </label>
                        <!-- Zeigt den Wert live an -->
                        <span
                            class="text-sm font-semibold text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded"
                            x-text="x_value"></span>
                    </div>
                    <input type="range" wire:model.live="x_value" wire:change="calculateAspg" min="0"
                        max="10"
                        class="w-full h-2 bg-gray-200 dark:bg-gray-500 rounded-lg appearance-none cursor-pointer accent-primary-600">
                </div>
            </div>
        </div>
        <div class="border-2 mx-3 p-3 rounded col-span-5 grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5"
            style="background-image: url({{ asset('images/soccerfield-cleand.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>
</div>