{% block content %}
    <div class="container col-md-12 col-lg-12">

        <div class="col-md-12 col-lg-12 col-xs-12 cfj-bgcolor-white">
            <div class='box-tools-inner marg-sup' style=''>


                <input type="hidden" id="xfiltro" name="xfiltro" value="">
                <input type="hidden" id="xinicio" name="xinicio" value="">
                <input type="hidden" id="xfin" name="xfin" value="">

                <div class='form-group col-lg-2 col-md-2 col-xs-12'>
                    <div class="input-group">
                        <select id="criterior" name="criterior" class="form-control">
                            <option value="Ultimo Año" selected>Seleccionar</option>
                            <option value="actual">Hoy</option>
                            <option value="Ultima Semana">Ultima Semana</option>
                            <option value="Ultimo 14 Dias">Ultimo 14 Dias</option>
                            <option value="Ultimo Mes">Ultimo Mes</option>
                            <option value="Ultimo Año">Ultimo Año</option>


                        </select>
                    </div>
                </div>


                <div class='form-group col-lg-2 col-md-2 col-xs-12'>
                    <div class="input-group">
                        <select id="vergrafico" name="vergrafico" class="form-control">
                            <option value="uv" selected>Unidades Vendidas</option>
                            <option value="tt">Total Transaccionado</option>
                            <option value="tp">Total Pedidos</option>
                        </select>
                    </div>
                </div>


                <div class='form-group col-lg-2 col-md-2 col-xs-12'>
                    <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                        <input id="inicior" name="inicior" type="text" value="{#{inicio}#}" class="form-control"
                               placeholder="Desde">
                        <div class="input-group-addon">
                                <span class="">
                                    <i class="fa fa-calendar"></i>
                                </span>
                        </div>
                    </div>
                </div>
                <div class='form-group col-lg-2 col-md-2 col-xs-12'>
                    <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                        <input id="finr" name="finr" type="text" value="{#{inicio}#}" class="form-control"
                               placeholder="Hasta">
                        <div class="input-group-addon">
                                <span class="">
                                    <i class="fa fa-calendar"></i>
                                </span>
                        </div>
                    </div>
                </div>
                <div class='form-group col-lg-3 col-md-3 col-xs-12' align="center">
                    <button id="btn-dater" data-tab="todos"
                            class="btn cfj-deg cfj-actions-btn cfj-color-three btn-default btn-flat" type="submit">
                        <i class="fa fa-gear"></i> {% trans %}Filtrar{% endtrans %}
                    </button>
                </div>


            </div>
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <h4 id="uv" align="center">Total de Unidades Vendidas</h4>
                    <div class="col-md-12 col-xs-12 graph" id="chart_fcr"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 ">
                    <h4 id="tt" align="center">Total Transacción</h4>
                    <div class="col-md-12 graph" id="chart_fc2r"></div>

                </div>
            </div>


            <div class="row">
                <div class="col-md-12 ">
                    <h4 id="tp" align="center">Total Pedidos</h4>
                    <div class="col-md-12 graph" id="chart_fc1r"></div>

                </div>
            </div>


            <div class="row">
                <div class="col-md-12 ">
                    <h4 id="tv" align="center">Total Ventas</h4>
                    <div class="col-md-12 graph" id="chart_tvdmr"></div>
                </div>
            </div>


        </div>
    </div>
    <br>

    <br>


    <br>

{% endblock %} 

