{% load humanize %}
{% load i18n %}
{% load memberaudit %}

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">
            &times;
        </span></button>
        <h4 class="modal-title" id="myModalLabel">{% translate 'Asset Container' %}</h4>
    </div>

    <div class="modal-body">
        {% if error %}
            <p class="text-danger">{{ error }}</p>
        {% else %}
            <ol class="breadcrumb">
                <li>{{ parent_asset.location.name }}</li>
                <li class="active"><img src="{{ parent_asset_icon_url }}"/>&nbsp;&nbsp;{{ parent_asset.name_display }} ({{ parent_asset.group_display }})</li>
            </ol>

            <div class="table-responsive">
                <table class="table table-striped table-width-fix" id="tab_asset_children">
                    <thead>
                        <tr>
                            <th>{% translate 'Name' %}</th>
                            <th>{% translate 'Qty' %}</th>
                            <th>{% translate 'Group' %}</th>
                            <th>{% translate 'Volume' %}</th>
                            <th>{% translate 'Price' %}</th>
                            <th>{% translate 'Total' %}</th>
                        </tr>
                    </thead>

                    <tbody> </tbody>

                    <tfoot>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>{% translate 'Grand Total:' %}</th>
                        <th></th>
                    </tfoot>
                </table>
            </div>
        {% endif %}
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            {% translate 'Close' %}
        </button>
    </div>
</div>

<script>
    {% if parent_asset %}
        $(document).ready(function () {
            $('#tab_asset_children').DataTable({
                ajax: {
                    url: "{% url 'memberaudit:character_asset_container_data' character.pk parent_asset.pk %}",
                    dataSrc: 'data',
                    cache: false
                },
                columns: [
                    { data: 'name',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    {
                        data: 'quantity',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    { data: 'group' },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number( ',', '.', 2 )
                    },
                    {
                        data: 'price',
                        render: $.fn.dataTable.render.number( ',', '.', 2 )
                    },
                    {
                        data: 'total',
                        render: $.fn.dataTable.render.number( ',', '.', 2 )
                    },
                ],
                order: [[0, "asc"], [1, "asc"]],
                footerCallback: function ( row, data, start, end, display ) {
                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    // Total over all pages
                    var total = api
                        .column( 5 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Update footer
                    $( api.column( 5 ).footer() ).html(
                        total.toLocaleString()
                    );
                }
            });
        });
    {% endif %}
</script>
