<?php
    if(!isset($_COOKIE['login'])){
        $login = $_COOKIE['login'];
        if($login!==true){
            header("Location: login.php");
        }
    }
?>

<!DOCTYPE html>
<html lang="pl" data-bs-theme="auto">
<head>
    <script src="https://getbootstrap.com/docs/5.3/assets/js/color-modes.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Produkcja energii</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="manifest" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
    <link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#712cf9">
    
    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
</head>
<body>
    <main class="ms-sm-auto px-md-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <a href="index.php"><button class="btn btn-primary">Powrót</button></a>
            <h1 class="h2" id="title">Zestawienie produkcji energii</h1>
            <button class="btn btn-primary" onclick="fetchData('year')">Zestawienie roczne</button>
            <button class="btn btn-primary" onclick="fetchData('month')">Zestawienie miesięczne</button>
            <button class="btn btn-primary" onclick="fetchData('day')">Zestawienie dzienne</button>
            <!-- <button class="btn btn-primary" onclick="fetchData('hour')">Zestawienie godzinowe (jeden dzień)</button> -->
        </div>
        <div class="page container-xl">
            <h2 id="chartType"></h2>
            <div id="chartContainer" style="position: relative;" class="col-md-8">
                <canvas class="my-4 w-100" id="myChart" width="1000px" height="400"></canvas>
            </div>
            <div class="priceInfo">
                <h2>Koszt wyprodukowanej energii</h2>
                <h3>Koszt całkowity: <span id="energyTotalPrice"></span></h3>

                <div class="table-responsive small">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1,001</td>
                                <td>random</td>
                                <td>data</td>
                                <td>placeholder</td>
                                <td>text</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
    <script src="energy.js"></script>

</body>
</html>