@extends('menu/menu')
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>
<!-- <link rel=stylesheet href="http://35.232.42.155/ayaproduccion/sistemacaja/resources/views/graficos/css-graficos/graficos-style.css" type="text/css" media=screen> -->
<link href="{{ asset('css/graficos-style.css') }}" rel="stylesheet">


@section('content') 

<div class="container mt-5">
  <div class="title-vista mt-4">INFORMES BÁSICOS</div>
</div>

<form action="" method="GET">
  <div class="container mt-5">
    <div class="seccion-filtro">Firltrar por</div> 
    <hr class="separador">

    <div class="row">
      <!--AQUI SE CARGA EL SELECT DEL CLIENTE-->
      <div class="col-sm-4 form-group">
        <label for="clientes">Tipo de informe</label>
        <select name="tiposInforme" class="custom-select mayuscula" id="tiposInforme">
          <option selected >Seleccionar</option>
          <option  value="cantidadInstalaciones">Cantidad de Instalaciones</option>
          <option  value="estadoInstalaciones">Estado de las Instalaciones</option>
          <option  value="retirosFinalizados">Retiros Finalizados</option>
          <option  value="numeroSucursales">Número de Sucursales </option>
          <option  value="totalAcessorios">Total de accesorios Instalados</option>
        </select>
      </div>
      <!--AQUI SE CARGA EL SELECT DE COMUNA-->
      <div class="col-sm-4 form-group">
        <label for="comuna">Proveedor</label>
        <select name="proveedor" disabled class="custom-select mayuscula" id="proveedor">
          <option selected value="sele">Seleccionar</option>
          @foreach ($instalacions as $inst)
            @if ($inst->proveedor_instalacion != null)
                <option value="{{$inst->proveedor_instalacion}}">{{ucfirst(strtolower($inst->proveedor_instalacion))}}</option>
            @endif
          @endforeach 
        </select>
      </div>
      <!--AQUI SE CARGA EL SELECT PROYECTO-->
      <div class="col-sm-4 form-group">
        <label for="proyectos">Proyecto</label>
        <select name="proyectos" disabled  class="custom-select mayuscula" id="proyectos">
          {{-- @if(!empty($disable))
          <select name="direccion"  class="custom-select" id="direccion">
          @else 
          <select name="direccion" disabled class="custom-select" id="direccion">
          @endif --}}
            <option selected>Seleccionar</option>
            {{-- @foreach ($carga_selectDireccion as $direcciones)
              @if ($direcciones->direccion != null) 
                @if($direcciones->direccion == $direccion) 
                  <option selected value="{{$direcciones->direccion}}">{{ucfirst(strtolower($direcciones->direccion))}}</option>
                @else
                  <option value="{{$direcciones->direccion}}">{{ucfirst(strtolower($direcciones->direccion))}}</option>
                @endif
              @endif
            @endforeach --}}
        </select>
      </div>
    </div>
  </div>
</form>

<div class="container mt-5"></div> 
  

@endsection

@section('graficos') 

<div class="" style="text-align: center; display:none"   id="id_div_grafico"  >
 
  <div class="container pt-5" >
  	<div class="container rein table-responsive-lg">
      <div class="container">

        <div class="row mt-3">
          <div class="col-3 div_oculto" style="display:none"><label for="" id="lCantidad"></label></div>
          <div class="col-6 div_oculto" style="display:none"><label class="proveedor" for="" id="lProveedor"></label></div>
          <div class="col-2 div_oculto mt-2" style="display:none"><label class="totalins" for="" id="lTotalintalaciones"></label></div>
          <div class="col-1 div_oculto" style="display:none"><h2 class="total text-left" id="lTotal"></h2></div><br>
        </div>

        <div class="row d-flex justify-content-end mt-4 mb-4"> 
          <div class="instalaciones" id="divColoruno"><label for="" id="label1"></label></div>
          <div class="finalizados"id="divColordos"><label for="" id="label2"></label></div>
        </div>

        <div class="row mb-5" >
          <canvas id="chart-rea3" class="pie"></canvas>
        </div>

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

  

</div>

@endsection

