<?php
$cookie = $_COOKIE['usuario'];
// $_SESSION['username'] = $cookie;
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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>


<style>
		.divderesultado{
	border-radius: 2em;
	color: whitesmoke;
	text-align: center;
	padding: 2em;
	background-color: darkgrey;
	}

	.logo{
		width: 70%;
		height: auto;
		text-align: center
	}

	.header{
		color: rgb(77, 77, 77);
	}

  .suma{
    background-color: rgb(231, 181, 14);
    border-radius: 2em;
    Text-align: center;
    color: black;
  }
	</style>


</head>

<body style="background-color: whitesmoke">


<?php

$servername = "localhost";
$username = "atentovo_usr";
$password = "G@01t@02e@03";
$dbname = "atentovo_gtespeec_sprecdatabase"; 





$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
} 


$sql1 = "SELECT * FROM `sprectable` WHERE `lugar` = '$cookie' AND `estado` = 'Abierto'";
$sql2 = "SELECT * FROM `sprectable` WHERE `lugar` = '$cookie' AND `estado` = 'En proceso'";
$sql3 = "SELECT * FROM `sprectable` WHERE `lugar` = '$cookie' AND `estado` = 'Cerrado'";

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

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

$result3 = mysqli_query($conn, $sql3); 
$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);


?> 
 
<div class="bootstrap">
<div class="container">
<div class="row" style="text-align: 'center'; padding: 3em;">
  <a href='logout.php' class='btn btn-warning' role='button'>Cerrar sesión</a>
  <a href='administracion.php' class='btn btn-primary' role='button'>Volver a la tabla</a>
</div>
</div>
<hr>

    
  <div class="suma">

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

  </div>  
<br>

<!-- chart js -->

<!-- <div class="row"> -->
  <!-- <div class="container"> -->
    <div class="container" >
     <canvas id="myChart"></canvas>
    </div>       
  <!-- </div> -->
<!-- </div> -->


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



<hr>

 

</div>

<!-- script de grafico -->


<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>



</body>
</html>






