@extends('layout')

@section('starplugin')
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        
        <!-- END PAGE LEVEL PLUGINS -->
@endsection

@section('content')
<!-- ---------------------------------------------------------- -->
<link href="{{ asset('assets/global/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/font-awesome/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ asset('assets/global/plugins/simple-line-icons/simple-line-icons.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css" />
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <!-- BEGIN PAGE BAR -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="#">Inicio</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Reportes</span>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Pedidos</span>
                    </li>
                </ul>
            </div>

            <div class="row">
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 margin-bottom-10">
					<div class="dashboard-stat blue-madison">
						<div class="visual">
                            <i class="fa fa-dollar-sign fa-icon-medium"></i>
						</div>
						<div class="details">
							<div class="number">
								 <span id="ventas_facturado"></span>
							</div>
							<div class="desc">
								 Total Facturado
							</div>
						</div>
						<a class="more" onclick="vermas(0)">
						    Ventas {{-- <i class="m-icon-swapright m-icon-white"></i> --}}
						</a>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<div class="dashboard-stat red-intense">
						<div class="visual">
							<i class="fa fa-shopping-cart"></i>
						</div>
						<div class="details">
							<div class="number">
                                <span id="producto_facturado"></span>
							</div>
							<div class="desc">
                                 <span id="producto_top"></span>
							</div>
						</div>
						<a class="more" onclick="vermas(1)">
						    Producto mas vendido{{--  <i class="m-icon-swapright m-icon-white"></i> --}}
						</a>
					</div>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<div class="dashboard-stat green-haze">
						<div class="visual">
							<i class="fa fa-users fa-icon-medium"></i>
						</div>
						<div class="details">
							<div class="number">
                                <span id="cliente_facturado"></span>
							</div>
							<div class="desc">								 
                                 <span id="cliente_top"></span>
							</div>
						</div>
						<a class="more" onclick="vermas(2)">
                            Mejor cliente {{-- <i class="m-icon-swapright m-icon-white"></i> --}}
						</a>
					</div>
				</div>
			</div>

            <!-- END PAGE BAR -->
            <!-- BEGIN PAGE TITLE-->
            <h1 class="page-title">
                Reporte de Pedidos
            </h1>
            <div class="col-md-12" style="background: white;">
                <div class="col-md-12 margin-bottom-30">
                    <div class="col-md-4">&nbsp;</div>
                    <div class="col-md-4" style="justify-content: center;display: flex;">
                        <div class="input-group input-large date-picker input-daterange" data-date="10/11/2012" data-date-format="dd/mm/yyyy" style="display: table" id="input_range">
                            <input type="text" class="form-control" id="desde" name="desde" value="{{date('01/m/Y')}}">
                            <span class="input-group-addon">
                            Hasta </span>
                            <input type="text" class="form-control" id="hasta" name="hasta" value="{{date('t/m/Y')}}">
                        </div>
                       <!--  <div class="form-group" style="display: none" id="input_mes">
                            <select name="mes" id="mes" class="form-control" data-live-search="true" data-size="8" >
                                <option value="01" {{ (date('m')=='01')?'selected':''}}>Enero</option>
                                <option value="02" {{ (date('m')=='02')?'selected':''}}>Febrero</option>
                                <option value="03" {{ (date('m')=='03')?'selected':''}}>Marzo</option>
                                <option value="04" {{ (date('m')=='04')?'selected':''}}>Abril</option>
                                <option value="05" {{ (date('m')=='05')?'selected':''}}>Mayo</option>
                                <option value="06" {{ (date('m')=='06')?'selected':''}}>Junio</option>
                                <option value="07" {{ (date('m')=='07')?'selected':''}}>Julio</option>
                                <option value="08" {{ (date('m')=='08')?'selected':''}}>Agosto</option>
                                <option value="09" {{ (date('m')=='09')?'selected':''}}>Septiembre</option>
                                <option value="10" {{ (date('m')=='10')?'selected':''}}>Octubre</option>
                                <option value="11" {{ (date('m')=='11')?'selected':''}}>Noviembre</option>
                                <option value="12" {{ (date('m')=='12')?'selected':''}}>Diciembre</option>
                            </select>                            
                        </div> -->
                        {{-- <div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
                            <input type="text" class="form-control text-center" name="fecha" id="fecha" placeholder="" value="{{date('d/m/Y')}}">
                            <span class="input-group-btn">
                                <button class="btn default" type="button">
                                    <i class="fas fa-calendar"></i>
                                </button>
                            </span>
                        </div> --}}
                    </div>
                    <div class="col-md-4">&nbsp;</div>
                </div>                
            </div>
            <div clas="row">
                <div class="col-md-12">                
                    <div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption">
								<span aria-hidden="true" class="icon-graph"></span>&nbsp;&nbsp;Reporte de Pedidos
							</div>
                            <div class="actions" style="padding-left: 6px;">
								<a href="#"  onClick="exportVentas()" id="btn_export_ventas" class="btn btn-icon-only btn-circle green" title="Descargar Vista" style="display: none">
                                    <i class="fa fa-download"></i>
                                </a>
                                <a href="#"  onClick="exportArticulos()" id="btn_export_articulos" class="btn btn-icon-only btn-circle green" title="Descargar Vista" style="display: none">
                                    <i class="fa fa-download"></i>
                                </a>
                                <a href="#"  onClick="exportClientes()" id="btn_export_clientes" class="btn btn-icon-only btn-circle green" title="Descargar Vista" style="display: none">
                                    <i class="fa fa-download"></i>
                                </a>
							</div>
							<ul class="nav nav-tabs">
								<li class="" id="tab_ventas">
									<a href="#portlet_tab3" onclick="ventas()" data-toggle="tab" aria-expanded="false" id="btn_tab_ventas">
									Ventas </a>
								</li>
								<li class="" id="tab_articulos">
									<a href="#portlet_tab2" onclick="articulos()" data-toggle="tab" aria-expanded="false" id="btn_tab_productos">
									Productos </a>
								</li>
								<li class="" id="tab_clientes">
									<a href="#portlet_tab1" onclick="clientes()" data-toggle="tab" aria-expanded="true" id="btn_tab_clientes"> 
									Clientes </a>
								</li>
							</ul>
						</div>
						<div class="portlet-body">
							<div class="tab-content">
								<div class="tab-pane active" id="portlet_tab1">
									<table class="table table-striped table-bordered table-hover" id="tblClientes">
                                        <thead>                                    
                                            <tr role="row" class="heading">
                                                <th width="">#</th>
                                                <th width="">Cliente</th>
                                                <th width="">Coins Obtenidos</th>                                        
                                                <th width="">Coins Canjeados</th>
                                                <th width="">Compras</th>
                                                <th width="">Pagado</th>
                                            </tr>                            
                                        </thead>
                                        <tbody id="clientes_body"> 
                                        
                                        </tbody>
                                        <tfoot>
                                            <!-- Fila donde se mostrarán los totales -->
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <!-- ... más celdas si es necesario -->
                                            </tr>
                                        </tfoot>
                                    </table>
								</div>
								<div class="tab-pane" id="portlet_tab2">
									<table class="table table-striped table-bordered table-hover" id="tblArticulos">
                                        <thead>                                    
                                            <tr role="row" class="heading">
                                                <th width="">Categoria</th>
                                                <th width="">Producto</th>
                                                <th width="">Cantidad</th>                                        
                                                <th width="">Facturado</th>
                                            </tr>                            
                                        </thead>
                                        <tbody id="articulos_body"> 
                                        
                                        </tbody>
                                        <tfoot>
                                            <!-- Fila donde se mostrarán los totales -->
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <!-- ... más celdas si es necesario -->
                                            </tr>
                                        </tfoot>
                                    </table>
								</div>
								<div class="tab-pane" id="portlet_tab3">
                                    <table class="table table-striped table-bordered table-hover" id="tblVentas">
                                        <thead>                                    
                                            <tr role="row" class="heading">
                                                <th width="">Fecha</th>
                                                <th width="">Pedido x APP</th>                                        
                                                <th width="">Pedido Manual</th>
                                                <th width="">Facturado</th>
                                            </tr>                            
                                        </thead>
                                        <tbody id="ventas_body"> 
                                        
                                        </tbody>
                                        <tfoot>
                                            <!-- Fila donde se mostrarán los totales -->
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <!-- ... más celdas si es necesario -->
                                            </tr>
                                        </tfoot>
                                    </table>									
								</div>
							</div>
						</div>
					</div>          
                </div>                
            </div>
            <div class="row">
                <div class="col-md-6">                
                    
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
        <!-- END CONTENT BODY -->
    </div>
    <!-- END MODALS -->
