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

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

{% block javascripts %}
    {{ parent()}}
    <script>
        {# Ajax para cargar partidos de la provincia seleccionada #}
        function cargarPartidos(e) {
            var provincia = $(this);
            var data = {};
            data['provincia_id'] = provincia.val();
            var partido_id = $(this).data('partido-id');
            var partido_sel = $('#' + partido_id);
            $.ajax({
                url : '{{ path('referencia_load_partidos') }}',
                type: 'POST',
                data : data,
                success: function(html) {
                    partido_sel.empty();
                    partido_sel.append(
                        $(html).find('#form_partidos').children()
                    );
                    {# Reiniciar selects de partido #}
                    partido_sel.children().first().prop('selected', true);
                    partido_sel.formSelect();
                }
            }); 
        }

        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();
                    $(".ep_select_provincia").change(cargarPartidos);
                    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" : "");
                    });

                    $('.poderJudicial').click(function(e) {
                        {# Deshabilito la partido y provincia en el caso de setear el checkbox de poder judicial  #}
                        $(this).parents('.territorio_padre').find('.ep_select_provincia').prop('disabled', $(this).is(":checked"));
                        $(this).parents('.territorio_padre').find('.ep_select_partido').prop('disabled', $(this).is(":checked"));
                        $(this).parents('.territorio_padre').find('span.helper-text').css("display", $(this).is(":checked") ? "none" : "");
                        $('select').formSelect();
                    });

                    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_paso2'}}) }}
            <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 ejercicioProfesional_div">
                <span class="card-title ejercicioProfesional_title">
                    Ejercicio profesional en el ámbito del Poder Judicial o del Ministerio Público
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Ejercicio Profesional" data-tooltip="Agregar Ejercicio Profesional"
                        data-url="{{ path('ejercicio_profesional_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, ejercicioProfesional in form.vars.value.ejerciciosProfesionales|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxEjercicioProfesional.html.twig', 
                        {'ejercicioProfesional': ejercicioProfesional,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>

            <hr color="identidad-color">

            <div class="row funcionPublica_div">
                <span class="card-title funcionPublica_title">
                    Funciones Públicas
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Fúncion Pública" data-tooltip="Agregar Fúncion Pública"
                        data-url="{{ path('funcion_publica_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, funcionPublica in form.vars.value.funcionesPublicas|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxFuncionPublica.html.twig', 
                        {'funcionPublica': funcionPublica,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>

            <hr color="identidad-color">

            <div class="row ejercicioLibre_div">
                <span class="card-title ejercicioLibre_title">
                    Ejercicio Libre de la Profesión
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Ejercicio Libre" data-tooltip="Agregar Ejercicio Libre"
                        data-url="{{ path('ejercicio_libre_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, ejercicioLibre in form.vars.value.ejerciciosLibres|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxEjercicioLibre.html.twig', 
                        {'ejercicioLibre': ejercicioLibre,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>

            <hr color="identidad-color">

            <div class="row inscripcionMatricula_div">
                <span class="card-title inscripcionMatricula_title">
                    Inscripción en Matrículas *
                    <button type="button" class="btn {# btn-floating btn-flat #} darken-2 tooltipped modalDetalle" name="action" 
                        onclick="clickOpenModal(event)" title="Agregar Inscripción Matrícula" data-tooltip="Agregar Inscripción Matrícula"
                        data-url="{{ path('inscripcion_matricula_modal_new', {'idView': presentacion_antecedente.idView}) }}">
                        Agregar <i class="material-icons right">add</i>
                    </button>
                </span>
                {% for indice, inscripcionMatricula in form.vars.value.inscripcionesMatriculas|filter(v => v.id != null) %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxInscripcionMatricula.html.twig', 
                        {'inscripcionMatricula': inscripcionMatricula,}) }}
                {% else %}
                    {{ include('ria/presentacion_antecedentes/paso2/_boxVacio.html.twig')}}
                {% endfor %}
            </div>

            {% if form.vars.submitted %}
                <div id="errorMatricula" class="red-text {{form.vars.value.inscripcionesMatriculas|length > 0 ? 'errorMatricula' : '' }}">Debe cargar al menos una matrícula </div>
            {% endif %}

            <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 %}