{% extends "AppBundle::layout_backend.html.twig" %}
{% block content %}

    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>Producto</th>
            <th>Ventas</th>
            <th>Transaccionado</th>
            <th>Cantidad por Marketplace</th>
        </tr>
        </thead>
        <tbody>
        {% for item in prodMasVend %}
            <tr>
                <td>{{ item.nombreproducto }}</td>
                <td>{{ item.cantidad }}</td>
                <td>{{ item.transaccionado | number_format(2, '.', ',') }}</td>
                <td>
                    <div id="chart_div{{ item.productoid }}"></div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>


{% endblock %} 

{% block javascripts %}

    <script src="{{ asset('bundles/app/loader.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages': ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            {% for iProdMasVend in prodMasVend %}
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Marketplace');
            data.addColumn('number', 'Cantidad');
            data.addRows([

                {% for item in prodMasVendMarket[iProdMasVend.productoid] %}
                ['{{ item.nombre }}', {{ item.cantidad }} ],
                {% endfor %}
            ]);

            // Set chart options
            var options = {
                'title': 'Cantidad Vendida por Marketplace',
                'width': 300,
                'height': 100,
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div{{ iProdMasVend.productoid }}'));
            chart.draw(data, options);
            {% endfor %}
        }
    </script>
{% endblock %}