{{--
  Requiere que el <form> padre tenga x-data con:
  gradoId, cursoId, curricularModo, temaId, enunciadoIds, evidenciaIds, curricular
--}}
@php
    /** Valores iniciales ya deben estar en el x-data del formulario padre. */
@endphp

<div class="rounded-xl border border-slate-200 p-4 space-y-4 bg-slate-50/60">
    <div>
        <p class="font-semibold text-slate-800">Configuración curricular</p>
        <p class="text-xs text-slate-500 mt-1">
            Opcional. Vincula la pregunta a un tema, o a enunciados y evidencias del grado/curso.
        </p>
    </div>

    {{-- Campos ocultos: el POST no debe depender del estado nativo de selects generados con Alpine --}}
    <input type="hidden" name="curricular_modo" :value="curricularModo">
    <template x-if="curricularModo === 'tema'">
        <input type="hidden" name="tema_id" :value="temaId">
    </template>
    <template x-if="curricularModo === 'enunciados_evidencias'">
        <div>
            <template x-for="id in enunciadoIds" :key="'post-en-'+id">
                <input type="hidden" name="enunciado_ids[]" :value="id">
            </template>
            <template x-for="id in evidenciaIds" :key="'post-ev-'+id">
                <input type="hidden" name="evidencia_ids[]" :value="id">
            </template>
        </div>
    </template>

    <div class="flex flex-wrap gap-4 text-sm">
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="radio" value="" x-model="curricularModo" @change="resetCurricularDetalle()">
            Sin vincular
        </label>
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="radio" value="tema" x-model="curricularModo" @change="resetCurricularDetalle()">
            Solo tema
        </label>
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="radio" value="enunciados_evidencias" x-model="curricularModo" @change="resetCurricularDetalle()">
            Enunciados y evidencias
        </label>
    </div>
    <x-input-error :messages="$errors->get('curricular_modo')" class="mt-1" />

    <div x-show="curricularModo === 'tema'" x-cloak class="space-y-2">
        <x-input-label value="Tema" />
        <select class="w-full rounded-md border-slate-300" x-model="temaId">
            <option value="">Selecciona un tema…</option>
            <template x-for="t in temasDelCurso" :key="'tema-'+t.id">
                <option :value="String(t.id)" x-text="t.label"></option>
            </template>
        </select>
        <p class="text-xs text-slate-500" x-show="cursoId && !temasDelCurso.length">
            No hay temas para este curso. Créalos en Configuración del curso.
        </p>
        <x-input-error :messages="$errors->get('tema_id')" class="mt-1" />
    </div>

    <div x-show="curricularModo === 'enunciados_evidencias'" x-cloak class="grid md:grid-cols-2 gap-4">
        <div>
            <x-input-label value="Enunciados" />
            <select
                multiple
                size="6"
                class="mt-1 w-full rounded-md border-slate-300 text-sm"
                x-model="enunciadoIds"
                @change="onEnunciadoChange()"
            >
                <template x-for="e in enunciadosDelCurso" :key="'en-'+e.id">
                    <option :value="String(e.id)" x-text="e.label"></option>
                </template>
            </select>
            <p class="text-xs text-slate-500 mt-1">Ctrl/Cmd + clic para varios.</p>
            <p class="text-xs text-slate-500" x-show="cursoId && !enunciadosDelCurso.length">No hay enunciados para este curso.</p>
            <x-input-error :messages="$errors->get('enunciado_ids')" class="mt-1" />
        </div>
        <div>
            <x-input-label value="Evidencias" />
            <select
                multiple
                size="6"
                class="mt-1 w-full rounded-md border-slate-300 text-sm"
                x-model="evidenciaIds"
                :disabled="!enunciadoIds.length"
            >
                <template x-for="ev in evidenciasFiltradas" :key="'ev-'+ev.id">
                    <option :value="String(ev.id)" x-text="ev.label"></option>
                </template>
            </select>
            <p class="text-xs text-slate-500 mt-1" x-show="!enunciadoIds.length">
                Primero selecciona uno o más enunciados.
            </p>
            <p class="text-xs text-slate-500 mt-1" x-show="enunciadoIds.length">
                Solo evidencias de los enunciados seleccionados. Ctrl/Cmd + clic para varias.
            </p>
            <p class="text-xs text-slate-500" x-show="enunciadoIds.length && !evidenciasFiltradas.length">
                Los enunciados seleccionados no tienen evidencias.
            </p>
            <x-input-error :messages="$errors->get('evidencia_ids')" class="mt-1" />
        </div>
    </div>
</div>