{% extends '@RxConnexion/Admin/global.html.twig' %}
{% block body %}
    <style>
        table {
            border-collapse: collapse;
        }
        table tr,
        table td {
            background-color: #ffffff;
        }
        table td {
            border: 1px solid #c0c0c0;
            padding: 2px 5px;
        }
        thead td{
            background: #ADD8E6 !important;
        }
        .total-border {
            border-bottom: 4px double #383838;
            border-top: 2px solid #383838;
        }
        .sub-total-border {
            border-bottom: 1px solid #383838;
            border-top: 2px solid #383838;
        }
        .border-bottom {
            border-bottom: 1px solid #383838;
        }
        .strong {
            font-weight: 600;
        }
    </style>
    <h5 class="report-header">{{ page_title }}</h5>
    <table width="100%">
        <thead class="">
        <tr>
            <td>Code</td>
            <td>Item</td>
            {% for branch in branches %}
                <td nowrap colspan="{{ branch.colspan }}">{{ branch.description }}</td>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for item in items %}
            <tr>
                <td nowrap>{{ item.codes }}</td>
                <td nowrap>{{ item.description }}</td>
                {% for branch in branches %}
                    {% set remainingColspan = branch.colspan %}
                    {% for record in records if record.item_id == item.id and record.branch_id == branch.id %}
                        {% for serialNo in record.serialNos %}
                            {% set remainingColspan = remainingColspan - 1 %}
                            <td nowrap>{{ serialNo }}</td>
                        {% endfor %}
                        {% if remainingColspan > 0 %}
                            <td colspan="{{ remainingColspan }}"></td>
                        {% endif %}
                    {% else %}
                        <td colspan="{{ branch.colspan }}"><small></small></td>
                    {% endfor %}
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script>
        //<![CDATA[
        jQ(document).ready(function(){
            report_preview.init();
        });
        //]]>
    </script>
{% endblock %}