@extends('fragments.fullTemplate')
@section('titulo')
Indicadores gráficos
@endsection
@section('contenido')
@php
    //use App\Http\Controllers\plaza_de_cobros;
    //$objPlaza = new plaza_de_cobros();
@endphp
    <div class="ui big breadcrumb">
        <div class="active section">Indicadores gráficos {{date("Y")}}</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('warning'))
            <div class="alert alert-warning text-center">
                <strong>{{ session()->get('warning') }}</strong>
            </div>
            @endif
            @if(session()->has('success'))
                <div class="alert alert-success text-center">
                    <strong>{{ session()->get('success') }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    {{--@include('Control_documentos.Notificacion.notificacion_documento_version')
    @include('Modificaciones.notificacion_modificacion')--}}
    @include('Modificaciones.Notificacion.notificacion_modificacion_firma_modal')

    <ul class="nav nav-tabs" id="myTab" role="tablist">                                
        <li class="nav-item">
           <a class="nav-link active" id="muestras-tab" data-toggle="tab" href="#muestras" role="tab" aria-controls="muestras" aria-selected="true">Muestras</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="informes-tab" data-toggle="tab" href="#informes" role="tab" aria-controls="informes" aria-selected="false">Informes</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" id="ganancias-tab" data-toggle="tab" href="#ganancias-nav" role="tab" aria-controls="ganancias-nav" aria-selected="false">Ganancias</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" id="linea_pruebas-tab" data-toggle="tab" href="#linea_pruebas-nav" role="tab" aria-controls="linea_pruebas-nav" aria-selected="false">Línea de pruebas</a>
         </li>
    </ul>
    <div class="tab-content" id="myTabContent"> 
        
        <div class="tab-pane fade show active" id="muestras" role="tabpanel" aria-labelledby="muestras-tab">
            <div class="ui segment">
                <div class="form-row">
                    <div class="col-lg-6">
                        <label for="muestras_ingresadas">Muestras Ingresadas</label>
                        <canvas id="muestras_ingresadas"></canvas>
                    </div>
                    <div class="col-lg-6">
                        <label for="muestras_programadas">Muestras Programadas</label>
                        <canvas id="muestras_programadas"></canvas>
                    </div>
                </div>
        
                <div class="form-row">
                    <div class="col-lg-6">
                        <label for="muestras_devueltas">Muestras Devuletas</label>
                        <canvas id="muestras_devueltas"></canvas>
                    </div>
                    <div class="col-lg-6">
                        <label for="muestras_almacenadas">Muestras Almacenadas</label>
                        <canvas id="muestras_almacenadas"></canvas>
                    </div>
                </div>
            </div>    
        </div>

        <div class="tab-pane fade" id="informes" role="tabpanel" aria-labelledby="informes-tab">
            <div class="ui segment">
                <div class="form-row">
                    <div class="col-lg-6">
                        <label for="informes_entregados">Informes entregados por técnicos</label>
                        <canvas id="informes_entregados"></canvas>
                    </div>
                    <div class="col-lg-6">
                        <label for="informes_enviados">Informes enivados a los clientes</label>
                        <canvas id="informes_enviados"></canvas>
                    </div>
                </div>
        
                <div class="form-row">
                    <div class="col-lg-6">
                        <label for="informes_cobrados">Informes Cobrados</label>
                        <canvas id="informes_cobrados"></canvas>
                    </div>
                    <div class="col-lg-6">
                        <label for="informes_facturados">Informes Facturados</label>
                        <canvas id="informes_facturados"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="ganancias-nav" role="tabpanel" aria-labelledby="ganancias-tab">
            <div class="ui segment">
                <div class="form-row">
                    <div class="col-lg-12">
                        <label for="ganancias">Ganacias</label>
                        <canvas id="ganancias"></canvas>
                    </div>
                    
                </div>
            </div>
        </div> 

        <div class="tab-pane fade" id="linea_pruebas-nav" role="tabpanel" aria-labelledby="linea_pruebas-tab">
            <div class="ui segment">
                <div class="form-row">
                    <div class="col-lg-12">
                        <label for="lineas_trabajo">Líneas de trabajo</label>
                        <canvas id="lineas_trabajo"></canvas>
                    </div>
                </div>
        
                <div class="form-row">
                    @foreach ($lineas_trabajo as $linea)
                        <div class="col-lg-6">
                            <label for="linea{{$linea->id_linea_trabajo}}">{{$linea->linea_trabajo}}</label>
                            <canvas id="linea{{$linea->id_linea_trabajo}}"></canvas>
                        </div>
                    @endforeach
                    
                </div>
            </div>
        </div>

    </div>

    <script>
        function generarNumero(numero){
            return (Math.random()*numero).toFixed(0);
        }

        function colorRGB(){
            var coolor = "("+generarNumero(255)+"," + generarNumero(255) + "," + generarNumero(255) +")";
            return "rgb" + coolor;
        }

        valores = function(valores, label){
            var densityData = {
                label: label,
                data: [],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            };
                i = 0;
            for(var valor of valores){
                
                if(valor[1]){
                    labels[i]= valor[1].mes;
                    densityData["data"][i] = valor[1].count;
                }else{
                    labels[i]= i;
                    densityData["data"][i] = 0;
                }
                
                i++;
            }
            return densityData;
        }
        
        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

        const muestras_ingresadas = {!! json_encode($muestras_ingresadas) !!};
        var labels = Array();
        var densityData = valores(muestras_ingresadas, 'Total de ingresos de muestra por mes');

        var ctx = document.getElementById('muestras_ingresadas').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });


        

        const muestras_programadas = {!! json_encode($muestras_programadas) !!};
        var labels = Array();
        var densityData = valores(muestras_programadas, 'Total de ingresos de muestra programadas por mes');
        
        var ctx = document.getElementById('muestras_programadas').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });


        const muestras_devueltas = {!! json_encode($muestras_devueltas) !!};
        var labels = Array();
        var densityData = valores(muestras_devueltas, 'Total de muestras devuletas por mes');
        
        var ctx = document.getElementById('muestras_devueltas').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const muestras_almacenadas = {!! json_encode($muestras_almacenadas) !!};
        var labels = Array();
        var densityData = valores(muestras_almacenadas, 'Total de muestras almacenadas por mes');
        
        var ctx = document.getElementById('muestras_almacenadas').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const informes_entregados = {!! json_encode($informes_entregados) !!};
        var labels = Array();
        var densityData = valores(informes_entregados, 'Total de muestras entregadas por tecnicos por mes');
        
        var ctx = document.getElementById('informes_entregados').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const informes_enviados = {!! json_encode($informes_enviados) !!};
        var labels = Array();
        var densityData = valores(informes_enviados, 'Total de informes enviados por mes');
        
        var ctx = document.getElementById('informes_enviados').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const informes_facturados = {!! json_encode($informes_facturados) !!};
        var labels = Array();
        var densityData = valores(informes_facturados, 'Total de informes facturados por mes');
        
        var ctx = document.getElementById('informes_facturados').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const informes_cobrados = {!! json_encode($informes_cobrados) !!};
        var labels = Array();
        var densityData = valores(informes_cobrados, 'Total de informes cobrados por mes');
        
        var ctx = document.getElementById('informes_cobrados').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        /*const ganancias = {!! json_encode($ganancias) !!};
        var labels = Array();
        var densityData = valores(ganancias, 'Total de gancias por mes $');
        
        //densityData["data"][0].toLocaleString('es-MX', { style: 'currency', currency: 'MXN' })
        var ctx = document.getElementById('ganancias').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [densityData]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value, index, values) {
                                return value.toLocaleString('es-ES', {minimumFractionDigits: 2});
                            }
                        }
                    }
                }
            }
        });*/
        var ctx = document.getElementById('ganancias').getContext('2d');
        var ganancias = @json($ganancias);

        var valores2 = [];

        ganancias.forEach(function(item) {
            //meses.push(item[0]); 
            if (item[1] && item[1].count) { 
                valores2.push(item[1].count);
            } else {
                valores2.push(0);
            }
        });

        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: [{
                    label: 'Cobranza',
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1,   
                    data: valores2,
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function(value, index, values) {
                                // Formatear el valor como moneda
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var label = data.datasets[tooltipItem.datasetIndex].label || '';
                            label += ': $' + tooltipItem.yLabel.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            return label;
                        }
                    }
                }
            }
        });

        const lineas_trabajo = {!! json_encode($lineas_trabajo) !!};
        var labels = Array();
        var densityData = [];
        let count = 0;
        var ctx, myChart;
        for(var linea of lineas_trabajo){
            densityData[count] = valores(linea['valores'], linea['linea_trabajo']);


            ctx = document.getElementById('linea'+linea['id_linea_trabajo']).getContext('2d');
            myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: meses,
                    datasets: [densityData[count]]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            densityData[count]['lineTension'] = 0;
            densityData[count]['fill'] = false;
            densityData[count]['borderColor'] = colorRGB();
            
            count++;
            
        }
        ctx = document.getElementById('lineas_trabajo').getContext('2d');
        myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: meses,
                datasets: densityData
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        
        </script>
    
@endsection