{% extends 'datatable.html.twig' %}

{% block page_title %}{{ 'entity.shipping_invoice_summary'|trans }}{% endblock %}

{% block page_content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-body ">
                    <div class="col-sm-8">
                    </div>
                    <div class="col-sm-4 text-right">
                        <a class="btn btn-primary" href="{{ path('app_shipping_invoice_summary_recalculate') }}"
                           title="{{ 'entity.shipping_invoice_summary_recalculate'|trans }}">
                            {{ 'entity.shipping_invoice_summary_recalculate'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    {{ sg_datatables_render(datatable) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $('#sg-datatables-shipping_invoice_summary_datatable').on('xhr.dt', function ( e, settings, json, xhr ) {

            $('.summary-content').remove();

            if (!json.summaries) {
                return;
            }

            let sumData = json.summaries;

            let chargedToCustomer = '<div style="display:inline-block;padding:5px 10px;background:#e7e8e8"><strong>' + sumData['charged_to_customer'] + '</strong> € cobrado</div>';
            let paidToCarrier = '<div style="display:inline-block;padding:5px 10px;background:#cff7fd"><strong>' + sumData['paid_to_carrier'] + '</strong> € pagado</div>';
            let difference = '<div style="display:inline-block;padding:5px 10px;background:#e7e8e8"><strong>' + sumData['difference'] + '</strong> € diferencia</div>';
            let diffPercentage = '<div style="display:inline-block;padding:5px 10px;background:#cff7fd"><strong>' + sumData['diff_percentage'] + '</strong> %</div>';

            let summaryContent = chargedToCustomer + paidToCarrier + difference + diffPercentage;

            let $markUp = '<div class="summary-content" style="float:right">' + summaryContent + '</div>';

            $('.dataTables_scrollHead').before($markUp);

        });
    </script>
{% endblock %}