{% extends edc_base_template %}
{% load static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
{% endblock %}

{% block document_ready %}
    <script>
        $(document).ready(function() {
            var inCol  = {% if show_assignment %}4{% else %}3{% endif %};
            var outCol = {% if show_assignment %}5{% else %}4{% endif %};
            var balCol = {% if show_assignment %}6{% else %}5{% endif %};
            var unitQtyInCol  = {% if show_assignment %}7{% else %}6{% endif %};
            var unitQtyOutCol = {% if show_assignment %}8{% else %}7{% endif %};
            var unitBalCol = {% if show_assignment %}9{% else %}8{% endif %};

            function sumCol(api, idx) {
                return api.column(idx, {search: 'applied'}).data().reduce(function(acc, val) {
                    var n = parseFloat(String(val).replace(/<[^>]*>/g, '').trim());
                    return acc + (isNaN(n) ? 0 : n);
                }, 0);
            }

            $('#site_stock_table').DataTable({
                order: [[0, 'asc'], [1, 'asc'], [2, 'asc']],
                pageLength: 50,
                footerCallback: function() {
                    var api = this.api();
                    var totalIn  = sumCol(api, inCol);
                    var totalOut = sumCol(api, outCol);
                    var balance  = totalIn - totalOut;
                    var totalUnitIn  = sumCol(api, unitQtyInCol);
                    var totalUnitOut = sumCol(api, unitQtyOutCol);
                    var unitBalance  = totalUnitIn - totalUnitOut;
                    $(api.column(inCol).footer()).text(totalIn.toLocaleString());
                    $(api.column(outCol).footer()).text(totalOut.toLocaleString());
                    $(api.column(balCol).footer()).text(balance.toLocaleString());
                    $(api.column(unitQtyInCol).footer()).text(totalUnitIn.toLocaleString());
                    $(api.column(unitQtyOutCol).footer()).text(totalUnitOut.toLocaleString());
                    $(api.column(unitBalCol).footer()).text(unitBalance.toLocaleString());
                },
            });
        });
    </script>
{% endblock %}

{% block main %}
    {{ block.super }}
    <div class="container">
        <div class="col-sm-12">

            <div style="padding:10px;">
                <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                {% if location_name %}
                    <a href="{% url "edc_pharmacy:site_stock_report_url" %}">Site stock report</a> &rsaquo;
                    {{ location_name }}
                {% else %}
                    Site stock report
                {% endif %}
            </div>

            {% if groups %}
            <table id="site_stock_table" class="table table-condensed table-hover">
                <thead>
                    <tr>
                        <th>Location</th>
                        {% if show_assignment %}<th>Assignment</th>{% endif %}
                        <th>Container Type</th>
                        <th>Container</th>
                        <th style="text-align:right;">Qty in</th>
                        <th style="text-align:right;">Qty out</th>
                        <th style="text-align:right;">Qty Bal</th>
                        <th style="text-align:right;">Unit Qty In</th>
                        <th style="text-align:right;">Unit Qty Out</th>
                        <th style="text-align:right;">Unit Qty Bal</th>
                    </tr>
                </thead>
                <tbody>
                    {% for group in groups %}
                        {% for row in group.rows %}
                        <tr {% if row.balance < 0 %}style="color:#c00;"{% endif %}>
                            <td style="white-space:nowrap;"><a href="{% url "edc_pharmacy:site_stock_report_url" location_id=row.location_id %}">{{ group.location }}</a></td>
                            {% if show_assignment %}<td>{{ row.assignment }}</td>{% endif %}
                            <td>{{ row.container_type }}</td>
                            <td>{{ row.container }}</td>
                            <td style="text-align:right;">{{ row.qty_in }}</td>
                            <td style="text-align:right;">{{ row.qty_out }}</td>
                            <td style="text-align:right;">
                                {% if row.qty_balance == 0 %}
                                    <span class="label label-success">0</span>
                                {% elif row.qty_balance < 0 %}
                                    <span class="label label-danger">{{ row.qty_balance }}</span>
                                {% else %}
                                    {{ row.qty_balance }}
                                {% endif %}
                            </td>
                            <td style="text-align:right;">{{ row.unit_qty_in }}</td>
                            <td style="text-align:right;">{{ row.unit_qty_out }}</td>
                            <td style="text-align:right;">
                                {% if row.unit_qty_balance == 0 %}
                                    <span class="label label-success">0</span>
                                {% elif row.unit_qty_balance < 0 %}
                                    <span class="label label-danger">{{ row.unit_qty_balance }}</span>
                                {% else %}
                                    {{ row.unit_qty_balance }}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr style="font-weight:bold; border-top:2px solid #ddd;">
                        <td>Total</td>
                        {% if show_assignment %}<td></td>{% endif %}
                        <td></td>
                        <td></td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:right;"></td>
                    </tr>
                </tfoot>
            </table>
            {% else %}
                <p class="text-muted">No stock currently held at site locations.</p>
            {% endif %}

        </div>
    </div>
{% endblock main %}