<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Edit Page') }} {{ $page->title }}" :buttons="$buttons" :isFilterable="false" />
        <div x-data="editPage()" x-init="selectedItems = {{ $page->sections }}, availableItems = {{ $sections }}, page = {{ $page }};
        init();" class="grid grid-cols-1 md:grid-cols-2 gap-4 xl:gap-6">
            <!-- Left Section (Selected Items) -->
            <div class="n10-box">
                <p class="m-text font-medium mb-4">{{ __('Selected Sections') }}</p>
                <ul class="flex flex-col gap-3 h-full p-1 border rounded-lg"
                    :class="isDragging ? 'bg-primary/10 border-primary border-dashed' : 'border-transparent'"
                    @dragover="allowDrop($event)" @drop="handleDrop($event)">
                    <template x-for="(item, index) in selectedItems" :key="index">
                        <li class="white-box flex justify-between items-center cursor-move" draggable="true"
                            @dragstart="startDrag($event, 'selected', index)" @dragend="endDrag"
                            @dragover="allowDrop($event)" @drop="handleDrop($event, index)">
                            <div class="flex items-center gap-2">
                                <i class="ph ph-dots-six-vertical text-lg"></i>
                                <span class="s-text font-medium" x-text="item.title"></span>
                            </div>
                            <button class="text-xl" @click="deleteItem(index)">
                                <i class="ph ph-trash"></i>
                            </button>
                        </li>
                    </template>
                </ul>

                <div class="flex justify-end mt-4">
                    <x-admin::primary-button type="button"
                        @click="savePage">{{ __('Save Page') }}
                    </x-admin::primary-button>
                </div>
            </div>

            <!-- Right Section (Available Items) -->
            <div class="n10-box">
                <p class="m-text font-medium mb-4">{{ __('Available Sections') }}</p>
                <ul class="space-y-3">
                    <template x-for="(item, index) in availableItems" :key="index">
                        <li class="white-box flex justify-between items-center cursor-move" draggable="true"
                            @dragstart="startDrag($event, 'available', index)" @dragend="endDrag">
                            <div class="flex items-center gap-3">
                                <i class="ph ph-arrow-left text-lg"></i>
                                <span x-text="item.title"></span>
                            </div>
                            <a :href="`/admin/settings/theme/frontend-sections/${item.slug}/edit`"><i class="ph ph-gear text-lg"></i></a>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
    @push('scripts')
        @vite('resources/admin/js/settings/edit-frontend-pages.js')
    @endpush
</x-admin-app-layout>
