@php
    $defaultOpciones = $pregunta->opciones->map(fn ($o) => [
        'contenido' => $o->contenido,
        'porcentaje' => (string) (0 + (float) $o->porcentaje),
    ])->values()->all();

    if (count($defaultOpciones) < 2) {
        $defaultOpciones = [
            ['contenido' => '', 'porcentaje' => '100'],
            ['contenido' => '', 'porcentaje' => '0'],
        ];
    }

    $opcionesOld = old('opciones', $defaultOpciones);
    $enunciadosIniciales = $pregunta->likertItems->map(fn ($i) => [
        'contenido' => $i->contenido,
    ])->values()->all() ?: [['contenido' => ''], ['contenido' => '']];

    $respuestaVf = old('respuesta_vf', optional($pregunta->opciones->firstWhere('es_correcta', true))->contenido === 'Falso' ? 'falso' : 'verdadero');
    $porcentajeCorrectaVf = old('porcentaje_correcta_vf', (string) (0 + (float) (optional($pregunta->opciones->firstWhere('es_correcta', true))->porcentaje ?? 100)));
    $porcentajeIncorrectaVf = old('porcentaje_incorrecta_vf', (string) (0 + (float) (optional($pregunta->opciones->firstWhere('es_correcta', false))->porcentaje ?? 0)));
@endphp

