<?php 
session_start();
require('connect.php');
mysqli_set_charset($connection,'utf8');



if (isset($_POST['username']) and isset($_POST['password'])){
//3.1.1 Assigning posted values to variables.
$username = $_POST['username'];
$password = $_POST['password'];


//generamos una cookie para hacer despues el query personalizado en la tabla, es decir, en table.sprectable.php
	setcookie('usuario',$username,time() + (86400)); // 86400 = 1 dia



//QUERY PARA LAS GRAFICAS
$querydesql1 = "SELECT * FROM `sprectable` WHERE `lugar` = '$username' AND `estado` = 'Abierto'";
$querydesql2 = "SELECT * FROM `sprectable` WHERE `lugar` = '$username' AND `estado` = 'En proceso'";
$querydesql3 = "SELECT * FROM `sprectable` WHERE `lugar` = '$username' AND `estado` = 'Cerrado'";

$result1 = mysqli_query($connection, $querydesql1);
$count1 = mysqli_num_rows($result1); //con el número de rows del query sabemos cuantos hay abiertos

$result2 = mysqli_query($connection, $querydesql2); 
$count2 = mysqli_num_rows($result2); //con el número de rows del query sabemos cuantos hay en proceso

$result3 = mysqli_query($connection, $querydesql3); 
$count3 = mysqli_num_rows($result3); //con el número de rows del query sabemos cuantos hay cerrados


$suma = $count1 + $count2 + $count3;

$jsonabierto = json_encode($count1);
$jsonenproceso = json_encode($count2);
$jsoncerrado = json_encode($count3);
//FIN DE QUERY PARA LAS GRAFICAS


	
?>


<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>Atento Voz - Tabla de reportes</title>

		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.css">
		<link rel="stylesheet" type="text/css" href="css/generator-base.css">
		<link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">

		<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/table.sprectable.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
		<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> -->

<script>
    var Chart = require('chart.js');
</script>
	</head>


	<a href="">


<?php  //Start the Session

//3.1.2 Checking the values are existing in the database or not
$query = "SELECT * FROM `login` WHERE login='$username' and password='$password'";



$result = mysqli_query($connection, $query) or die(mysqli_error($connection));


$count = mysqli_num_rows($result);
//3.1.2 If the posted values are equal to the database values, then session will be created for the user.
if ($count > 0){
$_SESSION['username'] = $username;
}else{
//3.1.3 If the login credentials doesn't match, he will be shown with an error message.
echo "
<body class='bootstrap'>
	<div class='container'>
	<h2>Credenciales Inválidas</h2>
	<a href='index.php' class='btn btn-danger' role='button'>Intente de nuevo</a>
	</div>
</body>		
";
}
}
//3.1.4 if the user is logged in Greets the user with message
if (isset($_SESSION['username'])){
	$username = $_SESSION['username'];

echo"
	<body class='bootstrap'>
		<div class='container'>

		<img src='../reporte/img/compo.png'>
		<p>Tabla de administración de reportes</p>
		<hr>
		<a href='logout.php' class='btn btn-warning' role='button'>Cerrar sesión</a>
		<a href=#graficos class='btn btn-primary' role='button'>Ver gráficos</a>
		<hr>

			
		<table cellpadding='0' cellspacing='0' border='0' class='table table-striped table-bordered' id='sprectable' width='100%'>
				<thead>
					<tr>
						<th>ticket No.</th>
						<th>tipo</th>
						<th>nombre</th>
						<th>identificacion</th>
						<th>empresa</th>
						<th>cargo</th>
						<th>linea</th>
						<th>lugar</th>
						<th>lugarespecifico</th>
						<th>probabilidad</th>
						<th>severidad</th>
						<th>riesgo</th>
						<th>valoracion</th>
						<th>reporte</th>
						<th>plan</th>
						<th>timestamp</th>
						<th>estado</th>
						<th>seguimiento</th>
						<th>ticket</th>
					</tr>
				</thead>
			</table>

		</div>

		<hr>
   


	</body>
</html>
	";

}else{
	//3.2 When the user visits the page first time, simple login form will be displayed.
	echo "
	<body class='bootstrap'>
		<div class='container'>
		<h2>Tabla de administración</h2>
		<a href='index.html' class='btn btn-danger' role='button'>Ingresar</a>
		</div>
	</body>		
	";
	}

	?>





<div class="container" >

<div class="suma" id="graficos">
	<h3 id="suma">Locación: <?php echo $username ?> / Total de reportes: <?php echo $suma; ?></h3>
</div> 

<canvas id="myChart"></canvas>
   </div>       

<div class="container" >
<canvas id="myChart2"></canvas>
</div>  


<script>

arrayparatabla =[];
arraydefechasparatabla =[];

datosabierto = <?php echo $jsonabierto ?>;
datosenproceso = <?php echo $jsonenproceso ?>;
datoscerrado = <?php echo $jsoncerrado ?>;

console.log("datos abierto: " + datosabierto);
console.log("datos proceso: " + datosenproceso);
console.log("datos cerrado: " + datoscerrado);

// GRAFICA 1
            
let  myChart = document.getElementById('myChart').getContext('2d');  
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels: ["Abiertos", "En proceso", "Cerrados"],


datasets: [{
label: 'Número de items',

//aca van los datos en forma de array
data: [datosabierto, datosenproceso, datoscerrado ],

backgroundColor: [
    'rgba(219, 26, 26, 0.2)',
    'rgba(237, 206, 30, 0.2)',
    'rgba(57, 173, 211, 0.2)',
],
borderColor: [
    'rgba(219, 26, 26,1)',
    'rgba(237, 206, 30, 1)',
    'rgba(57, 173, 211, 1)',

],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
    ticks: {
        beginAtZero:true,
        stepSize: 1
    }
}]
}
}
});  



  // GRAFICA 2

let  myChart2 = document.getElementById('myChart2').getContext('2d');  
let massPopChart2 = new Chart(myChart2, {
type: 'doughnut',
data: {
    labels: ["Abiertos", "En proceso", "Cerrados"],

datasets: [{
label: 'Número de items',

//aca van los datos en forma de array
data: [datosabierto, datosenproceso, datoscerrado ],

backgroundColor: [
    'rgba(219, 26, 26, 0.2)',
    'rgba(237, 206, 30, 0.2)',
    'rgba(57, 173, 211, 0.2)',
],
borderColor: [
    'rgba(219, 26, 26,1)',
    'rgba(237, 206, 30, 1)',
    'rgba(57, 173, 211, 1)',
],
borderWidth: 1
}]
},

 options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }

}); 



</script>







