{% extends 'ria/antecedentes_base.html.twig' %}

{% block js_document_ready %}
    {{ parent() }}
    $("#body_general").show();
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function clickOpenModal(event) {
            event.preventDefault();
            //Hago una solicitud AJAX al controller
            $.ajax({
                url: event.currentTarget.dataset.url ,
                method: 'GET',
                context: event.currentTarget,
                success: function (data) {
                    // Inserto el contenido en el div del modal
                    $("#modalDetalle .modal-content").html(data);
                    $("#modalDetalle").modal({dismissible: false,});
                    $("#modalDetalle").modal('open');
                    //Agrego a los inputs normales la clase active a los label, para que se "levanten"
                    if($(this)[0].title.includes('Editar'))
                        {$("#modalDetalle").find('input').siblings('label').addClass('active');}
                    $("select").formSelect();
                    inicializarElementDatePicker(
                        $('.datepicker'),
                        null,
                        [new Date().getFullYear()-50, new Date().getFullYear()],
                        new Date(),
                        false
                    );
                    $('.checkFechaFin').click(function(e) {
                        {# Deshabilito la fecha fin en el caso de setear el checkbox  #}
                        $(this).parents('.rango_padre').find('.dateFechaFin').prop('disabled', $(this).is(":checked"));
                        $(this).parents('.rango_padre').find('span.helper-text').css("display", $(this).is(":checked") ? "none" : "");
                    });

                    cargaValidadores();
                },
                error: function (error) {
                }
            });
        }

        function checkDiv(div) {
            if(div.children().length < 2)
            {
                var divVacio ='<div class="col s12 m12 vacio">'+
                    '<div class="card">'+
                        '<div class="card-content">'+
                            '<div class="row">'+
                                'No hay datos declarados'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>';
                div.find('span').after(divVacio);
            }
        }

        function clickEliminar(e) { 
            $url_eliminar=e.currentTarget.dataset.url;
            swal({
                title: "Eliminar",
                text: "¿Está seguro que quiere eliminar lo declarado?",
                icon: "warning",
                buttons: true,
                })
                .then((aceptar) => {
                if (aceptar) {
                    $.ajax({
                        url: $url_eliminar,
                        method: 'POST',
                        mensaje:"hola",
                        {# beforeSend: function (data) {
                            console.log("hola") ;
                        }, #}
                        success: function (data) {
                            M.toast({html: 'Se eliminó lo declarado con éxito'});
                            //Encuentro el div padre, que tenga la clase terminada en _div
                            var div = $(e.target).parents("div[class$='_div']");
                            //Borro el div padre, que tenga la clase terminada en _box y la borro
                            $(e.target).parents("div[class$='_box']").remove();
                            checkDiv(div);
                        },
                        error: function (error) {
                            if(error.status == 500)
                            {
                                swal({
                                    icon: 'error',
                                    title: 'Error',
                                    text:  error.getResponseHeader('mensaje') ?  error.getResponseHeader('mensaje').replaceAll(".", ".\n").replaceAll("&atilde", "á") : 'Error del servidor, intente más tarde.',
                                });
                            }
                        },
                        complete: function(html) {
                        }
                    });
                } 
            });
        }
    </script>
{% endblock %}

{% block dialogos_modales %}
<div id="modalDetalle" class="modal">
    <div class="modal-content">
        <!-- Acá se va a cargar el contenido del modal mediante AJAX -->
    </div>
</div>
{% endblock %}

{% block body %}
    <div id="body_general" hidden>
        {{ form_start(form, {'attr': {'novalidate':'novalidate', 'id':'form_paso4'}}) }}
            <div class="row"> 
                <div class="col l12 ">
                    <div class="card-panel identidad-color lighten-4">
                    <span class="high black-text">
                        <span class="material-icons identidad-color-text">
                        info
                        </span> Los campos marcados con * son obligatorios. 
                    </span>
                    </div>
                </div>
            </div>
            <br>

            <div class="row actividadDocente_div">
                <span class="card-title actividadDocente_title">
                    Ejercicio de actividades docentes de grado o posgrado, con rango de profesor titular o adjunto:
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Actividad Docente" data-tooltip="Agregar Actividad Docente"
                        data-url="{{ path('actividad_docente_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, actividadDocente in form.vars.value.actividadesDocente|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso4/_boxActividadDocente.html.twig', 
                        {'actividadDocente': actividadDocente,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>

            <hr color="identidad-color">

            <div class="row publicacion_div">
                <span class="card-title publicacion_title">
                    Publicaciones: Libros, Capítulos, Revistas
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Publicación" data-tooltip="Agregar Publicación"
                        data-url="{{ path('publicacion_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, publicacion in form.vars.value.publicaciones|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso4/_boxPublicacion.html.twig', 
                        {'publicacion': publicacion,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>            

            <div class="row">
                <div class="input-field col s12">
                    {{ form_widget(form.siguiente) }}
                    {# {{ form_widget(form.guardar) }} #}
                    {{ form_widget(form.anterior) }}
                </div>
            </div>

        {{ form_end(form) }}
    </div>
{% endblock %}