{% extends "IngresoBundle:Default:customJS.html.twig" %}

{% block columns %}
	{data:'id'},
	{data:'contratista'},
	{data:'tipo_doc'},
	{data:'documento'},
	{data:'fecha_carga'},
	{data:'estado'},
{% endblock %}
{% block editIcon %}<i class="fa fa-calendar-plus-o"></i> Registrar fecha{% endblock %}
{% block editTitle %}{% endblock %}
{% block extendVars %}
	var totales = {
		ok: 0,
		vencido: 0,
		vencer: 0
	}, chartOk, chartProximo, chartVencidos,
       nombre = [],
       total = [];
{% endblock %}
{% block tableOrder %}
	columnDefs: [
	    { targets: [0,1], visible: false }
	],
	order: [[1, 'asc'],[5, 'desc']],
{% endblock %}
{% block extraButtons %}
{
	text: '<i class="fa fa-history"></i> Ver historial',
	    titleAttr: 'Historial de documentos',
	    className: 'btn-hideable',
	    action: function() {

	         var path = '{{paths.track}}',
	             id   = table.row( { selected: true } ).id();
	         
	         path = path.slice(0,-1) + id;
	         
	         var $modal = $('#{{idModalTrack}}'),
	             $body  = $modal.find('.modal-body-content').empty(),
	             $load  = $modal.find('.load'); 

	         $modal.modal();
	         $load.fadeIn();
	         $.get(path, function(html) {
	             
	             $load.hide();
	             $body.append(html)
	             $body.find('form').submit(function(event) {
	                 
	                 event.preventDefault();
	                 $(this).find('button[type="submit"]').html('<i class="fa fa-circle-o-notch fa-spin fa-fw text-primary"></i>');

	                 $.post(path, $(this).serialize(), function(data, textStatus, xhr) {
	                     
	                     $body.empty();
	                     table.ajax.reload();
	                     $modal.modal('hide');
	                 });
	             });
	         });
	    }}
{% endblock %}
{% block extendConfig %}
	createdRow: function ( row, data, index ) {
	
	    if (data.estado.match(/ok/i)) {
	    	totales['ok']++;
	    	$('td', row).eq(3).addClass('cell-success');
		} else if (data.estado.match(/vencido/i)) {
			totales['vencido']++;
			$('td', row).eq(3).addClass('cell-danger');
		} else if (data.estado.match(/vencer/i)) {
			totales['vencer']++;
			$('td', row).eq(3).addClass('cell-warning');
		}
	},
	drawCallback: function ( settings ) {
	    var api = this.api();
	    var rows = api.rows( {page:'current'} ).nodes();
	    var last = null;
	 
	    api.column(1, {page:'current'} ).data().each( function ( group, i ) {
	        if ( last !== group ) {
	            $(rows).eq( i ).before(
	                '<tr class="active group"><td colspan="5" class="text-center">'+group+'</td></tr>'
	            );
	 
	            last = group;
	        }
	    });
	},
{% endblock %}
{% block initComplete %}

	chartOk = Highcharts.chart('container-ok', getChartObject({
		total: table.data().count(),
		value: totales.ok,
		tipo: 'Ok'
	}));
	chartProximo = Highcharts.chart('container-proximos', getChartObject({
		total: table.data().count(),
		value: totales.vencer,
		tipo: 'Próximos a vencer'
	}));
	chartVencidos = Highcharts.chart('container-vencidos', getChartObject({
		total: table.data().count(),
		value: totales.vencido,
		tipo: 'Vencidos'
	}));
 
{% endblock %}
{% block functions %}

	function getChartObject(conf) {
		var r = {
        	chart: {
        	    type: 'solidgauge'
        	},
        	title: null,
        	pane: {
        	    center: ['50%', '85%'],
        	    size: '130%',
        	    startAngle: -90,
        	    endAngle: 90,
        	    background: {
        	        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#FFF',
        	        innerRadius: '50%',
        	        outerRadius: '100%',
        	        shape: 'arc'
        	    }
        	},
        	tooltip: {
        	    enabled: false
        	},
        	yAxis: {
        	    stops: [
                        [0.1, '#DDDF0D'], // yellow
                        [0.1, '#55BF3B'], // green
        	        [0.1, '#DF5353'] // red
        	    ],
        	    lineWidth: 0,
        	    minorTickInterval: null,
        	    title: {
        	        y: -70
        	    },
        	    labels: {
        	        y: 16
        	    },
        	    min: 0,
        	    max: conf.total
        	},
        	plotOptions: {
        	    solidgauge: {
        	        dataLabels: {
        	            y: 5,
        	            borderWidth: 0,
        	            useHTML: true
        	        }
        	    }
        	},
        	credits: {
        	    enabled: false
        	},
        	series: [{
        	    name: 'Speed',
        	    data: [conf.value],
        	    dataLabels: {
        	        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        	            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
        	               '<span style="font-size:12px;color:silver">'+conf.tipo+'</span></div>'
        	    },
        	    tooltip: {
        	        valueSuffix: conf.tipo
        	    }
        	}]
    	};
    	
    	if (conf.tipo == 'Ok') {
    		r.yAxis.stops = [
        	     
        	    [0.1, '#DDDF0D'],
                    [0.1, '#DF5353'],
        	    [0.1, '#55BF3B'] 
        	]
    	}

    	return r;

	}

	function updateCharts(charts, totales, count) {
	
		totales = [totales.ok,totales.vencido,totales.vencer];

		for (var i = 0; i < charts.length; i++) {
			charts[i].yAxis[0].update({max:count,min:0}, false);
			charts[i].series[0].points[0].update(totales[i], false);
			charts[i].redraw();
		}
	}
{% endblock %}
{% block extendEvents %}
	table.on('search.dt', function (e, settings) {
		
		var tot = {
			ok: 0,
			vencido: 0,
			vencer: 0
		},
		rows = table.rows({search:'applied'});

		rows.every( function ( rowIdx, tableLoop, rowLoop ) {
		    var data = this.data();
		    
		    if (data.estado.match(/ok/i)) {
	    		tot['ok']++;
			} else if (data.estado.match(/vencido/i)) {
				tot['vencido']++;
			} else if (data.estado.match(/vencer/i)) {
				tot['vencer']++;
			}
		});
		
		if (typeof chartOk !== 'undefined') {
    		updateCharts([chartOk,chartVencidos,chartProximo], tot, rows.count());
    	}
	});

	$table.find('tbody').on('click', 'tr.group', function () {
	    var currentOrder = table.order()[0];
	    
	    if ( currentOrder[0] === 1 && currentOrder[1] === 'asc' ) {
	        table.order( [ 1, 'desc' ] ).draw();
	    } else {
	        table.order( [ 1, 'asc' ] ).draw();
	    }
	} );
{% endblock %}
{% block totalVenc %}
    {{parent()}}
Highcharts.chart('container-totalVenc', {

    chart: {
        type: 'bar'
    },
    title: {
        text: 'DOCUMENTOS VENCIDOS POR ASP'
    },
    xAxis: {
        categories: nombre
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total Documentos Vencidos Por ASP'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Total Documentos',
        data: total
    }]
});

console.log(nombre);
console.log(total);
{% endblock %}