@php
    $grading = true;
    // 提取15位paper_id数字部分作为学案编号
    $rawPaperId = $paper->paper_id ?? 'unknown';
    preg_match('/paper_(\d{15})/', $rawPaperId, $matches);
    $gradingCode = $matches[1] ?? preg_replace('/[^0-9]/', '', $rawPaperId);
@endphp
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ $paper->paper_name ?? '判卷预览' }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <style>
        @page {
            size: A4;
            margin: 2cm 2cm 2.5cm 2cm;
            @top-left {
                content: "知了数学";
                font-size: 10px;
                color: #666;
            }
            @top-right {
                content: "{{ $gradingCode }}";
                font-size: 10px;
                color: #666;
            }
            @bottom-left {
                content: "{{ $gradingCode }}";
                font-size: 10px;
                color: #666;
            }
            @bottom-right {
                content: counter(page) "/" counter(pages);
                font-size: 10px;
                color: #666;
            }
        }
        :root {
            --question-gap: 6px;
        }
        body {
            font-family: "SimSun", "Songti SC", serif;
            line-height: 1.65;
            color: #000;
            background: #fff;
            font-size: 14px;
        }
        .page {
            max-width: 720px;
            margin: 0 auto;
            padding: 0 12px;
        }
        .header { text-align: center; margin-bottom: 1.5rem; border-bottom: 2px solid #000; padding-bottom: 1rem; }
        /* 大题标题：不与后面内容分开 */
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-top: 16px;
            margin-bottom: 10px;
            page-break-after: avoid;
            break-after: avoid;
        }
        /* 题目整体：不分页 */
        .question {
            margin-bottom: 14px;
            page-break-inside: avoid;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
        }
        /* 题目网格：不分页 */
        .question-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 4px;
            row-gap: 6px;
            align-items: flex-start;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .question-lead {
            display: flex;
            gap: 4px;
            align-items: flex-start;
            font-weight: 600;
            font-size: 14px;
            line-height: 1.6;
            margin-top: 2px;
        }
        .question-lead.spacer { visibility: hidden; }
        .question-number { white-space: nowrap; margin-right: 2px; }
        .grading-boxes { gap: 4px; flex-wrap: wrap; align-items: center; }
        .grading-boxes span { vertical-align: middle; }
        /* 题目内容：防止孤行 */
        .question-main {
            font-size: 14px;
            line-height: 1.65;
            font-family: inherit;
            display: block;
            orphans: 3;
            widows: 3;
        }
        .question-score { margin-right: 6px; font-weight: 600; }
        .question-stem {
            display: inline-block;
            font-size: 14px;
            font-family: inherit;
            orphans: 3;
            widows: 3;
        }
        /* 选项容器：不分页 */
        .options {
            display: grid;
            row-gap: 8px;
            margin-top: 8px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .options-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px 12px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .options-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 20px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .options-grid-1 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        /* 单个选项：不分页 */
        .option {
            display: flex;
            align-items: flex-start;
            font-size: 14px;
            line-height: 1.6;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .option strong { margin-right: 4px; }
        .option-compact { font-size: 14px; line-height: 1.6; }
        /* 答案区域：不分页 */
        .answer-area {
            position: relative;
            margin-top: 4px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .answer-area.boxy {
            min-height: 150px;
            border: 1.5px solid #444;
            border-radius: 6px;
            padding: 14px;
        }
        .answer-label {
            position: absolute;
            top: -10px;
            left: 10px;
            font-size: 10px;
            background: #fff;
            padding: 0 4px;
            color: #555;
            letter-spacing: 1px;
        }
        /* 答案元信息：不分页 */
        .answer-meta {
            font-size: 12px;
            color: #2f2f2f;
            line-height: 1.75;
            margin-top: 4px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .answer-line + .answer-line { margin-top: 4px; }
        .solution-step {
            align-items: center;
            gap: 6px;
        }
        .step-box { display: inline-block; }
        .step-label { white-space: nowrap; }
        .solution-heading { font-weight: 700; }
        .solution-content { display: inline-block; line-height: 1.75; }
        /* 解析区域：不分页 */
        .solution-section {
            margin-top: 8px;
            padding: 6px 8px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .solution-section strong {
            font-size: 13px;
        }
        .solution-parsed {
            margin-top: 6px;
            line-height: 1.8;
        }
        svg, .math-render svg {
            max-width: 100%;
            height: auto;
            display: block;
            /* 确保SVG中的文字和图形元素正确对齐 */
            shape-rendering: geometricPrecision;
            text-rendering: geometricPrecision;
        }
        /* 优化SVG中文字标签的显示 */
        svg text {
            font-family: "SimSun", "Times New Roman", serif !important;
            font-size: 12px;
            font-weight: bold;
            dominant-baseline: middle;
            text-anchor: middle;
            alignment-baseline: central;
            /* 确保文字在点的正中央 */
            paint-order: stroke fill;
            stroke: none;
            fill: #000;
        }
        /* SVG中点标签的精确对齐 */
        svg text.label-point {
            font-size: 14px;
            font-weight: bold;
            dx: 0;
            dy: 0;
        }
        /* 确保SVG中的圆形和线条正确渲染 */
        svg circle, svg line, svg polygon, svg polyline {
            shape-rendering: geometricPrecision;
        }
    </style>
</head>
<body style="page-break-before: always;">
    <div class="page">
    <div class="header">
        <div style="font-size:22px;font-weight:bold;">判卷专用</div>
        <div style="font-size:18px;">{{ $gradingCode }}</div>
        <div style="display:flex;justify-content:space-between;font-size:14px;margin-top:8px;">
            <span>老师：{{ $teacher['name'] ?? '________' }}</span>
            <span>年级：@formatGrade($student['grade'] ?? '________')</span>
            <span>姓名：{{ $student['name'] ?? '________' }}</span>
            <span>得分：________</span>
        </div>
        <div style="font-size:13px;margin-top:10px;color:#333;text-align:left;">提示：请根据答案和解析进行批改，在回答正确的 □ 前划 / ，在回答错误的 □ 前打 X 或置空</div>
    </div>

    @include('components.exam.paper-body', ['questions' => $questions, 'grading' => true])
    </div>


    <!-- KaTeX -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            try {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: '$$', right: '$$', display: true},
                        {left: '$', right: '$', display: false},
                        {left: '\\(', right: '\\)', display: false},
                        {left: '\\[', right: '\\]', display: true}
                    ],
                    throwOnError: false,
                    strict: false,
                    trust: true
                });
            } catch(e) {}
        });
    </script>
</body>
</html>
