@php $escalaDef = $escalaMaxima ?? $curso->escalaMaxima(); @endphp
<x-app-layout compact>
    <div class="mdl-page">
        <div class="mdl-wrap">
            <nav class="mdl-breadcrumb" aria-label="Miga de pan">
                <a href="{{ route('dashboard') }}">Inicio</a>
                <span class="mdl-breadcrumb-sep">›</span>
                <a href="{{ route('aula.index') }}">Mis cursos</a>
                <span class="mdl-breadcrumb-sep">›</span>
                <a href="{{ route('aula.show', [$curso, 'tab' => 'contenido']) }}">{{ $curso->nombre }}</a>
                <span class="mdl-breadcrumb-sep">›</span>
                <span>{{ $leccion->titulo }}</span>
            </nav>

            <div class="mdl-panel space-y-5">
                <div class="mdl-detail-head">
                    <div class="flex items-start gap-3 min-w-0">
                        <x-mdl-icon tipo="page" />
                        <div class="min-w-0">
                            <h1 class="mdl-detail-title">{{ $leccion->titulo }}</h1>
                            <p class="mdl-detail-meta">{{ $leccion->modulo->titulo }}</p>
                        </div>
                    </div>
                    @if($puedeGestionar)
                        <div class="mdl-activity-actions">
                            <x-aula-visibility-toggle :url="route('aula.lecciones.visibility', [$curso, $leccion])" :publicado="$leccion->publicado" />
                            <a href="{{ route('aula.lecciones.edit', [$curso, $leccion]) }}" class="mdl-btn">Editar lección</a>
                            <form method="POST" action="{{ route('aula.lecciones.destroy', [$curso, $leccion]) }}" onsubmit="return confirm('¿Eliminar lección y todas sus actividades?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="mdl-btn mdl-btn-danger">Eliminar</button>
                            </form>
                        </div>
                    @endif
                </div>

                @if($leccion->contenido)
                    <div class="prose prose-slate max-w-none">{!! $leccion->contenido !!}</div>
                @endif

                {{-- Actividades de la lección --}}
                <div class="space-y-3">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                        <h3 class="mdl-section-label m-0">Actividades de la lección</h3>
                        @if($puedeGestionar)
                            <p class="text-xs text-slate-500 m-0 flex items-center gap-1.5">
                                <x-aula-drag-handle />
                                Arrastra para reordenar · ojo para ocultar
                            </p>
                        @endif
                    </div>

                    <div
                        class="space-y-3"
                        @if($puedeGestionar)
                            data-aula-sortable
                            data-reorder-url="{{ route('aula.bloques.reorder', [$curso, $leccion]) }}"
                        @endif
                    >
                    @forelse($leccion->bloques as $bloque)
                        <div
                            class="mdl-block {{ $puedeGestionar && ! $bloque->publicado ? 'mdl-item-hidden' : '' }}"
                            @if($puedeGestionar) data-sortable-id="{{ $bloque->id }}" @endif
                            @if($puedeGestionar) x-data="{ editando: false }" @endif
                        >
                            {{-- Vista normal --}}
                            <div @if($puedeGestionar) x-show="!editando" @endif>
                                @if($bloque->tipo === 'etiqueta')
                                    <div class="p-4">
                                        <div class="flex items-start justify-between gap-3 mb-2">
                                            <div class="flex items-center gap-2 min-w-0">
                                                @if($puedeGestionar)
                                                    <x-aula-drag-handle />
                                                    <x-aula-visibility-toggle :url="route('aula.bloques.visibility', [$curso, $bloque])" :publicado="$bloque->publicado" />
                                                @endif
                                                <x-mdl-icon :tipo="$bloque->tipo" />
                                                <div>
                                                    <strong class="text-slate-800">{{ $bloque->titulo }}</strong>
                                                    <span class="block text-xs text-slate-500">Etiqueta de texto</span>
                                                </div>
                                                @if($puedeGestionar && ! $bloque->publicado)<span class="mdl-badge" data-visibility-badge>Oculta</span>@endif
                                            </div>
                                            @if($puedeGestionar)
                                                <div class="mdl-activity-actions shrink-0">
                                                    <button type="button" class="mdl-btn" @click="editando = true">Editar</button>
                                                    <form method="POST" action="{{ route('aula.bloques.destroy', [$curso, $bloque]) }}" onsubmit="return confirm('¿Eliminar esta etiqueta?')">
                                                        @csrf @method('DELETE')
                                                        <button class="mdl-btn mdl-btn-danger">Eliminar</button>
                                                    </form>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="prose prose-sm max-w-none text-slate-700">{!! $bloque->contenido !!}</div>
                                    </div>
                                @else
                                    <div class="mdl-activity" style="border-top:0;">
                                        @if($puedeGestionar)
                                            <span class="mdl-section-controls mt-1">
                                                <x-aula-drag-handle />
                                                <x-aula-visibility-toggle :url="route('aula.bloques.visibility', [$curso, $bloque])" :publicado="$bloque->publicado" />
                                            </span>
                                        @endif
                                        <x-mdl-icon :tipo="$bloque->tipo" />
                                        <div class="mdl-activity-main">
                                            <p class="mdl-activity-name m-0">{{ $bloque->titulo }}</p>
                                            <div class="mdl-activity-meta">
                                                {{ $bloque->tipoLabel() }}
                                                @if($bloque->tipo === 'foro' && $bloque->foro?->calificable)
                                                    · Calificable (máx. {{ number_format((float) ($bloque->foro->puntaje_max ?: $escalaDef), 1) }})
                                                @endif
                                                @if($bloque->tipo === 'taller' && $bloque->taller?->calificable)
                                                    · Calificable (máx. {{ number_format((float) ($bloque->taller->puntaje_max ?: $escalaDef), 1) }})
                                                @elseif($bloque->tipo === 'taller' && $bloque->taller && ! $bloque->taller->calificable)
                                                    · No calificable
                                                @endif
                                                @if($puedeGestionar && ! $bloque->publicado) · <span class="mdl-badge" data-visibility-badge>Oculta</span> @endif
                                            </div>
                                        </div>
                                        <div class="mdl-activity-actions">
                                            @if($bloque->tipo === 'archivo' && $bloque->urlArchivo())
                                                <a href="{{ $bloque->urlArchivo() }}" target="_blank" class="mdl-btn mdl-btn-primary">Descargar</a>
                                            @elseif($bloque->tipo === 'tarea' && $bloque->tarea)
                                                <a href="{{ route('aula.tareas.show', [$curso, $bloque->tarea]) }}" class="mdl-btn mdl-btn-primary">Abrir</a>
                                            @elseif($bloque->tipo === 'cuestionario' && $bloque->cuestionario)
                                                <a href="{{ route('aula.cuestionarios.presentar', [$curso, $bloque->cuestionario]) }}" class="mdl-btn mdl-btn-primary">Abrir</a>
                                                @if($puedeGestionar)
                                                    <a href="{{ route('cuestionarios.show', $bloque->cuestionario) }}" class="mdl-btn">Preguntas</a>
                                                @endif
                                            @elseif($bloque->tipo === 'foro' && $bloque->foro)
                                                <a href="{{ route('aula.foros.show', [$curso, $bloque->foro]) }}" class="mdl-btn mdl-btn-primary">Abrir</a>
                                            @elseif($bloque->tipo === 'taller' && $bloque->taller)
                                                <a href="{{ route('aula.talleres.show', [$curso, $bloque->taller]) }}" class="mdl-btn mdl-btn-primary">Abrir</a>
                                            @endif
                                            @if($puedeGestionar)
                                                <button type="button" class="mdl-btn" @click="editando = true">Editar</button>
                                                <form method="POST" action="{{ route('aula.bloques.destroy', [$curso, $bloque]) }}" onsubmit="return confirm('¿Eliminar esta actividad?')">
                                                    @csrf @method('DELETE')
                                                    <button class="mdl-btn mdl-btn-danger">Eliminar</button>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>

                            {{-- Formulario de edición --}}
                            @if($puedeGestionar)
                                <form method="POST"
                                      action="{{ route('aula.bloques.update', [$curso, $bloque]) }}"
                                      enctype="multipart/form-data"
                                      class="p-4 space-y-3 bg-slate-50 border-t border-slate-200"
                                      x-show="editando"
                                      x-cloak
                                      style="display: none;">
                                    @csrf
                                    @method('PUT')

                                    <p class="text-sm font-semibold text-slate-800 m-0">Editar · {{ $bloque->tipoLabel() }}</p>

                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Título</label>
                                        <input type="text" name="titulo" value="{{ $bloque->titulo }}" required class="w-full rounded border-slate-300 text-sm">
                                    </div>

                                    @if($bloque->tipo === 'etiqueta')
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Texto / explicación</label>
                                            <textarea name="contenido" rows="6" class="w-full rounded border-slate-300 text-sm">{{ $bloque->contenido }}</textarea>
                                        </div>
                                    @elseif($bloque->tipo === 'archivo')
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">
                                                Reemplazar archivo
                                                @if($bloque->archivo_nombre)
                                                    <span class="text-slate-400">(actual: {{ $bloque->archivo_nombre }})</span>
                                                @endif
                                            </label>
                                            <input type="file" name="archivo" class="block w-full text-sm">
                                        </div>
                                    @elseif($bloque->tipo === 'tarea' && $bloque->tarea)
                                        @php $entidad = $bloque->tarea; @endphp
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Instrucciones</label>
                                            <textarea name="instrucciones" rows="3" class="w-full rounded border-slate-300 text-sm">{{ $entidad?->instrucciones }}</textarea>
                                        </div>
                                        <div class="grid sm:grid-cols-2 gap-3">
                                            <div>
                                                <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                                <input type="number" step="0.1" name="puntaje_max" value="{{ $entidad?->puntaje_max ?? $escalaDef }}" required class="w-full rounded border-slate-300 text-sm">
                                            </div>
                                            <div>
                                                <label class="block text-xs text-slate-500 mb-1">Fecha de entrega</label>
                                                <input type="datetime-local" name="fecha_entrega"
                                                       value="{{ optional($entidad?->fecha_entrega)->format('Y-m-d\TH:i') }}"
                                                       class="w-full rounded border-slate-300 text-sm">
                                            </div>
                                        </div>
                                    @elseif($bloque->tipo === 'taller' && $bloque->taller)
                                        @php $entidad = $bloque->taller; @endphp
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Instrucciones</label>
                                            <input type="hidden" name="instrucciones" id="edit_taller_input_{{ $bloque->id }}" value="{{ $entidad?->instrucciones }}">
                                            <div id="edit_taller_editor_{{ $bloque->id }}" class="js-quill-editor bg-white min-h-[140px] border border-slate-200 rounded" data-input="#edit_taller_input_{{ $bloque->id }}"></div>
                                        </div>
                                        <div class="space-y-2" x-data="{ calificable: {{ ($entidad?->calificable ?? true) ? 'true' : 'false' }} }">
                                            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                                                <input type="checkbox" name="calificable" value="1" class="rounded border-slate-300 text-blue-600"
                                                       x-model="calificable" @checked($entidad?->calificable ?? true)>
                                                Taller calificable
                                            </label>
                                            <div class="grid sm:grid-cols-2 gap-3">
                                                <div x-show="calificable" x-cloak>
                                                    <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                                    <input type="number" step="0.1" min="0.1" max="500" name="puntaje_max"
                                                           value="{{ $entidad?->puntaje_max ?? $escalaDef }}"
                                                           class="w-full rounded border-slate-300 text-sm"
                                                           x-bind:disabled="!calificable">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-slate-500 mb-1">Fecha de entrega</label>
                                                    <input type="datetime-local" name="fecha_entrega"
                                                           value="{{ optional($entidad?->fecha_entrega)->format('Y-m-d\TH:i') }}"
                                                           class="w-full rounded border-slate-300 text-sm">
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($bloque->tipo === 'foro')
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Descripción</label>
                                            <input type="hidden" name="descripcion" id="edit_foro_input_{{ $bloque->id }}" value="{{ $bloque->foro?->descripcion }}">
                                            <div id="edit_foro_editor_{{ $bloque->id }}" class="js-quill-editor bg-white min-h-[140px] border border-slate-200 rounded" data-input="#edit_foro_input_{{ $bloque->id }}"></div>
                                        </div>
                                        <div class="space-y-2" x-data="{ calificable: {{ $bloque->foro?->calificable ? 'true' : 'false' }} }">
                                            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                                                <input type="checkbox" name="calificable" value="1" class="rounded border-slate-300 text-blue-600"
                                                       x-model="calificable" @checked($bloque->foro?->calificable)>
                                                Foro calificable
                                            </label>
                                            <div x-show="calificable" x-cloak>
                                                <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                                <input type="number" step="0.1" min="0.1" max="500" name="puntaje_max"
                                                       value="{{ $bloque->foro?->puntaje_max ?? $escalaDef }}"
                                                       class="w-full max-w-xs rounded border-slate-300 text-sm"
                                                       x-bind:disabled="!calificable">
                                            </div>
                                        </div>
                                    @elseif($bloque->tipo === 'cuestionario')
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Cuestionario</label>
                                            <select name="cuestionario_id" required class="w-full rounded border-slate-300 text-sm">
                                                @foreach($cuestionariosDisponibles as $c)
                                                    <option value="{{ $c->id }}" @selected((int) $bloque->cuestionario_id === (int) $c->id)>
                                                        {{ $c->nombre }} @if($c->codigo)({{ $c->codigo }})@endif
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                                        <input type="checkbox" name="publicado" value="1" class="rounded border-slate-300 text-blue-600" @checked($bloque->publicado)>
                                        Visible para estudiantes
                                    </label>

                                    <div class="flex flex-wrap gap-2">
                                        <button type="submit" class="mdl-btn mdl-btn-primary">Guardar cambios</button>
                                        <button type="button" class="mdl-btn" @click="editando = false">Cancelar</button>
                                    </div>
                                </form>
                            @endif
                        </div>
                    @empty
                        <div class="text-sm text-slate-500 border border-dashed border-slate-300 rounded p-4">
                            {{ $puedeGestionar ? 'Aún no hay actividades. Agrega una etiqueta, archivo, tarea, cuestionario, foro o taller.' : 'Esta lección aún no tiene actividades.' }}
                        </div>
                    @endforelse
                    </div>
                </div>

                @if($puedeGestionar)
                    <div class="mdl-manage-box" x-data="{ tipo: 'etiqueta', cuestionarioModo: 'nuevo', calificable: false, tallerCalificable: true }">
                        <h3>Agregar actividad a la lección</h3>
                        <form method="POST" action="{{ route('aula.bloques.store', [$curso, $leccion]) }}" enctype="multipart/form-data" class="space-y-3">
                            @csrf
                            <div>
                                <label class="block text-xs text-slate-500 mb-1">Tipo de actividad</label>
                                <select name="tipo" x-model="tipo" class="w-full rounded border-slate-300 text-sm">
                                    @foreach(\App\Models\LeccionBloque::TIPOS as $valor => $etiqueta)
                                        <option value="{{ $valor }}">{{ $etiqueta }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div x-show="tipo !== 'cuestionario'">
                                <label class="block text-xs text-slate-500 mb-1">Título</label>
                                <input type="text" name="titulo" class="w-full rounded border-slate-300 text-sm" placeholder="Nombre de la actividad" x-bind:disabled="tipo === 'cuestionario'">
                            </div>

                            <div x-show="tipo === 'etiqueta'">
                                <label class="block text-xs text-slate-500 mb-1">Texto / explicación</label>
                                <input type="hidden" name="contenido" id="bloque_contenido">
                                <div id="bloque_editor" class="bg-white min-h-[140px] border border-slate-200 rounded"></div>
                            </div>

                            <div x-show="tipo === 'archivo'" style="display:none;">
                                <label class="block text-xs text-slate-500 mb-1">Archivo</label>
                                <input type="file" name="archivo" class="block w-full text-sm">
                            </div>

                            <div class="space-y-3" x-show="tipo === 'tarea'" style="display:none;">
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">Instrucciones</label>
                                    <textarea name="instrucciones" rows="3" class="w-full rounded border-slate-300 text-sm"
                                              x-bind:disabled="tipo !== 'tarea'"></textarea>
                                </div>
                                <div class="grid sm:grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                        <input type="number" step="0.1" name="puntaje_max" value="{{ $escalaDef }}" class="w-full rounded border-slate-300 text-sm"
                                               x-bind:disabled="tipo !== 'tarea'">
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Fecha de entrega</label>
                                        <input type="datetime-local" name="fecha_entrega" class="w-full rounded border-slate-300 text-sm"
                                               x-bind:disabled="tipo !== 'tarea'">
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-3" x-show="tipo === 'taller'" style="display:none;">
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">Instrucciones</label>
                                    <input type="hidden" name="instrucciones" id="taller_instrucciones" value=""
                                           x-bind:disabled="tipo !== 'taller'">
                                    <div id="taller_editor" class="js-quill-editor bg-white min-h-[140px] border border-slate-200 rounded"
                                         data-input="#taller_instrucciones"
                                         data-placeholder="Describe las consignas del taller…"></div>
                                </div>
                                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                                    <input type="checkbox" name="calificable" value="1" class="rounded border-slate-300 text-blue-600"
                                           x-model="tallerCalificable"
                                           x-bind:disabled="tipo !== 'taller'">
                                    Taller calificable
                                </label>
                                <div class="grid sm:grid-cols-2 gap-3">
                                    <div x-show="tallerCalificable" x-cloak>
                                        <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                        <input type="number" step="0.1" min="0.1" max="500" name="puntaje_max" value="{{ $escalaDef }}" class="w-full rounded border-slate-300 text-sm"
                                               x-bind:disabled="tipo !== 'taller' || !tallerCalificable">
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Fecha de entrega</label>
                                        <input type="datetime-local" name="fecha_entrega" class="w-full rounded border-slate-300 text-sm"
                                               x-bind:disabled="tipo !== 'taller'">
                                    </div>
                                </div>
                                <p class="text-xs text-slate-500 m-0" x-show="tallerCalificable">Si es calificable, podrás asignar notas a las entregas.</p>
                            </div>

                            <div class="space-y-3" x-show="tipo === 'cuestionario'" style="display:none;">
                                <input type="hidden" name="cuestionario_modo" :value="cuestionarioModo" x-bind:disabled="tipo !== 'cuestionario'">

                                <div class="flex flex-wrap gap-2">
                                    <button type="button"
                                            class="mdl-btn"
                                            :class="cuestionarioModo === 'nuevo' ? 'mdl-btn-primary' : ''"
                                            @click="cuestionarioModo = 'nuevo'">
                                        Crear cuestionario
                                    </button>
                                    <button type="button"
                                            class="mdl-btn"
                                            :class="cuestionarioModo === 'existente' ? 'mdl-btn-primary' : ''"
                                            @click="cuestionarioModo = 'existente'">
                                        Seleccionar existente
                                    </button>
                                </div>

                                <div class="space-y-3" x-show="cuestionarioModo === 'nuevo'">
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Nombre del cuestionario</label>
                                        <input type="text" name="nombre" class="w-full rounded border-slate-300 text-sm" placeholder="Ej. Quiz unidad 1"
                                               x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'"
                                               x-bind:required="tipo === 'cuestionario' && cuestionarioModo === 'nuevo'">
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Descripción (opcional)</label>
                                        <textarea name="quiz_descripcion" rows="2" class="w-full rounded border-slate-300 text-sm"
                                                  x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'"></textarea>
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Tipo de evaluación</label>
                                            <select name="quiz_tipo" class="w-full rounded border-slate-300 text-sm"
                                                    x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                                @foreach(\App\Models\Cuestionario::TIPOS as $valor => $etiqueta)
                                                    <option value="{{ $valor }}">{{ $etiqueta }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Duración (minutos)</label>
                                            <input type="number" name="duracion_minutos" value="60" min="5" max="600" class="w-full rounded border-slate-300 text-sm"
                                                   x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                        </div>
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Inicio</label>
                                            <input type="datetime-local" name="starts_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="w-full rounded border-slate-300 text-sm"
                                                   x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'"
                                                   x-bind:required="tipo === 'cuestionario' && cuestionarioModo === 'nuevo'">
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Fin</label>
                                            <input type="datetime-local" name="ends_at" value="{{ now()->addDays(30)->format('Y-m-d\TH:i') }}" class="w-full rounded border-slate-300 text-sm"
                                                   x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'"
                                                   x-bind:required="tipo === 'cuestionario' && cuestionarioModo === 'nuevo'">
                                        </div>
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Intentos (0 = ilimitados)</label>
                                            <input type="number" name="intentos_permitidos" value="1" min="0" max="20" class="w-full rounded border-slate-300 text-sm"
                                                   x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-500 mb-1">Modo de calificación</label>
                                            <select name="modo_calificacion" class="w-full rounded border-slate-300 text-sm"
                                                    x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                                @foreach(\App\Models\Cuestionario::MODOS_CALIFICACION as $valor => $etiqueta)
                                                    <option value="{{ $valor }}">{{ $etiqueta }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Revisión del estudiante</label>
                                        <select name="visibilidad_resultado" class="w-full rounded border-slate-300 text-sm"
                                                x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                            @foreach(\App\Models\Cuestionario::VISIBILIDADES_RESULTADO as $valor => $etiqueta)
                                                <option value="{{ $valor }}">{{ $etiqueta }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Título en la lección (opcional)</label>
                                        <input type="text" name="titulo_leccion" class="w-full rounded border-slate-300 text-sm" placeholder="Por defecto usa el nombre del cuestionario"
                                               x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'nuevo'">
                                    </div>
                                    <p class="text-xs text-slate-500 m-0">Al crear, se abrirá el cuestionario para agregar preguntas. Los estudiantes del curso quedarán asignados automáticamente.</p>
                                </div>

                                <div class="space-y-3" x-show="cuestionarioModo === 'existente'" style="display:none;">
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Cuestionario existente</label>
                                        <select name="cuestionario_id" class="w-full rounded border-slate-300 text-sm"
                                                x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'existente'"
                                                x-bind:required="tipo === 'cuestionario' && cuestionarioModo === 'existente'">
                                            <option value="">Selecciona…</option>
                                            @foreach($cuestionariosDisponibles as $c)
                                                <option value="{{ $c->id }}">{{ $c->nombre }} @if($c->codigo)({{ $c->codigo }})@endif</option>
                                            @endforeach
                                        </select>
                                        @if($cuestionariosDisponibles->isEmpty())
                                            <p class="text-xs text-amber-700 mt-1">No hay cuestionarios disponibles. Usa «Crear cuestionario» o crea uno en Cuestionarios.</p>
                                        @endif
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Título en la lección (opcional)</label>
                                        <input type="text" name="titulo_existente" class="w-full rounded border-slate-300 text-sm" placeholder="Por defecto usa el nombre del cuestionario"
                                               x-bind:disabled="tipo !== 'cuestionario' || cuestionarioModo !== 'existente'">
                                    </div>
                                    <p class="text-xs text-slate-500 m-0">Al vincular, se abrirá como lo ve el estudiante (iniciar y responder la prueba).</p>
                                </div>
                            </div>

                            <div class="space-y-3" x-show="tipo === 'foro'" style="display:none;">
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">Descripción / consignas</label>
                                    <input type="hidden" name="descripcion" id="foro_descripcion" value=""
                                           x-bind:disabled="tipo !== 'foro'">
                                    <div id="foro_editor" class="js-quill-editor bg-white min-h-[140px] border border-slate-200 rounded"
                                         data-input="#foro_descripcion"
                                         data-placeholder="Explica el propósito del foro…"></div>
                                </div>
                                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                                    <input type="checkbox" name="calificable" value="1" class="rounded border-slate-300 text-blue-600"
                                           x-model="calificable"
                                           x-bind:disabled="tipo !== 'foro'">
                                    Foro calificable
                                </label>
                                <div x-show="calificable" x-cloak>
                                    <label class="block text-xs text-slate-500 mb-1">Puntaje máximo</label>
                                    <input type="number" step="0.1" min="0.1" max="500" name="puntaje_max" value="{{ $escalaDef }}"
                                           class="w-full max-w-xs rounded border-slate-300 text-sm"
                                           x-bind:disabled="tipo !== 'foro' || !calificable">
                                    <p class="text-xs text-slate-500 mt-1 mb-0">Si es calificable, podrás asignar notas a los estudiantes que participen.</p>
                                </div>
                            </div>

                            <button type="submit" class="mdl-btn mdl-btn-primary">Agregar actividad</button>
                        </form>
                    </div>
                @endif

                {{-- Recursos legacy (si existen) --}}
                @if($leccion->recursos->isNotEmpty())
                    <div class="border-t border-slate-100 pt-4">
                        <h3 class="font-bold text-slate-800 text-base mb-2">Recursos adicionales</h3>
                        <ul class="divide-y divide-slate-100 border border-slate-200 rounded overflow-hidden bg-white">
                            @foreach($leccion->recursos as $recurso)
                                <li class="p-3 flex items-center justify-between gap-3">
                                    <div>
                                        <p class="font-medium text-slate-800 m-0">{{ $recurso->titulo }}</p>
                                        <p class="text-xs text-slate-500 m-0">{{ $recurso->tipoLabel() }}</p>
                                    </div>
                                    @if($recurso->urlPublica())
                                        <a href="{{ $recurso->urlPublica() }}" target="_blank" class="mdl-btn mdl-btn-primary">Abrir</a>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(auth()->user()->isEstudiante())
                    <div class="border-t border-slate-100 pt-4 flex items-center justify-between gap-3">
                        @if($completada)
                            <p class="text-sm text-green-700 font-semibold m-0 flex items-center gap-2">
                                <span class="mdl-completion mdl-completion-done"></span>
                                Lección completada
                            </p>
                        @else
                            <p class="text-sm text-slate-600 m-0">Cuando termines las actividades, marca la lección como completada.</p>
                            <form method="POST" action="{{ route('aula.lecciones.completar', [$curso, $leccion]) }}">
                                @csrf
                                <button type="submit" class="mdl-btn mdl-btn-primary">Marcar como completada</button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($puedeGestionar)
        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (!window.initQuillEditor) return;

                    document.querySelectorAll('.js-quill-editor').forEach(function (el) {
                        window.initQuillEditor(el, {
                            input: el.dataset.input || null,
                            placeholder: el.dataset.placeholder || 'Escribe el contenido…',
                        });
                    });

                    if (document.querySelector('#bloque_editor')) {
                        window.initQuillEditor('#bloque_editor', { input: '#bloque_contenido' });
                    }
                });
            </script>
        @endpush
    @endif
</x-app-layout>