<?php

session_start();
include "../../html.class.php";
include "../../classes/db.class.php";
$html = new html();

$transaction_id = $_GET['transaction_number'];
$order_id = $_GET['order_id'];

?>

<style>
    body {
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }
</style>

<div class="tank_item_container">
    <h1>DIESEL TRAN.</h1>
    <h2><?php echo $order_id; ?></h2>
    <br>
    <h3>STATUS</h3>
    <div id="status_div"
        style="border: 1px solid #000;width:90%;height:5vh;border-radius:1vw;font-size:2em;padding:1em;"></div>
    <br>
    <h3>AMOUNT</h3>
    <div id="amount_div"
        style="border: 1px solid #000;width:90%;height:5vh;border-radius:1vw;font-size:2em;padding:1em;"></div>
    <br>
    <button class="submit_btn" onclick="window.location.href='../home.php';">CONTINUE</button>
</div>


<script>
    check_details();
    function check_details() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var response = JSON.parse(this.responseText);
                document.getElementById("status_div").innerHTML = response['status'];
                document.getElementById("amount_div").innerHTML = (response['amount'] / 1000).toFixed(3) + " L";

            }
        };
        xhttp.open("GET", "get_tran_details.ajax.php?transaction_number=<?php echo $transaction_id; ?>", true);
        xhttp.send();
    }

    setInterval(function () { check_details() }, 1000);
</script>