{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/jquery/jquery-3.5.1.js', 'portal') }}"></script>
    <script type="text/javascript">
        // keep track of how many direccion fields have been rendered
        var direccionCount = '{{ direcciones|length }}';
        $(document).ready(function() {
            $('#add-another-direccion').click(function(e) {
                e.preventDefault();
                var direccionFieldDiv = $('#direccion-fields-div');
                var direccionesDiv = $('#direccion-div');
                // replace the "__name__" used in the id and name of the prototype
                // with a number that's unique to your direcciones
                // end name attribute looks like name="contact[direcciones][2]"
                var newWidgetDomCodigoPostal = direccionFieldDiv.children().children()[0].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomCodigoPostal = newWidgetDomCodigoPostal.replace('disabled="disabled"', '');

                var newWidgetDomLocalidadLabel = direccionFieldDiv.children().children()[1].children[0].children[0].children[1].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomLocalidadLabel = newWidgetDomLocalidadLabel.replace('disabled="disabled"', '');
                var newWidgetDomLocalidadSelect = $(direccionFieldDiv.children().children()[1].children[0].children[0].children[0]).children('select')[0].outerHTML;
                newWidgetDomLocalidadSelect = newWidgetDomLocalidadSelect.replace(/__name__/g, direccionCount);
                newWidgetDomLocalidadSelect = newWidgetDomLocalidadSelect.replace('disabled="disabled"', '');

                var newWidgetDomLocalidad1 = $('<div class="input-field col s12"></div>');
                var newWidgetDomLocalidad2 = $('<div class="row"></div>');
                var newWidgetDomLocalidad = $('<div class="col s12 m5 l5"></div>');
                newWidgetDomLocalidad1.append(newWidgetDomLocalidadSelect);
                newWidgetDomLocalidad1.append(newWidgetDomLocalidadLabel);
                newWidgetDomLocalidad2.append(newWidgetDomLocalidad1);
                newWidgetDomLocalidad.append(newWidgetDomLocalidad2);

                var newWidgetDomCalle = direccionFieldDiv.children().children()[2].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomCalle = newWidgetDomCalle.replace('disabled="disabled"', '');
                var newWidgetDomNumero = direccionFieldDiv.children().children()[3].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomNumero = newWidgetDomNumero.replace('disabled="disabled"', '');
                var newWidgetDomPiso = direccionFieldDiv.children().children()[4].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomPiso = newWidgetDomPiso.replace('disabled="disabled"', '');
                var newWidgetDomDpto = direccionFieldDiv.children().children()[5].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetDomDpto = newWidgetDomDpto.replace('disabled="disabled"', '');
                var newWidgetEtiqueta = direccionFieldDiv.children().children()[6].outerHTML.replace(/__name__/g, direccionCount);
                newWidgetEtiqueta = newWidgetEtiqueta.replace('disabled="disabled"', '');
                
                direccionCount++;
                // create a new list element and add it to the list
                var div_padre_card=$('<div class="card"></div>');
                var div_padre=$('<div class="card-content row"></div>');
                var botonAdd=$('<button type="button" onclick="removeDireccion(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_padre.append(newWidgetDomCodigoPostal);
                div_padre.append(newWidgetDomLocalidad);
                div_padre.append(newWidgetDomCalle);
                div_padre.append(newWidgetDomNumero);
                div_padre.append(newWidgetDomPiso);
                div_padre.append(newWidgetDomDpto);
                div_padre.append(newWidgetEtiqueta);
                div_padre.append(botonAdd);
                div_padre_card.append(div_padre);
                div_padre_card.appendTo(direccionesDiv);
                $($('select').get(direccionCount)).formSelect();
                //$('select').formSelect();
                e.currentTarget.blur();
            });
        })
        
        function removeDireccion(li) {
            li.remove();
        }
    </script>
{% endblock %}


{# <div class="card">
    <div class="card-content">
        <div class="row">
            {{ form_errors(direcciones) }}
            <div id="direccion-div">
                {% for indice, direccion in direcciones %}
                    <div class="row">
                        <div class="col s12 m2 l2">
                            {{form_row(direccion.children.domCodigoPostal)}}
                        </div>
                        <div class="col s12 m5 l5">
                            {{form_row(direccion.children.domLocalidad)}}
                        </div>
                        <div class="col s12 m5 l5">
                            {{form_row(direccion.children.domCalle)}}
                        </div>
                        <div class="col s12 m2 l2">
                            {{form_row(direccion.children.domNumero)}}
                        </div>
                        <div class="col s12 m2 l2">
                            {{form_row(direccion.children.domPiso)}}
                        </div>
                        <div class="col s12 m2 l2">
                            {{form_row(direccion.children.domDpto)}}
                        </div>
                        <div class="col s12 m5 l5">
                            {{form_row(direccion.children.etiqueta)}}
                        </div>
                        <button type="button" onclick="removeDireccion(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="direccion-fields-div">
                <div class="col s12 m2 l2">
                    {{form_row(direcciones.vars.prototype.children.domCodigoPostal, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direcciones.vars.prototype.children.domLocalidad, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direcciones.vars.prototype.children.domCalle, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direcciones.vars.prototype.children.domNumero, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direcciones.vars.prototype.children.domPiso, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direcciones.vars.prototype.children.domDpto, {'attr': {'disabled':'disabled'}})}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direcciones.vars.prototype.children.etiqueta, {'attr': {'disabled':'disabled'}})}}
                </div>
                <a href="#" id="add-another-direccion" class="btn-floating waves-effect waves-light btn-secondary "
                    style="margin-top: 20px;"
                    title="Agregar Direccion">
                    <i class="material-icons right">add</i>
                </a>
            </div>
            {% do direcciones.setRendered %}
        </div>

    </div>
</div> #}

{{ form_errors(direcciones) }}
<div id="direccion-div">
    {% for indice, direccion in direcciones %}
        <div class="card">
            <div class="card-content row">
                <div class="col s12 m2 l2">
                    {{form_row(direccion.children.domCodigoPostal)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direccion.children.domLocalidad)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direccion.children.domCalle)}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direccion.children.domNumero)}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direccion.children.domPiso)}}
                </div>
                <div class="col s12 m2 l2">
                    {{form_row(direccion.children.domDpto)}}
                </div>
                <div class="col s12 m5 l5">
                    {{form_row(direccion.children.etiqueta)}}
                </div>
                <button type="button" onclick="removeDireccion(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>
        </div>
    {% endfor %}
</div>
<div class="card" id="direccion-fields-div">
    <div class="card-content row">
        <div class="col s12 m2 l2">
            {{form_row(direcciones.vars.prototype.children.domCodigoPostal, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(direcciones.vars.prototype.children.domLocalidad, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(direcciones.vars.prototype.children.domCalle, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m2 l2">
            {{form_row(direcciones.vars.prototype.children.domNumero, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m2 l2">
            {{form_row(direcciones.vars.prototype.children.domPiso, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m2 l2">
            {{form_row(direcciones.vars.prototype.children.domDpto, {'attr': {'disabled':'disabled'}})}}
        </div>
        <div class="col s12 m5 l5">
            {{form_row(direcciones.vars.prototype.children.etiqueta, {'attr': {'disabled':'disabled'}})}}
        </div>
        <a href="#" id="add-another-direccion" class="btn-floating waves-effect waves-light btn-secondary "
            style="margin-top: 20px;"
            title="Agregar Direccion">
            <i class="material-icons right">add</i>
        </a>
    </div>
</div>
{% do direcciones.setRendered %}