{% extends '@App/base.html.twig' %}
{% block title %}
    Reporting
{% endblock %}
{% block body %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['line','gauge']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Month');
            data.addColumn('number', 'Repair Orders: {{ total.repairOrders }}');
            data.addColumn('number', 'Videos: {{ total.videos }}');
            data.addColumn('number', 'iPay: {{ total.ipay }}');
            data.addColumn('number', 'CAQ: {{ total.caq }}');
            data.addColumn('number', 'MPI: {{ total.mpi }}');

            data.addRows([
                {% for month in months %}
                [
                    new Date({{ month.year }},{{ month.month }}, 1),
                    {{ month.totalRepairOrders }},
                    {{ month.videos }},
                    {{ month.ipay }},
                    {{ month.caq }},
                    {{ month.mpi }}
                ],
                {% endfor %}
            ]);

            var options = {
                chart: {
                    title: 'Repair Order Trends',
                    subtitle: 'Platform Usage By Feature'
                },
                width: $('#chart').width()-30,
                height: 500,
                axes: {
                    x: {
                        0: {side: 'top'}
                    }
                }
            };

            var chart = new google.charts.Line(document.getElementById('line_top_x'));

            chart.draw(data, google.charts.Line.convertOptions(options));

            var dataGuage = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['Videos', {{ guage.videos }}],
                ['iPay', {{ guage.ipay }}],
                ['CAQ', {{ guage.caq }}],
                ['MPI', {{ guage.mpi }}]
            ]);

            var optionsGuage = {
                width: $('#chart').width()-30, height: 300,
                greenFrom: 75, greenTo: 100,
                redFrom:0, redTo: 25,
                minorTicks: 5
            };

            var chartGuage = new google.visualization.Gauge(document.getElementById('chart_div'));

            chartGuage.draw(dataGuage, optionsGuage);
        }
    </script>
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row" id="chart">
                    <div class="col-xs-12">
                        {% include 'AppBundle:iService//Reporting:dateForm.html.twig' %}
                        <div id="line_top_x"></div>
                        <h1 style="padding-top:40px;">Feature Usage Vs Total Repair Orders (Converted %)</h1>
                        <div id="chart_div"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(function () {
            $('#start_date').bootstrapMaterialDatePicker({time: false});
            $('#end_date').bootstrapMaterialDatePicker({time: false});
        });
    </script>
{% endblock %}