@extends('layouts.dashboard')

@section('dashboard')

    @if(session('message'))
        <div class="alert alert-success mt-4">{{ session('message') }}</div>
    @endif

	<ul class="breadcrumb m-0 p-0">
		<li><strong>Home</strong></li>
	</ul>
	<h1 class="titulo-h1 mb-4">Bienvenido a clickrepuestos "{{ Auth::user()->usuario_nombre }}"</h1>
	<div class="card mt-4">
		<div class="card-body">
			<div class="row justify-content-center">
				<div class="col-md-6">
					<div class="border p-3 mb-3">
						<h3 class="titulo-h1 mb-4">Estadisticas de cotizaciones</h3>
						<div id="estadisticas-general" class="w-100"></div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="border p-3 mb-3">
						<h3 class="titulo-h1 mb-4">Estadisticas de cotizaciones atendidas</h3>
						<div id="estadisticas-atendidas" class="w-100"></div>
					</div>
				</div>
				<div class="col-12">
					<div class="border p-3 mb-3">
						<h3 class="titulo-h1 mb-4">Estadisticas de los vendedores</h3>
						<div id="estadisticas-vendedor" class="w-100"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

@endsection

@section('scripts')

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script>
		google.charts.load("current", {packages:["corechart"]});
		google.charts.setOnLoadCallback(drawChart);
		function drawChart() {
			// Estadisticas de cotizaciones
			var data = google.visualization.arrayToDataTable([
				['Task', 'Hours per Day'],
				['Nuevas: {{ $nuevas }}', {{ $nuevas }}],
				['Urgentes: {{ $urgentes }}', {{ $urgentes }}],
				['Mensajes Nuevos: {{ $mensajes_nuevos }}', {{ $mensajes_nuevos }}],
				['Carritos: {{ $carritos }}', {{ $carritos }}],
				['Cerradas: {{ $cerradas }}', {{ $cerradas }}],
			]);

			var options = {
				title: 'Estadisticas de cotizaciones',
				pieHole: 0.4,
			};

			var chart = new google.visualization.PieChart(document.getElementById('estadisticas-general'));
			chart.draw(data, options);

			// Estadisticas de cotizaciones atendidas
			var data = google.visualization.arrayToDataTable([
				['Element', 'Density', { role: 'style' }],
				['Atendidas', {{ $respondidas }}, "#53a8fb"],
				['Sin atender', {{ $nuevas }}, "#53a8fb"],
				['Urgentes', {{ $urgentes }}, "red"],
			]);

			var view = new google.visualization.DataView(data);
      		view.setColumns([0, 1,
				{ calc: "stringify",
					sourceColumn: 1,
					type: "string",
					role: "annotation" },
				2]);

			var options = {
				title: 'Estadisticas de cotizaciones atendidas',
		        height: 200,
		        bar: {groupWidth: "95%"},
		        legend: { position: "none" },
			};

			var chart = new google.visualization.BarChart(document.getElementById('estadisticas-atendidas'));
			chart.draw(view, options);


			// Estadisticas de cotizaciones atendidas
			var data = google.visualization.arrayToDataTable([
				/*['Element', 'Density', { role: 'style' }],
				['Por vendedor', 3, "#53a8fb"],
				['Por vendedor sin responder', 2, "red"],*/
				['Vendedores', 'Cotizaciones', 'Cotizaciones sin responder'],
							]);

			var view = new google.visualization.DataView(data);
      		/*view.setColumns([0, 1,
				{ calc: "stringify",
					sourceColumn: 1,
					type: "string",
					role: "annotation" },
				2]);*/

			var options = {
				height: 400,
	          	bars: 'horizontal', // Required for Material Bar Charts.
			    bar: {groupWidth: "95%"},
		        //legend: { position: "none" },
	        };

			var chart = new google.visualization.BarChart(document.getElementById('estadisticas-vendedor'));
			chart.draw(data, options);
			//chart.draw(data, google.charts.Bar.convertOptions(options));



					}
	</script>

@endsection