{% extends "AppBundle::layout_backend.html.twig" %}
{% block stylesheets %}
    <style>
        .graph {
            padding: 20px;
            border-radius: 3px;
            margin-bottom: 30px;
            background-clip: padding-box;
            background-color: #ffffff;
            background: white;
            display: block;
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }
    </style>
{% endblock %}
{% 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=''>

                <form id="form-filtro8" name="form-filtro8" action="{{ path('app_report_general') }}" method="get">

                    <input type="hidden" id="xfiltro8" name="xfiltro8" value="{{ criterio8 }}">
                    <input type="hidden" id="xinicio8" name="xinicio8" value="">
                    <input type="hidden" id="xfin8" name="xfin8" value="">

                    <div class='form-group col-lg-2 col-md-2 col-xs-12'>
                        <div class="input-group">
                            <select id="criterio" name="criterio" 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="vergrafico8" name="vergrafico8" class="form-control">
                                <option value="" selected>Ver por</option>
                                <option value="uv">Unidades Vendidas</option>
                                <option value="tt">Total Transaccionado</option>
                                <option value="tp">Total Pedidos</option>
                                <option value="tv">Total Ventas</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="inicio" name="inicio" 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="fin" name="fin" 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-date" 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>

                </form>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12 col-xs-12">
                    <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                        <h4 id="uv" style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three"
                            align="center">Total Unidades Vendidas</h4>
                        <div class="col-md-12 graph" id="chart_fcvent"></div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 col-lg-12 col-xs-12">
                    <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                        <h4 id="tt" style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three"
                            align="center">Total Transaccionado</h4>
                        <div class="col-md-12 graph" id="chart_fcvent2"></div>

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


            <div class="row">
                <div class="col-md-12 col-lg-12 col-xs-12">
                    <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                        <h4 id="tp" style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three"
                            align="center">Total Pedidos</h4>
                        <div class="col-md-12 graph" id="chart_fcvent1"></div>

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


            <div class="row">
                <div class="col-md-12 col-lg-12 col-xs-12">
                    <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                        <h4 id="tv" style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three"
                            align="center">Total Ventas</h4>

                        <div class="col-md-12 graph" id="chart_venttvdm"></div>

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


        </div>
    </div>
    <br>

    <br>


    <br>

{% endblock %} 

{% block javascripts %}
    <script src="{{ asset('bundles/app/plugins/datepicker/locales/bootstrap-datepicker.es.js') }}"
            type="text/javascript"></script>

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

        $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');

        $(document).ready(function () {


            function ocultar_div() {
                $("[id*='chart_fcvent']").hide();
                $("[id='uv']").hide();
                $("[id='tt']").hide();
                $("[id='tv']").hide();
                $("[id='tp']").hide();
            }


            $("#criterio8").change(function () {
                valorcriterio = $('#criterio8').val();
                $('#xfiltro8').val(valorcriterio);
                $('#form-filtro8').submit();
            });


            $("#vergrafico8").change(function () {
                ocultar_div();

                valorgrafico = $('#vergrafico8').val();

                switch (valorgrafico) {
                    case 'uv':
                        $("[id='uv']").show();
                        $("[id='chart_fcvent']").show();
                        break;
                    case 'tt':
                        $("[id='tt']").show();
                        $("[id='chart_fcvent2']").show();
                        break;
                    case 'tp':
                        $("[id='tp']").show();
                        $("[id='chart_fcvent1']").show();
                        break;
                    case 'tv':
                        $("[id='tv']").show();
                        $("[id='chart_venttvdm']").show();
                        break;

                }

            });


            $("#btn-date8").click(function (e) {
                e.preventDefault();
                if ($("#inicio8").val() == "" || $("#fin8").val() == "") {
                    alert('Los campos fechas no pueden estar vacios');
                    return;
                }
                if ($("#inicio8").val() > $("#fin8").val()) {
                    alert('La fecha de inicio debe ser menor que la fecha fin');
                    return;
                }

                inicio = $("#inicio8").val();
                fin = $("#fin8").val();

                $('#xinicio8').val(inicio);
                $('#xfin8').val(fin);

                $('#form-filtro8').submit();
            });

        });


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

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart8() {


            var data_tvd = new google.visualization.DataTable();
            data_tvd.addColumn('string', 'Fecha');
            data_tvd.addColumn('number', 'Ventas');
            data_tvd.addRows([
                {% for item50 in ventasDiariasXmarketplace %}

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

            console.log(data_tvd);

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

            var options_tvd = {
                title: 'Total de Ventas: {{ ventasDelDia[0]['total'] | number_format(2, '.', ',') }}',
                curveType: 'none',
                legend: {position: 'bottom'},
                height: 500,

            };


            /*var options_tvd = {
                    width:500,
                    curveType: 'function',
                    height:500,
                    legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
                    };*/

            // Instantiate and draw our chart, passing in some options.
            //var chart_tvd = new google.visualization.PieChart(document.getElementById('chart_tvdm'));
            //chart_tvd.draw(data_tvd, options_tvd);

            var chart_tvd = new google.visualization.LineChart(document.getElementById('chart_venttvdm'));
            chart_tvd.draw(data_tvd, options_tvd);


            /*
            * Unidades vendidas
            */
            // Create the data table.
            var data_fc = new google.visualization.DataTable();
            data_fc.addColumn('string', 'Mes');
            data_fc.addColumn('number', 'Cantidad');
            data_fc.addRows([
                {% for item1 in totaltransaccionado %}
                {% if (item1.cantidad_vendidas>0) %}
                ['{{ item1.fecha }}', parseInt({{ item1.cantidad_vendidas }})],
                {% endif %}
                {% endfor %}
            ]);


            console.log(data_fc);


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

            /*  var options_fc = {
                      'width':$widthchart,
                      'colors':['#343a40','#dc3545'],
                      'chartArea':{left:$padding/2,top:30},
                      'height':500,
                      'legend':{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
                      };*/


            var options_fc = {
                curveType: 'none',
                legend: {position: 'bottom'},
                height: 500,
            };

            // Instantiate and draw our chart, passing in some options.
            //var chart_fca = new google.visualization.PieChart(document.getElementById('chart_fcvent'));
            //chart_fca.draw(data_fc, options_fc);


            var chart_fca = new google.visualization.LineChart(document.getElementById('chart_fcvent'));

            chart_fca.draw(data_fc, options_fc);


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


            console.log(data_fc1);

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

            /*var options_fc1 = {
                    'width':$widthchart,
                    'chartArea':{left:$padding/2,top:30},
                    'height':500,
                    'legend':{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
                    };*/

            var options_fc1 = {
                curveType: 'none',
                legend: {position: 'bottom'},
                height: 500,
            };


            // Instantiate and draw our chart, passing in some options.
            //var chart_fca1 = new google.visualization.PieChart(document.getElementById('chart_fcvent1'));
            //chart_fca1.draw(data_fc1, options_fc1);

            var chart_fca1 = new google.visualization.LineChart(document.getElementById('chart_fcvent1'));
            chart_fca1.draw(data_fc1, options_fc1);


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

            console.log(data_fc2);

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

            /*var options_fc1 = {
                    'width':$widthchart,
                    'chartArea':{left:$padding/2,top:30},
                    'height':500,
                    'legend':{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
                    };*/

            var options_fc2 = {
                curveType: 'none',
                legend: {position: 'bottom'},
                height: 500,
            };


            var chart_fca2 = new google.visualization.LineChart(document.getElementById('chart_fcvent2'));
            chart_fca2.draw(data_fc2, options_fc2);


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


        }
    </script>
{% endblock %}