@extends('layouts.child')
@section('content')
<h1 class="text-2xl font-bold text-indigo-700 mb-2">🧠 Quiz</h1>
<p class="text-slate-500 mb-6">Beantworte 10 Fragen – max. 40 Münzen zu gewinnen!</p>

@foreach($subjects as $subjectId => $subject)
@php $group = $quizzes->get($subjectId, collect()) @endphp
@if($group->isNotEmpty())
<div class="mb-6">
  <h2 class="font-bold text-slate-600 text-sm uppercase tracking-wide mb-3">{{ $subject->icon }} {{ $subject->name }}</h2>
  <div class="grid gap-3">
    @foreach($group as $quiz)
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm px-5 py-4">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0">
          <h3 class="font-bold text-slate-800 text-base">{{ $quiz->title }}</h3>
          @if($quiz->description)<p class="text-sm text-slate-500 mt-0.5">{{ $quiz->description }}</p>@endif
          <div class="flex items-center gap-3 mt-2 text-xs text-slate-400">
            <span>📝 {{ $quiz->questions_count }} Fragen</span>
            <span>🏆 max. 40 Münzen</span>
            @if(isset($bestScores[$quiz->id]))
            <span class="text-amber-600 font-medium">Bisher: {{ $bestScores[$quiz->id] }}/40 🪙</span>
            @endif
          </div>
        </div>
        <form method="POST" action="{{ route('quiz.start',$quiz) }}">
          @csrf
          <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-xl text-sm font-bold whitespace-nowrap">
            {{ isset($bestScores[$quiz->id]) ? 'Nochmal' : 'Starten' }} →
          </button>
        </form>
      </div>
    </div>
    @endforeach
  </div>
</div>
@endif
@endforeach

@if($quizzes->isEmpty())
<div class="text-center py-16 text-slate-400">
  <p class="text-4xl mb-3">🧩</p>
  <p>Noch keine Quizzes verfügbar. Schau später nochmal vorbei!</p>
</div>
@endif
@endsection