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

{% block headercontent %}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <h3 class="cfj-bgcolor-three pageTitle cfj-color-white">
                Reportes
            </h3>
        </div>
    </div>
{% endblock %}    

{% block content %}

    <style>
        .input-group.date {
            margin-top: 2px !important;
            position: relative
        }

        select.form-control {
            border-radius: 100px !important
        }
    </style>

    <div class="container col-md-12 col-lg-12 marg-sup">

        <div class="row">
            <div class="col-md-4 col-lg-4 col-xs-12 marg-sup">
                <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                    <h4 style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three" align="center">
                        Dinero Transaccionado</h4>
                    <div class='form-group col-lg-4 col-md-4 col-xs-12' align="center">
                        <div class="input-group">
                            <select id="criterio1" style="text-align:center" name="criterio1" class="form-control">
                                <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" selected>Ultimo Año</option>
                            </select>
                        </div>
                    </div>


                    <div class='form-group col-lg-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="inicio1" name="inicio1" 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-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="fin1" name="fin1" type="text" value="{#{fin}#}" 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-12 col-md-12 col-xs-12' align="center">
                        <button id="btn-date1" 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>
                    <br>
                    <div id="totalTransaccionado" class="col-lg-12 col-md-12 col-xs-12" align="center">
                    </div>
                </div>

                <div align="center" class="col-md-12 col-lg-12 col-xs-12 graph" id="chart_tvdm"></div>
            </div>

            <div class="col-md-4 col-lg-4 col-xs-12 marg-sup">
                <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                    <h4 style="margin-top:0" class="cfj-h4-reports cfj-deg  cfj-color-three" align="center">Pedidos</h4>
                    <div class='form-group col-lg-4 col-md-4 col-xs-12' align="center">
                        <div class="input-group">
                            <select id="criterio4" name="criterio4" class="form-control">
                                <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" selected>Ultimo Año</option>


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

                    <div class='form-group col-lg-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="inicio4" name="inicio4" type="text" value="" 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-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="fin4" name="fin4" type="text" value="{#{fin}#}" 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-12 col-md-12 col-xs-12' align="center">
                        <button id="btn-date4" 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>
                    <br>
                    <div id="totalPedidos" class="col-lg-12 col-md-12 col-xs-12" align="center">
                    </div>

                </div>
                {#<div class="col-md-12 col-lg-12 graph" id="chart_fc1"></div> #}
                <div align="center" class="col-md-12 col-lg-12 col-xs-12 graph" id="chart_fc1"></div>
            </div>


            <div class="col-md-4 col-lg-4 col-xs-12 marg-sup">
                <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
                    <h4 style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three" align="center">
                        Unidades Vendidas</h4>
                    <div class='form-group col-lg-4 col-md-4 col-xs-12' align="center">
                        <div class="input-group">
                            <select id="criterio6" name="criterio6" class="form-control">
                                <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" selected>Ultimo Año</option>


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

                    <div class='form-group col-lg-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="inicio6" name="inicio6" type="text" value="" 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-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="fin6" name="fin6" type="text" value="{#{fin}#}" 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-12 col-md-12 col-xs-12' align="center">
                        <button id="btn-date6" 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>
                    <br>
                    <div id="totalUnidades" class="col-lg-12 col-md-12 col-xs-12" align="center">
                    </div>
                </div>

                {#<div class="col-md-12 col-lg-12 graph" id="chart_unidades"></div> #}
                <div align="center" class="col-md-12 col-lg-12 col-xs-12 graph" id="chart_unidades"></div>

            </div>


        </div>

        <br>

        <div class="row">
            <div class="col-md-12 col-lg-12 col-xs-12">
                {{ render(controller('AppBundle:Reports:reporteslinechar_render')) }}
            </div>
        </div>


        <div class="row marg-sup">
            <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 style="margin-top:0" class="cfj-h4-reports cfj-deg-violeta cfj-color-three" align="center">
                        Productos TOP Vendidos</h4>


                    <div class='form-group col-lg-4 col-md-4 col-xs-12' align="center">
                        <div class="input-group">
                            <select id="criterio9" style="text-align:center" name="criterio9" class="form-control">
                                <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" selected>Ultimo Año</option>
                            </select>
                        </div>
                    </div>


                    <div class='form-group col-lg-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="inicio9" name="inicio9" 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-4 col-md-4 col-xs-12'>
                        <div class="input-group date" data-provide="datepicker" data-date-format="dd-mm-yyyy">
                            <input id="fin9" name="fin9" type="text" value="{#{fin}#}" 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-12 col-md-12 col-xs-12' align="center">
                        <button id="btn-date9" 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 id="tabla-datos" class="col-lg-12 col-md-12 col-xs-12">
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 col-lg-12 col-xs-12 marg-sup">
        <div style="padding:0" class="cfj-body cfj-bgcolor-white col-lg-12 col-md-12 col-xs-12">
            <h4 style="margin-top:0" class="cfj-h4-reports cfj-deg cfj-color-three" align="center">Publicaciones /
                Marketplace</h4>
            <div class="col-md-12 col-lg-12 col-xs-12 graph" id="chart_ppm"></div>
        </div>
    </div>

{% endblock %} 

{% block javascripts2nd %}
    <script type="text/javascript">

        var counter = 0;
        var colors = ['#dd8985', '#17a2b8', '#F5DEB3', '#00CED1'];
        var transactedRowsArray  = [{% for item in ventasDiariasXmarketplace %}['{{ item.nombre }}', {{ item.totaltransact }}],{% endfor %}];
        var topProductsRowsArray = [{% for item in cantProdXmarketplace %}['{{ item.nombre }}', {{ item.cantidad }}, 'color: ' + colors[counter++]],{% endfor %}];
        var soldUnitsRowsArray   = [{% for item in facturacionXcanal %}['{{ item.nombre }}', {{ item.cantidad }} ],{% endfor %}];
        var ordersRowsArray      = [{% for item in facturacionXcanal %}['{{ item.nombre }}', {{ item.cantidadordenes }} ],{% endfor %}];

        var totalTransacted = "${{ totales['totales']['total_transaccionado'] | number_format(2, '.', ',') }}";
        var totalsoldUnits  = "{{ totales['totales']['total_units'] }}";
        var totalOrders     = "{{ totales['totales']['total_pedidos'] }}";

        function tablaInicial() {
            return `<table class="table table-hover table-responsive" id="tablaProductosTop">
            <thead>
                <tr>
                    <th>Producto</th>
                    <th>Ventas</th>
                    <th>Transaccionado</th>
                </tr>
            </thead>
            <tbody>            
                {% for item in prodMasVend %}                  
                <tr>           
                    <td class="cfj-title">{{ item.nombreproducto }}</td>
                    <td class="cfj-price">{{ item.cantidad }}</td>
                    <td class="cfj-price">${{ item.transaccionado | number_format(2, '.', ',') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>`
        };

        function cabecera() {
            return `<table id='tablesorter1' class="table table-hover table-responsive">
            <thead>
                <tr>
                    <th>Producto</th>
                    <th>Ventas</th>
                    <th>Transaccionado</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="10">
                        Cargando productos ....
                    </td>	
                </tr>
            </tbody>		
        </table>`
        };

    </script>

    {% javascripts '@AppBundle/Resources/public/loader.js' '@AppBundle/Resources/public/js/Reports/index.js'%}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}