math_cms/resources/views/filament/pages/intelligent-exam-generation-simple.blade.php

<x-filament-panels::page>
    @push('styles')
        <style>
            .exam-card {
                transition: all 0.3s ease;
            }
            .exam-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            }
        </style>
    @endpush

    <div class="space-y-6">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">智能出卷系统</h2>
                <p class="mt-1 text-sm text-gray-500">
                    基于知识点掌握度，智能生成个性化试卷
                </p>
            </div>
            <div class="flex gap-3">
                <button
                    wire:click="resetForm"
                    type="button"
                    class="filament-button filament-button-size-sm filament-button-color-gray filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                >
                    重置
                </button>
            </div>
        </div>

        <!-- 基本信息卡片 -->
        <div class="bg-white p-6 rounded-lg border shadow-sm">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
            <div class="space-y-4">


                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">难度分类</label>
                        <select wire:model="difficultyCategory" class="form-select w-full px-3 py-2 border rounded-lg">
                            <option value="基础">基础</option>
                            <option value="进阶">进阶</option>
                            <option value="竞赛">竞赛</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">题目数量 <span class="text-red-500">*</span></label>
                        <input
                            type="number"
                            wire:model="totalQuestions"
                            class="form-input w-full px-3 py-2 border rounded-lg"
                            min="6"
                            max="100"
                            required
                        />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">总分</label>
                        <input
                            type="number"
                            wire:model="totalScore"
                            class="form-input w-full px-3 py-2 border rounded-lg"
                            min="0"
                            max="200"
                        />
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">试卷名称 <span class="text-gray-400 font-normal">(选填，未填则自动生成)</span></label>
                    <input
                        type="text"
                        wire:model="paperName"
                        class="form-input w-full px-3 py-2 border rounded-lg"
                        placeholder="例如：因式分解专项练习（基础版）"
                    />
                </div>
            </div>
        </div>

        <!-- 教师和学生选择 -->
        <div class="bg-white p-6 rounded-lg border shadow-sm">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">针对性出卷</h3>
            <div class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">选择教师</label>
                        <select
                            wire:model.live="selectedTeacherId"
                            class="form-select w-full px-3 py-2 border rounded-lg"
                            required
                        >
                            <option value="">-- 请选择教师 --</option>
                            @foreach($this->teachers() as $teacher)
                                <option value="{{ $teacher->teacher_id }}">
                                    {{ $teacher->name }} ({{ $teacher->subject ?? '未知' }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">选择学生</label>
                        <select
                            wire:model.live="selectedStudentId"
                            class="form-select w-full px-3 py-2 border rounded-lg"
                            @if(!$selectedTeacherId) disabled @endif
                            required
                        >
                            <option value="">-- 请先选择教师 --</option>
                            @foreach($this->students() as $student)
                                <option value="{{ $student->student_id }}">
                                    {{ $student->name ?? $student->student_id }} - {{ $student->grade }}{{ $student->class_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                @if($selectedTeacherId && $selectedStudentId)
                    <div class="p-4 bg-blue-50 rounded-lg">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div>
                                <div class="font-medium text-blue-900">针对性出卷已启用</div>
                                <div class="text-sm text-blue-700 mt-1">
                                    将根据所选学生的薄弱知识点进行智能推荐，建议自动勾选相关知识点
                                </div>
                                <label class="flex items-center gap-2 mt-3">
                                    <input
                                        type="checkbox"
                                        wire:model="filterByStudentWeakness"
                                        class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                    />
                                    <span class="text-sm text-blue-700">根据学生薄弱点自动选择知识点</span>
                                </label>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- 知识点选择 -->
        <div class="bg-white p-6 rounded-lg border shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">知识点选择</h3>
                <div class="text-sm text-gray-500">
                    已选择: {{ count($selectedKpCodes) }} 个
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto">
                @foreach($this->knowledgePoints as $kp)
                    <label class="flex items-start gap-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input
                            type="checkbox"
                            wire:model="selectedKpCodes"
                            value="{{ $kp['kp_code'] }}"
                            class="mt-1"
                        />
                        <div class="flex-1">
                            <div class="font-medium text-gray-900">{{ $kp['cn_name'] ?? $kp['kp_code'] }}</div>
                            @if(!empty($kp['description']))
                                <div class="text-sm text-gray-500 mt-1">{{ Str::limit($kp['description'], 80) }}</div>
                            @endif
                            <div class="flex items-center gap-2 mt-2">
                                <span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
                                    {{ $kp['kp_code'] }}
                                </span>
                            </div>
                        </div>
                    </label>
                @endforeach
            </div>
        </div>

        <!-- 生成按钮 -->
        <div class="bg-white p-6 rounded-lg border shadow-sm">
            <button
                wire:click="generateExam"
                type="button"
                class="filament-button filament-button-size-lg filament-button-color-primary filament-button-icon-start inline-flex items-center justify-center w-full px-6 py-3 text-base font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                wire:loading.attr="disabled"
            >
                @if($isGenerating)
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    生成中...
                @else
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    智能生成试卷
                @endif
            </button>

            @if($generatedPaperId)
                <div class="mt-4 p-4 bg-green-50 rounded-lg">
                    <div class="flex items-center gap-2 text-green-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <div class="font-medium">生成成功</div>
                    </div>
                    <div class="mt-2 text-sm text-green-700">
                        已生成试卷ID: <span class="font-mono">{{ $generatedPaperId }}</span>
                    </div>
                    <div class="mt-4 flex gap-2">
                        <button 
                            onclick="document.getElementById('pdfPreview').scrollIntoView({behavior: 'smooth'})" 
                            type="button" 
                            class="filament-button filament-button-size-md filament-button-color-secondary">
                            查看预览
                        </button>
                        <button wire:click="exportToPdf" type="button" class="filament-button filament-button-size-md filament-button-color-primary">
                            新窗口打开
                        </button>
                    </div>
                </div>

                <!-- PDF 预览区域 -->
                <div id="pdfPreview" class="mt-6 bg-white rounded-lg border shadow-sm">
                    <div class="p-4 border-b bg-gray-50 flex justify-between items-center">
                        <h3 class="text-lg font-semibold">试卷预览</h3>
                        <button 
                            onclick="document.getElementById('pdfFrame').contentWindow.print()" 
                            class="filament-button filament-button-size-sm filament-button-color-primary">
                            打印试卷
                        </button>
                    </div>
                    <div class="p-4">
                        <iframe 
                            id="pdfFrame"
                            src="{{ route('filament.admin.auth.intelligent-exam.pdf', ['paper_id' => $generatedPaperId]) }}" 
                            class="w-full border-0" 
                            style="height: 1200px;"
                            title="试卷预览">
                        </iframe>
                    </div>
                </div>
            @endif
        </div>
    </div>
</x-filament-panels::page>