math_cms/resources/views/filament/pages/ocr-paper-grading.blade.php

<x-filament-panels::page>
    @push('styles')
        <style>
            .status-pending { color: #6b7280; }
            .status-processing { color: #3b82f6; }
            .status-completed { color: #10b981; }
            .status-failed { color: #ef4444; }
        </style>
    @endpush

    <div class="space-y-6">
        <!-- 上传区域 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-12 h-12 {{ $useChatGPT ? 'bg-purple-100' : 'bg-blue-100' }} rounded-xl flex items-center justify-center">
                    @if($useChatGPT)
                        <x-heroicon-o-sparkles class="w-6 h-6 text-purple-600" />
                    @else
                        <x-heroicon-o-document-plus class="w-6 h-6 text-blue-600" />
                    @endif
                </div>
                <div>
                    <h2 class="text-xl font-bold text-gray-900">
                        上传试卷进行{{ $useChatGPT ? 'ChatGPT智能识别' : 'OCR识别' }}
                    </h2>
                    <p class="text-sm text-gray-500">
                        @if($useChatGPT)
                            支持JPG、PNG格式图片，ChatGPT将直接识别学生答案
                        @else
                            支持JPG、PNG格式图片
                        @endif
                    </p>
                </div>
            </div>

            <div class="space-y-4">
                {{-- 选择老师和学生 --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- 选择老师 --}}
                    <div class="form-control w-full">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            选择老师 <span class="text-red-500">*</span>
                            @if($isTeacher ?? false)
                                <span class="text-green-600 text-xs ml-2">(当前登录)</span>
                            @endif
                        </label>
                        <select
                            wire:model.live="teacherId"
                            @if($isTeacher ?? false) disabled @endif
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isTeacher ?? false) bg-gray-100 @endif"
                        >
                            <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 class="form-control w-full">
                        <label class="block text-sm font-medium text-gray-700 mb-2">选择学生 <span class="text-red-500">*</span></label>
                        <select
                            wire:model.live="studentId"
                            wire:loading.attr="disabled"
                            @if(empty($teacherId)) disabled @endif
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if(empty($teacherId)) bg-gray-100 @endif"
                        >
                            <option value="">
                                @if(empty($teacherId))
                                    请先选择老师
                                @else
                                    请选择学生...
                                @endif
                            </option>
                            @foreach($this->students as $student)
                                <option value="{{ $student->student_id }}">
                                    {{ trim($student->name ?? $student->student_id) . " ({$student->grade} - {$student->class_name})" }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- 选择试卷 --}}
                @if(!empty($studentId))
                    <div class="form-control w-full">
                        <label class="block text-sm font-medium text-gray-700 mb-2">选择试卷 <span class="text-red-500">*</span></label>
                        <select
                            wire:model.live="selectedPaperId"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                            <option value="">请选择试卷...</option>
                            @foreach($this->studentPapers as $paper)
                                <option value="{{ $paper['paper_id'] }}">
                                    {{ $paper['paper_name'] }} ({{ $paper['total_questions'] }}题 / {{ $paper['total_score'] }}分) - {{ $paper['created_at'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                {{-- 显示选中的试卷题目 --}}
                @if(!empty($selectedPaperId) && count($this->selectedPaperQuestions) > 0)
                    <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                        <h3 class="text-sm font-medium text-blue-900 mb-2">选中的试卷题目（共{{ count($this->selectedPaperQuestions) }}题）</h3>
                        <div class="space-y-2 max-h-40 overflow-y-auto">
                            @foreach($this->selectedPaperQuestions as $index => $question)
                                <div class="text-xs text-blue-800">
                                    <span class="font-medium">第{{ $question['question_number'] ?? ($index + 1) }}题:</span>
                                    {{ Str::limit(strip_tags($question['content'] ?? $question['stem'] ?? ''), 80) }}
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- 识别模式选择 --}}
                @if(!empty($selectedPaperId))
                    <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                        <h3 class="text-sm font-medium text-gray-900 mb-3">选择识别方式</h3>
                        <div class="flex gap-4">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input
                                    type="radio"
                                    wire:model.live="useChatGPT"
                                    value="0"
                                    class="w-4 h-4 text-blue-600"
                                />
                                <span class="text-sm text-gray-700">OCR识别 + AI判分（传统方式）</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input
                                    type="radio"
                                    wire:model.live="useChatGPT"
                                    value="1"
                                    class="w-4 h-4 text-blue-600"
                                />
                                <span class="text-sm text-gray-700">ChatGPT智能识别（无需OCR）</span>
                            </label>
                        </div>
                    </div>
                @endif

                {{-- 上传组件 - 复用同一个UploadForm --}}
                @if(!empty($selectedPaperId))
                    @livewire(\App\Livewire\UploadExam\UploadForm::class, [
                        'teacherId' => $teacherId,
                        'studentId' => $studentId,
                        'selectedPaperId' => $selectedPaperId,
                        'mode' => $useChatGPT ? 'chatgpt' : 'ocr'
                    ], key('upload-form-' . $selectedPaperId . '-' . $useChatGPT))
                @endif
            </div>
        </div>

        <!-- 当前处理状态 -->
        @if($selectedRecord)
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                        <x-heroicon-o-clock class="w-6 h-6 text-yellow-600" />
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">处理进度</h2>
                        <p class="text-sm text-gray-500">{{ $selectedRecord->paper_title }}</p>
                    </div>
                </div>

                <div class="space-y-4">
                    <!-- 处理步骤指示器 -->
                    <div class="flex justify-between items-center">
                        <div class="flex items-center gap-4">
                            <div class="flex flex-col items-center">
                                <div class="w-10 h-10 rounded-full {{ $selectedRecord->status === 'pending' ? 'bg-blue-600' : 'bg-green-500' }} flex items-center justify-center">
                                    <x-heroicon-o-check class="w-5 h-5 text-white" />
                                </div>
                                <span class="text-xs mt-1">上传</span>
                            </div>

                            <div class="flex flex-col items-center">
                                <div class="w-10 h-10 rounded-full {{ $selectedRecord->status === 'processing' ? 'bg-blue-600 animate-pulse' : ($selectedRecord->status === 'completed' ? 'bg-green-500' : 'bg-gray-200') }} flex items-center justify-center">
                                    <x-heroicon-o-cpu-chip class="w-5 h-5 {{ in_array($selectedRecord->status, ['processing', 'completed']) ? 'text-white' : 'text-gray-600' }}" />
                                </div>
                                <span class="text-xs mt-1">OCR识别</span>
                            </div>

                            <div class="flex flex-col items-center">
                                <div class="w-10 h-10 rounded-full {{ $selectedRecord->status === 'completed' ? 'bg-green-500' : 'bg-gray-200' }} flex items-center justify-center">
                                    <x-heroicon-o-academic-cap class="w-5 h-5 {{ $selectedRecord->status === 'completed' ? 'text-white' : 'text-gray-600' }}" />
                                </div>
                                <span class="text-xs mt-1">AI判分</span>
                            </div>
                        </div>

                        <div class="text-right">
                            <span class="text-sm text-gray-500">状态：</span>
                            <span class="font-semibold status-{{ $selectedRecord->status }}">
                                @switch($selectedRecord->status)
                                    @case('pending') 待处理 @break
                                    @case('processing') 处理中 @break
                                    @case('completed') 已完成 @break
                                    @case('failed') 失败 @break
                                    @default 未知
                                @endswitch
                            </span>
                        </div>
                    </div>

                    <!-- 处理结果 -->
                    @if($selectedRecord->status === 'completed' && $selectedRecord->questions->count() > 0)
                        <div class="mt-6 border-t pt-6">
                            <h3 class="font-semibold text-gray-900 mb-4">识别结果预览</h3>
                            <div class="space-y-3">
                                @foreach($selectedRecord->questions->take(5) as $question)
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded">
                                        <div>
                                            <span class="font-medium">第{{ $question->question_number }}题</span>
                                            <span class="text-sm text-gray-600 ml-2">{{ $question->question_type }}</span>
                                        </div>
                                        <div class="text-sm">
                                            <span class="text-gray-600">答案：</span>
                                            <span class="font-medium">{{ $question->student_answer }}</span>
                                        </div>
                                    </div>
                                @endforeach
                                @if($selectedRecord->questions->count() > 5)
                                    <p class="text-sm text-gray-500 text-center">...还有 {{ $selectedRecord->questions->count() - 5 }} 道题</p>
                                @endif
                            </div>
                        </div>

                        <div class="flex justify-end gap-3 mt-6">
                            <button
                                wire:click="regrade({{ $selectedRecord->id }})"
                                class="px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50"
                            >
                                重新判分
                            </button>
                            <a
                                href="/admin/ocr-analysis-view/{{ $selectedRecord->id }}"
                                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
                            >
                                查看详细分析
                            </a>
                        </div>
                    @endif

                    @if($selectedRecord->status === 'failed')
                        <div class="mt-4 p-4 bg-red-50 rounded-lg">
                            <p class="text-red-800 text-sm">{{ $selectedRecord->error_message ?? '处理失败，请重试' }}</p>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        <!-- 最近记录 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-900 mb-6">最近处理记录</h2>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">试卷标题</th>
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">学生ID</th>
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">题数</th>
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">状态</th>
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">提交时间</th>
                            <th class="text-left py-3 text-sm font-semibold text-gray-600">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($this->getRecentRecords() as $record)
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 text-sm text-gray-900">{{ $record->paper_title }}</td>
                                <td class="py-3 text-sm text-gray-600">{{ $record->user_id }}</td>
                                <td class="py-3 text-sm text-gray-600">{{ $record->questions->count() }}</td>
                                <td class="py-3 text-sm">
                                    <span class="px-2 py-1 rounded-full text-xs status-{{ $record->status }}">
                                        @switch($record->status)
                                            @case('pending') 待处理 @break
                                            @case('processing') 处理中 @break
                                            @case('completed') 已完成 @break
                                            @case('failed') 失败 @break
                                            @default 未知
                                        @endswitch
                                    </span>
                                </td>
                                <td class="py-3 text-sm text-gray-600">{{ $record->created_at->diffForHumans() }}</td>
                                <td class="py-3">
                                    <button
                                        wire:click="viewRecord({{ $record->id }})"
                                        class="text-sm text-blue-600 hover:text-blue-700"
                                    >
                                        查看
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-filament-panels::page>