@section('scrypt') 
<!-- {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js" ></script> --}} -->

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" ></script> -->






 <script src="{{ asset('js/chart.min.js') }}" ></script> 



<script>
  
  function nombreRegiom(numeroRegion){
nombre = "";

if(numeroRegion == 1){
    nombre = "R.Tarapacá";
}else if(numeroRegion == 2){
    nombre = "R.Antofagasta";
}else if(numeroRegion == 3){
    nombre = "R.Atacama";
}else if(numeroRegion == 4){
    nombre = "R.Coquimbo";
}else if(numeroRegion == 5){
    nombre = "R.Valparaiso";
}else if(numeroRegion == 6){
    nombre = "R.O’Higgins";
}else if(numeroRegion == 7){
    nombre = "R.Maule";
}else if(numeroRegion == 8){
    nombre = "R.Bio Bio";
}else if(numeroRegion == 9){
    nombre = "R.Araucanía";
}else if(numeroRegion == 10){
    nombre = "R.Los Lagos";
}else if(numeroRegion == 11){
    nombre = "R.Aysén";
}else if(numeroRegion == 12){
    nombre = "R.Magallanes";
}else if(numeroRegion == 13){
    nombre = "R.Metropolitana";
}else if(numeroRegion == 14){
    nombre = "R.Los Rios";
}else if(numeroRegion == 15){
    nombre = "R.Arica Parinacota";
}else if(numeroRegion == 16){
    nombre = "R.Ñuble";
}else{
    nombre ="No";
}
return nombre;

}


</script>

<script>
// activarGrafico();
    //variables globales
    var clientes =[];
    var valores =[];
    let myChart;
    var valoresFinalizados =[];
    let tipoGrafico;
    let proveedor;
    let labelUno;
    let labelDos;
    let lTotal;

    // activarGrafico();
//obtener los cambios de los select
$(document).ready(function(){

  if (myChart) {
        myChart.destroy();
    }
    //tipo de informe
	$("#tiposInforme").change(function(){

            $(".div_oculto").css("display","none");
            $("#id_div_grafico").css("display","none");

            
            tipoGrafico =$(this).val();
            $("#proveedor option[value='sele']").prop("selected", true);
            $("#proyectos option[value='sele']").prop("selected", true);
            $("#proveedor").prop('disabled', false);
            $("#proyectos").prop('disabled', true);
	});
    //tipo de proveedor
	$("#proveedor").change(function(){
 

            //alert($('select[id=tiposInforme]').val());
        proveedor= $(this).val();
        if(tipoGrafico == "estadoInstalaciones" || tipoGrafico == "numeroSucursales" || tipoGrafico == "totalAcessorios"  ){
          $("#id_div_grafico").css("display","none");
          $("#proyectos").prop('disabled', false);
          buscarProyectosProveedor(proveedor);
        }else{
          
          if(tipoGrafico == "retirosFinalizados" ){
             activarGraficoRetiro(proveedor);
          }else{
            activarGrafico(proveedor);
          }
         
        }

	});

  $("#proyectos").change(function(){
            // alert($('select[id=tiposInforme]').val());
         clienteproyecto= $(this).val();

         if(tipoGrafico == "estadoInstalaciones"){
            labelUno = "Estados";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
            activarGraficoPorProyecto(clienteproyecto);
         }else if(tipoGrafico == "numeroSucursales" ){
            activarGraficoPorSucursales(clienteproyecto);
            labelUno = "Sucursales";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
        
         }else if(tipoGrafico == "totalAcessorios" ){
          activarGraficoPorAccesorios(clienteproyecto);
            labelUno = "Accesorios";
            labelDos = "";
            $("#lTotal").text("");
            $("#lTotalintalaciones").text("");
        
         }
       
       
        

        

	});

});


function buscarProyectosProveedor(proveedor){

  $.ajax({

        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

        type: 'POST',

        url:"{{ route('informes.graficos.instalaciones.proyectos.asociados') }}",

        data: { 'proveedor': proveedor },

        success: function(data) {

console.log(data);
            $("#proyectos").empty();
            $("#proyectos").append('<option value="sele">' + "Seleccionar"+ '</option>');
            $.each(data, function(id, datos) {
            
            
            
                $("#proyectos").append('<option value=' +"'"+ datos.sCliente +"'"+ '>' + datos.sCliente + '</option>');
            
          
            
            });
          
        },

        error: function(xhr, status) {

            alert('Disculpe, ha ocurrido un problema, intente mas tarde');

        }

    });
}

function activarGraficoPorAccesorios(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.por.acessorios') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
              clientes.push("RED");
              valores.push(item.usb_red);
              clientes.push("MUEBLE");
              valores.push(item.CsMueble);
              clientes.push("SD");
              valores.push(item.CsSD);
              clientes.push("KIT LECTOR");
               valores.push(item.CsKit_lector);
               clientes.push("BANDEJA ADICIONAL");
               valores.push(item.CsBandeja_adicional	);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              // clientes.push("Mueble");
              // valores.push(item.CsMueble);
              sum = item.usb_red+item.CsMueble+item.CsSD+item.CsKit_lector+item.CsBandeja_adicional;
         });

         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Acessorios");
                llenarGraficoBarrar(1);
                $("#label1").text("Acessorios");
                $("#label2").text("");
                $("#divColoruno").css("display","");
                $("#divColordos").css("display","none");
        }
       });


}


