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

{% 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('liqreembolso_index') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-list-alt"></i>
                        Listado
                    </a>
                    <a href="{{ path('liqreembolso_add') }}" class="btn btn-app">
                        <i class="glyphicon glyphicon-file"></i>
                        Nuevo
                    </a>

                    {#
                        {% if not entity.id or entity.isDraft() %}
                            <button type="submit" class="btn btn-app" name="save_draft">
                                 {% trans %}form.submit_draft{% endtrans %}
                            </button>
                        {% endif %}



                        <button type="submit" class="btn btn-app" name="save_email">
                            {% trans %}form.submit_email{% endtrans %}
                        </button>

                    {% if entity.isOpen() %}
                        <button type="submit" class="btn btn-app" name="save_close">
                            {% trans %}form.submit_close{% endtrans %}
                        </button>
                    {% endif %}

                    {% if entity.id %}
                        <input type="submit" class="btn btn-app" name="save_pdf"
                               value="{% trans %}form.submit_pdf{% endtrans %}">
                    {% endif %}
                     #}


                    {#{% if entity.id %}

                        {% if entity.statusString != 'anulado' %}
                            <a class="btn btn-app" href="{{ path('invoice_show_pdf', {'id': entity.id}) }}">
                                <i class="fa fa-file-pdf-o"></i>Pdf</a>

                            <a class="btn btn-app" href="{{ path('invoice_email', {'id': entity.id}) }}">
                                <i class="glyphicon glyphicon-envelope"></i>Mail</a>

                            <a class="btn btn-app" href="{{ path('invoice_anular', {'id': entity.id}) }}"
                               data-confirm="Esta seguro que desea ANULAR la factura">
                                <i class="glyphicon glyphicon-remove"></i>Anular</a>

                            <a class="btn btn-app" href="{{ path('invoice_delete', {'id': entity.id}) }}"
                               data-confirm="{% trans %}form.submit_delete_confirm{% endtrans %}">
                                <i class="glyphicon glyphicon-trash"></i>{% trans %}form.submit_delete{% endtrans %}</a>


                        {% endif %}

                    {% endif %}
                #}
                </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-search"></i>
                                            </button>
                                        </span>
                                    </div>
                                    {{ form_errors(form.provider_identification) }}
                                </div>
                            </div>

                            <div class="col-md-8 clearfix">
                                {% if formprovider is defined %}
                                    <div class="form-group">
                                        {{ 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-success btn-flat" data-toggle="modal"
                                                      data-target="#modal-default"><i
                                                          class="glyphicon glyphicon-plus"></i></button>
                                            </span>
                                        </div>
                                    </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/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 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>{% 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-12">
                        <div class="form-group">
                            <div class="input-group">
                                <h3>Reembolsos</h3>
                            </div>
                        </div>

                        <table id="invoice-like-itemsreembolsos"
                               class="table table-condensed table-striped align-middle">
                            <thead>
                            </thead>
                            <tbody data-prototype="{{ include('Item/editreembolso.html.twig', { 'form': form.reembolsos.vars.prototype, 'currency': currency })|e }}">
                            {% for item in form.reembolsos %}
                                {{ include('Item/editreembolso.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-itemsreembolso" class="btn btn-primary"><span
                                    class="glyphicon glyphicon-plus glyphicon-white"></span>&nbsp;Añadir Reembolso
                        </button>
                        <script type="text/javascript">
                            $('#invoice-like-add-itemsreembolso').on('click', function (event) {
                                event.preventDefault();
                                var collectionHolder = $('#invoice-like-itemsreembolsos 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-re" 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-reembo-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-reembo-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-reembo-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>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>

                <br>
                <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' %}&nbsp;&nbsp;
                            <button type="submit" class="btn btn-success" name="savesend" id="btn-save">
                                <i class="fa fa-save"></i>&nbsp;Guardar y Enviar SRI
                            </button>&nbsp;&nbsp;
                            <button type="submit" class="btn btn-info" name="save">
                                <i class="fa fa-save"></i>&nbsp;Guardar
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {{ form_rest(form) }}
        </div>
        {{ form_end(form) }}
    </article>

    <div class="modalwait">

    </div>

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

{% endblock %}

{% block javascripts %}
    {{ parent() }}

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

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            const form = document.getElementById('liquidacion');
            const btnSave = document.getElementById('btn-save');

            if (!form || !btnSave) return;

            form.addEventListener('submit', function () {

                // Evita doble submit
                if (btnSave.disabled) {
                    return false;
                }

                // Deshabilita el botón
                btnSave.disabled = true;

                // Cambia texto / icono
                btnSave.innerHTML =
                    '<i class="fa fa-spinner fa-spin"></i>&nbsp;Procesando...';

                // Opcional: bloquear todos los submits
                const buttons = form.querySelectorAll('button[type="submit"]');
                buttons.forEach(b => b.disabled = true);

                // Mostrar overlay si deseas
                $('.modalwait').show();
            });
        });

        document.querySelectorAll('button[type="submit"]').forEach(btn => {
            btn.addEventListener('click', function () {
                document.getElementById('submit-action').value = this.name;
            });
        });

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

            $(document).on('change', '.edit-item-row-re select, .edit-item-row-re input', function () {
                updateLiquidacionItemsReembolsoTotals('{{ path('itemsreembolso_form_totals') }}', $(this).parents('tr'));
            });
        });

    </script>

{% endblock %}