{% block javascripts %}


    <script type="text/javascript">
        var xventasDiariasXmarketplace;
        var xtotaltransaccionado;
        var xfacturacionXcanal;

        $(document).ready(function () {
            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
            $("[id*='chart_fc1r']").hide();
            $("[id*='chart_fc2r']").hide();
            $("[id*='chart_tvdmr']").hide();
            $("[id='uv']").show();
            $("[id='tt']").hide();
            $("[id='tp']").hide();
            $("[id='tv']").hide();

            $("#criterior").val('Ultimo Año');
            sendfiltro();

            function ocultar_div() {
                $("[id*='chart_fcr']").hide();
                $("[id*='chart_fc1r']").hide();
                $("[id*='chart_fc2r']").hide();
                $("[id*='chart_tvdmr']").hide();

                $("[id='uv']").hide();
                $("[id='tt']").hide();
                $("[id='tv']").hide();
                $("[id='tp']").hide();
            }

            $("#vergrafico").change(function () {
                ocultar_div();
                valorgrafico = $('#vergrafico').val();
                switch (valorgrafico) {
                    case 'uv':
                        $("[id='uv']").show();
                        $("[id='chart_fcr']").show();
                        break;
                    case 'tt':
                        $("[id='tt']").show();
                        $("[id='chart_fc2r']").show();
                        break;

                    case 'tp':
                        $("[id='tp']").show();
                        $("[id='chart_fc1r']").show();
                        break;
                    case 'tv':
                        $("[id='tv']").show();
                        $("[id='chart_tvdmr']").show();
                        break;
                }
                sendfiltro();
            });

            $("#btn-dater").click(function (e) {
                e.preventDefault();
                sendfiltro();
            });

            $("#criterior").change(function () {
                $("#inicior").val('');
                $("#finr").val('');
                sendfiltro();
            });

            function sendfiltro() {
                criterio = $("#criterior").val();
                inicio = $("#inicior").val();
                fin = $("#finr").val();

                if (criterio == '') {
                    if (inicio == "" || fin == "") {
                        alert('Los campos fechas no pueden estar vacios');
                        return;
                    }
                }

                $('#xinicio').val(inicio);
                $('#xfin').val(fin);

                var data = {
                    xfiltro: criterio,
                    xinicio: inicio,
                    xfin: fin,
                };

                $.ajax({
                    type: 'post',
                    url: '{{ path('app_report_linechart_render_ajax') }}',
                    data: data,
                    //dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, e) {
                            xventasDiariasXmarketplace = e.ventasDiariasXmarketplace;
                            xtotaltransaccionado = e.totaltransaccionado;
                            xfacturacionXcanal = e.facturacionXcanal;

                            google.charts.load('current', {'packages': ['corechart']});
                            google.charts.setOnLoadCallback(drawChartr2);
                        });
                    }
                });
            }
        });

        // 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(drawChartr);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChartr() {
            var data_tvdr = new google.visualization.DataTable();
            data_tvdr.addColumn('string', 'Fecha');
            data_tvdr.addColumn('number', 'Ventas');
            data_tvdr.addRows([
                {% for item50 in ventasDiariasXmarketplace %}

                {% if (item50.amount>0) %}
                ['{{ item50.fecha }}', parseFloat({{ item50.amount }})],
                {% endif %}
                {% endfor %}
            ]);

            console.log(data_tvdr);

            // Set chart options
            $widthchart = $('#chart_tvdmr').parent().width() - ($('#chart_tvdmr').parent().innerWidth() - $('#chart_tvdmr').parent().width());
            $width = $widthchart / 3;
            $padding = $width / 3;

            var options_tvdr = {
                title: 'Total de Ventas: {{ ventasDelDia[0]['total'] | number_format(2, '.', ',') }}',
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };
            var chart_tvdr = new google.visualization.LineChart(document.getElementById('chart_tvdmr'));
            chart_tvdr.draw(data_tvdr, options_tvdr);


            /*
            * Unidades vendidas 
            */
            // Create the data table.
            var data_fcr = new google.visualization.DataTable();
            data_fcr.addColumn('string', 'Mes');
            data_fcr.addColumn('number', 'Cantidad');
            data_fcr.addRows([
                {% for item1 in totaltransaccionado %}
                {% if (item1.cantidad_vendidas>0) %}
                ['{{ item1.fecha }}', parseInt({{ item1.cantidad_vendidas }})],
                {% endif %}
                {% endfor %}
            ]);
            console.log(data_fcr);
            // Set chart options
            $widthchart = $('#chart_fc').parent().width() - ($('#chart_fcr').parent().innerWidth() - $('#chart_fcr').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fcr = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };

            var chart_fcar = new google.visualization.LineChart(document.getElementById('chart_fcr'));
            chart_fcar.draw(data_fcr, options_fcr);

            var data_fc1r = new google.visualization.DataTable();
            data_fc1r.addColumn('string', 'Mes');
            data_fc1r.addColumn('number', 'Nro. Pedidos');
            data_fc1r.addRows([
                {% for item2 in facturacionXcanal %}
                {% if (item2.cantidadordenes>0) %}
                ['{{ item2.fecha }}', parseInt({{ item2.cantidadordenes }})],
                {% endif %}
                {% endfor %}
            ]);
            console.log(data_fc1r);

            // Set chart options
            $widthchart = $('#chart_fc1r').parent().width() - ($('#chart_fc1r').parent().innerWidth() - $('#chart_fc1r').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fc1r = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };


            var chart_fca1r = new google.visualization.LineChart(document.getElementById('chart_fc1r'));
            chart_fca1r.draw(data_fc1r, options_fc1r);


            // reporte total transaccionado//

            var data_fc2r = new google.visualization.DataTable();
            data_fc2r.addColumn('string', 'Mes');
            data_fc2r.addColumn('number', 'Transaccionado');
            data_fc2r.addRows([
                {% for item3 in totaltransaccionado %}
                {% if (item3.transaccionado>0) %}
                ['{{ item3.fecha }}', parseFloat({{ item3.transaccionado }})],
                {% endif %}
                {% endfor %}
            ]);

            console.log(data_fc2r);

            // Set chart options
            $widthchart = $('#chart_fc2r').parent().width() - ($('#chart_fc2r').parent().innerWidth() - $('#chart_fc2r').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fc2r = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };


            var chart_fca2r = new google.visualization.LineChart(document.getElementById('chart_fc2r'));
            chart_fca2r.draw(data_fc2r, options_fc2r);

            /*     $("[id*='chart_fc']").hide();
                 $("[id='uv']").hide();
                 $("[id='tt']").hide();
                 $("[id='tp']").hide();*/
        }

        //---------------------------------------------------------------//

        // filtro al llamar via ajax

        function drawChartr2() {
            var data_tvdr = new google.visualization.DataTable();
            data_tvdr.addColumn('string', 'Fecha');
            data_tvdr.addColumn('number', 'Ventas');

            tabladatos = [];
            for (i = 0; i < xventasDiariasXmarketplace.length; i++) {
                xnombre = xventasDiariasXmarketplace[i]['fecha'];
                xamount = xventasDiariasXmarketplace[i]['amount'];
                tabladatos.push([xnombre, parseFloat(xamount)]);
            }

            data_tvdr.addRows(tabladatos,);
            console.log(data_tvdr);

            // Set chart options
            $widthchart = $('#chart_tvdmr').parent().width() - ($('#chart_tvdmr').parent().innerWidth() - $('#chart_tvdmr').parent().width());
            $width = $widthchart / 3;
            $padding = $width / 3;

            var options_tvdr = {
                title: 'Total de Ventas: {{ ventasDelDia[0]['total'] | number_format(2, '.', ',') }}',
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };
            var chart_tvdr = new google.visualization.LineChart(document.getElementById('chart_tvdmr'));
            chart_tvdr.draw(data_tvdr, options_tvdr);

            /*
            * Unidades vendidas 
            */
            // Create the data table.
            var data_fcr = new google.visualization.DataTable();
            data_fcr.addColumn('string', 'Mes');
            data_fcr.addColumn('number', 'Cantidad');

            tabladatos = [];
            for (i = 0; i < xtotaltransaccionado.length; i++) {
                xnombre = xtotaltransaccionado[i]['fecha'];
                xamount = xtotaltransaccionado[i]['cantidad_vendidas'];
                tabladatos.push([xnombre, parseFloat(xamount)]);
            }

            data_fcr.addRows(tabladatos,);
            console.log(data_fcr);

            // Set chart options
            $widthchart = $('#chart_fc').parent().width() - ($('#chart_fcr').parent().innerWidth() - $('#chart_fcr').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fcr = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };

            var chart_fcar = new google.visualization.LineChart(document.getElementById('chart_fcr'));

            google.visualization.events.addListener(chart_fcar, 'error', function (googleError) {
                google.visualization.errors.removeError(googleError.id);
            });

            chart_fcar.draw(data_fcr, options_fcr);
            var data_fc1r = new google.visualization.DataTable();
            data_fc1r.addColumn('string', 'Mes');
            data_fc1r.addColumn('number', 'Nro. Pedidos');

            tabladatos = [];
            for (i = 0; i < xfacturacionXcanal.length; i++) {
                xnombre = xfacturacionXcanal[i]['fecha'];
                xamount = xfacturacionXcanal[i]['cantidadordenes'];
                tabladatos.push([xnombre, parseFloat(xamount)]);
            }

            data_fc1r.addRows(tabladatos,);
            console.log(data_fc1r);

            // Set chart options
            $widthchart = $('#chart_fc1r').parent().width() - ($('#chart_fc1r').parent().innerWidth() - $('#chart_fc1r').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fc1r = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            };

            var chart_fca1r = new google.visualization.LineChart(document.getElementById('chart_fc1r'));

            google.visualization.events.addListener(chart_fca1r, 'error', function (googleError) {
                google.visualization.errors.removeError(googleError.id);
            });

            chart_fca1r.draw(data_fc1r, options_fc1r);

            // reporte total transaccionado//

            var data_fc2r = new google.visualization.DataTable();
            data_fc2r.addColumn('string', 'Mes');
            data_fc2r.addColumn('number', 'Transaccionado');

            tabladatos = [];
            for (i = 0; i < xtotaltransaccionado.length; i++) {
                xnombre = xtotaltransaccionado[i]['fecha'];
                xamount = xtotaltransaccionado[i]['transaccionado'];
                tabladatos.push([xnombre, parseFloat(xamount)]);
            }

            data_fc2r.addRows(tabladatos,);
            console.log(data_fc2r);

            // Set chart options
            $widthchart = $('#chart_fc2r').parent().width() - ($('#chart_fc2r').parent().innerWidth() - $('#chart_fc2r').parent().width());
            $width = $widthchart / 2
            $padding = $width / 2

            var options_fc2r = {
                height: 400,
                fontSize: 12,
                curveType: 'function',
                colors: ['#37BC9B', '#DA4453'],
                pointSize: 5,
                chartArea: {
                    left: '5%',
                    width: '90%',
                    height: 350
                },
                vAxis: {
                    gridlines: {
                        color: '#e9e9e9',
                        count: 10
                    },
                    minValue: 0
                },
                legend: {
                    position: 'top',
                    alignment: 'center',
                    textStyle: {
                        fontSize: 12
                    }
                }
            }
            var chart_fca2r = new google.visualization.LineChart(document.getElementById('chart_fc2r'));

            google.visualization.events.addListener(chart_fca2r, 'error', function (googleError) {
                google.visualization.errors.removeError(googleError.id);
            });

            chart_fca2r.draw(data_fc2r, options_fc2r);
        }


        // Resize chart
        // ------------------------------

        $(function () {

            // Resize chart on menu width change and window resize
            $(window).on('resize', resize);
            $(".menu-toggle").on('click', resize);

            // Resize function
            function resize() {
                drawLine();
            }
        })
    </script>
{% endblock %}