@extends('layouts.admin')
@section('title', '考試分類 - 拖拉管理')
@section('content')
<div x-data="organizeApp()" x-init="init()">
    <!-- 頂部 -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <p class="text-gray-600 dark:text-gray-400 text-sm">拖拉分類可排序或移動層級，雙擊名稱可改名，下方可管理考試歸屬分類</p>
        <a href="{{ route('admin.categories.index') }}" class="px-4 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-300 dark:hover:bg-slate-600">返回分類列表</a>
    </div>

    <!-- Toast -->
    <div x-show="message" x-transition x-cloak
         :class="messageType === 'success' ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300'"
         class="mb-4 px-4 py-3 rounded-lg border flex items-center justify-between">
        <span x-text="message"></span>
        <button @click="message=''" class="text-current opacity-70 hover:opacity-100">&times;</button>
    </div>

    <!-- ====== 第一區：分類管理（拖拉排序 + 改名） ====== -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white">分類管理</h2>
            <span class="text-xs text-gray-400">拖拉排序 / 雙擊改名 / 拖入其他分類可變更父層</span>
        </div>

        <!-- 頂層分類（可排序） -->
        <div id="root-category-list" class="space-y-2">
            <template x-for="root in categoryTree" :key="root.id">
                <div class="cat-root-item" :data-id="root.id">
                    <!-- 頂層分類 -->
                    <div class="flex items-center gap-2 p-3 rounded-lg border-2 transition-all"
                         :class="root.is_active ? 'border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 opacity-60'"
                         @dragover.prevent="catDragOver($event, root.id)"
                         @dragleave="catDragLeave($event)"
                         @drop.prevent="catDrop($event, root.id)">
                        <!-- 拖拉手柄 -->
                        <div class="cursor-grab active:cursor-grabbing text-gray-300 dark:text-gray-600 hover:text-gray-500 cat-handle">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
                        </div>
                        <div class="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></div>
                        <!-- 名稱（雙擊編輯） -->
                        <template x-if="editingId !== root.id">
                            <span class="font-bold text-gray-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 flex-1"
                                  @dblclick="startEdit(root)" :title="'雙擊改名 / slug: ' + root.slug" x-text="root.name"></span>
                        </template>
                        <template x-if="editingId === root.id">
                            <input type="text" x-model="editingName" @keydown.enter="saveEdit(root)" @keydown.escape="cancelEdit()" @blur="saveEdit(root)"
                                   x-ref="editInput" class="flex-1 px-2 py-1 rounded border-2 border-blue-400 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm font-bold focus:outline-none">
                        </template>
                        <span class="text-xs text-gray-400 flex-shrink-0" x-text="root.exams_count + ' 筆考試'"></span>
                        <!-- 展開/收合 -->
                        <button @click="root._open = !root._open" class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0">
                            <svg class="w-4 h-4 transition-transform" :class="root._open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>
                    </div>
                    <!-- 子分類（可排序 + 可跨父層拖拉） -->
                    <div x-show="root._open" x-transition class="ml-8 mt-1 space-y-1 child-category-list" :data-parent-id="root.id">
                        <template x-for="child in getChildren(root.id)" :key="child.id">
                            <div class="cat-child-item flex items-center gap-2 p-2.5 rounded-lg border-2 transition-all"
                                 :data-id="child.id"
                                 :class="child.is_active ? 'border-indigo-200 dark:border-indigo-800 bg-indigo-50/30 dark:bg-indigo-900/10' : 'border-gray-200 dark:border-slate-700 opacity-60'">
                                <div class="cursor-grab active:cursor-grabbing text-gray-300 dark:text-gray-600 hover:text-gray-500 cat-handle">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
                                </div>
                                <div class="w-2.5 h-2.5 rounded-full bg-indigo-400 flex-shrink-0"></div>
                                <template x-if="editingId !== child.id">
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:text-indigo-600 dark:hover:text-indigo-400 flex-1"
                                          @dblclick="startEdit(child)" :title="'雙擊改名'" x-text="child.name"></span>
                                </template>
                                <template x-if="editingId === child.id">
                                    <input type="text" x-model="editingName" @keydown.enter="saveEdit(child)" @keydown.escape="cancelEdit()" @blur="saveEdit(child)"
                                           class="flex-1 px-2 py-1 rounded border-2 border-indigo-400 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none">
                                </template>
                                <span class="text-xs text-gray-400 flex-shrink-0" x-text="child.exams_count + ' 筆'"></span>
                            </div>
                        </template>
                        <!-- 空白提示 -->
                        <div x-show="getChildren(root.id).length === 0" class="py-3 text-center text-xs text-gray-300 dark:text-gray-600 border-2 border-dashed border-gray-200 dark:border-slate-700 rounded-lg">
                            拖拉子分類到此處
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- ====== 第二區：考試歸屬管理（拖拉考試到分類） ====== -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- 左側：來源考試 -->
        <div class="lg:col-span-5">
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-4 mb-4">
                <h3 class="font-bold text-gray-900 dark:text-white mb-3">選擇來源分類</h3>
                <div class="space-y-1 max-h-52 overflow-y-auto">
                    <button @click="loadExams('uncategorized', '未分類')"
                            :class="sourceCategory === 'uncategorized' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-300' : 'hover:bg-gray-50 dark:hover:bg-slate-800 border-transparent'"
                            class="w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors border-2">
                        未分類考試
                    </button>
                    <template x-for="cat in allCats" :key="cat.id">
                        <button @click="loadExams(cat.id, cat.name)"
                                :class="String(sourceCategory) === String(cat.id) ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-300' : 'hover:bg-gray-50 dark:hover:bg-slate-800 border-transparent'"
                                :style="cat.parent_id ? 'padding-left:2rem' : ''"
                                class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors border-2"
                                :class="[!cat.parent_id && 'font-bold']">
                            <span x-text="cat.name"></span>
                            <span class="text-xs text-gray-400 ml-1" x-text="'(' + cat.exams_count + ')'"></span>
                        </button>
                    </template>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-gray-900 dark:text-white">
                        <span x-text="sourceName || '請選擇分類'"></span>
                        <span x-show="exams.length > 0" class="text-sm font-normal text-gray-400 ml-1" x-text="'(' + exams.length + ' 筆)'"></span>
                    </h3>
                    <template x-if="exams.length > 0">
                        <label class="flex items-center gap-1.5 cursor-pointer text-xs text-gray-500">
                            <input type="checkbox" @change="toggleSelectAll($event.target.checked)" class="w-3.5 h-3.5 rounded"> 全選
                        </label>
                    </template>
                </div>
                <div x-show="examLoading" class="py-8 text-center text-gray-400">
                    <svg class="animate-spin h-6 w-6 mx-auto mb-2 text-blue-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    載入中...
                </div>
                <div x-show="!examLoading && exams.length === 0 && sourceCategory" class="py-8 text-center text-gray-400 text-sm">此分類沒有考試</div>
                <div x-show="!examLoading && !sourceCategory" class="py-8 text-center text-gray-400 text-sm">請從上方選擇一個分類</div>

                <div id="source-list" class="space-y-2 max-h-[420px] overflow-y-auto">
                    <template x-for="exam in exams" :key="exam.id">
                        <div :data-id="exam.id"
                             class="exam-card group flex items-start gap-3 p-3 rounded-lg border-2 cursor-grab active:cursor-grabbing transition-all"
                             :class="selectedIds.includes(exam.id) ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-600' : 'border-gray-200 dark:border-slate-700 hover:border-blue-300 hover:shadow-md bg-white dark:bg-slate-800'">
                            <input type="checkbox" :value="exam.id" :checked="selectedIds.includes(exam.id)"
                                   @change="toggleSelect(exam.id)" class="w-4 h-4 rounded mt-0.5 flex-shrink-0">
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-gray-900 dark:text-white text-sm truncate" x-text="exam.title"></div>
                                <div class="flex flex-wrap gap-2 mt-1">
                                    <span class="text-xs text-gray-500" x-text="exam.subject"></span>
                                    <span x-show="exam.year" class="text-xs text-gray-400" x-text="exam.year"></span>
                                    <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400" x-text="exam.questions_count + ' 題'"></span>
                                </div>
                            </div>
                            <div class="text-gray-300 dark:text-gray-600 group-hover:text-gray-500 flex-shrink-0 mt-1">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- 右側：目標分類 -->
        <div class="lg:col-span-7">
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-4">
                <h3 class="font-bold text-gray-900 dark:text-white mb-3">拖入目標分類 <span class="text-sm font-normal text-gray-400">（或勾選後點按鈕）</span></h3>

                <!-- 批次移動 -->
                <div x-show="selectedIds.length > 0" x-transition class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                    <span class="text-sm text-blue-700 dark:text-blue-300 font-medium mb-2 block" x-text="'已選 ' + selectedIds.length + ' 筆考試'"></span>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="cat in allCats" :key="'btn-'+cat.id">
                            <button @click="bulkMove(cat.id, cat.name)"
                                    :disabled="String(cat.id) === String(sourceCategory)"
                                    :class="String(cat.id) === String(sourceCategory) ? 'opacity-30 cursor-not-allowed' : 'hover:bg-indigo-700'"
                                    class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-xs font-medium transition-colors"
                                    x-text="cat.name"></button>
                        </template>
                        <button @click="bulkMove(null, '未分類')" :disabled="sourceCategory === 'uncategorized'"
                                :class="sourceCategory === 'uncategorized' ? 'opacity-30 cursor-not-allowed' : 'hover:bg-gray-600'"
                                class="px-3 py-1.5 bg-gray-500 text-white rounded-lg text-xs font-medium">未分類</button>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="drop-zone border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-4 min-h-[80px] transition-all"
                         @dragover.prevent="examDragOver($event)" @dragleave="examDragLeave($event)"
                         @drop.prevent="dropToCategory($event, null, '未分類')">
                        <div class="flex items-center gap-2 mb-1">
                            <div class="w-3 h-3 rounded-full bg-gray-400"></div>
                            <span class="font-semibold text-gray-700 dark:text-gray-300 text-sm">未分類</span>
                        </div>
                        <p class="text-xs text-gray-400">拖拉考試到此處移除分類</p>
                    </div>
                    <template x-for="cat in allCats" :key="'drop-'+cat.id">
                        <div class="drop-zone border-2 border-dashed rounded-xl p-4 min-h-[80px] transition-all"
                             :class="cat.parent_id ? 'border-indigo-200 dark:border-indigo-800 ml-2' : 'border-blue-300 dark:border-blue-700'"
                             @dragover.prevent="examDragOver($event)" @dragleave="examDragLeave($event)"
                             @drop.prevent="dropToCategory($event, cat.id, cat.name)">
                            <div class="flex items-center gap-2 mb-1">
                                <div class="w-3 h-3 rounded-full" :class="cat.parent_id ? 'bg-indigo-400' : 'bg-blue-500'"></div>
                                <span class="font-semibold text-sm" :class="cat.parent_id ? 'text-indigo-700 dark:text-indigo-300' : 'text-blue-700 dark:text-blue-300'" x-text="cat.name"></span>
                                <span class="text-xs text-gray-400" x-text="'(' + cat.exams_count + ')'"></span>
                            </div>
                            <p x-show="cat.description" class="text-xs text-gray-400 truncate" x-text="cat.description"></p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
