{% trans_default_domain 'core' %}

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

        <h3>{% trans %}abstract_invoice.form.items{% endtrans %}</h3>

        <table id="invoice-like-items" class="table table-condensed table-striped align-middle">
            <thead>
            <tr>
                <th></th>
                {# CAMPO CODIGO DEL PRODUCTO
                {% if bundle_exists('SiwappProductBundle') %}
                <th class="col-md-1 cell-align-center">Cod.</th>
                {% endif %}
                #}
                <th class="">{% trans %}item.form.description{% endtrans %}</th>
                <th class="col-md-1 cell-align-center">{% trans %}item.form.quantity{% endtrans %}</th>
                <th class="col-md-2 cell-align-center">{% trans %}item.form.unitary_cost{% endtrans %}</th>
                <th class="col-md-1 cell-align-center">{% trans %}item.form.discount{% endtrans %}</th>
                <th class="col-md-2 cell-align-left">{% trans %}item.form.taxes{% endtrans %}</th>
                <th class="cell-align-right">{% trans %}item.form.total{% endtrans %}</th>
            </tr>
            </thead>
            <tbody data-prototype="{{ include('Item/edit.html.twig', { 'form': form.items.vars.prototype, 'currency': currency })|e }}">
            {% for item in form.items %}
            {{ include('Item/edit.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">

        <button type="button" id="invoice-like-add-item" class="btn-sm btn-primary"><span
                class="glyphicon glyphicon-plus glyphicon-white"></span>&nbsp;{% trans %}
            abstract_invoice.form.item_add{% endtrans %}
        </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);
                addProductNameAutocomplete('{{ path('product_autocomplete_reference') }}');
                addInvoiceItemDescriptionAutocomplete('{{ path('item_autocomplete_description') }}');
            });

        </script>


    </div>
    <div class="col-md-4 col-md-offset-2">
        <table id="invoice-like-totals" class="table table-condensed table-striped">
            <tbody>
            <tr>
                <th class="cell-size-large">{% trans %}abstract_invoice.form.subtotal{% endtrans %}</th>
                <td class="cell-align-right base-amount">{{ entity.baseAmount|localizedcurrency(currency, app.request.locale) }}</td>
            </tr>
            <tr>
                <th class="cell-size-large">Descuento</th>
                <td class="cell-align-right discount-amount">{{ entity.discountAmount|localizedcurrency(currency, app.request.locale) }}</td>
            </tr>
            <tr>
                <th>{% trans %}abstract_invoice.form.total_taxes{% endtrans %}</th>
                <td class="cell-align-right tax-amount">{{ entity.taxAmount|localizedcurrency(currency, app.request.locale) }}</td>
            </tr>
            <tr>
                <th>{% trans with {'%currency%': currency} %}abstract_invoice.form.total{% endtrans %}</th>
                <input type="hidden" id="invoice_tt_aux" value="{{ entity.grossAmount }}">
                <td class="cell-align-right gross-amount"
                    style="font-weight: bold; font-size: 18px;">{{ entity.grossAmount|localizedcurrency(currency, app.request.locale) }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

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

        <h3>Detalle Forma de Pago</h3>

        <table id="invoice-like-itemspagos" class="table table-condensed table-striped align-middle">
            <thead>
            <tr>
                <th></th>
                <th class="col-md-6 cell-align-center">Forma Pago</th>
                <th class="col-md-2 cell-align-center">Valor</th>
                <th class="col-md-2 cell-align-center">Tiempo</th>
                <th class="col-md-1 cell-align-center">Plazo</th>
            </tr>
            </thead>
            <tbody data-prototype="{{ include('Item/editpago.html.twig', { 'form': form.pagos.vars.prototype, 'currency': currency })|e }}">

            {% for item in form.pagos %}
            {{ include('Item/editpago.html.twig', { 'form': item, 'entity': item.vars.value, 'currency': currency }) }}
            {% endfor %}

            {# TODO: Action buttons: add/remove items, taxes, sort... #}
            </tbody>
        </table>

    </div>

</div>