<!-- END CONTENT -->       
@endsection

@section('endplugin')
        <!-- BEGIN CORE PLUGINS -->
        <script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->

        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <!-- END PAGE LEVEL PLUGINS -->

        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="{{ asset('assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/scripts/table-managed.js?x=k') }}" type="text/javascript"></script>
        <script type="text/javascript" src="{{asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js') }}" charset="UTF-8"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->

        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="{{ asset('assets/layouts/layout/scripts/layout.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/pages/FileSaver/FileSaver.min.js?') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/pages/tableExport.min.js?x=') }}" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->

        <script>
            $(document).ready(function(){
                // PICKERS
                    $('.date-picker').datepicker({
                        language: 'es',
                        format: 'dd/mm/yyyy',
                        rtl: App.isRTL(),
                        autoclose: true,
                        todayBtn: 'linked',
                        todayHighlight: true,
                        forceParse: true,
                        orientation: "bottom"
                    });

                    $('.timepicker-24').timepicker({
                        defaultTime: false,
                        autoclose: true,
                        minuteStep: 5,
                        showSeconds: false,
                        showMeridian: false
                    });
                    // handle input group button click
                    $('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
                        e.preventDefault();
                        $(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
                    });

                    // SELECT
                    var ComponentsBootstrapSelect = function () {

                        var handleBootstrapSelect = function() {
                            $('.bs-select').selectpicker({
                                iconBase: 'fas',
                                tickIcon: 'fa-check'
                            });
                        }

                        return {
                            //main function to initiate the module
                            init: function () {
                                handleBootstrapSelect();
                            }
                        };

                    }();

                    if (App.isAngularJsApp() === false) {
                        jQuery(document).ready(function() {
                            ComponentsBootstrapSelect.init();
                        });
                    }
                    $("#input_range").on('change',function(){
                        if($("#tab_articulos").hasClass("active")){
                            articulos();
                        }
                        if($("#tab_clientes").hasClass("active")){
                            clientes();
                        }
                        if($("#tab_ventas").hasClass("active")){
                            ventas();
                        }
                        totales();
                    });
                    $("#input_mes").on('change',function(){
                        ventas();
                        totales();
                    });
                        TableManaged.init();                              
                        //Al agregar un producto rellena el formulario para realizar el pedido

                        function totales() {            
                            desde = $("#desde").val().split('/');
                            hasta = $("#hasta").val().split('/');         
                            url = "{{ config('constants.API_URL').'loginpublic/reportestotales/' }}";
                            $.ajax({
                                type: "POST", 
                                url: url,
                                data: {
                                    'desde': desde[2]+"-"+desde[1]+"-"+desde[0],
                                    'hasta': hasta[2]+"-"+hasta[1]+"-"+hasta[0]
                                },
                                dataType: "JSON",
                                success: function (data) { 
                                    $("#ventas_facturado").text('$'+ new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(data.facturado).replace('€' , ''));
                                    $("#producto_top").text(data.producto.categoria+' '+data.producto.producto);
                                    $("#producto_facturado").text('$'+new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(data.producto.facturado).replace('€' , ''));
                                    $("#cliente_top").text(data.cliente.per_nombre);
                                    $("#cliente_facturado").text('$'+new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(data.cliente.total).replace('€' , ''));
                                    //console.log(data);                  
                                } 
                            });
                        }
                        totales();
                        setTimeout(function() {
                            // Simular clic en el botón ventas
                            $("#btn_tab_ventas").trigger("click");
                        }, 1000); // Esperar 2 segundos
            })

            getHora = function(fecha) {
                n = new Date(fecha);
                h = n.getHours();
                m = n.getMinutes();
                return (h+":"+(m > 9 ? m : "0" + m));
            }

            vermas = function(tab){
                if(tab==0){
                    $('#btn_tab_ventas').trigger('click');
                }
                else if(tab==1){
                    $('#btn_tab_productos').trigger('click');
                }
                else if(tab==2){
                    $('#btn_tab_clientes').trigger('click');
                }
            }

            function exportVentas(){
                $('#tblVentas').tableExport({fileName:"ventas",type:'excel'});
            }
            function exportArticulos(){
                $('#tblArticulos').tableExport({fileName:"articulos",type:'excel'});
            }
            function exportClientes(){
                $('#tblClientes').tableExport({fileName:"clientes",type:'excel'});
            }

            function ventas() {
                $("#btn_export_clientes").css("display","none");
                $("#btn_export_articulos").css("display","none");
                $("#btn_export_ventas").css("display","block");
                //$("#input_mes").css("display", "block");
                //$("#input_range").css("display", "none");
                seleccionado = $("#mes").val();
                //seleccionado = 09;
                var date = new Date();
                var mes = new Date(date.getFullYear()+'-'+seleccionado+'-10');
                var primerDia = new Date(mes.getFullYear(), mes.getMonth(), 1);
                var ultimoDia = new Date(mes.getFullYear(), mes.getMonth() + 1, 0);
                let tblVentas = $('#tblVentas').DataTable();
                desde = $("#desde").val().split('/');
                hasta = $("#hasta").val().split('/');
                tblVentas.clear().draw();
                url = "{{ config('constants.API_URL').'loginpublic/reportesventas/' }}";
                $.ajax({
                    type: "POST", 
                    url: url,
                    data: {
                        /* 'mes':seleccionado,
                        'anno':ultimoDia.getFullYear() */
                        'desde': desde[2]+"-"+desde[1]+"-"+desde[0],
                        'hasta': hasta[2]+"-"+hasta[1]+"-"+hasta[0]
                    },
                    dataType: "JSON",
                    success: function (data) { 
                        //console.log(data);
                        var i;
                        var app=0;
                        var manual=0;
                        var facturado=0;
                        //Recorremos 1 por uno los vuelos y creamos los options para el select
                        for (i = 0; i < data['data'].length; i++) {
                           /*  app+=parseInt(data["data"][i].app);
                            manual+=parseInt(data["data"][i].manual);
                            facturado+=parseFloat(data["data"][i].facturado); */
                            let f = data['data'][i].dia.split('-');
                            var nuevaFila = tblVentas.row.add([
                                f[2]+'/'+f[1]+'/'+f[0],
                                data["data"][i].app,
                                data['data'][i].manual,                                
                                "$"+parseFloat(data['data'][i].facturado).toFixed(2)
                            ]).draw().nodes(); 
                            $(nuevaFila).find('td:eq(3)').addClass('text-right');
                            //$("#totalManual").text('Total: '+manual);                  
                        }     
                       /*  tblVentas.row.add([
                            'TOTAL:',
                            app,
                            manual,                                
                            "$"+parseFloat(facturado)
                        ]).draw();    */          
                    } 
                });                
            }

            function articulos() {
                $("#btn_export_clientes").css("display","none");
                $("#btn_export_articulos").css("display","block");
                $("#btn_export_ventas").css("display","none");
                $("#input_mes").css("display", "none");
                $("#input_range").css("display", "table");
                //seleccionado = $("#ventaselect").val();
                desde = $("#desde").val().split('/');
                hasta = $("#hasta").val().split('/');
                let tblVentas = $('#tblArticulos').DataTable();
                //console.log(desde+'---'+hasta);
                tblVentas.clear().draw();
                url = "{{ config('constants.API_URL').'loginpublic/reportesarticulos/' }}";
                $.ajax({
                    type: "POST", 
                    url: url,
                    data: {
                        'desde': desde[2]+"-"+desde[1]+"-"+desde[0],
                        'hasta': hasta[2]+"-"+hasta[1]+"-"+hasta[0]
                    },
                    dataType: "JSON",
                    success: function (data) { 
                        //console.log(data);
                        var i;
                        var app=0;
                        var manual=0;
                        var facturado
                        //Recorremos 1 por uno los vuelos y creamos los options para el select
                        for (i = 0; i < data['data'].length; i++) {
                            var nuevaFila = tblVentas.row.add([
                                data["data"][i].categoria,
                                data["data"][i].producto,
                                data['data'][i].cantidad,                                
                                "$"+parseFloat(data['data'][i].facturado).toFixed(2)
                            ]).draw().nodes(); 
                            $(nuevaFila).find('td:eq(3)').addClass('text-right');
                            //$("#totalManual").text('Total: '+manual);                  
                        }                   
                    } 
                });
            }
            function clientes() {
                $("#btn_export_clientes").css("display","block");
                $("#btn_export_articulos").css("display","none");
                $("#btn_export_ventas").css("display","none");
                $("#input_mes").css("display", "none");
                $("#input_range").css("display", "table");
                //seleccionado = $("#ventaselect").val();
                desde = $("#desde").val().split('/');
                hasta = $("#hasta").val().split('/');
                let tblVentas = $('#tblClientes').DataTable();
                tblVentas.clear().draw();
                url = "{{ config('constants.API_URL').'loginpublic/reportesclientes/' }}";
                $.ajax({
                    type: "POST", 
                    url: url,
                    data: {
                        'desde': desde[2]+"-"+desde[1]+"-"+desde[0],
                        'hasta': hasta[2]+"-"+hasta[1]+"-"+hasta[0]
                    },
                    dataType: "JSON",
                    success: function (data) { 
                        //console.log(data);
                        var i;
                        for (i = 0; i < data['data'].length; i++) {
                            var nuevaFila = tblVentas.row.add([
                                data["data"][i].per_id,
                                data["data"][i].per_nombre,                                
                                "$"+parseFloat(data['data'][i].obtenidos).toFixed(2), 
                                "$"+parseFloat( data['data'][i].canjeados).toFixed(2),                                
                                data['data'][i].compras,
                                "$"+parseFloat( data['data'][i].total).toFixed(2)
                            ]).draw().nodes();
                            $(nuevaFila).find('td:eq(2)').addClass('text-right'); 
                            $(nuevaFila).find('td:eq(3)').addClass('text-right'); 
                            //console.log($(nuevaFila).find('td:eq(5)').addClass('text-right'));                  
                        }                   
                    } 
                });
            }                     
        </script>
@endsection