@extends('admin.layouts.app')

@section('title', 'Question Explanations')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="page-title fs-4 fw-bold mb-1">Question Explanations</h1>
        <p class="page-subtitle text-muted mb-0">Manage equations and mathematical explanations</p>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="row">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-white border-bottom py-3">
                <h5 class="mb-0 fw-bold">Add Explanation</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.questions.explanations.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Title (Optional)</label>
                        <input type="text" name="title" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold"> Explanation Content (LaTeX/HTML)</label>
                        <textarea class="form-control font-monospace" name="content" rows="12" placeholder="E.g. $=\sqrt{18225}+\sqrt{182.25}$<br><img src='...'>" required></textarea>
                        <small class="text-muted d-block mt-2">
                            Use <code>$...$</code> for inline equations or <code>$$...$$</code> for block equations.<br>
                            For images, you can insert <code>&lt;img src="data:image/jpeg;base64,..."&gt;</code> HTML tags directly!
                        </small>
                    </div>
                    <button class="btn btn-primary w-100 py-2"><i class="bi bi-save me-2"></i>Save Explanation</button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-white border-bottom py-3">
                <h5 class="mb-0 fw-bold">Saved Explanations Display preview</h5>
            </div>
            <div class="card-body">
                @forelse($explanations as $explanation)
                    <div class="border rounded p-4 mb-3 bg-white shadow-sm">
                        @if($explanation->title)
                            <h6 class="fw-bold text-primary mb-3">{{ $explanation->title }}</h6>
                        @endif
                        <div class="explanation-content" style="font-size: 1.15em; line-height: 1.6; overflow-x: auto;">
                            @php
                                $cleanContent = $explanation->content;
                                
                                // Process block math $$...$$
                                $cleanContent = preg_replace_callback('/\$\$([\s\S]+?)\$\$/', function($matches) {
                                    // Strip raw newlines and <br> tags within the math
                                    $math = preg_replace('/<br\s*\/?>|\n|\r/i', ' ', $matches[1]);
                                    return '$$' . $math . '$$';
                                }, $cleanContent);

                                // Process inline math $...$ and upgrade to display math $$ \displaystyle{...} $$
                                $cleanContent = preg_replace_callback('/\$([\s\S]+?)\$/', function($matches) {
                                    $math = preg_replace('/<br\s*\/?>|\n|\r/i', ' ', $matches[1]);
                                    return '$$\displaystyle{' . $math . '}$$';
                                }, $cleanContent);
                            @endphp
                            {!! $cleanContent !!}
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center py-5"><i class="bi bi-info-circle me-2"></i>No explanations saved yet. Try adding one on the left!</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- MathJax Initialization Scripts for LaTeX equations -->
<script>
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
        processEscapes: true
      },
      svg: {
        fontCache: 'global'
      }
    };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
    /* Ensure text line breaks are preserved outside equations */
    .explanation-content {
        white-space: pre-wrap; 
        word-wrap: break-word;
    }
</style>
@endsection