{% extends "Admin/USR/clientes_menu.html.twig" %}
{% trans_default_domain 'config' %}


{% block activeTab %}
    <div class="pad tab-pane active" id="tab_1-1">
        <div class="row">
            <div class="col-md-12 clearfix">
                {{ form_start(form, {'action': path('admin_contador_show', { 'id': entity.id, 'slug': entity.id }) }) }}
                <div class="box pad box-warning">

                    <div class="box-body">

                        <div class="row">

                            <div class="col-md-2 clearfix">
                                {{ form_row(form.escontador) }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 clearfix">
                                <div class="row">
                                    <div class="col-md-8 clearfix">
                                        <div class="form-group">
                                            {{ form_row(form.razon_social) }}
                                        </div>
                                    </div>
                                    {#<div class="col-md-4 clearfix">
                                        <div class="form-group">
                                            {{ form_row(form.username) }}
                                        </div>
                                    </div>#}
                                </div>


                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">

                                <h3>Empresas</h3>

                                <table id="invoice-like-items" class="table table-condensed table-striped align-middle">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th class="">Empresa</th>
                                    </tr>
                                    </thead>
                                    <tbody data-prototype="{{ include('Admin/USR/itemempresaedit.html.twig', { 'form': form.items.vars.prototype, 'currency': currency })|e }}">
                                    {% for item in form.items %}
                                        {{ include('Admin/USR/itemempresaedit.html.twig', { 'form': item, 'entity': item.vars.value, 'currency': currency }) }}
                                    {% endfor %}
                                    {# TODO: Action buttons: add/remove items, taxes, sort... #}
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <div class="row totals">
                            <div class="col-md-6 col-xs-6">

                                <button type="button" id="invoice-like-add-item" class="btn btn-primary"><span
                                            class="glyphicon glyphicon-plus glyphicon-white"></span> Agregar Empresa
                                </button>

                                <script type="text/javascript">

                                    $('#invoice-like-add-item').on('click', function (event) {
                                        event.preventDefault();
                                        var collectionHolder = $('#invoice-like-items tbody');
                                        var prototype = collectionHolder.attr('data-prototype');
                                        form = prototype.replace(/__name__/g, collectionHolder.children().length);
                                        collectionHolder.append(form);
                                        addContadorEmpresaItemDescriptionAutocomplete('{{ path('item_contador_empresa_autocomplete_description') }}');
                                    });

                                </script>
                            </div>
                        </div>

                        <br>
                        <div class="form-actions col-md-12">
                            <button type="submit" class="btn btn-success btn-lg">
                                <span class="fa fa-save"></span>&nbsp;
                                {% trans %}form.save{% endtrans %}
                            </button>

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


       <script>
           function addContadorEmpresaItemDescriptionAutocomplete(path) {
               $('.contador-empresa-autocomplete-description:not(.ui-autocomplete-input)').each(function () {
                   $(this).autocomplete({
                       source: path,
                       select: selectContadorItemAutocomplete,
                   }).autocomplete( "instance" )._renderItem = renderContadorItemAutocomplete;
               });
           }

           function renderContadorItemAutocomplete(ul, item) {
               return $('<li>')
                   .append('<a>' + item.razonsocial + '</a>')
                   .appendTo(ul);
           }

           function selectContadorItemAutocomplete(event, ui) {
               var $target = $(this);
               $target.val(ui.item.id);
               var $row = $target.parents('tr');
               // CODIGO DEL PRODUCTO
               $row.find('[name$="[reference]"]').val(ui.item.id);
               $row.find('[name$="[empresa]"]').val(ui.item.razonsocial);

               return false;
           }

       </script>


{% endblock %}