@extends('layouts.portal')

@section('title', 'سؤال '.$index.' | گواهینو')

@section('content')
<section class="attempt-shell" data-question-start="{{ now()->getTimestampMs() }}">
    <header class="attempt-topbar">
        <div><small>{{ $attempt->exam->title }}</small><b>سؤال {{ $index }} از {{ $total }}</b></div>
        <div class="attempt-progress"><i style="width: {{ round(($index / $total) * 100) }}%"></i></div>
        @if ($remainingSeconds !== null)
            <div class="exam-timer" data-remaining="{{ $remainingSeconds }}"><small>زمان باقی‌مانده</small><b>--:--</b></div>
        @else
            <div class="answered-count"><small>پاسخ داده‌شده</small><b>{{ $answeredCount }} / {{ $total }}</b></div>
        @endif
    </header>

    <article class="question-card">
        <div class="question-meta">
            <span>{{ $question->category?->name ?? 'آیین‌نامه' }}</span>
            <span>درجه {{ $question->difficulty === 'hard' ? 'سخت' : ($question->difficulty === 'easy' ? 'آسان' : 'متوسط') }}</span>
        </div>
        @if ($question->media)
            <figure class="question-media"><img src="{{ Storage::disk($question->media->disk)->url($question->media->path) }}" alt="{{ $question->media->alt_text }}"></figure>
        @endif
        <h1>{{ $question->body }}</h1>

        <form class="choices-form" action="{{ route('attempts.answer', $attempt) }}" method="post">
            @csrf
            <input type="hidden" name="question_id" value="{{ $question->id }}">
            <input type="hidden" name="position" value="{{ $index }}">
            <input type="hidden" name="response_ms" value="0" data-response-ms>
            @foreach ($question->choices as $choice)
                @php
                    $choiceState = '';
                    if ($feedback && $choice->id === $feedback['correct_choice_id']) $choiceState = 'correct';
                    elseif ($feedback && $answer?->selected_choice_id === $choice->id) $choiceState = 'wrong';
                @endphp
                <label class="choice-option {{ $choiceState }}">
                    <input type="radio" name="choice_id" value="{{ $choice->id }}" {{ $answer?->selected_choice_id === $choice->id ? 'checked' : '' }} {{ $feedback ? 'disabled' : '' }} required>
                    <span class="choice-letter">{{ ['الف','ب','ج','د'][$loop->index] }}</span>
                    @if ($choice->media)
                        <img src="{{ Storage::disk($choice->media->disk)->url($choice->media->path) }}" alt="{{ $choice->media->alt_text }}">
                    @endif
                    <b>{{ $choice->body }}</b>
                </label>
            @endforeach
            @unless ($feedback)
                <button class="primary-button full" type="submit">ثبت پاسخ و ادامه</button>
            @endunless
        </form>

        @if ($feedback)
            <div class="answer-feedback {{ $feedback['correct'] ? 'correct' : 'wrong' }}">
                <b>{{ $feedback['correct'] ? 'آفرین، پاسخ درست بود.' : 'این پاسخ درست نبود.' }}</b>
                @if ($feedback['explanation'])<p>{{ $feedback['explanation'] }}</p>@endif
                @if ($feedback['memory_tip'])<small>نکتهٔ یادآوری: {{ $feedback['memory_tip'] }}</small>@endif
            </div>
            @if ($index < $total)
                <a class="primary-button full feedback-next" href="{{ route('attempts.show', [$attempt, 'q' => $index + 1]) }}">سؤال بعدی</a>
            @else
                <form action="{{ route('attempts.finish', $attempt) }}" method="post">@csrf<button class="primary-button full" type="submit">دیدن کارنامه</button></form>
            @endif
        @endif
    </article>
</section>
@endsection