{% extends '@App/base.html.twig' %}
{% block title %}
    Reporting
{% endblock %}
{% block stylesheets %}
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        {% include 'AppBundle:iService//Reporting:dateForm.html.twig' %}
                        <div class="row">
                            <div class="col-md-2">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">Brakes</div>
                                    <ul class="list-group">
                                        {% set TotalBrakes = 0 %}
                                        {% for depth,brake in brakes %}
                                            <li class="list-group-item"><b>{{ depth }} mm: </b>{{ brake }}</li>
                                            {% set TotalBrakes = TotalBrakes + brake %}
                                        {% endfor %}
                                    </ul>
                                    <div class="panel-footer"><b>Total: {{ TotalBrakes }}</b></div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">Tires</div>
                                    <ul class="list-group">
                                        {% set TotalTires = 0 %}
                                        {% for tread,tire in tires %}
                                            <li class="list-group-item"><b>{{ tread }} mm: </b>{{ tire }}</li>
                                            {% set TotalTires = TotalTires + tire %}
                                        {% endfor %}
                                    </ul>
                                    <div class="panel-footer"><b>Total: {{ TotalTires }}</b></div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <table id="table_reporting" class="table table-hover table-striped table-bordered text-center">
                                    <thead>
                                    <tr>
                                        <th>Groups</th>
                                        <th>Items</th>
                                        <th>Values</th>
                                        <th>Quantity</th>
                                    </tr>
                                    </thead>
                                    </tfoot>
                                    <tbody id="">
                                    {% for groupName,group in mpiServiceItems %}
                                        {% for itemName,item in group %}
                                            {% for valueName,value in item %}
                                                <tr>
                                                    <td>{{ groupName }}</td>
                                                    <td>{{ itemName }}</td>
                                                    <td>{{ valueName }}</td>
                                                    <td>{{ value }}</td>
                                                </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>



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