@php
    /** @var array $opcionesOld */
    /** @var bool $unica */
    /** @var array $porcentajes */

    $opcionesConUid = collect($opcionesOld)->values()->map(function ($op, $i) {
        return [
            'contenido' => $op['contenido'] ?? '',
            'porcentaje' => (string) ($op['porcentaje'] ?? '0'),
            '_uid' => 'op-'.uniqid().'-'.$i,
        ];
    })->all();
@endphp

<div
    x-data="{
        opciones: @js($opcionesConUid),
        unica: {{ $unica ? 'true' : 'false' }},
        add() {
            this.opciones.push({
                contenido: '',
                porcentaje: '0',
                _uid: 'op-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
            });
        },
        remove(index) {
            this.opciones.splice(index, 1);
        },
        setTotalCorrecta(index) {
            if (!this.unica) return;
            this.opciones = this.opciones.map((op, i) => ({
                ...op,
                porcentaje: i === index ? '100' : (Number(op.porcentaje) > 0 ? '0' : op.porcentaje),
            }));
        },
        sumaPositivos() {
            return this.opciones.reduce((acc, op) => acc + Math.max(0, Number(op.porcentaje) || 0), 0);
        },
        initOpcionEditor(el, opcion) {
            if (!window.initQuillEditor) return;
            this.$nextTick(() => {
                const input = document.getElementById('opcion-contenido-' + opcion._uid);
                if (!input) return;
                input.value = opcion.contenido || '';
                window.initQuillEditor(el, {
                    input,
                    placeholder: 'Texto de la opción…',
                });
            });
        },
    }"
    class="space-y-3"
>
    <div class="flex items-start justify-between gap-3">
        <div>
            <x-input-label value="Opciones y calificación (%)" />
            <p class="text-xs text-slate-500 mt-1">
                Como en Moodle: cada respuesta aporta un porcentaje de los puntos de la pregunta.
                @if($unica)
                    En selección única normalmente una opción vale <strong>100%</strong> y el resto 0% (o negativo).
                @else
                    En selección múltiple puedes repartir, por ejemplo, <strong>50% + 50%</strong>. La suma de las elegidas se aplica (máx. 100%).
                @endif
            </p>
        </div>
        <button type="button" @click="add()" class="text-sm text-teal-700 whitespace-nowrap">+ Agregar opción</button>
    </div>

    <div class="rounded-xl border border-teal-100 bg-teal-50/50 px-4 py-3 text-sm text-teal-900">
        Suma de porcentajes positivos:
        <strong x-text="sumaPositivos().toFixed(2) + '%'"></strong>
        <span class="text-teal-700/80" x-show="unica"> · recomendado: 100% en una sola opción</span>
        <span class="text-teal-700/80" x-show="!unica"> · recomendado: que sumen 100%</span>
    </div>

    <template x-for="(opcion, index) in opciones" :key="opcion._uid">
        <div class="rounded-xl border border-slate-200 p-3 space-y-3">
            <div class="flex flex-wrap items-end gap-3">
                <div class="sm:w-44">
                    <label class="text-xs text-slate-500">Calificación</label>
                    <select
                        :name="'opciones[' + index + '][porcentaje]'"
                        x-model="opcion.porcentaje"
                        @change="if (unica && Number(opcion.porcentaje) === 100) setTotalCorrecta(index)"
                        class="mt-1 block w-full rounded-md border-slate-300 text-sm"
                        required
                    >
                        @foreach($porcentajes as $valor => $etiqueta)
                            <option value="{{ $valor }}">{{ $etiqueta }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="button" class="text-rose-600 text-sm ml-auto" @click="remove(index)" x-show="opciones.length > 2">✕ Eliminar</button>
            </div>
            <div>
                <label class="text-xs text-slate-500">Texto de la opción (editor enriquecido)</label>
                <input type="hidden" :name="'opciones[' + index + '][contenido]'" :id="'opcion-contenido-' + opcion._uid">
                <div
                    class="mt-1 bg-white ql-opcion"
                    x-init="initOpcionEditor($el, opcion)"
                ></div>
            </div>
        </div>
    </template>

    <x-input-error :messages="$errors->get('opciones')" class="mt-2" />
    <x-input-error :messages="$errors->get('opciones.0.contenido')" class="mt-2" />
    <x-input-error :messages="$errors->get('opciones.0.porcentaje')" class="mt-2" />
</div>