@extends('layouts.app')
@section('title', '產生考卷 - ' . $exam->title)
@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">產生考卷</h1>
    <p class="text-gray-600 dark:text-gray-400 mb-8">選擇要產生的考卷類型，下載 Word 檔案</p>

    <!-- 考試資訊 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ $exam->title }}</h2>
        <div class="flex flex-wrap gap-2 mb-4">
            @if($exam->subject)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $exam->subject->name }}</span>@endif
            @if($exam->examCategory)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400">{{ $exam->examCategory->name }}</span>@endif
            @if($exam->year)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">{{ $exam->year }} 年</span>@endif
        </div>
        <div class="grid grid-cols-3 gap-4 text-center">
            <div class="p-3 bg-gray-50 dark:bg-slate-800 rounded-lg">
                <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $exam->questions->count() }}</p>
                <p class="text-xs text-gray-500">題目數</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-slate-800 rounded-lg">
                <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $exam->questions->sum('points') ?: $exam->questions->count() }}</p>
                <p class="text-xs text-gray-500">總分</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-slate-800 rounded-lg">
                @php $aiCount = $exam->questions->whereNotNull('ai_explanation')->count(); @endphp
                <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $aiCount }}/{{ $exam->questions->count() }}</p>
                <p class="text-xs text-gray-500">已有 AI 詳解</p>
            </div>
        </div>
    </div>

    <!-- 下載選項 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- 考卷版（無解答） -->
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 hover:shadow-xl transition-shadow">
            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">考卷（無解答）</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">純考卷，只有題目與選項，適合列印給學生作答。包含姓名欄、座號欄、答案欄。</p>
            <ul class="text-xs text-gray-500 dark:text-gray-400 space-y-1 mb-5">
                <li>- 題目文字與選項</li>
                <li>- 簡答題留作答空白行</li>
                <li>- 底部附答案填寫格</li>
                <li>- 不含正確答案與解析</li>
            </ul>
            <a href="{{ route('exam-paper.download-exam', $exam) }}" class="block w-full text-center py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                下載 Word 考卷
            </a>
        </div>

        <!-- 含詳解版 -->
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 hover:shadow-xl transition-shadow">
            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">含詳解版</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">完整的解題手冊，每題附正確答案與 AI 詳解，適合學生自習或老師批改參考。</p>
            <ul class="text-xs text-gray-500 dark:text-gray-400 space-y-1 mb-5">
                <li>- 題目文字與選項</li>
                <li>- 正確答案標示（綠色）</li>
                <li>- AI 詳細解析</li>
                <li>- 解題思路與知識點</li>
            </ul>
            <a href="{{ route('exam-paper.download-answers', $exam) }}" class="block w-full text-center py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                下載 Word 含詳解
            </a>
        </div>
    </div>

    <!-- PDF 下載選項 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 hover:shadow-xl transition-shadow">
            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">PDF 考卷（無解答）</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">在瀏覽器中開啟列印友好頁面，可直接儲存為 PDF。數學公式完美渲染。</p>
            <ul class="text-xs text-gray-500 dark:text-gray-400 space-y-1 mb-5">
                <li>- 數學公式正確顯示</li>
                <li>- Markdown 表格完美呈現</li>
                <li>- 列印友好排版</li>
                <li>- 純考卷，不含解答</li>
            </ul>
            <div class="flex gap-2">
                <a href="{{ route('exam-paper.pdf-preview-exam', $exam) }}" target="_blank" class="flex-1 text-center py-3 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    預覽
                </a>
                <a href="{{ route('exam-paper.download-pdf-exam', $exam) }}" class="flex-1 text-center py-3 bg-cyan-700 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    下載 PDF
                </a>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 hover:shadow-xl transition-shadow">
            <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-purple-600 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">PDF 含詳解版</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">完整詳解含數學公式渲染，觀念比較表格清晰呈現，儲存 PDF 最佳選擇。</p>
            <ul class="text-xs text-gray-500 dark:text-gray-400 space-y-1 mb-5">
                <li>- 數學公式正確顯示</li>
                <li>- 觀念比較表格完整</li>
                <li>- AI 詳解 Markdown 渲染</li>
                <li>- 適合自習與複習</li>
            </ul>
            <div class="flex gap-2">
                <a href="{{ route('exam-paper.pdf-preview', $exam) }}" target="_blank" class="flex-1 text-center py-3 bg-gradient-to-r from-rose-600 to-purple-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    預覽
                </a>
                <a href="{{ route('exam-paper.download-pdf', $exam) }}" class="flex-1 text-center py-3 bg-purple-700 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    下載 PDF
                </a>
            </div>
        </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="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">題目預覽</h3>
        </div>
        @foreach($exam->questions as $index => $question)
        <div class="p-5 border-b border-gray-100 dark:border-slate-800">
            <div class="flex items-baseline gap-2 mb-2">
                <span class="font-bold text-gray-900 dark:text-white">{{ $index + 1 }}.</span>
                <span class="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                    {{ match($question->question_type) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' } }}
                </span>
                <span class="text-xs text-gray-400">{{ $question->points ?? 1 }}分</span>
                @if($question->ai_explanation)
                <span class="px-1.5 py-0.5 text-xs rounded bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400">AI</span>
                @endif
            </div>
            <p class="text-gray-800 dark:text-gray-200 ml-5">{{ Str::limit($question->question_text, 120) }}</p>
            @if($question->options)
            <div class="ml-5 mt-1 text-sm text-gray-600 dark:text-gray-400">
                @foreach($question->options as $key => $opt)
                <span class="mr-3">({{ $key }}) {{ Str::limit($opt, 20) }}</span>
                @endforeach
            </div>
            @endif
        </div>
        @endforeach
    </div>

    <div class="flex gap-3 mt-6">
        <a href="{{ route('exams.show', $exam) }}" class="px-5 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">返回考試管理</a>
    </div>
</div>
@endsection