@extends('templates.admin-lte')

@section('header')
    <h1>
        Solicitudes
        <small>Graficos</small>
    </h1>
@endsection

@section('styles')
{{-- 
	@include('libraries',['added'=>['datatables-css','jquery-confirm-css','jquery-toast-css']])
--}}
	<style>
		body
		{
			padding: 0;
			margin: 0;
		}
		#canvas-holder
		{
			width:30%;
		}
	</style>
@endsection
@section('content')
	<div id="app">
	
		<div class="row">
			<div class="col-md-12">
			<div class="box box-primary">

				<div class="box-body with-border">

				<div class="row">
								
					<div class="col-md-3 form-group">
					<a class="btn btn-primary btn-block" href="{{ route('administracion.ventas.informes.solicitudes.index') }}">VOLVER AL INDICE</a>
					</div>
								
					<div class="col-md-3 form-group">
					<button id="exportar-excel" class="btn btn-success btn-block" v-on:click="exportar('excel')">EXPORTAR EXCEL</button>
					</div>
						<div class="col-md-3 form-group">
							<input type="button" id="exportar-pdf" class="btn btn-danger btn-block" v-on:click="exportar('pdf')" value="EXPORTAR PDF">
						</div>
					</div>
				</div>
			</div>
					<div class="box box-body box-primary">
						<div class="row">

								<div class="col-md-2">
									<div class="form-group">
										<label>Fecha Inicio</label>
										<div class="inner-addon right-addon">
											<!--
											<i class="glyphicon glyphicon-trash"></i>
											-->
											<input type="text" class="form-control bg-white" placeholder="Buscar por Periodo:" readonly id="fecha_inicio" v-model="fecha_inicio">
										</div>
									</div>
								</div>

								<div class="col-md-2">
									<div class="form-group">
										<label>Fecha Fin</label>
										<div class="inner-addon right-addon">
											<!--
											<i class="glyphicon glyphicon-trash"></i>
											-->
											<input type="text" class="form-control bg-white" placeholder="Buscar por Periodo:" readonly id="fecha_fin" v-model="fecha_fin">
										</div>
									</div>
								</div>

								<div class="col-md-2">
									<div class="form-group">
										<label>Fecha Tipo</label>
										<div class="inner-addon right-addon">
											<select id="tipo_fecha" class="form-control" v-model="tipo_fecha.selected" v-on:change="obtener_datos_graficos()">
												<option v-for="option in tipo_fecha.options" v-bind:value="option.value" v-text="option.text">
												</option>
											</select>
										</div>
									</div>
								</div>

								<div class="col-md-2">
									<div class="form-group">
										<label>Valor</label>
										<div class="inner-addon right-addon">
											<select id="tipo_valor" class="form-control" v-model="tipo_valor.selected" v-on:change="obtener_datos_graficos()">
												<option v-for="option in tipo_valor.options" v-bind:value="option.value" v-text="option.text">
												</option>
											</select>
										</div>
									</div>
								</div>

							</div>
							<div id="contenido_graficos">
								
								<div class="row">

									<div class="col-md-6 form-group">
										<canvas id="grafico-uno-chart"></canvas>
									</div>
									<div class="col-md-6 form-group">
										<canvas id="grafico-dos-chart"></canvas>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6 form-group">
										<canvas id="grafico-tres-chart"></canvas>
									</div>
									<div class="col-md-6 form-group">
										<canvas id="grafico-cuatro-chart"></canvas>
									</div>
								</div>

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

		<form target="_blank" id="form-export" action="{{ route('administracion.ventas.informes.solicitudes.index_graficos_export') }}" method="POST">
			{!! csrf_field() !!}
			<input type="text" name="charts" id="form_pdf_charts_input" >
			<input type="text" name="fecha_inicio" id="form_pdf_fecha_inicio" v-text="fecha_inicio">
			<input type="text" name="fecha_fin" id="form_pdf_fecha_fin" v-text="fecha_fin">
			<input type="text" name="fecha_tipo" id="form_pdf_fecha_tipo" v-model="tipo_fecha.selected">
			<input type="text" name="valor" id="form_pdf_valor" v-model="tipo_valor.selected">
			<input type="text" name="tipo_export" id="form_pdf_tipo_export" v-model="form_exportar_tipo">
		</form>
	</div>
@endsection

