@extends('layouts.app')

@section('title', 'Statistiche')

@section('content')
<style>
    
    .table-hover > tbody > tr:hover {
    background-color: #1ab394!important; 
    color: #ffffff!important;
}

</style>
<div class="row wrapper border-bottom white-bg page-heading">
    
    <h1>Riepilogo Insoluti alla data odierna<small style="font-size:small;font-style: italic;">ultimo aggiornamento in data({{$data_up}})</small>
      
    </h1>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-md-12">
              <span class="pull-right">
         <h1 style="text-align: -webkit-right;border-bottom: 2px solid red;">{{$saldo}}</h1>
         
         <p style="font-size:small;font-style: italic;color:red"> (di cui rateizzato scaduto cessati {{$rateizzato_cessati_scaduto}}<br>rateizzato scaduto attivi {{$rateizzato_attivi_scaduto}}<br> su un totale rateizzato di {{$totaleRateizzato}})</p>
           
        </span>
            </div>
        </div>
    <div class="row">
        <div class="panel">
            <div class="panel-body">
                <div class="col-md-6" >

                    <input type="hidden"  id="labels" value="{{$labels}}" />
                    <input type="hidden"  id="prices" value="{{$prices}}" />
                    <canvas id="canvas" height="20" width="50%" style="float:left"></canvas>
                </div>
                
                  <div class="col-md-6" style="float:left">

                    <input type="hidden"  id="labels2" value="{{$labels2}}" />
                    <input type="hidden"  id="prices2" value="{{$prices2}}" />
                    <canvas id="canvas2" height="20" width="50%"style="float:left"></canvas>
                </div>
        </div>
        </div>
    </div>
        
           <div class="row">
        <div class="panel">
            <div class="panel-body">
                <div class="col-md-6">
                  <form action="/statistiche/dettaglioInsolutiAgenti">
                        <button type="submit"    style='display: inline-block;width: 100%;margin-top: 5px;height: 74px;font-size: x-large;' class='btn btn-info btn-xs'>ELABORA INSOLUTI AGENTI</button>
                    </form>
                    
                </div>
                <div class="col-md-6">
                    <form action="/statistiche/dettaglioInsoluti">
                        <button type="submit"    style='display: inline-block;width: 100%;margin-top: 5px;height: 74px;font-size: x-large;' class='btn btn-warning btn-xs'>ELABORA INSOLUTI X CLIENTE</button>
                    </form>
                    
                     <form action="/statistiche/dettaglioInsolutiUtenze">
                        <button type="submit"    style='display: inline-block;width: 100%;margin-top: 5px;height: 74px;font-size: x-large;' class='btn btn-warning btn-xs'>ELABORA INSOLUTI X UTENZA</button>
                    </form>
                    
                 
                </div>
             
            </div>
        </div>
    </div>
</div>
</div>


@endsection 

@section('scripts')
<script>
    

    
    
    /* global Chart */

'use strict';

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var labels;
var labels2;
(function(global) {
	var Months = [
		'Gennaio',
		'Febbraio',
		'Marzo',
		'Aprile',
		'MAggio',
		'Giugno',
		'Luglio',
		'Agosto',
		'Settermbre',
		'Ottobre',
		'Novembre',
		'Dicembre'
	];

	var Samples = global.Samples || (global.Samples = {});
	Samples.utils = {
		
		srand: function(seed) {
			this._seed = seed;
		},

		rand: function(min, max) {
			var seed = this._seed;
			min = min === undefined? 0 : min;
			max = max === undefined? 1 : max;
			this._seed = (seed * 9301 + 49297) % 233280;
			return min + (this._seed / 233280) * (max - min);
		},

		numbers: function(config) {
			var cfg = config || {};
			var min = cfg.min || 0;
			var max = cfg.max || 1;
			var from = cfg.from || [];
			var count = cfg.count || 8;
			var decimals = cfg.decimals || 8;
			var continuity = cfg.continuity || 1;
			var dfactor = Math.pow(10, decimals) || 0;
			var data = [];
			var i, value;

			for (i=0; i<count; ++i) {
				value = (from[i] || 0) + this.rand(min, max);
				if (this.rand() <= continuity) {
					data.push(Math.round(dfactor * value) / dfactor);
				} else {
					data.push(null);
				}
			}

			return data;
		},

		labels: function(config) {
			var cfg = config || {};
			var min = cfg.min || 0;
			var max = cfg.max || 100;
			var count = cfg.count || 8;
			var step = (max-min) / count;
			var decimals = cfg.decimals || 8;
			var dfactor = Math.pow(10, decimals) || 0;
			var prefix = cfg.prefix || '';
			var values = [];
			var i;

			for (i=min; i<max; i+=step) {
				values.push(prefix + Math.round(dfactor * i) / dfactor);
			}

			return values;
		},

		months: function(config) {
			var cfg = config || {};
			var count = cfg.count || 12;
			var section = cfg.section;
			var values = [];
			var i, value;

			for (i=0; i<count; ++i) {
				value = Months[Math.ceil(i)%12];
				values.push(value.substring(0, section));
			}

			return values;
		},

		transparentize: function(color, opacity) {
			var alpha = opacity === undefined? 0.5 : 1 - opacity;
			return Chart.helpers.color(color).alpha(alpha).rgbString();
		},

		merge: Chart.helpers.configMerge
	};

	Samples.utils.srand(Date.now());



}(this));

        labels=JSON.parse(document.getElementById("labels").value);
        var data=JSON.parse(document.getElementById("prices").value);
        labels2=JSON.parse(document.getElementById("labels2").value);
        var data2=JSON.parse(document.getElementById("prices2").value);
        var color = Chart.helpers.color;
        var horizontalBarChartData = {
            labels: labels,
            datasets: [{
                label: 'Insoluto totale agente',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.red,
                borderWidth: 1,
                data: data
            }]

        };
          var horizontalBarChartData2 = {
            labels: labels2,
            datasets: [{
                label: 'per clienti',
                backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
                borderColor: window.chartColors.red,
                borderWidth: 1,
                data: data2
            }]

        };

        window.onload = function() {
        
           
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myHorizontalBar = new Chart(ctx, {
                type: 'horizontalBar',
                data: horizontalBarChartData,
                options: {
                    // Elements options apply to all of the options unless overridden in a dataset
                    // In this case, we are setting the border of each horizontal bar to be 2px wide
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                        }
                    },
                    responsive: true,
                    legend: {
                        position: 'right',
                    },
                    title: {
                        display: true,
                        text: 'saldo alla data odierna per agenti(worst 20)'
                    }
                }
            });
            
            
            
              var ctx2 = document.getElementById("canvas2").getContext("2d");
            window.myHorizontalBar = new Chart(ctx2, {
                type: 'horizontalBar',
                data: horizontalBarChartData2,
                options: {
                    // Elements options apply to all of the options unless overridden in a dataset
                    // In this case, we are setting the border of each horizontal bar to be 2px wide
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                        }
                    },
                    responsive: true,
                    legend: {
                        position: 'left',
                    },
                    title: {
                        display: true,
                        text: 'saldo alla data odierna per clienti(worst 20)'
                    }
                }
            });


        };




   

   
    
$(document).ready(function(){
   
$('table').dataTable({pageLength:7
        ,bSort : true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]}
       );
       
  $('#table_utenze tbody').on('click', 'tr', function (e) {
  var href=$(e.target).parent('tr').data('href');  
   if(href!='#')
   window.open(href, '_blank');
   
  }); 
  
  
  
    
});

</script>

@endsection