@extends('layouts.admin')
@section('title','Quiz bearbeiten')
@section('content')
<div class="max-w-3xl">
  <a href="{{ route('admin.quizzes.index') }}" class="text-sm text-slate-500 hover:text-slate-700 mb-4 inline-block">← Zurück</a>

  {{-- Metadata --}}
  <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
    <h2 class="font-semibold text-slate-800 mb-5">Quiz-Einstellungen</h2>
    <form method="POST" action="{{ route('admin.quizzes.update',$quiz) }}" class="space-y-4">
      @csrf @method('PUT')
      <div class="grid grid-cols-3 gap-4">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-1">Fach</label>
          <select name="subject_id" required class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">
            @foreach($subjects as $s)<option value="{{ $s->id }}" {{ $s->id==$quiz->subject_id?'selected':'' }}>{{ $s->icon }} {{ $s->name }}</option>@endforeach
          </select>
        </div>
        <div class="col-span-2">
          <label class="block text-sm font-medium text-slate-700 mb-1">Titel</label>
          <input name="title" required value="{{ $quiz->title }}" class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
        <textarea name="description" rows="2" class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 outline-none">{{ $quiz->description }}</textarea>
      </div>
      <div class="flex items-center gap-2">
        <input type="checkbox" name="active" id="active" value="1" {{ $quiz->active?'checked':'' }} class="w-4 h-4 text-violet-600">
        <label for="active" class="text-sm text-slate-700">Quiz aktiv (für Kinder sichtbar)</label>
      </div>
      <button type="submit" class="bg-violet-600 hover:bg-violet-700 text-white px-6 py-2 rounded-lg font-medium text-sm">Speichern</button>
    </form>
  </div>

  {{-- Questions --}}
  <div class="flex justify-between items-center mb-3">
    <h3 class="font-semibold text-slate-700">Fragen
      <span class="{{ $questions->count() < 10 ? 'text-amber-500' : 'text-green-600' }} font-normal text-sm ml-1">({{ $questions->count() }}/10)</span>
    </h3>
    @if($questions->count() < 10)
    <a href="{{ route('admin.quizzes.questions.create',$quiz) }}" class="bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-lg text-sm font-medium">+ Frage hinzufügen</a>
    @else
    <span class="text-green-600 text-sm font-medium">✅ 10 Fragen vollständig</span>
    @endif
  </div>

  @forelse($questions as $i => $q)
  <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 mb-2 flex items-start justify-between gap-4 hover:bg-slate-50">
    <div class="flex items-start gap-3 flex-1 min-w-0">
      <span class="text-slate-400 text-sm pt-0.5 shrink-0">{{ $i+1 }}.</span>
      <div class="min-w-0">
        <span class="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded mr-2">{{ $q->typeLabel() }}</span>
        @if($q->time_limit)<span class="text-xs text-amber-600 mr-2">⏱ {{ $q->time_limit }}s</span>@endif
        <p class="text-sm text-slate-700 mt-1 line-clamp-2">{{ $q->question_text }}</p>
      </div>
    </div>
    <div class="flex gap-3 text-sm shrink-0">
      <a href="{{ route('admin.quiz-questions.edit',$q) }}" class="text-violet-600 hover:underline">Bearbeiten</a>
      <form method="POST" action="{{ route('admin.quiz-questions.destroy',$q) }}" class="inline" onsubmit="return confirm('Frage löschen?')">
        @csrf @method('DELETE')
        <button class="text-red-500 hover:underline">Löschen</button>
      </form>
    </div>
  </div>
  @empty
  <div class="bg-slate-50 rounded-xl border border-dashed border-slate-300 p-8 text-center text-slate-400 text-sm">
    Noch keine Fragen. Füge bis zu 10 Fragen hinzu.
  </div>
  @endforelse
</div>
@endsection