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

    @push('scripts')
        <script>
            // 监听window事件，确保组件间通信正常
            document.addEventListener('DOMContentLoaded', function() {
                // 监听学生选择变化
                Livewire.on('window-student-changed', (data) => {
                    console.log('Window学生变更事件:', data);
                });

                // 监听教师选择变化
                Livewire.on('window-teacher-changed', (data) => {
                    console.log('Window教师变更事件:', data);
                });
            });
        </script>
    @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-6">
                <!-- 直接在父组件中显示教师和学生选择，避免组件间通信问题 -->
                <div class="grid 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="w-full px-3 py-2 border rounded-lg"
                        >
                            <option value="">-- 请选择教师 --</option>
                            @foreach($this->teachers as $teacher)
                                <option value="{{ $teacher->teacher_id }}">
                                    {{ trim($teacher->name ?? $teacher->teacher_id) . ($teacher->subject ? " ({$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="w-full px-3 py-2 border rounded-lg"
                            @if(empty($selectedTeacherId)) disabled @endif
                        >
                            <option value="">
                                @if(empty($selectedTeacherId))
                                    请先选择教师
                                @else
                                    -- 请选择学生 --
                                @endif
                            </option>
                            @foreach($this->students as $student)
                                <option value="{{ $student->student_id }}" @if(request('student_id') == $student->student_id) selected @endif>
                                    {{ trim($student->name ?? $student->student_id) . " ({$student->grade} - {$student->class_name})" }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- 原有的组件暂时保留但不显示，用于调试 -->
                <div style="display:none;">
                    <livewire:teacher-student-selector
                        :initial-teacher-id="$selectedTeacherId"
                        :initial-student-id="$selectedStudentId"
                    />
                </div>

                <!-- 显示当前选择状态 -->
                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <div class="text-xs font-medium text-gray-500 mb-1">当前选择的教师</div>
                            <div class="text-sm bg-white px-3 py-2 rounded border">
                                {{ $this->getSelectedTeacherName() }}
                            </div>
                        </div>
                        <div>
                            <div class="text-xs font-medium text-gray-500 mb-1">当前选择的学生</div>
                            <div class="text-sm bg-white px-3 py-2 rounded border">
                                {{ $this->getSelectedStudentName() }}
                            </div>
                        </div>
                    </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.live="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>

        <!-- 学生薄弱知识点展示区域 -->
        @if($selectedStudentId && $filterByStudentWeakness && count($this->studentWeaknesses) > 0)
            <div class="bg-white p-6 rounded-lg border shadow-sm">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    学生薄弱知识点
                    <span class="text-sm font-normal text-gray-500">(共{{ count($this->studentWeaknesses) }}个)</span>
                </h3>
                <div class="bg-orange-50 border-l-4 border-orange-400 p-4 mb-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-orange-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-orange-700">
                                以下是根据该学生的答题数据自动分析出的薄弱知识点（共{{ count($this->studentWeaknesses) }}个）。
                                <strong>请手动勾选</strong>您希望该学生练习的知识点，或点击下方按钮进行批量操作。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3">
                    @foreach($this->studentWeaknesses as $weakness)
                        @php
                            $isSelected = in_array($weakness['kp_code'], $selectedKpCodes);
                            $masteryPercent = round(($weakness['mastery'] ?? 0) * 100, 1);
                            $weaknessLevel = $weakness['weakness_level'] ?? (1 - ($weakness['mastery'] ?? 0));
                            $priority = $weakness['priority'] ?? '中';
                            $priorityColor = $priority === '高' ? 'bg-red-100 text-red-800 border-red-200' : ($priority === '中' ? 'bg-yellow-100 text-yellow-800 border-yellow-200' : 'bg-green-100 text-green-800 border-green-200');
                        @endphp
                        <div class="border rounded-lg p-4 {{ $isSelected ? 'bg-blue-50 border-blue-300' : 'bg-white' }}">
                            <div class="flex items-start justify-between">
                                <div class="flex items-start gap-3 flex-1">
                                    <div class="mt-1">
                                        @if($isSelected)
                                            <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                            </svg>
                                        @else
                                            <input
                                                type="checkbox"
                                                wire:model="selectedKpCodes"
                                                value="{{ $weakness['kp_code'] }}"
                                                class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                            />
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">
                                            {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
                                            <span class="ml-2 text-xs text-gray-500">({{ $weakness['kp_code'] }})</span>
                                        </div>
                                        <div class="mt-2 flex items-center gap-4 text-sm">
                                            <div class="flex items-center gap-1">
                                                <span class="text-gray-600">掌握度:</span>
                                                <span class="font-semibold {{ $masteryPercent < 50 ? 'text-red-600' : ($masteryPercent < 70 ? 'text-yellow-600' : 'text-green-600') }}">
                                                    {{ $masteryPercent }}%
                                                </span>
                                            </div>
                                            <div class="flex items-center gap-1">
                                                <span class="text-gray-600">练习次数:</span>
                                                <span class="text-gray-900">{{ $weakness['practice_count'] ?? 0 }}</span>
                                            </div>
                                            <div class="flex items-center gap-1">
                                                <span class="text-gray-600">成功率:</span>
                                                <span class="text-gray-900">{{ round(($weakness['success_rate'] ?? 0) * 100, 1) }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded border {{ $priorityColor }}">
                                    优先级: {{ $priority }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-4 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <button
                            wire:click="selectAllWeaknesses"
                            type="button"
                            class="px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
                        >
                            全选薄弱知识点 ({{ count($this->studentWeaknesses) }})
                        </button>
                        <button
                            wire:click="clearSelection"
                            type="button"
                            class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
                        >
                            清空选择
                        </button>
                    </div>
                    <div class="text-sm text-gray-600">
                        已选择 <span class="font-semibold">{{ count($selectedKpCodes) }}</span> 个知识点
                    </div>
                </div>
            </div>
        @endif

        <!-- 知识点选择 -->
        <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>

        <!-- 生成按钮 -->
        @php
            $hasTeacherStudent = !empty($selectedTeacherId) && !empty($selectedStudentId);
            $hasKnowledgePoints = count($selectedKpCodes) > 0;
            $questionCountValid = $totalQuestions >= 6;
            $readyToGenerate = $this->canGenerate();
            $missingSteps = [];
            if (!$hasTeacherStudent) { $missingSteps[] = '选择教师与学生'; }
            if (!$hasKnowledgePoints) { $missingSteps[] = '勾选至少 1 个知识点'; }
            if (!$questionCountValid) { $missingSteps[] = '题目数量需 ≥ 6 题'; }
        @endphp
        <div class="bg-white p-6 rounded-lg border shadow-sm space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    出卷前检查
                </h3>
                <span class="inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold rounded-full {{ $readyToGenerate ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800' }}">
                    <span class="h-2 w-2 rounded-full {{ $readyToGenerate ? 'bg-green-500' : 'bg-amber-500' }}"></span>
                    {{ $readyToGenerate ? '可以生成' : '待完善' }}
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <div class="p-3 rounded-lg border {{ $hasTeacherStudent ? 'border-green-200 bg-green-50' : 'border-amber-200 bg-amber-50' }}">
                    <div class="flex items-center gap-2 text-sm font-medium {{ $hasTeacherStudent ? 'text-green-800' : 'text-amber-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="{{ $hasTeacherStudent ? 'M5 13l4 4L19 7' : 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }}" />
                        </svg>
                        教师 / 学生
                    </div>
                    <p class="mt-1 text-xs text-gray-700">
                        {{ $hasTeacherStudent ? '已选择：' . $this->getSelectedTeacherName() . ' / ' . $this->getSelectedStudentName() : '请选择教师并选择其学生后出卷' }}
                    </p>
                </div>

                <div class="p-3 rounded-lg border {{ $hasKnowledgePoints ? 'border-green-200 bg-green-50' : 'border-amber-200 bg-amber-50' }}">
                    <div class="flex items-center gap-2 text-sm font-medium {{ $hasKnowledgePoints ? 'text-green-800' : 'text-amber-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="{{ $hasKnowledgePoints ? 'M5 13l4 4L19 7' : 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }}" />
                        </svg>
                        知识点选择
                    </div>
                    <p class="mt-1 text-xs text-gray-700">
                        {{ $hasKnowledgePoints ? '已选 ' . count($selectedKpCodes) . ' 个知识点' : '请勾选学生薄弱点或手动选择知识点' }}
                    </p>
                </div>

                <div class="p-3 rounded-lg border {{ $questionCountValid ? 'border-green-200 bg-green-50' : 'border-amber-200 bg-amber-50' }}">
                    <div class="flex items-center gap-2 text-sm font-medium {{ $questionCountValid ? 'text-green-800' : 'text-amber-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="{{ $questionCountValid ? 'M5 13l4 4L19 7' : 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }}" />
                        </svg>
                        题目数量
                    </div>
                    <p class="mt-1 text-xs text-gray-700">
                        {{ $questionCountValid ? '将生成 ' . $totalQuestions . ' 题' : '题目数量需不少于 6 题' }}
                    </p>
                </div>
            </div>

            @unless($readyToGenerate)
                <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                    完成以下步骤后再点击生成：{{ implode(' / ', $missingSteps) ?: '所有条件已满足' }}
                </div>
            @endunless

            <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(!$readyToGenerate) disabled @endif
                aria-disabled="{{ $readyToGenerate ? 'false' : 'true' }}"
                title="{{ $readyToGenerate ? '根据当前选择生成试卷' : '请先完成必选项再生成' }}"
            >
                @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>