TODAS LAS FUNCIONALIDADES DE QUILLJS EN UN CONTENIDO.

contentForm.addEventListener('submit', async function(e) {
    e.preventDefault();

    // Forzar que los inputs de descripción pierdan el foco para aplicar los cambios
    document.querySelectorAll('.media-caption-input').forEach(input => input.blur());

    // Esperar un momento para que se procesen los eventos blur
    setTimeout(async () => {
        // Limpiar y reconstruir los elementos multimedia
        document.querySelectorAll('.media-wrapper').forEach(wrapper => {
            const mediaElement = wrapper.querySelector('img, video');
            const caption = wrapper.getAttribute('data-caption') || '';
            const mediaId = wrapper.getAttribute('data-media-id') || '';
            const width = wrapper.getAttribute('data-width') || '50%';

            // Limpiar el wrapper manteniendo solo lo esencial
            wrapper.innerHTML = '';

            // Crear nuevo elemento multimedia
            const newMediaElement = document.createElement(mediaElement.tagName.toLowerCase());
            newMediaElement.src = mediaElement.getAttribute('src');
            newMediaElement.style.width = width;

            // Configurar atributos específicos
            if (mediaElement.tagName.toLowerCase() === 'img') {
                newMediaElement.setAttribute('alt', caption || 'Imagen sin descripción');
                newMediaElement.setAttribute('aria-describedby', `caption-${mediaId}`);
            } else if (mediaElement.tagName.toLowerCase() === 'video') {
                newMediaElement.setAttribute('controls', '');
                if (caption) {
                    newMediaElement.setAttribute('aria-label', caption);
                }
                newMediaElement.setAttribute('preload', 'metadata');
            }

            // Agregar el elemento multimedia al wrapper
            wrapper.appendChild(newMediaElement);

            // Agregar la descripción si existe
            if (caption) {
                const captionDiv = document.createElement('div');
                captionDiv.className = 'media-caption';
                captionDiv.setAttribute('role', 'caption');
                captionDiv.id = `caption-${mediaId}`;
                captionDiv.textContent = caption;
                wrapper.appendChild(captionDiv);
            }
        });

        // Obtener el contenido del editor
        const editorContent = quill.root.innerHTML;
        
        // Crear FormData con los datos del formulario
        const formData = new FormData(this);
        
        // Añadir el contenido del editor y otros campos
        formData.set('ContentData', editorContent);
        formData.set('IsPublic', document.getElementById('isPublic').checked);

        try {
            const response = await fetch('/User/Content?handler=UpdateContent', {
                method: 'POST',
                headers: {
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                },
                body: formData
            });

            if (response.ok) {
                window.location.href = '/User/mycontent';
            } else {
                const error = await response.text();
                console.error('Error al guardar:', error);
                alert('Error al guardar el contenido. Por favor, intente nuevamente.');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error al guardar el contenido. Por favor, intente nuevamente.');
        }
    }, 100);
});