<?php

include "db.class.php";
$db = new db();
include "html.class.php";
$html = new html();
$data_res = $db->exec_query('actions', ['*'], '', '', '', '', "unit_id = 1");
$unit_1_data = $data_res->fetch_assoc();
$data_res = $db->exec_query('actions', ['*'], '', '', '', '', "unit_id = 2");
$unit_2_data = $data_res->fetch_assoc();
$data_res = $db->exec_query('actions', ['*'], '', '', '', '', "unit_id = 3");
$unit_3_data = $data_res->fetch_assoc();
$date_reset_res = $db->exec_query('reset_date', ['*'], '', '', '', '', "record_id = 1");
$reset_date = $date_reset_res->fetch_assoc();
?>
<!DOCTYPE html>
<html>

<head>
    <title>My Web App</title>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #adadad;
        }

        .container {
            max-width: 100%;
            margin-top: 20px;
            margin-bottom: 20px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .chart-container {
            max-width: 100%;
            margin: auto;
            text-align: center;
        }

        .chart-label {
            font-size: 7em;
            text-align: center;
            margin-bottom: 2vw;
            text-decoration: underline;
        }

        .big_card {
            border: 1px solid blue;
            border-radius: 5vw;
            margin: 5vw;
            background-color: white;
            width: 90%;
        }

        @media (max-width: 767px) {
            .chart-container {
                max-width: 100%;
            }
        }

        input[type=number],
        input[type=submit],
        select {
            border: 1px solid blue;
            border-radius: 5vw;
            padding: 10px;
            font-size: 3em;
            width: 80%;
            margin-bottom: 2vw;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
        }

        select {
            appearance: none;
            overflow: hidden;
        }

        select option {
            width: 50%;
            /* Adjust the width of the dropdown options */
            box-sizing: border-box;
            height: 50%;
            font-size: 1em;
        }

        @media (max-width: 767px) {

            input[type=number],
            input[type=submit],
            select {
                font-size: 1.5em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <?php
            if (isset($_GET['vincent'])) { ?>
                <div class="col-md-4 big_card">
                    <div class="chart-container">
                        <h1 style="font-size: 4em;">DAY TO USE SILILOMANZI</h1>
                        <select id="reset_input_value" style="font-size: 2em;" onchange="reset_input_change()">

                            <option value="1">1st</option>
                            <option value="2">2nd</option>
                            <option value="3">3rd</option>
                            <option value="4">4th</option>
                            <option value="5">5th</option>
                            <option value="6">6th</option>
                            <option value="7">7th</option>
                            <option value="8">8th</option>
                            <option value="9">9th</option>
                            <option value="10">10th</option>
                            <option value="11">11th</option>
                            <option value="12">12th</option>
                            <option value="13">13th</option>
                            <option value="14">14th</option>
                            <option value="15">15th</option>
                            <option value="16">16th</option>
                            <option value="17">17th</option>
                            <option value="18">18th</option>
                            <option value="19">19th</option>
                            <option value="20">20th</option>
                            <option value="21">21st</option>
                            <option value="22">22nd</option>
                            <option value="23">23rd</option>
                            <option value="24">24th</option>
                            <option value="25">25th</option>
                            <option value="26">26th</option>
                            <option value="27">27th</option>
                            <option value="28">28th</option>

                        </select>

                            <input type="submit" name="reset_input" id="reset_input" onclick="update_reset_day()"
                                style="background-color: #4CAF50; transition: background-color .5s ease;" />

                        <script>
                            document.getElementById("reset_input_value").value = <?php echo $reset_date['day']; ?>;
                            reset_input_submit = document.getElementById("reset_input");
                            let flashing_reset = false;

                            function reset_input_change() {

                                if (!flashing_reset) {
                                    flashing_reset = true;
                                    reset_input_submit.value = "SAVE";
                                    reset_input_submit.style.backgroundColor = "#4CAF50";
                                    flash_RESET_FUNC();
                                    // console.log('flash executed');
                                }

                            }

                            reset_input_submit.addEventListener("click", function () {
                                reset_input_submit.value = 'SAVING...';
                                setTimeout(function () {
                                    reset_input_submit.value = 'Submit';
                                    flashing_reset = false;
                                    reset_input_submit.style.backgroundColor = "#4CAF50";
                                }, 1000);
                            });

                            function flash_RESET_FUNC() {
                                if (flashing_reset) {
                                    // console.log('flashing');
                                    reset_input_submit.style.backgroundColor = (reset_input_submit.style.backgroundColor === "green" ? "blue" : "green");
                                    setTimeout(flash_RESET_FUNC, 500);
                                }
                            }
                        </script>

                    </div>
                </div>
            <?php }
            
            if (isset($_GET['reinhard'])) { ?>
                <div class="col-md-4 big_card">
                    <div class="chart-label">SYSIE 3</div>
                    <div class="chart-container">
                        <div id="unit_1"></div>
                      
                        <input type="number" onchange="unit_1_threshold_change()" name="unit_1_threshold"
                            id="unit_1_threshold" min=0 max=20000 step=0.1
                            value="<?php echo round($unit_1_data['threshold'] * 2.6 / 1000, 1); ?>" />


                        <input type="submit" name="unit_1_submit" id="unit_1_submit" onclick="update_unit_1_threshold()" style="background-color: #4CAF50; transition: background-color .5s ease;" />

                        <script>
                            unit_1_submit = document.getElementById("unit_1_submit");
                            let flashing = false;

                            function unit_1_threshold_change() {

                                if (!flashing) {
                                    flashing = true;
                                    unit_1_submit.value = "SAVE";
                                    unit_1_submit.style.backgroundColor = "#4CAF50";
                                    flash();
                                    // console.log('flash executed');
                                }
                            }

                            unit_1_submit.addEventListener("click", function () {
                                unit_1_submit.value = 'SAVING...';
                                setTimeout(function () {
                                    unit_1_submit.value = 'Submit';
                                    flashing = false;
                                    unit_1_submit.style.backgroundColor = "#4CAF50";
                                }, 1000);
                            });

                            function flash() {
                                if (flashing) {
                                    // console.log('flashing');
                                    unit_1_submit.style.backgroundColor = (unit_1_submit.style.backgroundColor === "green" ? "blue" : "green");
                                    setTimeout(flash, 500);
                                }
                            }
                        </script>

                    </div>
                </div>
            <?php }
            if (isset($_GET['vincent'])) { ?>
                <div class="col-md-4 big_card">
                    <div class="chart-label">SYSIE 5</div>
                    <div class="chart-container">
                        <div id="unit_3"></div>
                       
                        <input type="number" name="unit_3_threshold" onchange="unit_3_threshold_change()"
                            id="unit_3_threshold" min=0 max=20000 step=0.1
                            value="<?php echo round($unit_3_data['threshold'] * 2.6 / 1000, 1); ?>" />

                        <input type="submit" name="unit_3_submit" id="unit_3_submit" onclick="update_unit_3_threshold()" />

                        <script>
                            unit_3_submit = document.getElementById("unit_3_submit");
                            let flashing_1 = false;

                            function unit_3_threshold_change() {
                                if (!flashing_1) {
                                    flashing_1 = true;
                                    unit_3_submit.value = "SAVE";
                                    unit_3_submit.style.backgroundColor = "#4CAF50";
                                    flash_1();
                                    // console.log('flash executed');
                                }
                            }

                            unit_3_submit.addEventListener("click", function () {
                                unit_3_submit.value = 'SAVING...';
                                setTimeout(function () {
                                    unit_3_submit.value = 'Submit';
                                    flashing_1 = false;
                                    unit_3_submit.style.backgroundColor = "#4CAF50";
                                }, 1000);
                            });

                            function flash_1() {
                                if (flashing_1) {
                                    // console.log('flashing');
                                    unit_3_submit.style.backgroundColor = (unit_3_submit.style.backgroundColor === "green" ? "blue" : "green");
                                    setTimeout(flash_1, 500);
                                }
                            }
                        </script>


                    </div>
                </div>
                <div class="col-md-4 big_card">
                    <div class="chart-label">SYSIE 6</div>
                    <div class="chart-container">
                        <div id="unit_2"></div>
                        
                        <input type="number" name="unit_2_threshold" onchange="unit_2_threshold_change()" id="unit_2_threshold" min=0 max=20000 step=0.1 value="<?php echo round($unit_2_data['threshold'] * 2.6 / 1000, 1); ?>" />

                        <input type="submit" name="unit_2_submit" id="unit_2_submit" onclick="update_unit_2_threshold()" />

                        <script>
                            unit_2_submit = document.getElementById("unit_2_submit");
                            let flashing_2 = false;

                            function unit_2_threshold_change() {
                                if (!flashing_2) {
                                    flashing_2 = true;
                                    unit_2_submit.value = "SAVE";
                                    unit_2_submit.style.backgroundColor = "#4CAF50";
                                    flash_2();
                                    // console.log('flash executed');
                                }
                            }

                            unit_2_submit.addEventListener("click", function () {
                                unit_2_submit.value = 'SAVING...';
                                setTimeout(function () {
                                    unit_2_submit.value = 'Submit';
                                    flashing_2 = false;
                                    unit_2_submit.style.backgroundColor = "#4CAF50";
                                }, 1000);
                            });

                            function flash_2() {
                                if (flashing_2) {
                                    // console.log('flashing');
                                    unit_2_submit.style.backgroundColor = (unit_2_submit.style.backgroundColor === "green" ? "blue" : "green");
                                    setTimeout(flash_2, 500);
                                }
                            }
                        </script>


                    </div>
                </div>
            <?php } ?>
        </div>
    </div>

</body>
<script>
    <?php if (isset($_GET['reinhard'])) { ?>
        function refreshUnit1() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("unit_1").innerHTML = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_1", true);
            xhttp.send();
        }
        refreshUnit1();
        setInterval(refreshUnit1, 1000);

        function update_unit_1_threshold() {
            unit_1_threshold = document.getElementById("unit_1_threshold").value;
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    console.log = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_1_threshold=" + unit_1_threshold, true);
            xhttp.send();
        }

    <?php }
    if (isset($_GET['vincent'])) { ?>
        function refreshUnit2() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("unit_2").innerHTML = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_2", true);
            xhttp.send();
        }
        refreshUnit2();
        setInterval(refreshUnit2, 1000);
        function refreshUnit3() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("unit_3").innerHTML = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_3", true);
            xhttp.send();
        }
        refreshUnit3();
        setInterval(refreshUnit3, 1000);

        function update_unit_2_threshold() {
            unit_2_threshold = document.getElementById("unit_2_threshold").value;
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    console.log = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_2_threshold=" + unit_2_threshold, true);
            xhttp.send();
        }

        function update_unit_3_threshold() {
            unit_3_threshold = document.getElementById("unit_3_threshold").value;
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    console.log = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?unit_3_threshold=" + unit_3_threshold, true);
            xhttp.send();
        }

        function update_reset_day() {
            reset_input = document.getElementById("reset_input_value").value;
            if (reset_input.value < 1 || reset_input.value > 28) {
                alert("Please enter a day between 1 and 28"); return;
            }
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    console.log = xhttp.responseText;
                }
            };
            xhttp.open("GET", "ajax.php?reset_input=" + reset_input, true);
            xhttp.send();
        }
    <?php } ?>



</script>

</html>