<?php
include "../root.class.php";

if (!isset($_SESSION['temp_table_orders_id'])) {
    echo "<script> alert('PLEASE SCAN THE QRCODE'); </script>";
}
$db = new db_safeguard();
$item_category_res = $db->query("item_categories", "SELECT * FROM item_categories WHERE record_id = {$_GET['item_category_id']} LIMIT 1");
$item_category_data = $item_category_res->fetch_assoc();
?>
<style>
    .menu-item {
        display: inline-block;
        margin: 10px;
        padding: 5vw;
        border: 2px solid #333;
        border-radius: 5px;
        background-color: #f2f2f2;
        width: 90%;
        height: auto;
        text-align: center;
        font-size: 8vw;
    }

    .menu-item a {
        text-decoration: none;
        color: #333;
        font-size: 10vw;
    }

    .menu-item img {
        width: 50%;
    }

    .item-link {
        display: block;
        margin: 5px 0;
        padding: 5px;
        background-color: #e0e0e0;
        border-radius: 3px;
        transition: background-color 0.3s ease;
        font-size: 6vw;
    }

    .item-link:hover {
        background-color: #ccc;
    }

    .item-amount {
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }

    .item-amount-btn {
        font-size: 4vw;
        width: 10vw;
    }

    .item-amount-input {
        font-size: 6vw;
        width: 10vw;
    }
</style>

<h1 style="text-align: center; font-size: 48px;"><?php echo $item_category_data['name']; ?></h1>

<hr style="border: 2px solid #333;">

<div
    style="text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: space-around; align-items: center;">
    <?php
    $item_sub_category_res = $db->query("item_sub_categories", "SELECT * FROM item_sub_categories WHERE item_categories_id = {$_GET['item_category_id']} ORDER BY name");
    while ($item_sub_category_data = $item_sub_category_res->fetch_assoc()) {
        ?>
        <div class="menu-item">
            <a><?php echo $item_sub_category_data['name']; ?></a>
            <hr>
            <img src="<?php echo $item_sub_category_data['image']; ?>" alt="<?php echo $item_sub_category_data['name']; ?>">
            <!-- ITEMS FROM SUB CATEGORY -->
            <?php
            $items_res = $db->query("items", "SELECT * FROM items WHERE item_sub_categories_id = {$item_sub_category_data['record_id']} ORDER BY name");
            while ($item_data = $items_res->fetch_assoc()) {
                ?>
                <div style="border: 1px solid #333; border-radius: 10px; padding: 10px; margin: 10px; display: inline-block;">
                    <p
                        style="display: flex;flex-direction: row;align-items: center;align-content: center;justify-content: center;">
                        <a class="item-link" id='<?php echo $item_data['record_id']; ?>' style="margin-right: 10px;">
                            <?php echo $item_data['name']; ?>
                        </a>
                    <div style="display: flex; flex-direction: column;">
                        <button type="button" class="item-amount-btn" style="display: block; margin: 5px auto;width: 50%;"
                            onclick="changeAmount(this, -1)">-</button>
                        <input type="number" value="0" class="item-amount-input"
                            id="<?php echo $item_data['record_id']; ?>_amount"
                            style="display: block; width: 50%; text-align: center; margin: 5px auto;"
                            onchange="updateAmount(this)">
                        <button type="button" class="item-amount-btn" style="display: block; margin: 5px auto; width: 50%;"
                            onclick="changeAmount(this, 1)">+</button>
                    </div>
                    </p>
                </div>

                <script>
                    function changeAmount(item, amount) {
                        var input = item.parentNode.querySelector("input");
                        input.value = parseInt(input.value) + amount;
                        updateAmount(input);
                    }

                    function updateAmount(item) {
                        var amount = parseInt(item.value);
                        if (amount < 1) {
                            amount = 1;
                        }
                        item.value = amount;
                        item_id = item.id.replace("_amount", "");
                        add_remove_item_from_temp_order(item_id, amount, <?php echo $_SESSION['temp_table_orders_id']; ?>);
                    }
                </script>
                <?php
            }
            ?>
        </div>
        <?php
    }
    ?>
</div>


<script>
    function add_remove_item_from_temp_order() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "root.class.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            console.log(xhr.responseText); // Handle response from server
            if (xhr.responseText == "0") {
                alert(xhr.responseText);
            }
        };
        xhr.send("add_remove_item_from_temp_order");
    }
</script>