{% extends 'layouts/administrator/master.html' %}
{% load querystring_tags %}

{% block title %} {{ block.super }} {% endblock title %}

{% block title_main %} {{ block.super }} {% endblock title_main %}

{% block breadcrumb %} {{ block.super }} {% endblock breadcrumb %}

{% block content %}
	<div class="container-fluid">
		<div class="row">
			{% if perms.complaints.can_see_statistics_complaint %}
			<div class="col-12 col-lg-6">
				<div class="card">
					<div class="card-header border-0 bgc-cafe-2 c-blanco" style="opacity: 0.7">
						<h2 class="card-title font-weight-bold bgc-cafe-2 c-blanco">Denuncias</h2>
						<div class="card-tools">
							<button type="button" class="btn btn-tool c-blanco c:h-rojo-8" data-card-widget="collapse" data-toggle="tooltip" title="Abrir / Cerrar">
								<i class="fas fa-minus"></i></button>

							<button type="button" class="btn btn-tool c-blanco c:h-rojo-8 expand-card" title="Expandir">
								<i class="fas fa-expand"></i></button>
						</div>
					</div>
					<div class="card-body">
						<ul class="list-group list-group-flush">
							<li class="list-group-item d-flex justify-content-between align-items-center">
								Nuevas denuncias ({% now "d \d\e F \d\e\l Y" %})
								<span class="badge badge-primary badge-pill">{{ complaints_now }}</span>
							</li>
							<li class="list-group-item d-flex justify-content-between align-items-center">
								Denuncias por leer
								<span class="badge badge-primary badge-pill">{{ complaints_read }}</span>
							</li>
						</ul>
						
						<div class="mt-4">
							<h3>
								Graficar información
							</h3>
							<p>* Seleccione los criterios para graficar la información</p>

							<div class="uk-margin-small">
								<label for="statistical_criterion">Tipo de estadística</label>
								<select class="form-control select2" style="width: 100%;" id="statistical_type">
									<option value=""></option>
									<option value="1">Estadística por datos de la denuncia</option>
									<option value="2">Estadística por datos de servidor público</option>
									<option value="3">Estadística por datos del denunciante</option>
								</select>
							</div>
							<div class="uk-margin-small">
								<label for="criterion">Criterio</label>
								<select class="form-control select2" style="width: 100%;" id="criterion" name="criterion">
									<option value=""></option>
								</select>
							</div>
							<div class="uk-margin-medium-top uk-text-center">
								<input class="btn uk-button-primary uk-width-1 uk-width-1-3@m" type="button" value="Ver Grafica" id="show_chart_complaints">
							</div>
							<div class="uk-hidden uk-margin-top" id="content_chart_export_complaints">
								<div class="uk-margin-small">
									<label for="criterion">Tipo de gráfica</label>
									<select class="form-control select2" style="width: 100%;" id="chart_type" name="chart_type">
										<option value=""></option>
									</select>
								</div>
								<div id="chart_complaints" style="width:100%; height:600px;"></div>
								{% if perms.complaints.can_export_complaint %}
								<div class="uk-margin-medium-top uk-text-center">
									<a id="expot_to_excel" href="#" data-href="{% url 'administrators:export_complaints_adm' %}" class="btn btn-secondary uk-margin-right">Exportar a Excel</a>
									<button id="expot_to_image" href="#" class="btn btn-secondary uk-margin-left">Exportar a Imagen</button>
								</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
				<!-- /.card -->
			</div>
			<!-- /.col-md-6 -->
			{% endif %}
			{% if perms.nonconformities.can_see_statistics_nonconformity %}
			<div class="col-12 col-lg-6">
				<div class="card">
					<div class="card-header border-0 bgc-cafe-2 c-blanco" style="opacity: 0.7">
						<h2 class="card-title font-weight-bold bgc-cafe-2 c-blanco">Inconformidades</h3>
						<div class="card-tools">
							<button type="button" class="btn btn-tool c-blanco c:h-rojo-8 expand-card" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
								<i class="fas fa-minus"></i></button>

							<button type="button" class="btn btn-tool c-blanco c:h-rojo-8 expand-card" title="Expandir">
								<i class="fas fa-expand"></i></button>
						</div>
					</div>
					<div class="card-body">
						<ul class="list-group list-group-flush">
							<li class="list-group-item d-flex justify-content-between align-items-center">
								Nuevas inconformidades ({% now "d \d\e F \d\e\l Y" %})
								<span class="badge badge-primary badge-pill">{{ nonconformitites_now }}</span>
							</li>
							<li class="list-group-item d-flex justify-content-between align-items-center">
								Inconformidades por leer
								<span class="badge badge-primary badge-pill">{{ nonconformitites_read }}</span>
							</li>
						</ul>
						{% comment %} <canvas id="myChart" width="400" height="400"></canvas> {% endcomment %}
					</div>
				</div>
				<!-- /.card -->
			</div>
			<!-- /.col-md-6 -->
			{% endif %}
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container-fluid -->
{% endblock content %}

