@extends('layouts.admin')
@section('title', '題庫管理')
@section('content')

{{-- Tab 切換：公用 / 私有 --}}
<div class="flex items-center gap-1 mb-6 bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-1.5 max-w-xs">
    <a href="{{ route('admin.questions.index', array_merge(request()->except('tab', 'page'), ['tab' => 'public'])) }}"
       class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors {{ $tab === 'public' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800' }}">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        公用題庫
        <span class="px-1.5 py-0.5 text-xs rounded-full {{ $tab === 'public' ? 'bg-white/20' : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-400' }}">{{ number_format($publicCount) }}</span>
    </a>
    <a href="{{ route('admin.questions.index', array_merge(request()->except('tab', 'page'), ['tab' => 'private'])) }}"
       class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors {{ $tab === 'private' ? 'bg-gray-700 dark:bg-slate-600 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800' }}">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        私有題庫
        <span class="px-1.5 py-0.5 text-xs rounded-full {{ $tab === 'private' ? 'bg-white/20' : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-400' }}">{{ number_format($privateCount) }}</span>
    </a>
</div>

{{-- 篩選 --}}
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-2">
        <input type="hidden" name="tab" value="{{ $tab }}">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="搜尋題目內容..." class="px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500 min-w-[200px]">
        <select name="subject_id" onchange="this.form.submit()" class="px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有科目</option>
            @foreach($subjects as $sub)<option value="{{ $sub->id }}" {{ request('subject_id') == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>@endforeach
        </select>
        <select name="type" onchange="this.form.submit()" class="px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有題型</option>
            <option value="multiple_choice" {{ request('type') == 'multiple_choice' ? 'selected' : '' }}>選擇題</option>
            <option value="short_answer" {{ request('type') == 'short_answer' ? 'selected' : '' }}>簡答題</option>
            <option value="essay" {{ request('type') == 'essay' ? 'selected' : '' }}>問答題</option>
            <option value="true_false" {{ request('type') == 'true_false' ? 'selected' : '' }}>是非題</option>
            <option value="fill_blank" {{ request('type') == 'fill_blank' ? 'selected' : '' }}>填充題</option>
        </select>
        <select name="difficulty" onchange="this.form.submit()" class="px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有難度</option>
            <option value="1" {{ request('difficulty') == '1' ? 'selected' : '' }}>簡單</option>
            <option value="2" {{ request('difficulty') == '2' ? 'selected' : '' }}>中等</option>
            <option value="3" {{ request('difficulty') == '3' ? 'selected' : '' }}>困難</option>
        </select>
        <select name="has_ai" onchange="this.form.submit()" class="px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">AI 詳解</option>
            <option value="yes" {{ request('has_ai') == 'yes' ? 'selected' : '' }}>已有詳解</option>
            <option value="no" {{ request('has_ai') == 'no' ? 'selected' : '' }}>尚無詳解</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">搜尋</button>
    </form>
</div>

@php
$typeLabel = fn($t) => match($t) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' };
$diffColor = fn($d) => match($d) { 1 => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', 3 => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', default => 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' };
$diffLabel = fn($d) => match($d) { 1 => '簡單', 3 => '困難', default => '中等' };
$currentUser = auth()->user();
$curSort = request('sort', 'id');
$curDir = request('dir', 'desc');
$sortUrl = function($col) use ($curSort, $curDir) {
    $dir = ($curSort === $col && $curDir === 'desc') ? 'asc' : 'desc';
    return request()->fullUrlWithQuery(['sort' => $col, 'dir' => $dir, 'page' => null]);
};
$sortIcon = function($col) use ($curSort, $curDir) {
    if ($curSort !== $col) return '↕';
    return $curDir === 'desc' ? '↓' : '↑';
};
@endphp

{{-- 上方分頁 --}}
@include('components.pagination-bar', ['paginator' => $questions])

{{-- 主要區塊 --}}
<div x-data="bulkActions()" class="space-y-4 mt-4">

    {{-- ===== 批量操作列 ===== --}}
    <div x-show="selected.length > 0" x-cloak x-transition
         class="sticky top-16 z-20 flex flex-wrap items-center gap-3 px-5 py-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-xl shadow-lg">
        <span class="text-sm font-bold text-blue-700 dark:text-blue-300">
            已選 <span class="text-lg" x-text="selected.length"></span> 題
        </span>

        <div class="flex flex-wrap gap-2 ml-auto items-center">
            {{-- 歸類到科目 --}}
            <div class="flex items-center gap-1">
                <select x-model="targetSubjectId" class="px-3 py-1.5 rounded-lg border border-blue-300 dark:border-blue-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-xs focus:outline-none focus:border-blue-500">
                    <option value="">-- 歸類到科目 --</option>
                    @foreach($subjects as $sub)
                    <option value="{{ $sub->id }}">{{ $sub->name }}</option>
                    @endforeach
                </select>
                <button @click="submitMove()" :disabled="!targetSubjectId"
                        class="px-3 py-1.5 bg-indigo-600 text-white text-xs font-medium rounded-lg hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    歸類
                </button>
            </div>

            <span class="text-gray-300 dark:text-gray-600">|</span>

            {{-- 設為公開/私有 --}}
            @if($tab === 'private')
            <button @click="submitTogglePublic(true)" class="px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded-lg hover:bg-green-700">
                設為公開
            </button>
            @else
            <button @click="submitTogglePublic(false)" class="px-3 py-1.5 bg-gray-600 text-white text-xs font-medium rounded-lg hover:bg-gray-700">
                設為私有
            </button>
            @endif

            <span class="text-gray-300 dark:text-gray-600">|</span>

            {{-- 批量產生 AI 詳解 --}}
            <button @click="submitBulkAI()" :disabled="bulkAiRunning"
                    class="px-3 py-1.5 bg-purple-600 text-white text-xs font-medium rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
                <svg x-show="bulkAiRunning" class="w-3.5 h-3.5 animate-spin" 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>
                <span x-text="bulkAiRunning ? bulkAiStatus : '批量產生 AI 詳解'"></span>
            </button>

            <span class="text-gray-300 dark:text-gray-600">|</span>

            {{-- 批量刪除 --}}
            <button @click="submitDelete()" class="px-3 py-1.5 bg-red-600 text-white text-xs font-medium rounded-lg hover:bg-red-700">
                批量刪除
            </button>

            {{-- 清除 --}}
            <button @click="selected = []; $refs.checkAll.checked = false" class="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">
                取消選取
            </button>
        </div>
    </div>

    {{-- ===== 題目列表 ===== --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
        <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <colgroup>
                <col style="width:15px">{{-- 勾選 --}}
                <col style="width:20px">{{-- 序號 --}}
                <col style="width:20px">{{-- 年份 --}}
                <col style="width:70px">{{-- 考試分類 --}}
                <col style="width:100px">{{-- 考試科目 --}}
                <col style="width:320px">{{-- 題目 --}}
                <col style="width:80px">{{-- 題型 --}}
                <col style="width:60px">{{-- 提供者 --}}
                <col style="width:60px">{{-- AI --}}
                <col style="width:100px">{{-- 更新 --}}
                <col style="width:150px">{{-- 操作 --}}
            </colgroup>
            <thead class="bg-gray-50 dark:bg-slate-800"><tr>
                <th class="px-2 py-2.5 text-left">
                    <input type="checkbox" x-ref="checkAll" @change="toggleAll($event)" class="w-4 h-4 rounded text-blue-600">
                </th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">
                    <a href="{{ $sortUrl('id') }}" class="hover:text-blue-600 inline-flex items-center gap-0.5">序號 <span class="opacity-60">{{ $sortIcon('id') }}</span></a>
                </th>
                <th class="px-2 py-2.5 text-center font-semibold text-gray-600 dark:text-gray-300">年份</th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">考試分類</th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">考試科目</th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">題目</th>
                <th class="px-2 py-2.5 text-center font-semibold text-gray-600 dark:text-gray-300">
                    <a href="{{ $sortUrl('question_type') }}" class="hover:text-blue-600 inline-flex items-center gap-0.5">題型 <span class="opacity-60">{{ $sortIcon('question_type') }}</span></a>
                </th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">提供者</th>
                <th class="px-2 py-2.5 text-center font-semibold text-gray-600 dark:text-gray-300">AI</th>
                <th class="px-2 py-2.5 text-center font-semibold text-gray-600 dark:text-gray-300">
                    <a href="{{ $sortUrl('updated_at') }}" class="hover:text-blue-600 inline-flex items-center gap-0.5">更新 <span class="opacity-60">{{ $sortIcon('updated_at') }}</span></a>
                </th>
                <th class="px-2 py-2.5 text-left font-semibold text-gray-600 dark:text-gray-300">操作</th>
            </tr></thead>
            <tbody>
            @forelse($questions as $q)
            <tr class="border-t border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors"
                :class="selected.includes({{ $q->id }}) && 'bg-blue-50/50 dark:bg-blue-900/10 !border-blue-200 dark:!border-blue-800'">
                <td class="px-2 py-2">
                    <input type="checkbox" value="{{ $q->id }}" @change="toggleOne({{ $q->id }})" :checked="selected.includes({{ $q->id }})" class="w-4 h-4 rounded text-blue-600">
                </td>
                <td class="px-2 py-2 text-gray-400 whitespace-nowrap">{{ $q->id }}</td>
                <td class="px-2 py-2 text-center whitespace-nowrap">
                    @if($q->exam && $q->exam->year)
                        <span class="text-purple-700 dark:text-purple-400 font-medium">{{ $q->exam->year - 1911 }}</span>
                    @else
                        <span class="text-gray-300">-</span>
                    @endif
                </td>
                <td class="px-2 py-2">
                    @if($q->exam)
                        @php
                            $titleParts = explode(' - ', $q->exam->title);
                            $examName = count($titleParts) >= 2 ? $titleParts[1] : $q->exam->examCategory?->name;
                            $nameParts = $examName ? explode('_', $examName, 2) : [];
                        @endphp
                        @if(count($nameParts) >= 2)
                            <span class="text-gray-500 dark:text-gray-400 block leading-tight truncate" title="{{ $nameParts[0] }}">{{ $nameParts[0] }}</span>
                            <span class="text-gray-800 dark:text-gray-200 font-medium block leading-tight truncate" title="{{ $nameParts[1] }}">{{ $nameParts[1] }}</span>
                        @elseif($examName)
                            <span class="text-gray-700 dark:text-gray-300 truncate block" title="{{ $examName }}">{{ Str::limit($examName, 18) }}</span>
                        @else
                            <span class="text-gray-300">-</span>
                        @endif
                    @else
                        <span class="text-gray-300">-</span>
                    @endif
                </td>
                <td class="px-2 py-2 whitespace-nowrap">
                    @if($q->subject)
                        <span class="px-1.5 py-0.5 rounded-full font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">{{ Str::limit($q->subject->name, 10) }}</span>
                    @else
                        <span class="text-gray-300">-</span>
                    @endif
                </td>
                <td class="px-2 py-2">
                    <a href="{{ route('admin.questions.show', $q) }}" class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 line-clamp-2 leading-snug">
                        @if($q->image_path)<svg class="w-3 h-3 inline text-blue-400 mr-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>@endif{{ Str::limit($q->question_text, 55) }}
                    </a>
                    @if($q->correct_answer)
                    <p class="text-green-600 dark:text-green-400 mt-0.5 truncate">答：{{ Str::limit($q->correct_answer, 20) }}</p>
                    @endif
                </td>
                <td class="px-2 py-2 text-center whitespace-nowrap"><span class="px-1.5 py-0.5 rounded-full font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $typeLabel($q->question_type) }}</span></td>
                <td class="px-2 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap truncate">{{ $q->creator->name ?? '-' }}</td>
                <td class="px-2 py-2 text-center">
                    @if($q->ai_explanation)
                        <span class="inline-block w-2 h-2 rounded-full bg-green-500" title="已有 AI 詳解"></span>
                    @else
                        <button onclick="generateAi({{ $q->id }}, this)" class="px-1.5 py-0.5 font-semibold text-purple-600 bg-purple-50 hover:bg-purple-100 dark:bg-purple-900/20 dark:hover:bg-purple-900/40 rounded transition-colors">產生</button>
                    @endif
                </td>
                <td class="px-2 py-2 text-center text-gray-400 dark:text-gray-500 whitespace-nowrap" title="{{ $q->updated_at }}">
                    {{ $q->updated_at->format('m/d H:i') }}
                </td>
                <td class="px-2 py-2 whitespace-nowrap">
                    <div class="flex gap-1 items-center">
                        <a href="{{ route('admin.questions.show', $q) }}" class="px-1.5 py-0.5 font-medium text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors">查看</a>
                        <a href="{{ route('admin.questions.edit', $q) }}" class="px-1.5 py-0.5 font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 rounded transition-colors">編輯</a>
                        <form action="{{ route('admin.questions.destroy', $q) }}" method="POST" onsubmit="return confirm('確定刪除此題？')">@csrf @method('DELETE')
                            <button class="px-1.5 py-0.5 font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">刪除</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="12" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
                @if($tab === 'public')
                    <svg class="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <p class="text-lg mb-1">公用題庫尚無題目</p>
                    <p class="text-sm">將私有題目設為公開，或在匯入時將考試設為公開</p>
                @else
                    <svg class="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    <p class="text-lg mb-1">私有題庫尚無題目</p>
                    <p class="text-sm">建立考試並新增題目，題目預設為私有</p>
                @endif
            </td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>

    {{-- Hidden forms for bulk actions --}}
    <form id="bulkMoveForm" method="POST" action="{{ route('admin.questions.bulk_move') }}" class="hidden">@csrf</form>
    <form id="bulkToggleForm" method="POST" action="{{ route('admin.questions.bulk_toggle_public') }}" class="hidden">@csrf</form>
    <form id="bulkDeleteForm" method="POST" action="{{ route('admin.questions.bulk_delete') }}" class="hidden">@csrf</form>
</div>

{{-- 下方分頁 --}}
<div class="mt-4">
    @include('components.pagination-bar', ['paginator' => $questions])
</div>

<script>
function bulkActions() {
    return {
        selected: [],
        targetSubjectId: '',
        bulkAiRunning: false,
        bulkAiStatus: '',

        toggleAll(event) {
            if (event.target.checked) {
                this.selected = @json($questions->pluck('id')->values());
            } else {
                this.selected = [];
            }
        },

        toggleOne(id) {
            const idx = this.selected.indexOf(id);
            if (idx === -1) this.selected.push(id);
            else this.selected.splice(idx, 1);
        },

        _injectIds(form) {
            form.querySelectorAll('.bulk-id').forEach(el => el.remove());
            this.selected.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden'; input.name = 'question_ids[]'; input.value = id;
                input.className = 'bulk-id';
                form.appendChild(input);
            });
        },

        submitMove() {
            if (!this.targetSubjectId) return;
            if (!confirm(`確定將 ${this.selected.length} 題歸類到選取的科目？`)) return;
            const form = document.getElementById('bulkMoveForm');
            this._injectIds(form);
            const input = document.createElement('input');
            input.type = 'hidden'; input.name = 'target_subject_id'; input.value = this.targetSubjectId;
            input.className = 'bulk-id';
            form.appendChild(input);
            form.submit();
        },

        submitTogglePublic(isPublic) {
            const label = isPublic ? '公開' : '私有';
            if (!confirm(`確定將 ${this.selected.length} 題設為${label}？`)) return;
            const form = document.getElementById('bulkToggleForm');
            this._injectIds(form);
            const input = document.createElement('input');
            input.type = 'hidden'; input.name = 'is_public'; input.value = isPublic ? '1' : '0';
            input.className = 'bulk-id';
            form.appendChild(input);
            form.submit();
        },

        submitDelete() {
            if (!confirm(`確定刪除 ${this.selected.length} 題？此操作無法復原！`)) return;
            const form = document.getElementById('bulkDeleteForm');
            this._injectIds(form);
            form.submit();
        },

        async submitBulkAI() {
            const count = this.selected.length;
            if (!confirm(`確定要為 ${count} 題產生 AI 詳解？\n（已有詳解的題目將自動跳過）`)) return;

            const force = confirm(`是否強制重新產生？\n\n「確定」= 全部重新產生（包含已有詳解）\n「取消」= 僅產生尚無詳解的題目`);

            this.bulkAiRunning = true;
            this.bulkAiStatus = `產生中...`;

            try {
                const res = await fetch('{{ route("admin.questions.bulk_generate_ai") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        question_ids: this.selected,
                        force: force,
                    }),
                });
                const data = await res.json();

                if (res.ok && data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message || 'AI 批量產生失敗');
                }
            } catch (e) {
                alert('AI 批量產生失敗：' + e.message);
            } finally {
                this.bulkAiRunning = false;
                this.bulkAiStatus = '';
            }
        }
    };
}

async function generateAi(questionId, btn) {
    btn.disabled = true;
    btn.textContent = '產生中...';
    btn.classList.add('opacity-50');

    try {
        const res = await fetch(`/admin/questions/${questionId}/regenerate-ai`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        });
        const data = await res.json();

        if (res.ok && data.success) {
            btn.outerHTML = '<span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500" title="已有 AI 詳解"></span>';
        } else {
            alert(data.message || 'AI 產生失敗');
            btn.disabled = false;
            btn.textContent = '產生';
            btn.classList.remove('opacity-50');
        }
    } catch (e) {
        alert('AI 產生失敗：' + e.message);
        btn.disabled = false;
        btn.textContent = '產生';
        btn.classList.remove('opacity-50');
    }
}
</script>
@endsection