@section('scripts')
	@include('libraries', ['added'=>array('chart-js', 'bootstrap-datetimepicker-js', 'jquery-loading-js', 'vue-js', 'axios-js')])
{{-- 
	@include('libraries',['added'=>['datatables-js','jquery-confirm-js','jquery-toast-js','bootstrap-datetimepicker-js']])
--}}
	
	<script charset="utf-8">
		var app = new Vue
		({
			el: '#app',
			data: 
			{
				url_graficos_contenidos: '{{ route("administracion.ventas.informes.solicitudes.index_graficos_contenidos") }}',
				form_pdf_charts_input: null,
				form_exportar_tipo: 'pdf',
				fecha_inicio: "{{ (old('fecha_inicio', $fecha_inicio??'')) }}",
				fecha_fin: "{{ (old('fecha_fin', $fecha_fin??'' )) }}",
				tipo_fecha: 
				{
					selected: "mensual",
					options:
					[
						{ text: 'Anual', value: 'anual' },
						{ text: 'Mensual', value: 'mensual' }
					]
				},
				tipo_valor: 
				{
					selected: "cantidad",
					options:
					[
						{ text: 'Cantidad', value: 'cantidad' }
					]
				}, 
				grafico_uno: 
				{
					chart: null,
					ctx: $("#grafico-uno-chart").get(0).getContext('2d')
				},
				grafico_dos: 
				{
					chart: null,
					ctx: $("#grafico-dos-chart").get(0).getContext('2d')
				},
				grafico_tres:
				{
					chart: null,
					ctx: $("#grafico-tres-chart").get(0).getContext('2d')
				},
				grafico_cuatro:
				{
					chart: {},
					ctx: {}
				},
				params: {},
				bg_colors: [],
				random_color: null,
				response: 
				{
					data: [],
					labels: []
				}
			},
			methods: 
			{
				exportar: function( tipo )
				{
					load_form_datas();
					this.form_exportar_tipo = tipo;
					$("#form-export").submit();
				},
				getRandomColor: function() 
				{
					var color = '#';
					for (var i = 0; i < 6; i++ ) 
						color += '0123456789ABCDEF'.split('')[Math.floor(Math.random() * 16)];
					return color;
				},
				init: function()
				{
					this.obtener_datos_graficos();
				},
				cargar_graficos: function()
				{	
					if( app.grafico_uno.chart != undefined)
						app.grafico_uno.chart.destroy();

					if( app.grafico_dos.chart != undefined)
						app.grafico_dos.chart.destroy();

					if( app.grafico_tres.chart != undefined)
						app.grafico_tres.chart.destroy();

					app.bg_colors = [];
					console.log( app.data, app.labels );

					for (i = 0; i < app.response.data.length; i++) 
						app.response.bg_colors[i] = app.getRandomColor();
					
					
					app.grafico_uno.chart = new Chart( app.grafico_uno.ctx, 
					{
						type: 'bar',
						data: 
						{
							labels: app.labels,
							datasets: 
							[{
								label: 'Barras',
								data: app.data,
								backgroundColor: app.bg_colors,
							}]
						},
					});

					app.grafico_dos.chart = new Chart( app.grafico_dos.ctx, 
					{
						type: 'line',
						data: 
						{
							labels: app.labels,
							datasets: 
							[{
								label: 'Lineas',
								data: app.data,
							}]
						},
					});

					app.grafico_tres.chart = new Chart( app.grafico_tres.ctx, 
					{
						type: 'doughnut',
						data: 
						{
							labels: app.labels,
							datasets: 
							[{
								label: 'Dona',
								data: app.data,
								backgroundColor: app.bg_colors,
							}]
						},
					});

					$.LoadingOverlay("hide");

				},
				obtener_datos_graficos: function()
				{
					this.params = 
					{
						fecha_inicio:  this.fecha_inicio,
						fecha_fin: this.fecha_fin,
						tipo_fecha: this.tipo_fecha.selected,
						tipo_valor: this.tipo_valor.selected,
						just_index_graficos_contenidos: true	
					};

					
					axios.get( this.url_graficos_contenidos, this.params)
					.then(response => 
					{
						console.log('RESPONSE===>', response);
						this.response.data = response.data.chart_datas;
						this.response.labels = response.data.chart_labels;
						this.cargar_graficos();
					})
					.catch(error => console.log(error))
					.finally(() => $.LoadingOverlay("show"));
				},
				load_form_datas: function()
				{
					this.form_pdf_charts_input = $("#grafico-uno-chart").get(0).toDataURL("image/png") + "_" + $("#grafico-dos-chart").get(0).toDataURL("image/png") + "_" + $("#grafico-tres-chart").get(0).toDataURL("image/png");
				}

			}
		});

		$("#fecha_inicio, #fecha_fin").datetimepicker(
		{
			format: 'DD/MM/YYYY',
			ignoreReadonly: true,
			// mask:true,
		});

		$("#fecha_inicio, #fecha_fin").on("dp.change", function()
		{
			if( $(this).attr("id") == "fecha_inicio" )
				app.fecha_inicio = $(this).val();
			else
				app.fecha_fin = $(this).val();
			//app.obtener_datos_graficos();
		});
		$(document).ready(function()
		{
			app.init();
		})
		
	</script>
@endsection