@php
    /** @var \App\Models\Enunciado $enunciado */
    $formEditorId = 'evidencia_editor_'.$enunciado->id;
    $formInputId = 'evidencia_nombre_'.$enunciado->id;
@endphp

<div class="eva-cur-tree-form">
    <form
        method="POST"
        action="{{ $editEvidencia ? route('configuracion.evidencias.update', $editEvidencia) : route('configuracion.evidencias.store') }}"
        class="space-y-3"
    >
        @csrf
        @if($editEvidencia)
            @method('PUT')
        @endif
        <input type="hidden" name="grado_id" value="{{ $grado->id }}">
        <input type="hidden" name="curso_id" value="{{ $curso->id }}">
        <input type="hidden" name="enunciado_id" value="{{ $enunciado->id }}">

        <div class="flex flex-wrap items-center justify-between gap-2">
            <p class="text-sm font-semibold text-slate-800">
                {{ $editEvidencia ? 'Editar evidencia' : 'Nueva evidencia' }}
            </p>
            <a href="{{ route('configuracion.curso', $baseParams) }}" class="text-xs text-slate-500 hover:underline">Cancelar</a>
        </div>

        <div class="rounded-lg border border-teal-100 bg-teal-50/40 px-3 py-2">
            <p class="text-[11px] font-semibold uppercase tracking-wide text-teal-700 mb-1">Enunciado padre</p>
            <x-cur-tree-label :html="$enunciado->nombre" :limit="120" />
        </div>

        <div>
            <x-input-label value="Evidencia (editor enriquecido)" />
            <input type="hidden" name="nombre" id="{{ $formInputId }}" value="{{ old('nombre', $editEvidencia?->nombre) }}">
            <div id="{{ $formEditorId }}" class="mt-2 min-h-[140px] rounded-lg border border-slate-200 bg-white"></div>
            <x-input-error :messages="$errors->get('nombre')" class="mt-2" />
        </div>

        <x-primary-button>{{ $editEvidencia ? 'Guardar cambios' : 'Crear evidencia' }}</x-primary-button>
    </form>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        if (window.initQuillEditor && document.querySelector('#{{ $formEditorId }}')) {
            window.initQuillEditor('#{{ $formEditorId }}', {
                input: '#{{ $formInputId }}',
                placeholder: 'Escribe la evidencia…',
            });
        }
    });
</script>
@endpush