{% load custom_filters %}  

{% if mensajes %}
    {% include mensajes %}
{% endif %}

{% for seccion in preguntasEstudio %}
    {% if seccion.tipo == 'agregacion' %}
    <div class="cont-agregacion" id="agregacion-{{ seccion.id }}">
    {% endif %}
    <div class=" cont-seccion border border-2 rounded-2 p-0 pb-2 mx-3 mb-5 borde-pagina-principal ">
        <h2 class="m-3 mb-4">{{ seccion.nombre }}</h2>      
        <div class="row row-col row-elementos ps-4 m-0 mb-4 ">           
            {% for elemento in seccion.elemento_set.all %}
                {% if elemento.tipo == 'separador' %}
                    <div class="col cont-elem p-0 pt-2 me-4 rounded rounded-3" > 
                        <div class="font-semi-bold font-xl mt-2 ">
                            {{ elemento.nombre }}                                
                        </div>
                    </div>
                {% else %}
                    {% with forms|hashD:elemento.id as form %}
                    <div class="col cont-elem p-0 pt-2 me-4 rounded rounded-3" >
                        <div class="font-semi-bold mb-1">
                            {{ elemento.nombre }}
                            {% if elemento.obligatorio %}
                                *
                            {% endif %}
                        </div>
                            {% for field in form %}
                                                                                                                    
                                {% if elemento.opcionOtro and field.label == 'Otro' %}                                                                                    
                                    <div class="opc-otro " style="display: none;">
                                        {{ field }}
                                    </div>                                            
                                {% elif field.label == 'Otro' %}
                                    <!--omitir-->
                                {% else %} 
                                    {% if elemento.tipo == 'opcion_multiple' or elemento.tipo == 'casillas' %}                                                                                   
                                        <div class="d-flex align-items-center  mb-1">
                                            <div class="cont-opc row row-cols-auto text-center  ">
                                                {% for choice in field %}                                                
                                                    <div class="px-auto">
                                                        {{ choice }}  
                                                    </div>                                                                                  
                                                {% endfor %}  
                                            </div> 
                                        </div>                                          
                                    {% else %}
                                        <div class="mb-1">
                                            {{ field }}
                                        </div>                                            
                                    {% endif %}
                                {% endif %}  
                                
                                <div class="text-danger font-xs font-bold">
                                    {% if field.errors %}
                                        {% for error in field.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    {% endif %}
                                </div>                                
                            
                            {% endfor %}
                            
                            <div class="text-danger font-xs font-bold">
                                {% for error in form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                    </div>

                    {% endwith %}                            
                {% endif %} 
                {% with c=seccion.elemento_set.all|hashD:forloop.counter %}
                {% with cb=elemento %}                                                  
                    {% if c.row != cb.row and c is not None %}                                               
                        </div>
                        <div class="row row-col row-elementos ps-4 m-0 mb-4 ">                                                                                   
                    {% endif %}
                {% endwith %}
                {% endwith %}                                               
            {% endfor %}                
        </div>
    
    {% if seccion.tipo == 'agregacion' %}
        {% with registrosA|hashD:seccion.id as registros %}
            <div class="col d-flex align-items-center justify-content-center text-center ">
                <button  type="button" class="btn rounded-4 btn-a-seccion btn-aceptado p-2 px-3 font-md" onclick="agregarRegistro(this)">Agregar Registro</button>
            </div>                  
            <p class="h4 mx-3 mb-2">Registros</p>               
            <div class="border border-1 rounded-2 p-0 mx-2 mb-2 borde-pagina-principal horizontal-scroll ">
                <table class="custom-table-se">                                     
                    <thead>
                        <tr>
                            {% for elemento in seccion.elemento_set.all %}                                   
                            <th class="borde-pagina-gris font-xs font-semi-bold" style="border-bottom: 2px solid; white-space: normal; word-wrap: break-word;" title="{{elemento.nombre}}"> {{elemento.nombre}}</th>
                            {% endfor %}
                            <th class="borde-pagina-gris font-xs " style="width: 32px; border-bottom: 2px solid;"> </th>
                        </tr>
                    </thead>                            
                    <tbody>
                        {% if registros %}
                            {% for registro in registros %}
                            <tr>      
                                {% for respuest in registro%}    
                                {% with respuest.getStringValue as valor %}                          
                                <td class="font-xs " title="{{ valor }}" style="white-space: normal; word-wrap: break-word;">
                                    {{ valor }}
                                </td>    
                                {% endwith %}                  
                                {% endfor %}              
                                <td class="font-xs " style="text-align: right;">                                                            
                                    <button id="btnEliminar-{{registro.first.rAgregacion.id}}" type="button" onclick="eliminarRegistro(this)" title="Eliminar" class="line-height-normal btn p-0 m-0" data-bs-original-title="Eliminar Elemento">
                                        <i class="fa fa-trash-o texto-cancelar-activado " style="font-size: 20px; margin-left: -23px;"></i>
                                    </button>                                                                    
                                </td>  
                            </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>            
        {% endwith %}
    </div>
    </div>
    {% else %}
    </div>
    {% endif %}
{% endfor %}   

<script>
    $(document).ready(function() {
        const elementos = document.querySelectorAll('input[type="radio"], input[type="checkbox"]');
        elementos.forEach(function(elemento) {                
            if (elemento.checked) {
                toggleOtroCampo(elemento);
            }
        });

        const elementos2 = document.querySelectorAll('select');
        elementos2.forEach(function(elemento) {                
            toggleOtroCampo(elemento);
        });
    });
</script>