@extends('layouts.app')

@section('header', 'Curso de Engenharia de Prompt')

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

@section('content')
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">Curso Completo de Engenharia de Prompt</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-8">
                    <h2>Bem-vindo ao Curso de Engenharia de Prompt</h2>
                    <p>Este curso completo contém <strong>20 lições</strong> que irão ensinar você a criar prompts eficazes para obter os melhores resultados de modelos de linguagem como GPT, Claude, Gemini e outros.</p>

                    <div class="alert alert-info mt-4">
                        <h5><i class="bi bi-info-circle me-2"></i>Como funciona o curso?</h5>
                        <ol class="mb-0">
                            <li>Estude as <strong>20 lições</strong> do curso</li>
                            <li>Cada lição contém exemplos práticos de prompts bons e ruins</li>
                            <li>Ao final, faça o <strong>quiz com 10 perguntas</strong></li>
                            <li>Acertando pelo menos <strong>6 de 10 perguntas</strong>, você receberá um <strong>Certificado de Conclusão em PDF</strong></li>
                        </ol>
                    </div>

                    <div class="mt-4">
                        <h4>Conteúdo do Curso:</h4>
                        <div class="list-group mt-3">
                            @foreach($lessons as $lesson)
                                <a href="{{ route('tutorial.lesson', $lesson->id) }}" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">Lição {{ $lesson->order }}: {{ $lesson->title }}</h5>
                                        @if($progress && in_array($lesson->id, $progress->completed_lessons ?? []))
                                            <span class="badge bg-success rounded-pill"><i class="bi bi-check-circle me-1"></i>Concluída</span>
                                        @endif
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div class="mt-4 text-center">
                        <a href="{{ route('tutorial.quiz') }}" class="btn btn-primary btn-lg">
                            <i class="bi bi-question-circle me-2"></i>Fazer Quiz Final
                        </a>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="m-0 fw-bold">Seu Progresso</h6>
                        </div>
                        <div class="card-body">
                            @if($progress)
                                <div class="mb-3">
                                    <strong>Lições Concluídas:</strong>
                                    <div class="progress mt-2">
                                        <div class="progress-bar" role="progressbar" style="width: {{ ($progress->completed_lessons ? count($progress->completed_lessons) : 0) / count($lessons) * 100 }}%">
                                            {{ count($progress->completed_lessons ?? []) }}/{{ count($lessons) }}
                                        </div>
                                    </div>
                                </div>

                                @if($progress->quiz_passed)
                                    <div class="alert alert-success">
                                        <i class="bi bi-trophy me-2"></i>
                                        <strong>Parabéns!</strong><br>
                                        Você passou no quiz com {{ $progress->quiz_score }}/10 acertos.
                                        @if($progress->certificate_generated_at)
                                            <br><a href="{{ route('tutorial.certificate') }}" class="btn btn-success btn-sm mt-2">
                                                <i class="bi bi-download me-1"></i>Baixar Certificado
                                            </a>
                                        @endif
                                    </div>
                                @elseif($progress->quiz_completed_at)
                                    <div class="alert alert-danger">
                                        <i class="bi bi-x-circle me-2"></i>
                                        <strong>Quiz não aprovado</strong><br>
                                        Você acertou {{ $progress->quiz_score }}/10. É necessário acertar pelo menos 6.
                                        <br><a href="{{ route('tutorial.quiz') }}" class="btn btn-primary btn-sm mt-2">Tentar Novamente</a>
                                    </div>
                                @else
                                    <a href="{{ route('tutorial.quiz') }}" class="btn btn-primary w-100">
                                        <i class="bi bi-question-circle me-2"></i>Fazer Quiz
                                    </a>
                                @endif
                            @else
                                <p class="text-muted">Comece a estudar as lições para acompanhar seu progresso.</p>
                                @if($lessons->count() > 0)
                                    <a href="{{ route('tutorial.lesson', $lessons->first()->id) }}" class="btn btn-primary w-100">
                                @else
                                    <a href="#" class="btn btn-secondary w-100" disabled>
                                @endif
                                    <i class="bi bi-play-circle me-2"></i>Começar Curso
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection