<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();


$submit_btn = new button();
$submit_btn->value("SUBMIT");
$submit_btn->id("submit_btn");

?>

<form action="recieve_stock.ajax.php" method="post">
    <div class="form_down">
        <h1>RECEIVED STOCK</h1>
        <style>
            table {
                border-collapse: collapse;
                width: 90%;
                background-color: whitesmoke;
            }

            table,
            th,
            td {
                border: 2px solid black;
            }

            th {
                padding: 1vw;
            }
        </style>

        <?php
        
        ?>

        <table>
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Quantity Received</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input id="item_name_1" name="item_name_1" onchange="get_stock_data(1)" list="stock_list" style="">
                    </td>
                    <td>
                        <input id="quantity_1" name="quantity_1" style="">
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="text-align: center;">
                        
                    </td>
                </tr>
            </tfoot>
        </table>

        <table>
            <thead>
                <tr>
                    <th>Item Name</th>
                    <th>Quantity Received</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input id="item_name_1" name="item_name_1" onchange="get_stock_data(1)" list="stock_list" style="">
                    </td>
                    <td>
                        <input id="quantity_1" name="quantity_1" style="">
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="text-align: center;">
                        
                    </td>
                </tr>
            </tfoot>
        </table>

        <?php
        $submit_btn->add();
        ?>

        <script>
            var i = 1;

            function add_row() {
                // Get the table body where rows should be added
                const tableBody = document.querySelector("#table_ " + name + " tbody"); // Update with your actual table ID

                if (!tableBody) {
                    console.error("Table body not found");
                    return;
                }

                // Create just the row, not a whole table
                const row = document.createElement("tr");
                row.innerHTML = `
                <td>
                    <input type="text" id="type_${i}" name="type_${i}" list="stock_list" autocomplete="off">
                </td>
                <td>
                    <input type="text" id="item_name_${i}" name="item_name_${i}" data-index="${i}">
                </td>
                <td>
                    <input type="number" id="quantity_${i}" name="quantity_${i}" data-index="${i}">
                </td>
                <td>
                    <input type="text" id="user_assigned_${i}" name="user_assigned_${i}">
                </td>
                <td>
                    <input type="number" id="open_balance_${i}" name="open_balance_${i}" readonly>
                </td>
                <td>
                    <input type="number" id="closing_balance_${i}" name="closing_balance_${i}" readonly>
                </td>
                <td>
                    <button type="button" class="width_100 delete-btn">DELETE</button>
                </td>
                `;

                // Append the row to table body
                tableBody.appendChild(row);

                // Event bindings
                row.querySelector(`#item_name_${i}`).addEventListener("change", function () {
                    getItemData(i);
                });

                row.querySelector(`#quantity_${i}`).addEventListener("blur", function () {
                    maxQuantity(this, i);
                });

                row.querySelector(".delete-btn").addEventListener("click", function () {
                    delete_row(this);
                });

                const noRowsInput = document.getElementById("no_rows");
                if (noRowsInput) {
                    noRowsInput.value = parseInt(noRowsInput.value || 0) + 1;
                }

                i++;
            }

            function delete_row(el) {
                var row = el.parentNode.parentNode;
                row.parentNode.removeChild(row);
                calculateTotals();
            }

            function calculateTotals() {
                var total = 0;
                var open_balance_total = 0;
                var closing_balance_total = 0;

                var open_balance_inputs = document.querySelectorAll("input[name^='open_balance_']");
                var closing_balance_inputs = document.querySelectorAll("input[name^='closing_balance_']");

                open_balance_inputs.forEach(function (input) {
                    var value = parseFloat(input.value) || 0;
                    open_balance_total += value;
                });

                closing_balance_inputs.forEach(function (input) {
                    var value = parseFloat(input.value) || 0;
                    closing_balance_total += value;
                });

                // document.getElementById("total").value = open_balance_total;
                document.getElementById("open_balance_total").value = "R " + open_balance_total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                document.getElementById("close_balance_total").value = "R " + closing_balance_total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }

            

        </script>

    </div>
</form>