@extends('admin.layout.app')

@section('body')
<div class="card shadow-sm">
    <div class="card-body">

        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
            <div>
                <h4 class="mb-1">{{ __('admin.question_details') }}</h4>
                <small class="text-muted">{{ __('admin.quiz') }}: {{ $quiz->title }}</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('quizzes.questions.edit', [$quiz->id, $question->id]) }}" class="btn btn-outline-primary btn-sm">
                    <i class="far fa-edit me-1"></i> {{ __('admin.edit') }}
                </a>
                <a href="{{ route('quizzes.questions.index', $quiz->id) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i> {{ __('admin.back') }}
                </a>
            </div>
        </div>

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

        <div class="border rounded p-3 mb-3">
            <div class="d-flex justify-content-between align-items-start gap-2">
                <div class="fw-semibold">{!! nl2br(e($question->question_text)) !!}</div>
                <div class="text-end">
                    <span class="badge bg-light text-dark border">{{ $question->points }} pt</span>
                    <div class="mt-1">
                        <span class="badge {{ $question->type==='mcq' ? 'bg-primary' : 'bg-warning text-dark' }}">
                            {{ strtoupper($question->type) }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="text-muted small mt-2">
                {{ __('admin.order_3') }} <b>{{ $question->sort_order }}</b>
            </div>

            @if($question->type === 'true_false')
                <div class="mt-2">
                    @if(is_null($question->correct_true_false))
                        <span class="badge bg-danger">{{ __('admin.no_correct_answer_set') }}</span>
                    @else
                        <span class="badge bg-success">
                            {{ __('admin.correct_2') }}: {{ $question->correct_true_false ? 'True' : 'False' }}
                        </span>
                    @endif
                </div>
            @endif

            @if($question->explanation)
                <div class="mt-3 text-muted">
                    <i class="fas fa-lightbulb me-1"></i>
                    {{ $question->explanation }}
                </div>
            @endif
        </div>

        @if($question->type === 'mcq')
            <h5 class="mb-2">{{ __('admin.options') }}</h5>
            <div class="d-grid gap-2">
                @forelse($question->options as $op)
                    <div class="border rounded p-2 d-flex justify-content-between align-items-center">
                        <div class="fw-semibold">{{ $op->option_text }}</div>
                        @if($op->is_correct)
                            <span class="badge bg-success">{{ __('admin.correct_3') }}</span>
                        @else
                            <span class="badge bg-light text-dark border">—</span>
                        @endif
                    </div>
                @empty
                    <div class="text-muted">{{ __('admin.no_options') }}</div>
                @endforelse
            </div>
        @endif

    </div>
</div>
@endsection