function activarGraficoPorSucursales(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.por.sucursales') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
              clientes.push(nombreRegiom(item.sRegion));
              valores.push(item.cantidad);
              sum = sum+ item.cantidad;

         });
         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Sucursales");
                llenarGraficoBarrar(1);
                $("#label1").text("Sucursales");
                $("#label2").text("");
                $("#divColoruno").css("display","");
                $("#divColordos").css("display","none");
        }
       });


}

function activarGraficoPorProyecto(clienteproyecto){

    clientes =[];
    valores =[];
    valoresFinalizados =[];

           $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type: 'POST',
            url:"{{ route('informes.graficos.por.proyectos') }}",
            data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
            success:function(data){
              sum = 0;
              $.each(data, function(i, item) {
                  clientes.push(convertir(item.sEstado_instalacion));
                  valores.push(item.cantidad);
                  sum = sum+ item.cantidad;

             });
                    llenarGraficoBarrar(1);

                    labelUno = "Instalaciones";
                    // $("#label1").text("Intalaciones");

                    // $("#label2").text("");
                    $("#divColoruno").css("display","");
                    $("#divColordos").css("display","none");

                lTotal = number_format(sum);
             $("#lTotal").text(lTotal);
             $("#lTotalintalaciones").text("Total Instalaciones");
            }
           });


}


function number_format(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}


function activarGraficoRetiro(clienteproyecto){

clientes =[];
valores =[];
valoresFinalizados =[];
labelUno = "Retiros";
labelDos = "Finalizados";
       $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        type: 'POST',
        url:"{{ route('informes.graficos.retiros.proyectos') }}",
        data: { 'proveedor': proveedor ,'clienteproyecto':clienteproyecto},
        success:function(data){
          sum = 0;
          $.each(data, function(i, item) {
                        clientes.push(convertir(item.cliente));
                        valores.push(item.totalretiros);
                        sum = sum+ item.totalretiros;
                        valoresFinalizados.push(item.totalFinalizados);
         });
         lTotal = number_format(sum);
         $("#lTotal").text(lTotal);
         $("#lTotalintalaciones").text("Total Retiros");

         $("#label1").text("Retiros");
         $("#label2").text("Finalizados");
         $("#divColoruno").css("display","");
         $("#divColordos").css("display","");
                llenarGraficoBarrar(2);
        }
       });


}

   
function activarGrafico(provee){
    clientes =[];
     valores =[];
     valoresFinalizados =[];
     provee= provee;
    var _token = $('input[name="_token"]').val();
           $.ajax({
             
            url:"{{ route('informes.graficos.instalaciones.proyectos') }}",
            method:"GET",
            data:{ proveedor:provee,_token:_token},
            success:function(data){
               sum = 0;
              $.each(data, function(i, item) {
                        // $("#cliente").val(item.sCliente);
                    
                        clientes.push(convertir(item.cliente));
                        valores.push(item.totalInstalaciones);
                        sum = sum+ item.totalInstalaciones;
                        valoresFinalizados.push(item.totalFinalizados);
             });

                    lTotal = number_format(sum);
                    $("#lTotal").text(lTotal);
                    $("#lTotalintalaciones").text("Total Instalaciones");
                    $("#label1").text("Instalaciones");
                    $("#label2").text("Finalizados");
                    $("#divColoruno").css("display","");
                     $("#divColordos").css("display","");


                    labelUno = "instalaciones";
                    labelDos = "Finalizadas";
                    llenarGraficoBarrar(2);
            }
           });


}


  function llenarGraficoBarrar__(graficos) {


    $(".div_oculto").css("display","");
    $("#lProveedor").text(proveedor);
    $("#id_div_grafico").css("display","");
    // var ctx = document.getElementById('myChart').getContext('2d');
    if (myChart) {
        myChart.destroy();
    }
    var barChartData = {
     //   labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
      labels: clientes,
      
        datasets: [{

          label: "My First dataset",
        
          fillColor: '#c5d1ef',
            // strokeColor: 'rgba(255, 99, 132, 0.2)',  //borde
            // highlightFill: 'rgba(255, 99, 132, 0.2)', //borde
            highlightStroke: "#ffffff",
            data: valores,

          },
          {
            label: "My First dataset",
            fillColor: '#e8d9cf',

            // strokeColor: "#ffffff",
            // highlightFill: "#ee7f49",
            highlightStroke: "#ffffff",
            data: valoresFinalizados,

          }

        ]

      }

        var options = {
          responsive: true,
          showTooltips: false,
          scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
     


          onAnimationComplete: function() {

            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";

            this.datasets.forEach(function(dataset) {
              dataset.bars.forEach(function(bar) {
                ctx.fillText(bar.value, bar.x, bar.y - 5);
              });
            })
          }
        };

        var ctx3 = document.getElementById("chart-rea3").getContext("2d");
        window.myPie = new Chart(ctx3).Bar(barChartData, options);

        
  }

  function convertir(string) {

if(string != null && string  != ""){


        return string.toUpperCase();
}else{
  return string;
}
    

    }


