@extends('layouts.app')
@section('title',$lesson->title.' — '.$course->title)
@section('content')
<div class="learn-shell"><aside class="lesson-nav"><a href="{{ route('courses.show',$course) }}" style="font-weight:800;color:var(--brand);margin-bottom:1rem">← {{ Str::limit($course->title,32) }}</a><div style="margin-bottom:1rem"><div style="display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:.4rem"><span>Tu avance</span><strong>{{ number_format($enrollment->progress_percent,0) }}%</strong></div><div class="progress-track" style="background:#dfe7e4"><div class="progress-fill" style="width:{{ $enrollment->progress_percent }}%;background:var(--brand)"></div></div></div>@foreach($course->sections as $section)<strong style="display:block;margin:1rem .7rem .4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em">{{ $section->title }}</strong>@foreach($section->lessons as $item)<a href="{{ route('learn',[$course,$item->id]) }}" class="{{ $item->id === $lesson->id ? 'active' : '' }}"><span>{{ $progress->get($item->id) ? '✓' : '○' }}</span><span>{{ $item->title }}</span></a>@endforeach @endforeach</aside>
<section class="lesson-content"><span class="eyebrow">{{ ucfirst($lesson->type) }} · {{ $lesson->duration_minutes }} min</span><h1 style="font-size:clamp(2rem,5vw,3.7rem);letter-spacing:-.05em;line-height:1.05">{{ $lesson->title }}</h1>
@php($mediaSource=$lesson->file_path && in_array($lesson->type,['video','audio']) ? route('lessons.media',$lesson) : $lesson->media_url)
@if($lesson->type === 'video' && $mediaSource)<div class="panel" style="overflow:hidden;aspect-ratio:16/9;margin:1.5rem 0">@if($lesson->file_path)<video controls preload="metadata" style="width:100%;height:100%" src="{{ $mediaSource }}"></video>@else<iframe src="{{ $mediaSource }}" title="{{ $lesson->title }}" style="width:100%;height:100%;border:0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>@endif</div>@elseif($lesson->type === 'embed' && $lesson->media_url)<div class="panel" style="overflow:hidden;aspect-ratio:16/9;margin:1.5rem 0"><iframe src="{{ $lesson->media_url }}" title="{{ $lesson->title }}" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="strict-origin-when-cross-origin" style="width:100%;height:100%;border:0"></iframe></div>@elseif($lesson->type === 'audio' && $mediaSource)<audio controls preload="metadata" style="width:100%;margin:1.5rem 0" src="{{ $mediaSource }}"></audio>@elseif($lesson->type === 'live' && $lesson->media_url)<div class="panel panel-body" style="margin:1.5rem 0"><strong>Sesión en vivo {{ $lesson->live_at?->translatedFormat('d M Y · H:i') }}</strong><p><a class="btn btn-primary" href="{{ $lesson->media_url }}" target="_blank" rel="noopener noreferrer">Entrar a la sesión</a></p></div>@endif
<article>{!! $lesson->content !!}</article>
@if($lesson->file_path)<p><a class="btn btn-secondary" href="{{ route('lessons.download',$lesson) }}">Descargar {{ $lesson->file_name }}</a></p>@endif
<form method="POST" action="{{ route('lessons.complete',[$course,$lesson]) }}" style="margin:2rem 0">@csrf<button class="btn btn-primary">{{ $progress->get($lesson->id) ? 'Completada ✓' : 'Marcar como completada' }}</button></form>
@foreach($lesson->quizzes()->with(['questions.options','attempts'=>fn($query)=>$query->where('user_id',auth()->id())->latest('attempt_number')])->get() as $quiz)<div class="panel" style="margin-top:1.5rem"><div class="panel-head"><div><span class="eyebrow">Evaluación</span><h2>{{ $quiz->title }}</h2></div><span class="status">{{ $quiz->max_attempts }} intentos</span></div>@if($quiz->attempts->isNotEmpty())<div class="panel-body" style="border-bottom:1px solid var(--line)"><strong>Historial:</strong> @foreach($quiz->attempts as $attempt)<span class="status">Intento {{ $attempt->attempt_number }} · {{ $attempt->score === null ? 'En revisión' : number_format($attempt->score,1).'%' }}</span> @endforeach</div>@endif<form class="panel-body stack" method="POST" action="{{ route('quizzes.submit',$quiz) }}">@csrf<p>{{ $quiz->instructions }}</p>@foreach($quiz->questions as $question)<fieldset style="border:0;padding:0"><legend style="font-weight:800;margin-bottom:.7rem">{{ $loop->iteration }}. {{ $question->prompt }}</legend>@if(in_array($question->type,['multiple_choice','true_false']))@foreach($question->options as $option)<label class="check-row"><input type="radio" name="answers[{{ $question->id }}][]" value="{{ $option->id }}"> {{ $option->text }}</label>@endforeach @elseif($question->type==='multiple_select')@foreach($question->options as $option)<label class="check-row"><input type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option->id }}"> {{ $option->text }}</label>@endforeach @else<textarea class="form-textarea" name="answers[{{ $question->id }}]" placeholder="Escribe tu respuesta"></textarea>@endif</fieldset>@endforeach<button class="btn btn-primary">Entregar evaluación</button></form></div>@endforeach
@foreach($course->assignments()->where(fn($q)=>$q->whereNull('lesson_id')->orWhere('lesson_id',$lesson->id))->get() as $assignment)<div class="panel" style="margin-top:1.5rem"><div class="panel-head"><div><span class="eyebrow">Tarea</span><h2>{{ $assignment->title }}</h2></div><span class="status">{{ $assignment->max_score }} puntos</span></div><form class="panel-body stack" method="POST" action="{{ route('assignments.submit',$assignment) }}" enctype="multipart/form-data">@csrf<p style="line-height:1.7">{{ $assignment->instructions }}</p><textarea class="form-textarea" name="comment" placeholder="Agrega un comentario para tu instructor"></textarea><input class="form-input" type="file" name="file"><button class="btn btn-primary">Entregar tarea</button></form></div>@endforeach
<form class="panel" style="margin-top:1.5rem" method="POST" action="{{ route('lessons.note',$lesson) }}">@csrf @method('PUT')<div class="panel-head"><h2>Mis notas privadas</h2></div><div class="panel-body"><textarea class="form-textarea" name="content" placeholder="Escribe algo que quieras recordar">{{ $note }}</textarea><button class="btn btn-secondary" style="margin-top:.7rem">Guardar nota</button></div></form>
<div class="panel" style="margin-top:1.5rem"><div class="panel-head"><h2>Preguntas y respuestas</h2></div><form class="panel-body stack" method="POST" action="{{ route('courses.discuss',$course) }}">@csrf<input type="hidden" name="lesson_id" value="{{ $lesson->id }}"><textarea class="form-textarea" name="body" placeholder="Pregunta algo sobre esta lección" required></textarea><button class="btn btn-primary">Publicar pregunta</button></form><div class="panel-body" style="border-top:1px solid var(--line)">@forelse($discussions as $discussion)<article style="padding:1rem 0;border-bottom:1px solid var(--line)"><strong>{{ $discussion->user->name }}</strong><small style="color:var(--muted)"> · {{ $discussion->lesson?->title }} · {{ $discussion->created_at->diffForHumans() }}</small><p>{{ $discussion->body }}</p>@foreach($discussion->replies as $reply)<div style="margin-left:1rem;padding:.8rem;border-left:3px solid var(--brand);background:#f7f9f8"><strong>{{ $reply->user->name }} · Respuesta</strong><p>{{ $reply->body }}</p></div>@endforeach</article>@empty<p style="color:var(--muted)">Todavía no hay preguntas. Puedes iniciar la conversación.</p>@endforelse</div></div>
</section></div>
@endsection