@extends('layouts.app')

@section('content')
    <h1 class="mb-2 text-3xl font-bold tracking-tight text-white">{{ $quiz->title }}</h1>
    <p class="mb-6 text-sm text-slate-300">Mode: {{ ucfirst($quiz->mode) }}</p>

    @if(isset($score, $total))
        <section class="app-card mb-6 p-4">
            <h2 class="text-lg font-semibold text-white">Result</h2>
            <p class="mt-2 text-sm text-slate-200">You scored <span class="font-semibold text-blue-200">{{ $score }}</span> out of <span class="font-semibold text-blue-200">{{ $total }}</span>.</p>
            <a href="{{ route('quizzes.show', $quiz->id) }}" class="mt-3 inline-block text-sm text-blue-300 hover:text-blue-200">Reset quiz</a>
        </section>
    @endif

    <form method="post" action="{{ route('quizzes.submit', $quiz->id) }}" class="space-y-4">
        @csrf
        <label class="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-white/5 px-3 py-2 text-sm text-slate-200">
            <input type="checkbox" name="show_answers" value="1" class="rounded border-slate-300"
                @checked(($showAnswers ?? false) === true)>
            <span>Show correct answers after submit</span>
        </label>
        @foreach($quiz->questions as $index => $question)
            <fieldset class="app-card p-4">
                <legend class="font-semibold text-white">Q{{ $index + 1 }}. {{ $question->prompt }}</legend>
                <div class="mt-3 space-y-2">
                    @foreach($question->options as $option)
                        <label class="flex items-center gap-2 text-sm text-slate-200">
                            <input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}" class="rounded border-slate-300"
                                @checked((isset($results[$question->id]['selected_option_id']) && $results[$question->id]['selected_option_id'] === $option->id))>
                            <span>{{ $option->option_text }}</span>
                        </label>
                        @if(($showAnswers ?? false) === true && isset($results[$question->id]) && $results[$question->id]['correct_option_id'] === $option->id)
                            <p class="ml-6 -mt-1 text-xs text-emerald-300">Correct answer</p>
                        @endif
                    @endforeach
                </div>
                @if(isset($results[$question->id]))
                    <div class="mt-3 rounded-lg p-3 text-sm {{ $results[$question->id]['is_correct'] ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                        {{ $results[$question->id]['is_correct'] ? 'Correct.' : 'Incorrect.' }}
                        @if(!empty($results[$question->id]['explanation']))
                            <p class="mt-1">{{ $results[$question->id]['explanation'] }}</p>
                        @endif
                    </div>
                @endif
            </fieldset>
        @endforeach
        <button type="submit" class="btn-primary">Submit quiz</button>
    </form>
@endsection