{% extends "base.html" %}

{% block content %}
<div class="container mt-5 pt-4 mb-5 pb-5">
    <div class="card">
        <div class="card-header">
            <h1 class="h3 mb-0">{{ title }}</h1>
        </div>
        <div class="card-body">
            <form method="POST" action="">
                {{ form.hidden_tag() }}
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.document_type.label(class="form-label") }}
                            {{ form.document_type(class="form-select") }}
                            {% if form.document_type.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.document_type.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.version.label(class="form-label") }}
                            {{ form.version(class="form-control") }}
                            {% if form.version.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.version.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="form-group mb-3">
                    {{ form.title.label(class="form-label") }}
                    {{ form.title(class="form-control") }}
                    {% if form.title.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.title.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group mb-3">
                    {{ form.content.label(class="form-label") }}
                    <small class="text-muted d-block mb-2">Este campo admite formato HTML para dar formato al texto.</small>
                    {{ form.content(class="form-control", id="content-editor", rows="15", required=false) }}
                    <div class="invalid-feedback" id="content-error" style="display: none;">
                        El contenido del documento es obligatorio.
                    </div>
                    {% if form.content.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.content.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-check mb-3">
                    {{ form.is_active(class="form-check-input") }}
                    {{ form.is_active.label(class="form-check-label") }}
                    <small class="text-muted d-block mt-1">Solo puede haber un documento activo por tipo. Al activar este documento, se desactivarán automáticamente otros documentos del mismo tipo.</small>
                </div>
                
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('admin.manage_legal_documents') }}" class="btn btn-secondary">Cancelar</a>
                    {{ form.submit(class="btn btn-primary") }}
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let editor;
        const form = document.querySelector('form');
        const contentTextarea = document.querySelector('#content-editor');
        const contentError = document.querySelector('#content-error');
        
        ClassicEditor
            .create(contentTextarea)
            .then(newEditor => {
                editor = newEditor;
                console.log('Editor inicializado correctamente');
                
                // Si hay contenido previo, asegurarse de que se cargue en el editor
                if (contentTextarea.value) {
                    editor.setData(contentTextarea.value);
                }
            })
            .catch(error => {
                console.error('Error al inicializar el editor:', error);
                // Si el editor falla, mostrar el textarea normal y restaurar el required
                contentTextarea.style.display = 'block';
                contentTextarea.required = true;
            });
        
        // Validar el formulario antes de enviarlo
        form.addEventListener('submit', function(e) {
            // Prevenir envío por defecto para validar
            e.preventDefault();
            
            let isValid = true;
            
            // Si el editor está disponible, sincronizar su contenido
            if (editor) {
                const editorContent = editor.getData();
                contentTextarea.value = editorContent;
                
                // Validar que el contenido no esté vacío
                if (!editorContent || editorContent.trim() === '') {
                    isValid = false;
                    contentError.style.display = 'block';
                } else {
                    contentError.style.display = 'none';
                }
                
                console.log('Contenido del editor sincronizado:', editorContent);
            }
            
            // Si todo es válido, enviar el formulario
            if (isValid) {
                console.log('Formulario válido, enviando...');
                form.removeEventListener('submit', arguments.callee);
                form.submit();
            } else {
                console.log('Formulario inválido, corrigiendo errores...');
            }
        });
    });
</script>
{% endblock %}