<x-app-layout compact>
    <x-page :title="'Editar ' . $pregunta->codigo" :breadcrumbs="[['label' => 'Inicio', 'url' => route('dashboard')], ['label' => 'Banco de preguntas', 'url' => route('banco.index')], ['label' => 'Editar']]">
        <x-slot name="subtitle">{{ $pregunta->tipoItemLabel() }} · el código no cambia</x-slot>
        <div class="eva-form-page-wide">
            <form
                method="POST"
                action="{{ route('banco.preguntas.update', $pregunta) }}"
                class="eva-form-card space-y-5"
                x-data="curricularFormState({
                    gradoId: {{ \Illuminate\Support\Js::from(old('grado_id', $pregunta->grado_id)) }},
                    cursoId: {{ \Illuminate\Support\Js::from(old('curso_id', $pregunta->curso_id)) }},
                    curricularModo: {{ \Illuminate\Support\Js::from(old('curricular_modo', $pregunta->curricular_modo)) }},
                    temaId: {{ \Illuminate\Support\Js::from(old('tema_id', $pregunta->tema_id)) }},
                    enunciadoIds: {{ \Illuminate\Support\Js::from(old('enunciado_ids', $pregunta->enunciados->pluck('id')->all())) }},
                    evidenciaIds: {{ \Illuminate\Support\Js::from(old('evidencia_ids', $pregunta->evidencias->pluck('id')->all())) }},
                    curricular: {{ \Illuminate\Support\Js::from($curricularOpciones) }},
                })"
            >
                @csrf
                @method('PUT')

                <div class="rounded-xl bg-slate-50 border px-4 py-3 text-sm">
                    Código: <span class="font-mono font-semibold text-teal-700">{{ $pregunta->codigo }}</span>
                </div>

                <div class="grid md:grid-cols-3 gap-4">
                    <div>
                        <x-input-label for="tipo_prueba" value="Tipo de prueba" />
                        <select id="tipo_prueba" name="tipo_prueba" class="block mt-1 w-full rounded-md border-slate-300" required>
                            @foreach(\App\Models\Cuestionario::TIPOS as $valor => $etiqueta)
                                <option value="{{ $valor }}" @selected(old('tipo_prueba', $pregunta->tipo_prueba) === $valor)>{{ $etiqueta }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <x-input-label for="grado_id" value="Grado" />
                        <select id="grado_id" name="grado_id" class="block mt-1 w-full rounded-md border-slate-300" x-model="gradoId" @change="onGradoChange()" required>
                            <option value="">Selecciona…</option>
                            @foreach($grados as $grado)
                                <option value="{{ $grado->id }}" @selected((string) old('grado_id', $pregunta->grado_id) === (string) $grado->id)>{{ $grado->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <x-input-label for="curso_id" value="Curso" />
                        <select id="curso_id" name="curso_id" class="block mt-1 w-full rounded-md border-slate-300" x-model="cursoId" @change="onCursoChange()" required>
                            <option value="">Selecciona…</option>
                            @foreach($cursos as $curso)
                                <option value="{{ $curso->id }}" data-grado="{{ $curso->grado_id }}" x-show="!gradoId || gradoId == '{{ $curso->grado_id }}'" @selected((string) old('curso_id', $pregunta->curso_id) === (string) $curso->id)>
                                    {{ $curso->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                @include('preguntas._configuracion_curricular')

                @if($pregunta->tipo === 'seleccion_unica')
                    <div>
                        <x-input-label for="option_format" value="Formato de opciones" />
                        <select id="option_format" name="option_format" class="block mt-1 w-full rounded-md border-slate-300" required>
                            @foreach($formatos as $key => $label)
                                <option value="{{ $key }}" @selected(old('option_format', $pregunta->option_format ?? 'numeracion') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div>
                    <x-input-label value="Contenido" />
                    <input type="hidden" name="contenido" id="contenido" value="{{ old('contenido', $pregunta->contenido) }}">
                    <div id="editor" class="mt-2 bg-white min-h-[180px]"></div>
                </div>

                @if($pregunta->tipo !== 'descripcion')
                    <div>
                        <x-input-label for="puntos" value="Puntos" />
                        <x-text-input id="puntos" name="puntos" type="number" step="0.01" min="0" class="block mt-1 w-40" :value="old('puntos', $pregunta->puntos)" />
                    </div>
                @endif

                @if(in_array($pregunta->tipo, ['seleccion_unica', 'seleccion_multiple']))
                    @include('preguntas._opciones_porcentaje', [
                        'opcionesOld' => $opcionesOld,
                        'unica' => $pregunta->tipo === 'seleccion_unica',
                        'porcentajes' => $porcentajes,
                    ])
                @endif

                @if($pregunta->tipo === 'likert')
                    @include('preguntas._likert_criterios', [
                        'plantillasLikert' => $plantillasLikert,
                        'porcentajes' => $porcentajes,
                        'criteriosIniciales' => $opcionesOld,
                        'enunciadosIniciales' => old('enunciados', $enunciadosIniciales),
                    ])
                @endif

                @if($pregunta->tipo === 'verdadero_falso')
                    <div class="space-y-4 rounded-xl border border-slate-200 p-4">
                        <div>
                            <x-input-label value="Respuesta correcta" />
                            <div class="mt-2 flex gap-4">
                                <label class="inline-flex items-center gap-2"><input type="radio" name="respuesta_vf" value="verdadero" @checked($respuestaVf==='verdadero')> Verdadero</label>
                                <label class="inline-flex items-center gap-2"><input type="radio" name="respuesta_vf" value="falso" @checked($respuestaVf==='falso')> Falso</label>
                            </div>
                        </div>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <x-input-label value="% si elige la correcta" />
                                <select name="porcentaje_correcta_vf" class="block mt-1 w-full rounded-md border-slate-300">
                                    @foreach($porcentajes as $valor => $etiqueta)
                                        @if((float)$valor >= 0)
                                            <option value="{{ $valor }}" @selected($porcentajeCorrectaVf == $valor)>{{ $etiqueta }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <x-input-label value="% si elige la incorrecta" />
                                <select name="porcentaje_incorrecta_vf" class="block mt-1 w-full rounded-md border-slate-300">
                                    @foreach($porcentajes as $valor => $etiqueta)
                                        <option value="{{ $valor }}" @selected($porcentajeIncorrectaVf == $valor)>{{ $etiqueta }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex gap-3">
                    <x-primary-button>Guardar cambios</x-primary-button>
                    <a href="{{ route('banco.index') }}" class="px-4 py-2.5 rounded-xl border text-sm">Cancelar</a>
                </div>
            </form>
        </div>
    </x-page>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (window.initQuillEditor) {
                window.initQuillEditor('#editor', { input: '#contenido' });
            }
        });
    </script>
    @endpush
</x-app-layout>