{% block javascripts %}
    <script type="text/javascript">
        // keep track of how many movimiento fields have been rendered
        var movimientoCount = '{{ movimientos|length }}';
        $(document).ready(function() {
            $('#add-another-movimiento').click(function(e) {
                e.preventDefault();
                var movimientoFieldDiv = $('#movimiento-fields-div');
                var movimientosDiv = $('#movimiento-div');
                // grab the prototype template
                {#
                    var newWidgetMovimiento = movimientoFieldDiv.attr('data-prototype-movimiento');
                    var newWidgetFecha = movimientoFieldDiv.attr('data-prototype-fecha');
                #}
                // replace the "__name__" used in the id and name of the prototype
                // with a number that's unique to your movimientos
                // end name attribute looks like name="contact[movimientos][2]"
                newWidgetMovimiento = $(movimientoFieldDiv.children()[0]).clone();
                const valor = $(movimientoFieldDiv).find('select').val();
                var select_base = newWidgetMovimiento.find('select');
                var name = select_base.prop('name');
                name = name.replace(/__name__/g,movimientoCount);
                var id = select_base._id();
                id = id.replace(/__name__/g,movimientoCount);
                select_base.prop('name',name)._id(id);
                var label = newWidgetMovimiento.find('label').prop('for');
                label = label.replace(/__name__/g,movimientoCount);
                newWidgetMovimiento.find('label').prop('for', label);
                newWidgetMovimiento.find('select').val(valor);
                newWidgetMovimiento.children().children().children().children(':not(select)').remove();

                newWidgetFecha = $(movimientoFieldDiv.children()[1]).clone();
                input_base = newWidgetFecha.find('input');
                name = input_base.prop('name');
                name = name.replace(/__name__/g,movimientoCount);
                id = input_base._id();
                id = id.replace(/__name__/g,movimientoCount);
                input_base.prop('name',name)._id(id);
                label = newWidgetFecha.find('label').prop('for');
                label = label.replace(/__name__/g,movimientoCount);
                newWidgetFecha.find('label').prop('for', label);

                movimientoCount++;
                // create a new list element and add it to the list
                var div_padre=$('<div class="row"></div>');
                var botonAdd=$('<button type="button" onclick="removeMovimiento(this.parentElement)"'
                    +'    class="btn btn-floating red darken-2" style="margin-top: 20px;" title="Borrar Movimiento">'
                    +'    <i class="material-icons" style="margin: 0px;">delete</i>'
                    +'</button>');
                div_padre.append(newWidgetMovimiento);
                div_padre.append(newWidgetFecha);
                div_padre.append(botonAdd);
                div_padre.appendTo(movimientosDiv);
                div_padre.find('select').formSelect();
                inicializarElementDatePicker(
                    newWidgetFecha.find('.datepicker'),
                    null,
                    [new Date().getFullYear()-50, new Date().getFullYear()],
                    new Date(),
                    false
                );
                //Reglas de JQvalidate
                input_base.rules( "add", {
                    required:  
                    {
                        depends: function(element) {
                            const checkMovimientos = $(element).parents('.div-ver-movimientos').parent().find('.ck_inscripcion_matricula_registraMovimientos');
                            if (checkMovimientos.prop('checked'))
                            {
                                return true;
                            }
                            else
                            {
                                return false;
                            }
                        }
                    },
                    messages: {required: "Campo Requerido"} 
                });
                select_base.rules( "add", {
                   required:  
                   {
                        depends: function(element) {
                            const checkMovimientos = $(element).parents('.div-ver-movimientos').parent().find('.ck_inscripcion_matricula_registraMovimientos');
                            if (checkMovimientos.prop('checked'))
                            {
                                return true;
                            }
                            else
                            {
                                return false;
                            }
                        }
                    },
                    messages: {required: "Campo Requerido"} 
                });
                //Reinicio el formulario de movimiento modelo
                movimientoFieldDiv.find('input').val('');
                movimientoFieldDiv.find('select').val(0);
                movimientoFieldDiv.find('select').formSelect();
                //e.currentTarget.blur();
            });
        })
        
        function removeMovimiento(li) {
            li.remove();
        }
    </script>
{% endblock %}

<div class="row">
    {{ form_errors(movimientos) }}
    <div id="movimiento-div">
        {% for indice, movimiento in movimientos %}
            <div class="row">
                <div class="col s12 m5 l5">
                    {{form_row(movimiento.children.movimiento)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(movimiento.children.fecha)}}
                </div>
                <button type="button" onclick="removeMovimiento(this.parentElement)"
                    class="btn btn-floating red darken-2" style="margin-top: 20px;" title="Borrar">
                    <i class="material-icons" style="margin: 0px;">delete</i>
                </button>
            </div>
        {% endfor %}
    </div>
    <div class="row" id="movimiento-fields-div">
        <div class="col s12 m5 l5">
            {{form_row(movimientos.vars.prototype.children.movimiento)}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(movimientos.vars.prototype.children.fecha)}}
        </div>
        <a href="#" id="add-another-movimiento" class="btn-floating waves-effect waves-light btn-secondary "
            style="margin-top: 20px;"
            title="Agregar Movimiento">
            <i class="material-icons right">add</i>
        </a>
    </div>
    {% do movimientos.setRendered %}
</div>