<script>
function organizeApp() {
    return {
        // ── 分類管理 ──
        allCats: @json($allCategories->map(fn($c) => ['id'=>$c->id,'name'=>$c->name,'slug'=>$c->slug,'parent_id'=>$c->parent_id,'sort_order'=>$c->sort_order,'is_active'=>$c->is_active,'description'=>$c->description,'exams_count'=>$c->exams_count])),
        editingId: null,
        editingName: '',
        sortableInstances: [],

        get categoryTree() {
            return this.allCats
                .filter(c => !c.parent_id)
                .sort((a,b) => a.sort_order - b.sort_order)
                .map(c => ({ ...c, _open: c._open !== undefined ? c._open : true }));
        },

        getChildren(parentId) {
            return this.allCats
                .filter(c => c.parent_id === parentId)
                .sort((a,b) => a.sort_order - b.sort_order);
        },

        // ── 考試管理 ──
        sourceCategory: null,
        sourceName: '',
        exams: [],
        selectedIds: [],
        examLoading: false,
        message: '',
        messageType: 'success',

        init() {
            this.$nextTick(() => {
                this.initCategorySortable();
                this.initExamDrag();
            });
        },

        // ── 分類 SortableJS ──
        initCategorySortable() {
            // 頂層排序
            const rootList = document.getElementById('root-category-list');
            if (rootList) {
                this.sortableInstances.push(new Sortable(rootList, {
                    animation: 200,
                    handle: '.cat-root-item > div > .cat-handle',
                    draggable: '.cat-root-item',
                    ghostClass: 'opacity-30',
                    onEnd: () => this.saveCategoryOrder(),
                }));
            }

            // 子分類排序（初始化 + 動態觀察）
            this.initChildSortables();

            // 觀察 DOM 變化，當展開新的子列表時自動初始化
            const observer = new MutationObserver(() => this.initChildSortables());
            observer.observe(rootList, { childList: true, subtree: true });
        },

        initChildSortables() {
            document.querySelectorAll('.child-category-list').forEach(el => {
                if (el._sortable) return; // 已初始化
                el._sortable = new Sortable(el, {
                    group: 'children',  // 允許跨父層拖拉
                    animation: 200,
                    handle: '.cat-handle',
                    draggable: '.cat-child-item',
                    ghostClass: 'opacity-30',
                    onEnd: (evt) => {
                        // 更新 parent_id
                        const itemId = parseInt(evt.item.dataset.id);
                        const newParentId = parseInt(evt.to.dataset.parentId);
                        const cat = this.allCats.find(c => c.id === itemId);
                        if (cat) cat.parent_id = newParentId;
                        this.saveCategoryOrder();
                    },
                });
            });
        },

        async saveCategoryOrder() {
            // 收集所有頂層順序
            const items = [];
            const rootEls = document.querySelectorAll('.cat-root-item');
            rootEls.forEach((el, i) => {
                const id = parseInt(el.dataset.id);
                items.push({ id, parent_id: null, sort_order: i });
            });

            // 收集所有子分類順序
            document.querySelectorAll('.child-category-list').forEach(list => {
                const parentId = parseInt(list.dataset.parentId);
                list.querySelectorAll('.cat-child-item').forEach((el, i) => {
                    const id = parseInt(el.dataset.id);
                    items.push({ id, parent_id: parentId, sort_order: i });
                });
            });

            if (items.length === 0) return;

            try {
                const resp = await fetch('{{ route("admin.categories.reorder") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ items }),
                });
                const data = await resp.json();
                if (data.success) {
                    // 更新本地排序
                    items.forEach(item => {
                        const cat = this.allCats.find(c => c.id === item.id);
                        if (cat) {
                            cat.parent_id = item.parent_id;
                            cat.sort_order = item.sort_order;
                        }
                    });
                    this.showMessage(data.message, 'success');
                }
            } catch (e) {
                this.showMessage('排序儲存失敗: ' + e.message, 'error');
            }
        },

        // ── 分類拖入（子分類拖到頂層分類上）──
        catDragOver(e, rootId) {
            e.currentTarget.classList.add('ring-2', 'ring-green-400');
        },
        catDragLeave(e) {
            e.currentTarget.classList.remove('ring-2', 'ring-green-400');
        },
        catDrop(e, rootId) {
            e.currentTarget.classList.remove('ring-2', 'ring-green-400');
            // 由 SortableJS group 處理
        },

        // ── 分類改名 ──
        startEdit(cat) {
            this.editingId = cat.id;
            this.editingName = cat.name;
            this.$nextTick(() => {
                const input = document.querySelector(`input[x-model="editingName"]`);
                if (input) { input.focus(); input.select(); }
            });
        },

        cancelEdit() {
            this.editingId = null;
            this.editingName = '';
        },

        async saveEdit(cat) {
            const newName = this.editingName.trim();
            if (!newName || newName === cat.name) {
                this.cancelEdit();
                return;
            }

            try {
                const resp = await fetch('{{ route("admin.categories.rename") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ id: cat.id, name: newName }),
                });
                const data = await resp.json();
                if (data.success) {
                    // 更新本地資料
                    const c = this.allCats.find(c => c.id === cat.id);
                    if (c) c.name = newName;
                    this.showMessage(data.message, 'success');
                } else {
                    this.showMessage('改名失敗', 'error');
                }
            } catch (e) {
                this.showMessage('改名失敗: ' + e.message, 'error');
            }
            this.cancelEdit();
        },

        // ── 考試拖拉 ──
        initExamDrag() {
            const sourceList = document.getElementById('source-list');
            if (!sourceList) return;
            sourceList.addEventListener('dragstart', (e) => {
                const card = e.target.closest('.exam-card');
                if (!card) return;
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', card.dataset.id);
                card.classList.add('opacity-50');
            });
            sourceList.addEventListener('dragend', (e) => {
                const card = e.target.closest('.exam-card');
                if (card) card.classList.remove('opacity-50');
            });
        },

        async loadExams(categoryId, categoryName) {
            this.sourceCategory = String(categoryId);
            this.sourceName = categoryName;
            this.selectedIds = [];
            this.examLoading = true;
            try {
                const resp = await fetch('{{ route("admin.categories.exams") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ category_id: categoryId }),
                });
                this.exams = await resp.json();
                this.$nextTick(() => {
                    document.querySelectorAll('.exam-card').forEach(c => c.setAttribute('draggable', 'true'));
                });
            } catch (e) {
                this.showMessage('載入失敗: ' + e.message, 'error');
            } finally {
                this.examLoading = false;
            }
        },

        toggleSelect(id) {
            const idx = this.selectedIds.indexOf(id);
            idx >= 0 ? this.selectedIds.splice(idx, 1) : this.selectedIds.push(id);
        },
        toggleSelectAll(checked) {
            this.selectedIds = checked ? this.exams.map(e => e.id) : [];
        },

        examDragOver(e) {
            e.currentTarget.classList.add('border-green-400', 'dark:border-green-500', 'bg-green-50', 'dark:bg-green-900/20', 'scale-[1.02]');
            e.currentTarget.classList.remove('border-dashed');
        },
        examDragLeave(e) {
            e.currentTarget.classList.remove('border-green-400', 'dark:border-green-500', 'bg-green-50', 'dark:bg-green-900/20', 'scale-[1.02]');
            e.currentTarget.classList.add('border-dashed');
        },

        async dropToCategory(e, categoryId, categoryName) {
            e.currentTarget.classList.remove('border-green-400', 'dark:border-green-500', 'bg-green-50', 'dark:bg-green-900/20', 'scale-[1.02]');
            e.currentTarget.classList.add('border-dashed');
            const examId = parseInt(e.dataTransfer.getData('text/plain'));
            if (!examId) return;
            if (this.selectedIds.length > 1 && this.selectedIds.includes(examId)) {
                await this.bulkMove(categoryId, categoryName);
            } else {
                await this.moveExam(examId, categoryId, categoryName);
            }
        },

        async moveExam(examId, categoryId, categoryName) {
            try {
                const resp = await fetch('{{ route("admin.categories.move_exam") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ exam_id: examId, category_id: categoryId }),
                });
                const data = await resp.json();
                if (data.success) {
                    this.showMessage(data.message, 'success');
                    this.exams = this.exams.filter(e => e.id !== examId);
                    this.selectedIds = this.selectedIds.filter(id => id !== examId);
                    this.updateCatCount(categoryId, 1);
                }
            } catch (e) { this.showMessage('移動失敗: ' + e.message, 'error'); }
        },

        async bulkMove(categoryId, categoryName) {
            if (!this.selectedIds.length) return;
            try {
                const resp = await fetch('{{ route("admin.categories.bulk_move") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ exam_ids: this.selectedIds, category_id: categoryId }),
                });
                const data = await resp.json();
                if (data.success) {
                    this.showMessage(data.message, 'success');
                    const count = this.selectedIds.length;
                    this.exams = this.exams.filter(e => !this.selectedIds.includes(e.id));
                    this.selectedIds = [];
                    this.updateCatCount(categoryId, count);
                }
            } catch (e) { this.showMessage('移動失敗: ' + e.message, 'error'); }
        },

        updateCatCount(categoryId, delta) {
            // 來源分類 -delta
            const srcId = this.sourceCategory === 'uncategorized' ? null : parseInt(this.sourceCategory);
            const src = this.allCats.find(c => c.id === srcId);
            if (src) src.exams_count = Math.max(0, src.exams_count - delta);
            // 目標分類 +delta
            if (categoryId) {
                const tgt = this.allCats.find(c => c.id === categoryId);
                if (tgt) tgt.exams_count += delta;
            }
        },

        showMessage(msg, type = 'success') {
            this.message = msg;
            this.messageType = type;
            setTimeout(() => { this.message = ''; }, 3000);
        },
    };
}
</script>
<style>
.drop-zone { transition: all 0.2s ease; }
.exam-card { transition: all 0.15s ease; }
.exam-card:hover { transform: translateY(-1px); }
</style>
@endsection