@php
    use DefStudio\GameEngine\Http\Livewire\Runs\Concerns\RunsTasks;
    use DefStudio\GameEngine\Decorators\Runs\PlayableTask;
    use DefStudio\GameEngine\Decorators\Tasks\DragAndDrop;

    /** @var RunsTasks $this */

   /** @var PlayableTask&DragAndDrop $task */
    $task = $this->task;

    $task->loadMissing('media');

    $tiles = $task->should_randomize_tiles_order()
        ? collect($task->tiles())->shuffle()->toArray()
        : $task->tiles()
@endphp

<div class="flex flex-col items-center" id="drag-and-drop" wire:ignore>
    <div class="ck-content">
        {!! $task->question() !!}
    </div>

    <div class=" flex flex-col mt-4"
         x-data="task_drag_and_drop_run"
         x-init="snaps = {{json_encode($task->snaps())}}; options = {{json_encode($task->run_options())}}, tiles_count = {{count($tiles)}}"
    >
        <div class="mx-auto relative" x-ref="container" wire:key="drag-and-drop-image-container">
            <img src="{{$task->getFirstMediaUrl('base_image')}}" x-ref="base_image">
        </div>


        <div class="my-4 px-8 flex flex-wrap justify-center gap-4">
            @foreach($tiles as $tile_data)
                <img src="{{$task->media->find($tile_data['media_id'])?->getUrl()}}"
                     id="draggable_tile_{{$tile_data['id']}}"
                     wire:key="draggable_tile_{{$tile_data['id']}}"
                     class="cursor-pointer hover:opacity-90"
                     :style="placements['{{$tile_data['id']}}'] ? `position: absolute; left: ${placements['{{$tile_data['id']}}'].x}px; top: ${placements['{{$tile_data['id']}}'].y}px;` : ''"
                     x-bind:draggable="!submitting"
                     @dragstart="drag_start(event)"
                     @dragend="drag_end('{{$tile_data['id']}}', event)"
                >
            @endforeach

        </div>

        <div class="flex mb-4">
            <x-game-engine::tasks.drag-and-drop.submit-button x-show="options.partial_submit_allowed || check_complete()"
                                                              @click="submit"
                                                              class="ml-auto"
                                                              x-bind:class="{'opacity-50': submitting}"
                                                              x-bind:disabled="submitting"
            >{{__('Submit answer')}}</x-game-engine::tasks.drag-and-drop.submit-button>
        </div>
    </div>
</div>
