@extends('layouts.admin')
@section('title','Preview Question')
@section('page-title','Question Preview')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-9">

<div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{{ route('admin.questions.index') }}" class="btn btn-light btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Questions
    </a>
    <a href="{{ route('admin.questions.edit', $question) }}" class="btn btn-primary btn-sm">
        <i class="bi bi-pencil me-1"></i>Edit Question
    </a>
</div>

{{-- Meta info --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-body p-3">
        <div class="row g-2 text-center">
            <div class="col-6 col-md-3">
                <div class="small text-muted">Subject</div>
                <div class="fw-bold">{{ $question->subject->name }}</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="small text-muted">Topic</div>
                <div class="fw-bold">{{ $question->topic->name ?? '—' }}</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="small text-muted">Year</div>
                <div class="fw-bold">{{ $question->year ?? '—' }}</div>
            </div>
            <div class="col-6 col-md-3">
                <div class="small text-muted">Difficulty</div>
                @php $dc = ['easy'=>'success','medium'=>'warning','hard'=>'danger'][$question->difficulty] @endphp
                <span class="badge bg-{{ $dc }} text-{{ $question->difficulty=='medium'?'dark':'' }}">
                    {{ ucfirst($question->difficulty) }}
                </span>
            </div>
        </div>
    </div>
</div>

{{-- Comprehension Passage --}}
@if($question->instructionGroup)
<div class="card border-warning mb-3">
    <div class="card-header bg-warning bg-opacity-10 py-2">
        <small class="fw-bold text-warning-emphasis">
            <i class="bi bi-paragraph me-1"></i>Comprehension Passage
            @if($question->instructionGroup->title) — {{ $question->instructionGroup->title }} @endif
        </small>
    </div>
    <div class="card-body">
        {!! $question->instructionGroup->passage_text !!}
        @if($question->instructionGroup->passage_image)
            <img src="{{ asset('storage/' . $question->instructionGroup->passage_image) }}"
                 class="img-fluid mt-2 rounded" style="max-height:300px">
        @endif
    </div>
</div>
@endif

{{-- Question --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white border-bottom py-3">
        <span class="fw-bold text-primary">Question</span>
    </div>
    <div class="card-body">
        <div class="fs-6 mb-3">{!! $question->question_text !!}</div>
        @if($question->question_image)
            <img src="{{ asset('storage/' . $question->question_image) }}"
                 class="img-fluid rounded mb-3" style="max-height:250px">
        @endif

        {{-- Options --}}
        @foreach($question->options as $option)
        <div class="d-flex align-items-start gap-3 p-3 rounded mb-2
            {{ $option->is_correct ? 'bg-success bg-opacity-10 border border-success' : 'bg-light' }}">
            <span class="badge {{ $option->is_correct ? 'bg-success' : 'bg-secondary' }} mt-1" style="font-size:0.9rem; min-width:28px">
                {{ $option->option_label }}
            </span>
            <div class="flex-grow-1">
                {!! $option->option_text !!}
                @if($option->option_image)
                    <img src="{{ asset('storage/' . $option->option_image) }}"
                         class="img-fluid rounded mt-1" style="max-height:120px">
                @endif
            </div>
            @if($option->is_correct)
                <span class="badge bg-success"><i class="bi bi-check-lg"></i> Correct</span>
            @endif
        </div>
        @endforeach
    </div>
</div>

{{-- Explanation --}}
@if($question->explanation)
<div class="card border-info mb-3">
    <div class="card-header bg-info bg-opacity-10 py-2">
        <small class="fw-bold text-info"><i class="bi bi-lightbulb me-1"></i>Explanation / Solution</small>
    </div>
    <div class="card-body">{!! $question->explanation !!}</div>
</div>
@endif

</div>
</div>

{{-- MathJax for equations --}}
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
@endsection