<?php
session_start();

include "classes/html.class.php";

$db = new db();
$html = new html("FUEL PETROL");

$farm_res = $db->exec_query('farms', ['*']);
$farms_list = '<option value="0"></option>';
while ($farms = $farm_res->fetch_assoc()) {
    $farms_list = $farms_list . "<option value='{$farms['record_id']}'>{$farms['farm_name']}</option>";
}

?>

<div class='form'>
    <br>
    <label style="font-size:1.5vw">Farms: </label><br>
    <select name='farm_id' id='farm_id' class='form_input'>
        <?php echo $farms_list; ?>
    </select>
    <br><br>

    <label style="font-size:1.5vw">Liters: </label><br>
    <input type='text' placeholder="LITERS" id='liters' class='form_input' /><br><br>

    <label style="font-size:1.5vw">NOTES: </label><br>
    <textarea type='text' style="width: 80%;" id='notes' class='form_input'
        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"></textarea>
    <br><br>

    <input type='submit' value='SUBMIT' class='form_btn' onclick='ajax_func()' />
</div>
<br><br>

<script>

    function ajax_func() {
        var farm_id = document.getElementById('farm_id').value;
        var liters = document.getElementById('liters').value;
        var notes = document.getElementById('notes').value;

        // Create an XMLHttpRequest object
        const xhttp = new XMLHttpRequest();
        // Define a callback function
        xhttp.onload = function () {
            // alert(this.responseText);

            // Here you can use the Data
            if (this.responseText != 1) {

                console.log(this.responseText);

            } else {
                alert('PEROL RECORDED');
                window.location.href = "home.php";
            }
        }

        xhttp.open("GET", "ajax/fuel_petrol.ajax.php?farm_id=" + farm_id + "&liters=" + liters + "&notes=" + notes );
        xhttp.send();

    }

</script>