<?php
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

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

    // require('connect.php');

    // $conn = new mysqli($host, $user, $pass, $database);
    // $sql = "SELECT `id`,`start_date`, `end_date`, `price` FROM `billings`";
    // $result = mysqli_query($conn, $sql);

    // mysqli_close($conn);

    // $lp=0;  
?>

<!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>Modyfikowanie cen 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">Modyfikowanie cen energii</h1>
            <button class="btn btn-primary" onclick="newPrice()">Dodaj nową cenę za kWh</button>
        </div>
        
    </main>

    <div class="table-responsive small">
        <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Data rozpoczęcia</th>
                    <th scope="col">Data zakończenia</th>
                    <th scope="col">Cena za kWh</th>
                    <th scope="col">Akcje</th>
                </tr>
            </thead>
            <tbody id="billingsTable">
                <!-- <tr>
                    <td>1,001</td>
                    <td>random</td>
                    <td>data</td>
                    <td>placeholder</td>
                    <td>text</td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <div id="addPriceDiv" class="modal modal-sheet d-block d-none rounded-4 p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
        <!-- <form action="api/addPrice.php" method="get" id="formBilling"> -->
        <div id="formBilling">
            <div class="modal-dialog " role="document">
                <div class="modal-content rounded-4 shadow">
                    <div class="modal-header border-bottom-0">
                        <h1 class="modal-title fs-5">Nowa cena</h1>
                        <button type="button" id="btn-close" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closePrice()"></button>
                    </div>
                    <div class="modal-body py-0">
                        <label>
                            Data rozpoczęcia<input type="date" id="startDate" name="startDate" class="form-control rounded-3 relay-email-input-with-button-hovered" required>
                        </label>
                        <label>
                            Data zakończenia<input type="date" id="endDate" name="endDate" class="form-control rounded-3 relay-email-input-with-button-hovered" required>
                        </label>
                        <label>
                            Cena za kWH<input type="text" oninput="this.value = this.value.replace(/[^0-9,]|(?<=,.*),|(?<=\\..*)./g, '');" id="price" name="price" min="0" class="form-control rounded-3 relay-email-input-with-button-hovered" required>
                        </label>
                        <input type="text" name="id" id="billingId" hidden>
                        <input type="text" name="key" value="pricepassword" hidden>
                    </div>
                    <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
                        <button id="submitBtn" onclick="" class="btn btn-lg btn-primary">Zapisz</button>
                    </div>
                </div>
            </div>
        </div>            
    </div>

    <div id="deleteDiv" class="modal modal-sheet d-block d-none rounded-4 p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
        <!-- <form action="api/deletePrice.php" method="get" id="formBillingDelete"> -->
            <div class="modal-dialog " role="document">
                <div class="modal-content rounded-4 shadow">
                    <div class="modal-header border-bottom-0">
                        <h1 class="modal-title fs-5">Potwierdź usunięcie</h1>
                        <button type="button" id="btn-close" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeDelete()"></button>
                    </div>
                    <div class="modal-body py-0">   
                        <p>Czy napewno chcesz usunąć?</p>
                        <!-- <input type="text" name="id" id="billingIdDelete" hidden>
                        <input type="text" name="key" value="pricepassword" hidden> -->
                    </div>
                    <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
                        <!-- <input type="submit" class="btn btn-lg btn-danger" value="Usuń"> -->
                        <button class="btn btn-lg btn-danger" id="deleteBtn" onclick="">Usuń</button>
                    </div>
                </div>
            </div>
        <!-- </form>             -->
    </div>


    <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="energyPrice.js"></script>

</body>
</html>