@extends('layouts.child')
@section('content')
<div class="mb-4 flex items-center gap-3">
  <a href="{{ route('learn.subjects') }}" class="text-slate-400 hover:text-slate-600 text-sm">← Fächer</a>
  <span class="text-lg">{{ $subject->icon }}</span>
  <span class="font-bold text-slate-700">{{ $subject->name }}</span>
  <span class="ml-auto text-sm text-slate-400">{{ $question->difficultyStars() }}</span>
</div>
<div class="bg-white rounded-2xl shadow-md border border-slate-200 p-6 mb-6">
  <div class="text-xs text-slate-400 mb-3 font-medium">
    {{ ['','⭐ Leicht — 5 Münzen','⭐⭐ Mittel — 10 Münzen','⭐⭐⭐ Schwer — 20 Münzen'][$question->difficulty] }}
  </div>
  <p class="text-xl font-bold text-slate-800 leading-snug">{{ $question->question_text }}</p>
</div>
<form method="POST" action="{{ route('learn.answer', $subject->slug) }}">
  @csrf
  <input type="hidden" name="question_id" value="{{ $question->id }}">
  <div class="grid gap-3">
  @foreach($question->answerOptions as $opt)
  <label class="cursor-pointer">
    <input type="radio" name="answer" value="{{ $opt->id }}" class="sr-only peer" required>
    <div class="bg-white border-2 border-slate-200 rounded-2xl px-5 py-4 text-base font-medium text-slate-700
        peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700
        hover:border-indigo-300 hover:bg-slate-50 transition-all">
      {{ $opt->text }}
    </div>
  </label>
  @endforeach
  </div>
  <button type="submit" class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-lg font-bold py-4 rounded-2xl shadow-md transition-colors">
    Antworten ✓
  </button>
</form>
<div class="mt-3 text-center">
  <a href="{{ route('learn.quiz', $subject->slug) }}"
     class="text-sm text-slate-400 hover:text-slate-600 underline underline-offset-2">
    Diese Frage überspringen &rarr;
  </a>
</div>
@endsection