@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

    <link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    @php
        $cliente=config('app.CLIENTE');

        //crear array meses para el select con el nombre y el valor en formato  solo con los meses del año actual
        $meses = array();
        $nombreMeses = [
            "01" => "Enero",
            "02" => "Febrero",
            "03" => "Marzo",
            "04" => "Abril",
            "05" => "Mayo",
            "06" => "Junio",
            "07" => "Julio",
            "08" => "Agosto",
            "09" => "Septiembre",
            "10" => "Octubre",
            "11" => "Noviembre",
            "12" => "Diciembre"
            ];
        // agregar a meses solo hasta el mes actual con su nombre y en formato YYYYMM
        for ($i=1; $i <= date('m'); $i++) { 
            $meses[date('Y').str_pad($i, 2, "0", STR_PAD_LEFT)] = $nombreMeses[str_pad($i, 2, "0", STR_PAD_LEFT)];
        }

    @endphp
@endsection

@section('content')
    
        <div class="row pt-1">
            <div class="col-sm" style="width: 100%;">
                <div class="input-group mb-3">
                
                    <div class="col-md-auto obj_filtro">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Mes
                        </div>
                       
                        <div class="form-group">
                            <label style="width: 120px">
                                <select name="selectorMes2" class="select2 form-control" data-toggle="select2" id="selectorMes"  style="width: 20%;">
                                    @foreach($meses as $key => $value)
                                        <option value="{{$key}}" @if($key == date('Ym')) selected @endif>{{$value}}</option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                        
                    </div>
                @if($cliente == 'gama')
                    <div class="col-md-auto obj_filtro">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Cliente
                        </div>
                       
                        <div class="form-group">
                            <label style="width: 120px">
                                <select id="f_cliente" name="f_cliente2" class="select2 form-control" data-toggle="select2">
                                    @foreach ($clientes as $key => $value)
                                   
                                        <option value="{{$value->valor}}">{{$value->nombre}}</option>
                                    @endforeach
                                </select> 
                            </label>
                        </div>
                        
                    </div>
                @endif
                    <div class="col-md-auto" style="align-items: center;">
                        <button type="button" class="btn boton btn-sm align-middle lh-1 actualizar" id="btnActualizar"> <i class="fas fa-sync-alt"></i>{{__('messages.boton-actualizar-texto')}}</button>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="row h-100">
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Locales por Cliente</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <h5>Mejor Venta</h5>
                        <div id="loading_top10locales" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10locales"></div>
                    </div>
                    <div class="col-sm bg-white text-center ">
                        <h5>Peor Venta (excluyendo Ventas <= 0)</h5>
                        <div id="loading_top10badlocales" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10badlocales"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Productos por Cliente</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <h5>Mejor Venta</h5>
                        <div id="loading_top10productos" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10productos"></div>
                    </div>
                    <div class="col-sm bg-white text-center">
                        <h5>Peor Venta (excluyendo Ventas <= 0)</h5>
                        <div id="loading_top10badproductos" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10badproductos"></div>
                    </div>
                </div>
            </div>
        </div>
    
@endsection
@section('after_wrapper')

<!-- /End-bar -->
@endsection
@section('js_after')
    <!-- END Hero -->
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.powercharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script>

        $(document).ready(()=>{
                topLocalesVentas();
                topBadLocalesVentas();
                topProductosVentas();
                topBadProductosVentas();
            
            
        });

        $("#btnActualizar").click(()=>{
            $("#top10locales").html("");
            $("#top10badlocales").html("");
            $("#top10productos").html("");
            $("#top10badproductos").html("");
            topLocalesVentas();
            topBadLocalesVentas();
            topProductosVentas();
            topBadProductosVentas();
        });

        let decimalsNumb = 2;
        if("{{$cliente}}" == 'ducasse'){
            decimalsNumb = 0;
        }

        function topLocalesVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10locales").show();
            var cliente = ($('#f_cliente').length > 0) ? document.getElementById("f_cliente").value : '';

            $.ajax({
                url: "/top10/ventaslocales",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes,
                    cliente:cliente
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6 style='text-align: left;'>"+Object.keys(valores).find(key => valores[key] === element)+"</h6><hr>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:450px'>";
                        html += "<thead class=''><tr><th>Local</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb))); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr style='font-size: 10px'><td style='text-align: left;'>"+element2.local.local+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10locales").append(html);
                $("#loading_top10locales").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topBadLocalesVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10badlocales").show();
            var cliente = ($('#f_cliente').length > 0) ? document.getElementById("f_cliente").value : '';

            $.ajax({
                url: "/top10/malasventaslocales",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes,
                    cliente:cliente
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6 style='text-align: left;'>"+Object.keys(valores).find(key => valores[key] === element)+"</h6><hr>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:450px'>";
                        html += "<thead class=''><tr><th>Local</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null) ? '--' : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb)); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr style='font-size: 10px' ><td style='text-align: left;'>"+element2.local.local+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10badlocales").append(html);
                $("#loading_top10badlocales").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topProductosVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10productos").show();
            var cliente = ($('#f_cliente').length > 0) ? document.getElementById("f_cliente").value : '';

            $.ajax({
                url: "/top10/topventasproductos",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes,
                    cliente:cliente
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6 style='text-align: left;'>"+Object.keys(valores).find(key => valores[key] === element)+"</h6><hr>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:450px'>";
                        html += "<thead class=''><tr><th>Producto</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb)));
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr style='font-size: 10px'><td style='text-align: left;'>"+element2.producto.nombre+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10productos").append(html);
                $("#loading_top10productos").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topBadProductosVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10badproductos").show();
            var cliente = ($('#f_cliente').length > 0) ? document.getElementById("f_cliente").value : '';

            $.ajax({
                url: "/top10/malasventasproductos",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes,
                    cliente:cliente
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6 style='text-align: left;'>"+Object.keys(valores).find(key => valores[key] === element)+"</h6><hr>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:450px'>";
                        html += "<thead class=''><tr><th>Producto</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = (((element2.ventas_periodo_anterior == null) || (element2.ventas_periodo_anterior == 0) ) ? '--' : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb));
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr style='font-size: 10px'><td style='text-align: left;'>"+element2.producto.nombre+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10badproductos").append(html);
                $("#loading_top10badproductos").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }
    </script>

    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
@endsection