@extends('layouts.app')

@section('header', 'Quiz do Curso')

@section('breadcrumbs')
    @php
        $breadcrumbs = [
            'Tutorial' => route('tutorial.index'),
            'Quiz' => route('tutorial.quiz')
        ];
    @endphp
@endsection

@section('content')
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">Quiz Final - Engenharia de Prompt</h6>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <h5><i class="bi bi-info-circle me-2"></i>Instruções</h5>
                <p class="mb-0">Este quiz contém <strong>10 perguntas</strong> sobre o conteúdo do curso. Você precisa acertar pelo menos <strong>6 de 10</strong> para ser aprovado e receber o certificado de conclusão.</p>
            </div>

            @if($progress && $progress->quiz_completed_at)
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <strong>Atenção!</strong> Você já realizou este quiz. Sua última tentativa: <strong>{{ $progress->quiz_score }}/10</strong>.
                    @if($progress->quiz_passed)
                        <span class="text-success">(Aprovado)</span>
                    @else
                        <span class="text-danger">(Reprovado)</span>
                    @endif
                    <br>Tente novamente para melhorar sua pontuação.
                </div>
            @endif

            <form method="POST" action="{{ route('tutorial.quiz.submit') }}" class="mt-4">
                @csrf
                @foreach($questions as $index => $question)
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">Pergunta {{ $index + 1 }} de {{ count($questions) }}</h5>
                            <p class="card-text">{{ $question->question }}</p>

                            @foreach($question->options as $option)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}" id="q{{ $question->id }}_{{ $loop->index }}" required>
                                    <label class="form-check-label" for="q{{ $question->id }}_{{ $loop->index }}">
                                        {{ $option }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-check-circle me-2"></i>Enviar Respostas
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection