{% if formcustomer is defined %}
    <div class="modal fade" id="modal-default" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Nuevo Cliente</h4>
                </div>
                {{ form_start(formcustomer, {'attr': {'class': 'form-stacked' } }) }}

                <div class="modal-body">

                    <div id="errormodal" class="alert alert-danger alert-dismissible" style="display: none;">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <p id="msgerror"></p>
                    </div>

                    
                    
                    
                  <div class="row">

    <div class="col-md-5 clearfix">
        {{ form_row(formcustomer.tipoDocumento) }}
    </div>


    <div class="col-md-7 clearfix">

        <label>
            RUC / Identificación
        </label>

        <div class="input-group">

            {{ form_widget(formcustomer.identification, {
                'attr': {
                    'placeholder':'Ingrese RUC o cédula'
                }
            }) }}

            <span class="input-group-btn">

                <button 
                    type="button" 
                    id="buscarSriNuevoCliente" 
                    class="btn btn-primary"
                    title="Consultar datos del cliente en el SRI">

                    <i class="fa fa-search"></i>
                    Consultar SRI

                </button>

            </span>

        </div>

        <small class="text-info">
            <i class="fa fa-info-circle"></i>
            Digite el RUC para buscar automáticamente los datos del cliente.<br> Si es cedula ingrese manualmente los datos.
        </small>

        {{ form_errors(formcustomer.identification) }}

    </div>

</div>


<div class="row">

    <div class="col-md-12 clearfix">
        {{ form_row(formcustomer.name) }}
    </div>

</div>




                    
                    {#
                    <div class="col-md-6 clearfix">
                        {{ form_row(form.contact_person) }}
                    </div>
                    #}
                    <div class="row">
                        <div class="col-md-7 clearfix">
                            <div class="form-group">
                                {{ form_label(formcustomer.email) }}
                                <div class="input-group">
                                <span class="input-group-addon"><span
                                            class="glyphicon glyphicon-envelope"></span></span>
                                    {{ form_widget(formcustomer.email) }}
                                </div>
                                {{ form_errors(formcustomer.email) }}
                            </div>
                        </div>
                        <div class="col-md-5 clearfix">
                            {{ form_row(formcustomer.telefono) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 clearfix">
                            {{ form_row(formcustomer.invoicing_address) }}
                        </div>
                        {#
                        <div class="col-md-6 clearfix">
                            {{ form_row(form.shipping_address) }}
                        </div>
                        #}
                    </div>

                    {{ form_rest(formcustomer) }}
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">&nbsp;Cancelar
                    </button>
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i>&nbsp;Guardar
                    </button>
                </div>

                {{ form_end(formcustomer) }}

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
{% endif %}

<script>
    $(document).ready(function () {
        $body = $("body");

        $('#formcustomersv').submit(function (e) {
            e.preventDefault();
            $('#modal-default').modal('hide');

            updateInvoiceCli('{{ path('rest_customer_add') }}', $(this).parents('div'));
        });

        function updateInvoiceCli(path, $changedItem) {
            $body.addClass("loading");

            $.post(path, $("#formcustomersv").serialize())

                .done(function (data) {
                    $('input[name$="[customer_name]"]').val(data.item.name);
                    $('input[name$="[customer_email]"]').val(data.item.email);
                    $('input[name$="[customer_identification]"]').val(data.item.identification);
                    $('input[name$="[contact_person]"]').val(data.item.contact_person);
                    $('input[name$="[contact_ruc]"]').val(data.item.contact_ruc);
                    $('input[name$="[invoicing_address]"]').val(data.item.invoicing_address);

                    $body.removeClass("loading");
                    $("#formcustomersv")[0].reset();
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    $body.removeClass("loading");
                    if (jqXHR.status == 401) {
                        var aux = $.parseJSON(jqXHR.responseText);
                        var texto = '';
                        $.each(aux, function (key, value) {
                            texto = texto + '- ' + value + '<br>';
                        });
                        $("#msgerror").html(texto);

                    } else
                        $("#msgerror").html(jqXHR.responseText);
                    $("#errormodal").css("display", "block");
                    $('#modal-default').modal('show');

                });
        }

        $('#buscarcli').click(function () {

            $.ajax({
                url: '{{ path('customer_searchcliente') }}',

                data: {
                    term: $('input[name$="[customer_identification]"]').val()
                },
                error: function (ui) {
                    alert(ui.responseText);
                },
                async: true,
                beforeSend: function () {
                    $body.addClass("loading");
                },
                complete: function () {
                    $body.removeClass("loading");
                },
                success: function (ui) {
                    $('input[name$="[customer_name]"]').val(ui.item.name);
                    $('input[name$="[customer_email]"]').val(ui.item.email);
                    $('input[name$="[customer_identification]"]').val(ui.item.identification);
                    $('input[name$="[contact_person]"]').val(ui.item.contact_person);
                    $('input[name$="[contact_ruc]"]').val(ui.item.contact_ruc);
                    $('input[name$="[invoicing_address]"]').val(ui.item.invoicing_address);
                    //    $('input[name$="[shipping_address]"]').val(ui.item.shipping_address);

                },
                type: 'GET'
            });
        });

        $('input[name$="[customer_name]"]').autocomplete({
            source: '{{ path('customer_autocomplete') }}',
            select: function (event, ui) {
                $('input[name$="[customer_name]"]').val(ui.item.name);
                $('input[name$="[customer_email]"]').val(ui.item.email);
                $('input[name$="[customer_identification]"]').val(ui.item.identification);
                $('input[name$="[contact_person]"]').val(ui.item.contact_person);
                $('input[name$="[invoicing_address]"]').val(ui.item.invoicing_address);

                return false;
            },
        }).autocomplete("instance")._renderItem = function (ul, item) {
    return $("<li>")
        .append(
            "<a>" +
            "<strong>" + item.name + "</strong><br>" +
            "<small>" + (item.email || 'Sin correo') + "</small>" +
            "</a>"
        )
        .appendTo(ul);
};

    });
</script>
<script>
    $('#buscarSriNuevoCliente').click(function(){

    let ruc = $('input[name$="[identification]"]').val();


    if(ruc.length !== 13){

        alert('El RUC debe tener 13 números');
        return;

    }


    $.ajax({

        url: '{{ path("buscar_sri_cliente") }}',

        type:'POST',

        data:{
            ruc:ruc
        },


       beforeSend:function(){

    $('#buscarSriNuevoCliente')
        .html('<i class="fa fa-spinner fa-spin"></i> Consultando...')
        .prop('disabled',true);

},

        success:function(data){

    $('#buscarSriNuevoCliente')
        .html('<i class="fa fa-search"></i> Consultar SRI')
        .prop('disabled',false);


    $body.removeClass("loading");


    if(!data.error){

        $('input[name$="[name]"]').val(data.nombre);

    }else{

        alert(data.mensaje);

    }

},


        error:function(xhr){

            $body.removeClass("loading");

            alert(xhr.responseText);

        }


    });


});
</script>