{% block css %} {% endblock css %}

{% block js %}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>

	<script>
		// EXPAND CARDS
		var buttons = document.querySelectorAll( '.expand-card' );

		buttons.forEach( function ( button ) {
			button.addEventListener( 'click', function ( e ) {
				var column = this.parentElement.parentElement.parentElement.parentElement;
				column.classList.toggle( 'col-lg-6' );
			} )
		} );
	</script>

	<script>
		$('.select2').select2();
        $('.select2').trigger('change');

		var charts_types = [
			{ 'id':'line', 'text':'Gráfica de lineas', 'selected': true },
			{ 'id':'area', 'text':'Gráfica de área' },
			{ 'id':'column', 'text':'Gráfica de barras' },
			{ 'id':'bar', 'text':'Gráfica de barras horizontales' },
			{ 'id':'pie', 'text':'Gráfica de pastel' },
			{ 'id':'semi_donut', 'text':'Gráfica de semi circulo' }
		];

		var chart_type = $( '#chart_type' );

		var statisticals_types = {
			0 : [
				{ 'id':'', 'text':'' },
			],
			1 : [
				{ 'id':'created_at', 'text':'Periodo de recepción' },
				{ 'id':'status_id', 'text':'Estatus de la denuncia' },
				{ 'id':'reason_id', 'text':'Motivo de la denuncia' },
				{ 'id':'referred_to', 'text':'Remitido a' }
			],
			2 : [
				{ 'id':'company_charge', 'text':'Cargo del denunciado' },
				{ 'id':'dependence_id', 'text':'Dependencia' },
				{ 'id':'municipality', 'text':'Municipio' }
			],
			3 : [
				{ 'id':'informer_type_id', 'text':'Tipo de denunciante' },
				{ 'id':'informer_gender_id', 'text':'Sexo del denunciante' },
				{ 'id':'informer_age', 'text':'Rango de edad' }
			]
		};

		var statistical_type = $( '#statistical_type' );

		var criterion = $( '#criterion' );
		criterion.select2( { 'data' : statisticals_types[ 0 ] } );

		statistical_type.on('select2:select', function (e) { 
			criterion.children('option').remove();
			var data = e.params.data;
			var statistical_type_data = statisticals_types[ 0 ];

			if (data.id.length > 0)
			{
				if ( data.id > 0 && data.id < 4 )
					statistical_type_data = statistical_type_data.concat( statisticals_types[ data.id ] );
			}
			criterion.select2( { 'data' : statistical_type_data } );
		});

		var show_chart_complaints = document.querySelector( '#show_chart_complaints' ),
			content_chart_export_complaints = document.getElementById( 'content_chart_export_complaints' ),
			content_chart_complaints = document.getElementById( 'chart_complaints' ),
			expot_to_excel = document.getElementById( 'expot_to_excel' ),
			expot_to_image = document.getElementById( 'expot_to_image' ),
			chartComplaints = null;

		function create_chart( _chart_type, chart, chart_id, labels, data, title, type )
		{
			var lng = labels.length;
			content_chart_complaints.style.height = '600px';

			if ( chart ) chart.destroy();
			switch ( _chart_type )
			{
				case 'line':
					chart = create_chart_line( chart_id, labels, data, title, type );
					break;
				case 'area':
					chart = create_chart_area( chart_id, labels, data, title, type );
					break;
				case 'column':
					chart = create_chart_column( chart_id, labels, data, title, type );
					break;
				case 'bar':
					height = ( lng * 40 + 141 ) + 'px';
					content_chart_complaints.style.height = height;
					chart = create_chart_bar( chart_id, labels, data, title, type, height );
					break;
				case 'pie':
					chart = create_chart_pie( chart_id, labels, data, title, type );
					break;
				case 'semi_donut':
					chart = create_chart_semi_donut( chart_id, labels, data, title, type );
					break;
			}
			return chart;
		}
		
		show_chart_complaints.addEventListener( 'click', function (e) {
			var criterion_selected = criterion.select2('data');
			if ( criterion_selected[0].id.length > 0 )
			{
				axios.get( '/administrator/charts_complaints/'+criterion_selected[0].id )
				.then( function ( response ) {

					chart_type.select2( { 'data' : charts_types } );

					chart_type.on( 'select2:select', function ( e ) {
						var chart_type_selected = chart_type.select2('data');
						if ( chart_type_selected[0].id.length > 0 )
						{
							chartComplaints = create_chart( chart_type_selected[0].id, chartComplaints, 'chart_complaints', response.data.labels, response.data.data, response.data.title, response.data.type );
						}
					} );

					var chart_type_selected = chart_type.select2('data');
					chartComplaints = create_chart( chart_type_selected[0].id, chartComplaints, 'chart_complaints', response.data.labels, response.data.data, response.data.title, response.data.type );

					expot_to_excel.href = expot_to_excel.dataset.href+'?filter=graph&criterion='+criterion_selected[0].id;

					content_chart_export_complaints.classList.remove( 'uk-hidden' );
					document.querySelector( '.highcharts-exporting-group' ).classList.add( 'uk-hidden' );
				} )
				.catch( function ( error ) {
					{% comment %} show_status_code.innerHTML = '<div class="alert alert-danger container medium" role="alert">No disponible por el momento</div>'; {% endcomment %}
					content_chart_export_complaints.classList.add( 'uk-hidden' );
					expot_to_excel.href = '#'
				} );
			}
			else
			{
				content_chart_export_complaints.classList.add( 'uk-hidden' );
				expot_to_excel.href = '#'
			}
		} );

		expot_to_image.addEventListener( 'click', function ( e ) { window.chartComplaints.exportChart({ type: 'image/jpeg' }); } );
	</script>

	<script>

		function create_chart_bar( el, _labels, _data, _title, _type, height )
		{
			var chart = Highcharts.chart( el, {
				chart  : { type: 'bar', height: height },
				credits: { enabled: false },
				title  : { text: _title },
				xAxis  : { categories: _labels },
				yAxis  : { title: { text: 'Número de Denuncias' } },
				series : [{
					name : _type,
					data : _data,
					color: '#a8123d'
				}]
			});
			return chart;
		}

		function create_chart_column( el, _labels, _data, _title, _type )
		{
			var chart = Highcharts.chart( el, {
				chart  : { type: 'column' },
				credits: { enabled: false },
				title  : { text: _title },
				xAxis  : { categories: _labels },
				yAxis  : {
					allowDecimals: false,
					title        : { text: 'Número de Denuncias' }
				},
				series: [{
					name : _type,
					data : _data,
					color: '#a8123d'
				}]
			});
			return chart;
		}

		function create_chart_line( el, _labels, _data, _title, _type )
		{
			var chart = Highcharts.chart( el, {
				title  : { text: _title },
				credits: { enabled: false },
				yAxis  : { title: { text: 'Número de Denuncias' } },
				xAxis  : { categories: _labels },
				series : [{
					name : _type,
					data : _data,
					color: '#a8123d'
				}]
			});
			return chart;
		}

		function create_chart_area( el, _labels, _data, _title, _type )
		{
			var chart = Highcharts.chart( el, {
				chart: { type: 'area' },
				credits: { enabled: false },
				title: { text: _title },
				xAxis: {
					categories: _labels,
					tickmarkPlacement: 'on',
					title: { enabled: false }
				},
				yAxis: { title: { text: 'Número de Denuncias' } },
				tooltip: {
					split: true,
					valueSuffix: ' denuncias'
				},
				plotOptions: {
					area: {
						stacking : 'normal',
						lineColor: '#666666',
						lineWidth: 1,
						marker   : {
							lineWidth: 1,
							lineColor: '#666666'
						}
					}
				},
				series: [{
					name : _type,
					data : _data,
					color: '#a8123d'
				}]
			});
			return chart;
		}

		function convert_data_to_pie_charts( _labels, _data )
		{
			var data = [];

			for ( var i=0; i<_labels.length; i++ )
			{
				data.push( { name: _labels[ i ], y : _data[ i ] } );
			}

			return data;
		}

		function create_chart_pie( el, _labels, _data, _title, _type )
		{
			var data = convert_data_to_pie_charts( _labels, _data );

			var chart = Highcharts.chart( el, {
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					type: 'pie'
				},
				credits: { enabled: false },
				title        : { text: _title },
				tooltip      : { pointFormat: '{series.name}: <b>{point.y}</b>' },
				plotOptions  : {
					pie: {
						allowPointSelect: true,
						cursor          : 'pointer',
						dataLabels      : {
							enabled: true,
							format : '<b>{point.name}</b>: {point.y}'
						}
					}
				},
				series: [{
					name        : _type,
					colorByPoint: true,
					data        : data
				}]
			});
			return chart;
		}

		function create_chart_semi_donut( el, _labels, _data, _title, _type )
		{
			var data = convert_data_to_pie_charts( _labels, _data );

			var chart = Highcharts.chart( el, {
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth    : 0,
					plotShadow         : false
				},
				credits: { enabled: false },
				title      : { text: _title },
				tooltip    : { pointFormat: '{series.name}: <b>{point.y}%</b>' },
				plotOptions: {
					pie: {
						dataLabels: {
							enabled : true,
							distance: -50,
							style   : {
								fontWeight: 'bold',
								color     : 'white'
							}
						},
						startAngle: -90,
						endAngle: 90,
						center: ['50%', '75%'],
						size: '110%'
					}
				},
				series: [{
					type     : 'pie',
					name     : _type,
					innerSize: '50%',
					data     : data
				}]
			});
			return chart;
		}
	</script>
{% endblock js %}