{% extends "base.html.twig" %}
{% trans_default_domain 'core' %}

{% set table_columns = 8 %}

{% if not table_selectable is defined %}
    {# This variable MUST be explicitly set to false to hide checkboxes #}
    {# If you set this to false and you have a second listing that display them #}
    {# set explicitly to true in the second listing. #}
    {% set table_selectable = true %}
    {% set table_columns = table_columns + 1 %}
{% endif %}

{% block stylesheets %}
    <link rel="stylesheet" href=" {{ asset("plugins/datatables-net-bs/dataTables.bootstrap2.min.css") }}">
{% endblock %}

{% block actionheader %}

{% endblock %}

{% block searchform_container %}{% endblock %}

{% block body %}

    <article class="invoice-like">

        <header id="invoice-like-title" class="clearfix">
            {% block invoice_actions %}{% endblock %}
            {% block invoice_label %}{% endblock %}
        </header>

        {{ form_start(form, {'attr': {'class': 'form-stacked', 'id':'liquidacion' } }) }}

        <div class="box pad box-warning">

            <div class="box-header with-border">

                <div class="btn-group">

                    <a href="{{ path('liquidacion_index') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-list-alt"></i>
                        Listado
                    </a>
                    <a href="{{ path('liquidacion_add') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-file"></i>
                        Nuevo
                    </a>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <div id="invoice-like-customer-data" class="col-md-8">

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

                        <div class="row">
                            <div class="col-md-3 clearfix">
                                {{ form_row(form.series) }}
                            </div>
                            <div class="col-md-3 clearfix">
                                {{ form_label(form.number) }}
                                {{ form_widget(form.number, {'value' : "%09d"|format(form.number.vars.value) }) }}
                            </div>
                            <div class="col-md-6 clearfix">
                                {{ form_row(form.issue_date) }}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 clearfix">
                                <div class="form-group">
                                    {{ form_label(form.provider_identification) }}
                                    <div class="input-group">
                                        {{ form_widget(form.provider_identification) }}
                                        <span class="input-group-btn">
                                            <button id="buscarpro" type="button" class="btn btn-info btn-flat">
                                                <i class="glyphicon glyphicon-filter"></i>
                                            </button>
                                        </span>
                                    </div>
                                    {{ form_errors(form.provider_identification) }}
                                </div>
                            </div>

                            <div class="col-md-8 clearfix">
                                {% if formprovider is defined %}
                                    {{ form_label(form.provider_name) }}
                                    <div class="input-group">
                                        {{ form_widget(form.provider_name) }}
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-warning btn-flat"
                                                    onclick="buscarProviderModal();">&nbsp;<i
                                                        class="glyphicon glyphicon-search"></i>&nbsp;</button>
                                          <button type="button" class="btn btn-success btn-flat" data-toggle="modal"
                                                  data-target="#modal-default"><i
                                                      class="glyphicon glyphicon-plus"></i></button>
                                        </span>
                                    </div>
                                    {{ form_errors(form.provider_name) }}
                                {% else %}
                                    {{ form_row(form.provider_name) }}
                                {% endif %}
                            </div>
                        </div>
                        {# <div class="col-md-6 clearfix">
                          {{ form_row(form.contact_person) }}
                        </div>
                        #}
                        <div class="row">
                            <div class="col-md-6 clearfix">
                                <div class="form-group">
                                    {{ form_label(form.provider_email) }}
                                    <div class="input-group">
                                <span class="input-group-addon"><span
                                            class="glyphicon glyphicon-envelope"></span></span>
                                        {{ form_widget(form.provider_email) }}
                                    </div>
                                    {{ form_errors(form.provider_email) }}
                                </div>
                            </div>

                            <div class="col-md-6 clearfix">
                                {{ form_row(form.provider_address) }}
                            </div>
                            {#
                            <div class="col-md-6 clearfix">
                              {{ form_row(form.shipping_address) }}
                            </div>
                            #}
                        </div>
                    </div>


                    <div id="invoice-like-properties" class="col-md-4" style="display: none; visibility: hidden;">
                        <div id="invoice-like-properties" class="col-md-4">
                            <div class="panel panel-default">
                                <h3 class="panel-heading">{% trans %}abstract_invoice.form.properties{% endtrans %}</h3>

                                <div class="panel-body form-inline">
                                    {% block properties_form %}{% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>


                    {% block additional_form_data %}{% endblock %}
                </div>

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

                        <h3>Detalle</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/editliquidacion.html.twig', { 'form': form.items.vars.prototype, 'currency': currency })|e }}">
                            {% for item in form.items %}
                                {{ include('Item/editliquidacion.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 btn-primary"><span
                                    class="glyphicon glyphicon-plus glyphicon-white"></span>&nbsp;{% trans %}
                            abstract_invoice.form.item_add{% endtrans %}
                        </button>

                        <script type="text/javascript">
                            {% set filas =  1 %}
                            {% set filas =  form.items | length %}
                            let svindex ={{ filas }};
                            $('#invoice-like-add-item').on('click', function (event) {
                                event.preventDefault();
                                addFila();

                            });

                            function addFila() {
                                let collectionHolder = $('#invoice-like-items tbody');
                                let prototype = collectionHolder.attr('data-prototype');
                                let index = svindex++;

                                form = prototype.replace(/__name__/g, index);
                                form = form.replace('class="edit-item-row"', 'id="sv' + index + '" class="edit-item-row"');
                                collectionHolder.append(form);
                            }

                        </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>{% 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>
                                <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>

                {#<div class="row">
                    <div class="col-md-9">
                        <div class="row totals">
                            <div class="col-md-6">

                                <button type="button" id="invoice-like-add-itemspagos" class="btn btn-primary"><span
                                            class="glyphicon glyphicon-plus glyphicon-white"></span>&nbsp;Añadir Forma
                                    Pago
                                </button>
                                <script type="text/javascript">
                                    $('#invoice-like-add-itemspagos').on('click', function (event) {
                                        event.preventDefault();
                                        var collectionHolder = $('#invoice-like-itemspagos tbody');
                                        var prototype = collectionHolder.attr('data-prototype');
                                        form = prototype.replace(/__name__/g, collectionHolder.children().length);
                                        collectionHolder.append(form);
                                    });
                                </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>Total (USD)</th>
                                        <td class="cell-align-right  pago-amount">{{ entity.grossAmount|localizedcurrency(currency, app.request.locale) }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>#}

                <div id="invoice-like-notes" class="row">
                    {# <div class="col-md-6">
                      {{ form_row(form.terms) }}
                    </div>
                    #}
                    <div class="col-md-12">
                        {{ form_row(form.notes) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        {% if entity.statusString != 'anulado' and entity.statusString != 'autorizado' %}
                            <button type="submit" class="btn btn-success" name="save">
                                <i class="fa fa-save"></i>&nbsp;Guardar
                            </button>
                        {% endif %}
                    </div>
                </div>

                {{ form_rest(form) }}

            </div>
        </div>

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


    <div class="modalwait">

    </div>

    {% include "Core/provider.form.html.twig" %}

    {% include "Retencion/modalsearchprovider.html.twig" %}

    {% include "Invoice/modalsearchproduct.html.twig" %}

{% endblock %}

{% block javascripts %}

    <script src="{{ asset("plugins/datatables-net/jquery.dataTables.js") }}"></script>
    <script src="{{ asset("plugins/datatables-net-bs/dataTables.bootstrap.js") }}"></script>

    <script src="{{ asset('js/products.js') }}"></script>

    <script src="{{ asset('js/liquidacion-common.js') }}"></script>

    <script src="{{ asset("js/simpleDialog.min.js") }}"></script>

    <script>

        var oTableProvider = $("#retencion-table-provider")
            .on('processing.dt', function (e, settings, processing) {
                if (processing)
                    $('#load-table-provider').addClass('svtableloading');
                else
                    $('#load-table-provider').removeClass('svtableloading');
                /*$('#svtableloading').css( 'display', processing ? 'block' : 'none' );*/
            })
            .DataTable({
                responsive: true,
                bAutoWidth: false,
                sAjaxSource: "{{ path('provider_search_reference') }}",

                /*bProcessing: true,*/
                /*processing: true,*/
                serverSide: true,
                bSort: false,
                asStripeClasses: [],
                aLengthMenu: [[5, 10, 15], [5, 10, 15]],
                aoColumns: [{"bVisible": false}, {"width": "15%"}, {"width": "55%"}, {"width": "30%"}, {className: "cellnodisplay"}],
                language: {
                    sProcessing: "Procesando...",
                    sLengthMenu: "Mostrar _MENU_",
                    sZeroRecords: "No se encontraron resultados",
                    sEmptyTable: "Ningún dato disponible en esta tabla",
                    sInfo: "Mostrando del _START_ al _END_ de _TOTAL_ registros",
                    sInfoEmpty: "Mostrando del 0 al 0 de un total de 0 registros",
                    sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
                    sInfoPostFix: "",
                    sSearch: "Buscar:",
                    sUrl: "",
                    sInfoThousands: ",",
                    sLoadingRecords: "Cargando...",
                    oPaginate: {
                        sFirst: "Primero",
                        sLast: "Último",
                        sNext: "Siguiente",
                        sPrevious: "Anterior"
                    },
                    oAria: {
                        sSortAscending: ": Activar para ordenar la columna de manera ascendente",
                        sSortDescending: ": Activar para ordenar la columna de manera descendente"
                    },
                },
            });

        $('#retencion-table-provider_filter input').unbind();

        $('#providerparamBuscar').bind('keyup', function (e) {
            if (e.keyCode === 13) {
                oTableProvider.search($(this).val()).draw();
            }
        });

        $('#retencion-table-provider tbody').on('click', 'tr', function () {
            let sibling = this;

            let aux = sibling.getElementsByTagName("td")[0];
            let aux1 = sibling.getElementsByTagName("td")[1];
            let aux2 = sibling.getElementsByTagName("td")[2];
            let aux3 = sibling.getElementsByTagName("td")[3];

            document.getElementById("liquidacion_provider_identification").value = aux.innerHTML;
            document.getElementById("liquidacion_provider_name").value = aux1.innerHTML;
            document.getElementById("liquidacion_provider_email").value = aux2.innerHTML;
            document.getElementById("liquidacion_provider_address").value = aux3.innerHTML;
            document.getElementById("liquidacion_provider_address").focus();

            $("#modal-search-provider").modal('hide');
        });

        const divbuscarprovider = document.getElementById('retencion-table-provider_filter').parentElement.parentElement;
        divbuscarprovider.style.display = 'none';

        const divpaginateprovider = document.getElementById('retencion-table-provider_paginate');
        divpaginateprovider.style.paddingBottom = '0px';
        divpaginateprovider.style.paddingTop = '0px';

        var oTableProduct = $("#client-table-product")
            .on('processing.dt', function (e, settings, processing) {
                if (processing)
                    $('#load-table-product').addClass('svtableloading');
                else
                    $('#load-table-product').removeClass('svtableloading');
                /*$('#svtableloading').css( 'display', processing ? 'block' : 'none' );*/
            })
            .DataTable({
                responsive: true,
                bAutoWidth: false,
                sAjaxSource: "{{ path('product_vntsearch_reference') }}",

                /*bProcessing: true,*/
                bServerSide: true,
                bSort: false,
                asStripeClasses: [],
                aLengthMenu: [[5, 10, 15], [5, 10, 15]],
                aoColumns: [{"bVisible": false}, { "width": "15%" }, { "width": "55%" }, { "width": "30%" }, { className: "cellnodisplay" }],
                language: {
                    sProcessing: "Procesando...",
                    sLengthMenu: "Mostrar _MENU_",
                    sZeroRecords: "No se encontraron resultados",
                    sEmptyTable: "Ningún dato disponible en esta tabla",
                    sInfo: "Mostrando del _START_ al _END_ de _TOTAL_ registros",
                    sInfoEmpty: "Mostrando del 0 al 0 de un total de 0 registros",
                    sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
                    sInfoPostFix: "",
                    sSearch: "Buscar:",
                    sUrl: "",
                    sInfoThousands: ",",
                    sLoadingRecords: "Cargando...",
                    oPaginate: {
                        sFirst: "Primero",
                        sLast: "Último",
                        sNext: "Siguiente",
                        sPrevious: "Anterior"
                    },
                    oAria: {
                        sSortAscending: ": Activar para ordenar la columna de manera ascendente",
                        sSortDescending: ": Activar para ordenar la columna de manera descendente"
                    },
                },
            });

        $('#client-table-product_filter input').unbind();

        $('#productparamBuscar').bind('keyup', function (e) {
            if (e.keyCode === 13) {
                oTableProduct.search($(this).val()).draw();
            }
        });

        $('#client-table-product tbody').on('click', 'tr', function () {
            /*document.getElementById('productparamBuscar').value = '';*/
            let sibling = this;

            /*let prod = sibling.getElementsByTagName("td")[1];*/
            let descripcion = sibling.getElementsByTagName("td")[1];
            let precio = sibling.getElementsByTagName("td")[2];
            let stock = sibling.getElementsByTagName("td")[0];

            let imp = sibling.getElementsByTagName("td")[3];

            let index = document.getElementById('productindexId').value;
            if (index === 'undefined' || index.length === 0)
                index = 0;
            else
                index = index.replace('sv', '');

            /*document.getElementById("invoice_items_" + index + "_product").value = prod.innerHTML;*/
            document.getElementById("liquidacion_items_" + index + "_description").value = descripcion.innerHTML;
            document.getElementById("liquidacion_items_" + index + "_quantity").value = 1;
            document.getElementById("liquidacion_items_" + index + "_unitary_cost").value = precio.innerHTML;
            document.getElementById("liquidacion_items_" + index + "_taxes").value = imp.innerHTML;

            document.getElementById("liquidacion_items_" + index + "_quantity").focus();
            /*//document.getElementById("factura_items_" + index + "_quantity").select();
            //changeProduct(element, index);*/
            let element = $('#liquidacion_items_' + index + '_description');

            updateLiquidacionTotals('{{ path("liquidacion_form_totals") }}', $(element).parents('tr'));

            $("#modal-search-product").modal('hide');

        });

        const divbuscarproduct = document.getElementById('client-table-product_filter').parentElement.parentElement;
        divbuscarproduct.style.display = 'none';

        $(document).ready(function () {
            $.fn.enterkeytab = function () {
                $(this).on('keydown', 'input,text', function (e) {
                    var self = $(this)
                        , form = self.parents('form:eq(0)')
                        , focusable
                        , next
                    ;
                    if (e.keyCode == 13) {

                        if (e.currentTarget.id.indexOf('liquidacion_items') !== -1) {

                            if (e.currentTarget.id.indexOf('discount_percent') !== -1) {
                                console.log('filas ' + svindex);
                                let row = document.getElementById(e.currentTarget.id);
                                if (row) {
                                    let tr = $(row).parents('tr').attr('id')
                                    console.log(tr);
                                }
                            }
                        }
                        focusable = form.find('input').filter(':not(:disabled)');
                        next = focusable.eq(focusable.index(this) + 1);

                        if (next.length) {
                            //if disable try get next 10 fields
                            if (next.is(":disabled")) {
                                for (i = 2; i < 10; i++) {
                                    next = focusable.eq(focusable.index(this) + i);
                                    if (!next.is(":disabled"))
                                        break;
                                }
                            }
                            console.log($(next).attr("id"));
                            next.focus();
                        }
                        return false;
                    }
                });
            }
            $("#liquidacion").enterkeytab();
        });

        jQuery(function ($) {
            $(document).on('change', '.edit-item-row select, .edit-item-row input', function () {
                updateLiquidacionTotals('{{ path('liquidacion_form_totals') }}', $(this).parents('tr'));
            });
        });

        function tipodocumento(sender) {

            let maxlenght = 20;
            if (sender.value === '05') {
                maxlenght = 10;
            } else if (sender.value === '04') {
                maxlenght = 13;
            }
            document.getElementById("provider_identification").maxLength = maxlenght;
        }
    </script>

{% endblock %}