<?php
global $votes;
include "includes/security.php";
?>

<!DOCTYPE HTML>
<html lang="it">

<head>
    <title>Login</title>
    <?php require "includes/head.php"; ?>
</head>

<body>

<div class="container">
    <h1>Statistiche dei voti</h1>
    <canvas id="statistiche"></canvas>
    <canvas id="statistichePC"></canvas>
    <canvas id='statisicheBrowser'></canvas>
</div>

<?php require "includes/footer.php"; ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('statistiche');
    const statsPC = document.getElementById('statistichePC');
    const statsBrowser = document.getElementById('statisicheBrowser');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Pellegrini', 'Egonu', 'Vio'],
            datasets: [{
                label: '# of Votes',
                data: [<?= $votes["voto_Pellegrini"] ?>, <?= $votes[
    "voto_Egonu"
] ?>, <?= $votes["voto_Vio"] ?>,],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


    new Chart(statsPC, {
        type: 'bar',
        data: {
            labels: ['Totti', 'Tamberi', 'Rossi'],
            datasets: [{
                label: '# of Votes',
                data: [<?= $votes["voto_Totti"] ?>, <?= $votes[
    "voto_Tamberi"
] ?>, <?= $votes["voto_Rossi"] ?>,],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    new Chart(statsBrowser, {
        type: 'bar',
        data: {
            labels: ['Maschi', 'Femmine'],
            datasets: [{
                label: '# of Votes',
                data: [<?= $_COOKIE["votiMaschili"] ?>, <?= $_COOKIE[
    "votiFemminili"
] ?>],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>
