<div class="my-4 aura-card">
    <div class="mb-4">
        <h2 class="text-xl font-semibold">{{ __('Questions') }}</h2>
    </div>

    <div x-data="formQuestions" class="flex flex-wrap min-w-full -mx-2 draggable-container focus:outline-none">

      @if($questions)

        @forelse($questions as $index => $question)
            <style>
            .post-field-{{ optional($question)['slug'] }}-wrapper {
                width: {{ optional(optional($question)['style'])['width'] ?? '100' }}%;
            }

            @media screen and (max-width: 768px) {
                .post-field-{{ optional($question)['slug'] }}-wrapper {
                width: 100%;
                }
            }
            </style>

            <div class="post-field-{{ optional($question)['slug'] }}-wrapper px-2 reorder-item draggable-item" id="field_{{ $question['_id'] }}" wire:key="pt-field-{{ $index }}">
                @include('forms::components.show-question')
            </div>
            @empty
            <div>
                <p class="text-gray-500">No questions added yet.</p>
            </div>
        @endforelse
      @endif

    </div>

    <div class="mt-4">
        <x-aura::button.border size="xs" wire:click.prevent="addQuestion">
          {{ __('Add Question') }}
        </x-aura::button.border>
    </div>

    <livewire:forms::edit-question />

    @once
    @push('scripts')

        <script>
            // when alpine is ready
            document.addEventListener('alpine:init', () => {
                // define an alpinejs component named 'userDropdown'
                Alpine.data('formQuestions', () => ({
                    init() {
                        Alpine.nextTick(() => {
                        console.log('init formQuestions!');
                        const sortable = new window.Sortable(document.querySelectorAll('.draggable-container'), {
                            draggable: '.draggable-item',
                            handle: '.draggable-handle',
                            mirror: {
                                constrainDimensions: true,
                            },
                        });

                        sortable.on('sortable:stop', () => {
                            Alpine.nextTick(() => {
                                // console.log('stop');
                                // console.log(Array.from(document.querySelectorAll('.reorder-item')).map(el => el.id));
                                // console.log('reorder', Array.from(document.querySelectorAll('.reorder-item')).map(el => el.id));
                                @this.reorder(
                                    Array.from(document.querySelectorAll('.reorder-item')).map(el => el.id)
                                )
                            })
                        });
                        })
                    }
                }));
            })
        </script>

        <style>
            .draggable--original *{
                opacity: 0.5;
            }
            .draggable--over {
                opacity: 0.5;
            }

            .aura-card-small {
                width: 100%;
                transform-origin: 0% 50%;
                transition: .2s all ease;
            }
            .draggable-mirror .aura-card-small {
                opacity: 1;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

                transform: rotate(-1deg);

                min-width: 400px;
            }
        </style>

    @endpush
    @endonce

</div>
