{#<div id="table-distribution">#}
<div class="datatable-scroll" style="overflow-x: auto">
    <table class="table datatable-basic">
        <thead>
        <tr role="row">
            <th style="width: 100px;">Tiendas </th>
            {% for size in sizes %}
                <th style="width: 80px;">
                    <a href="" class="btn border-grey-800 text-grey-800 btn-flat btn-rounded btn-icon btn-xs" style="margin: auto; display: block; min-width: 35px;margin-bottom: 10px;cursor: auto; background-color: white">
                        {{ size.getDescription }}
                    </a>
                </th>
            {% endfor %}
        </tr>
        </thead>

        <tbody class="tdistribution-distro">
        {% for shop in shops %}
            {% set indexShop = loop.index %}
            <tr class="table-row">
                <td style="width: 50px;">{{ shop.getName }}</td>

                {% for size in sizes %}
                    {% set indexSize = loop.index %}
                    {% set index = indexShop  ~ '-' ~ indexSize %}

                    <td style="width: 40px;" id="distro_td-{{ indexShop }}-{{ indexSize }}" class="text-center">

                        <input style="width: 40px; display: inline !important;font-size: 12px;padding-left: 5px;padding-right: 5px;text-align: center;" type="text"
                               id="distro_tdi-{{ indexShop }}-{{ indexSize }}"
                               name="distro_tdi-{{ indexShop }}-{{ indexSize }}"
                               data-shop="{{ shop.getId }}"
                               data-size="{{ size.getId }}"
                               value="{{ nums[index] }}"
                               class="money form-control cell-order-article-detail-distro" onchange="fillPricesCellFullDistroFilled()">
                    </td>

                {% endfor %}
                <td style="width: 40px;" class="text-center"><input id="total_row_detail_article_{{ indexShop }}" style="height: 40px; width: 40px; display: inline !important; text-align: center" type="text"  value="0" disabled></td>

            </tr>
        {% endfor %}

            <tr class="table-row">
                <td style="width: 50px;">Total</td>

                {% for size in sizes %}
                    {% set indexSize = loop.index %}
                    <td style="width: 40px;" class="text-center">
                        <input id="total_column_detail_article_{{ indexSize }}" style="height: 40px; width: 40px; display: inline !important; text-align: center" type="text"  value="0" disabled>
                    </td>
                {% endfor %}
                <td style="width: 40px;" class="text-center">
                    <input id="total_detail_article" style="height: 40px; width: 40px; display: inline !important; text-align: center; font-weight: bold;" type="text"  value="0" disabled>
                </td>
            </tr>
        </tbody>

    </table>
</div>


<script>
    $('.cell-order-article-detail-distro').change(function () {
        var name = $(this).attr('name');
        var nameSplited = name.split("-");
        var row = nameSplited[1];
        var column = nameSplited[2];

        fillTotalRow(row);
        fillTotalColumn(column);
        fillTotal();
    });

    function fillTotalRow(row) {
        var total = 0;

        $('input[id^=distro_tdi-'+row+'-]').each(function () {
            total += Number($(this).val());
        });

        $('#total_row_detail_article_'+row).val(total);
    }

    function fillTotalColumn(column) {
        var total = 0;

        $('input[id^=distro_tdi-][id$=-'+column+']').each(function () {
            total += Number($(this).val());
        });

        $('#total_column_detail_article_'+column).val(total);
    }

    function fillTotal() {
        var total = 0;

        $('input[id^=distro_tdi-]').each(function () {
            total += Number($(this).val());
        });

        $('#total_detail_article').val(total);
    }
</script>
{#</div>#}