{{-- Read-only solution display for the QuestionResource form/view page.
     Resolves [[model:path]] -> <img src="/media/path"> (same route as question
     images), keeps <br> line breaks, and renders $$..$$ / \(..\) fractions with
     KaTeX (the Filament panel has no math renderer of its own). Rendered via a
     Blade View component (not a Placeholder closure) so Filament component
     caching can't break it. --}}
@php
    $record = $getRecord();
    $sols = $record
        ? \App\Models\Solution::where('question_id', $record->id)->orderByDesc('id')->get()
        : collect();
@endphp

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

@if ($sols->isEmpty())
    <em style="color:#6b7280">No solution saved for this question.</em>
@else
    @foreach ($sols as $s)
        @php
            $body = e((string) $s->solution);
            $body = str_replace('&lt;br&gt;', '<br>', $body);
            $body = preg_replace_callback('/\[\[model:([^\]]+)\]\]/', function ($m) {
                return '<img src="' . url('/media/' . ltrim(trim($m[1]), '/')) . '?t=' . time() . '" alt="bar model" style="max-width:100%;border:1px solid #e5e7eb;border-radius:8px;margin:8px 0">';
            }, $body);
        @endphp
        <div class="qr-sol" style="padding:10px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;line-height:1.6">{!! $body !!}</div>
    @endforeach
@endif

<script>
(function () {
    function doRender() {
        if (!window.renderMathInElement) return;
        document.querySelectorAll('.qr-sol').forEach(function (el) {
            if (el.dataset.katexDone) return;
            try {
                window.renderMathInElement(el, {
                    delimiters: [
                        { left: '$$', right: '$$', display: false },
                        { left: '\\(', right: '\\)', display: false }
                    ],
                    throwOnError: false
                });
                el.dataset.katexDone = '1';
            } catch (e) {}
        });
    }
    function loadScript(src, cb) {
        var s = document.createElement('script');
        s.src = src; s.onload = cb; document.head.appendChild(s);
    }
    function ensure() {
        if (window.renderMathInElement) { doRender(); return; }
        if (window.__qrKatexLoading) { setTimeout(ensure, 300); return; }
        window.__qrKatexLoading = true;
        loadScript('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js', function () {
            loadScript('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js', doRender);
        });
    }
    ensure();
    document.addEventListener('livewire:navigated', function () { setTimeout(ensure, 100); });
})();
</script>