<?php

include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$functions = new functions();
$db = new db_safeguard();
// echo $data;

$tanks_res = $db->query("tanks", "SELECT * FROM tanks WHERE company_id = {$_SESSION['company_id']} ORDER BY record_id DESC");
?>
<div class="form_down">
    <h1>TANKS SETTINGS</h1>
</div>
<div class="table-responsive">
    <table>
        <tr>
            <th>
                NAME
            </th>
            <th>
                SITE
            </th>
            <th>
                TANK SIZE
            </th>
            <th>
                FLOW CALIBRATION
            </th>
            <th>
                CUT OFF TIMER (Seconds)
            </th>
        </tr>

        <?php

        while ($tanks = $tanks_res->fetch_assoc()) {
            ?>

            <tr>
                <td>
                    <input type='text' value='<?php echo $tanks['name']; ?>'
                        onchange="change(this,'name','<?php echo $tanks['record_id']; ?>')" class="inputs">
                </td>
                <td>
                    <select class="inputs" onchange="change(this,'site_id','<?php echo $tanks['record_id']; ?>')">
                        <?php $sites_res = $db->query("sites", "SELECT * FROM sites WHERE company_id = {$_SESSION['company_id']}"); ?>
                        <option value="<?php echo $tanks['site_id']; ?>">
                            <?php echo $functions->get_site_name($tanks['site_id']); ?>
                        </option>
                        <?php while ($sites = $sites_res->fetch_assoc()) { ?>
                            <option value="<?php echo $sites['record_id']; ?>"><?php echo $sites['name']; ?></option>
                        <?php } ?>
                    </select>
                </td>
                <td>
                    <input type='text' value='<?php echo $tanks['tank_size']; ?>'
                        onchange="change(this,'tank_size','<?php echo $tanks['record_id']; ?>')" class="inputs">
                </td>
                <td>
                    <input type='text' value='<?php echo $tanks['flow_meter_calibration']; ?>'
                        onchange="change(this,'flow_meter_calibration','<?php echo $tanks['record_id']; ?>')"
                        class="inputs">
                </td>
                <td>
                    <input type='text' value='<?php echo $tanks['pump_cutoff_time']; ?>'
                        onchange="change(this,'pump_cutoff_time','<?php echo $tanks['record_id']; ?>')" class="inputs">
                </td>
            </tr>
            <?php
        }
        ?>

    </table>
</div>

<script>
    function change(input, column_name, record_id) {
        if (confirm("Are you sure you want to change this detail?")) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var orig_color = input.style.backgroundColor;
                    if (this.responseText == "1") {
                        input.style.transition = "background-color 1.5s ease";
                        input.style.backgroundColor = "green";
                        setTimeout(function () {
                            input.style.backgroundColor = orig_color;
                        }, 1500);

                    } else {
                        input.style.transition = "background-color 1.5s ease";
                        input.style.backgroundColor = "red";
                        setTimeout(function () {
                            input.style.backgroundColor = orig_color;
                        }, 1500);
                        alert(this.responseText);
                    }
                }
            };
            xmlhttp.open("POST", "update_tank_settings.ajax.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("value=" + input.value + "&column_name=" + column_name + "&record_id=" + record_id);
        }
    }
</script>