function llenarGraficoBarrar(graficos){

  $(".div_oculto").css("display","");


  $("#lProveedor").text(proveedor);
 
    var ctx = document.getElementById('chart-rea3').getContext('2d');
    if (myChart) {
        myChart.destroy();
    }


    if(graficos == 1){


      datass = [{
                        label: labelUno,
                        data: valores,
                      
                        backgroundColor: [
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)',
                            'rgba(81,107,160,0.75)'
                        ],
                     
                    } ];

    }else if (graficos == 2){


      datass =     [{
                    label: labelUno,
                    
                    // data: [12, 19, 3, 5, 2, 3],
                    data: valores,
                    backgroundColor: [
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)'
                    ],
                    borderColor: [
                      
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)',
                        'rgba(81,107,160,0.75)'
                    ],
                    borderWidth: 1
                },
                {
                  
                    label: labelDos,
                    
                    // data: [12, 19, 3, 5, 2, 3],
                    data: valoresFinalizados,
                    backgroundColor: [
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)'
                    ],
                    borderColor: [
                        
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)',
                        'rgba(226,113,36,0.75)'
                    ],
                    borderWidth: 1
                },
            
            ]



     }
      
          myChart = new Chart(ctx, {
            type: 'bar',
            

            data: {
                // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                labels: clientes,
                
                datasets: datass
            },
            options: {
              layout: {
            padding: {
                left: 500,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
              
              legend: {
                display: false,
                labels: {
                     //fontColor: 'rgb(255, 255, 132)',
                    // fontSize:80,
                  //  boxWidth:30
                  // padding: 10,
                  // fontColor: 'rgb(255, 99, 132)',
                  // boxWidth:120,
                  // fontSize:30,

                   
                },
                // fullWidth:true,
                // position:"right"


             
             },
             scales: {
                    yAxes: [{
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: numeroMayor(valores),
                        }
                    }]
                },
              responsive: true,
                 tooltips: {
                      enabled: false

                 },
                 layout: {
                      padding: {
                          left: 0,
                          right: 0,
                          top: 0,
                          bottom: 0
                      }
                 },
             animation: {
              onComplete: function(animation) {


                var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 1);
                });
            });

           
            }
        }
    }
       
  
  });

    


   
    $("#id_div_grafico").css("display","");


           }


function numeroMayor(arreglo){
  mayor =0;
  for(i = 0; i < arreglo.length; i++){
    if (arreglo[i] > mayor)
    {
        mayor = arreglo[i];
    }
    }


    if(mayor < 100){
      mayor = mayor + 5;
    }else if(mayor < 1000 && mayor > 100){
      mayor = mayor + 50;
    }else if(mayor > 1000){
      mayor = mayor + 100;
    }
return mayor;
}
    </script>



@endsection