<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$stock_data_res = $db->query("stock", "SELECT * FROM stock");

while ($stock_data = $stock_data_res->fetch_assoc()) {

    $stock_items = $stock_items . "<option value='" . $stock_data["record_id"] . "'>" . $stock_data["item_name"] . "</option>";
}

$stock_no_label = new label();
$stock_no_label->for("stock_no");
$stock_no_label->value("Stock No:");

$stock_no = new select();
$stock_no->class("inputs");
$stock_no->name("stock_no");
$stock_no->id("stock_no");
$stock_no->fill_from_db("stock", "stock_no", "stock_no");

$jobcard_no_label = new label();
$jobcard_no_label->for("jobcard_no_label");
$jobcard_no_label->value("Jobcard No : ");

$jobcard_no = new select();
$jobcard_no->class("inputs");
$jobcard_no->name("jobcard_no");
$jobcard_no->id("jobcard_no");
$jobcard_no->fill_from_db("jobcards", "jc_no", "jc_no", "status = 0");

$stock_type_label = new label();
$stock_type_label->for("stock_type_label");
$stock_type_label->value("STOCK TYPE : ");
$stock_type_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$stock_type = new select();
$stock_type->class("inputs");
$stock_type->name("stock_type");
$stock_type->id("stock_type");
$stock_type->fill_from_db("stock_types", "record_id", "name");
$stock_type->onchange("getStockTypeDetails()");
$stock_type->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$stock_label = new label();
$stock_label->for("stock_label");
$stock_label->value("STOCK : ");
$stock_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$date_booked_label = new label();
$date_booked_label->for("date_booked_label");
$date_booked_label->value("BOOKING DATE : ");
$date_booked_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$date_booked = new input();
$date_booked->class("inputs");
$date_booked->name("date_booked");
$date_booked->id("date_booked");
$date_booked->type("datetime-local");
$date_booked->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$user_id_label = new label();
$user_id_label->for("user_id_label");
$user_id_label->value("USER ID : ");
$user_id_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$user_id = new input();
$user_id->type("hidden");
$user_id->id("user_id");
$user_id->name("user_id");
$user_id->value($_SESSION["user_id"]);

$no_rows = new input();
$no_rows->type("hidden");
$no_rows->id("no_rows");
$no_rows->name("no_rows");
$no_rows->value(0);

$submit_btn = new button();
$submit_btn->value("SUBMIT");
$submit_btn->id("submit_btn");

?>

<form action="book_stock.ajax.php" method="post">
    <div class="form_down">
        <h1>ASSIGN STOCK</h1>
        <style>
            table {
                border-collapse: collapse;
                width: 80%;
                background: #ffffff;
                font-size: 1rem;
                border: 2px solid black;
            }

            th,
            td {
                border: 1px solid #e5e7eb;
                padding: 0.1vw;
                text-align: left;

            }

            th {
                background: #1e3a8a;
                color: #ffffff;
                font-weight: 700;
                padding: 0.1vw;

            }

            .inputs {
                border: 1px solid #cbd5e1;
                border-radius: 8px;
                padding: 9px 11px;
                font-size: 0.9rem;
                background: #ffffff;
                color: #0f172a;
            }

            .inputs:focus {
                outline: none;
                border-color: #2563eb;
                box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
            }

            .delete_btn {
                width: 100%;
                padding: 12px;
                border-radius: 10px;
                border: none;
                background: linear-gradient(135deg, #f97316, #fb923c);
                color: #ffffff;
                font-weight: 700;
                letter-spacing: 0.04em;
                cursor: pointer;
                transition: transform 0.15s ease, box-shadow 0.15s ease;
            }

            .delete_btn:hover {
                background: linear-gradient(135deg, #224396, #153b96);
            }
        </style>

        <?php
        $user_id->add();
        ?>

        <div style="display: flex; flex-direction: row; width: 100%;">
            <?php
            $date_booked_label->add();
            $date_booked->add();
            ?>
        </div>

        <br>
        <div id="defualt_section" style="display: flex; flex-direction: column; width: 100%; align-items: center;">

            <div style="display: flex; flex-direction: row; width: 100%;">
                <label for="pump_code" class="labels" style="font-size: 1.5em; width: 30%;">PUMP CODE : </label>
                <input type="text" id="pump_code" name="pump_code" class="inputs"
                    style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;">
            </div>

            <input type="text" id="no_rows" name="no_rows" value="0" hidden>

            <?php
            $stock_type_list_res = $db->query("stock_types", "SELECT * FROM stock_types");
            $stock_type_list = "";

            while ($stock_type = $stock_type_list_res->fetch_assoc()) {
                $stock_type_list .= "<option value='{$stock_type['record_id']}'>{$stock_type['name']}</option>";
            }

            $users_list_res = $db->query("users", "SELECT * FROM users");
            $users_list = "";

            while ($user = $users_list_res->fetch_assoc()) {
                $users_list .= "<option value='{$user['record_id']}'>{$user['username']}</option>";
            }

            ?>

            <br>
            <table style="width:95%;" id="table_defualt">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Item Name</th>
                        <th>Quantity</th>
                        <th>User Assigned</th>
                        <th>Open Balance</th>
                        <th>Closing Balance</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select id="type_defualt_1" name="type_defualt_1" style="width: 100%; margin: 0vw;"
                                class="inputs" onchange="getStockTypeDetails(1,'defualt')">
                                <option value=""></option>
                                <?php
                                echo $stock_type_list;
                                ?>
                            </select>
                        </td>
                        <td>
                            <input id="item_defualt_1" name="item_name_1" list="stock_list_1"
                                style="width: 100%; margin: 0vw;" class="inputs">
                            <datalist id="stock_list_1"></datalist>
                        </td>
                        <td>
                            <input type="number" id="quantity_defualt_1" name="quantity_defualt_1"
                                style="width: 100%; margin: 0vw;" class="inputs" onchange="getQuantity(1, 'defualt')">
                        </td>
                        <td style="width: 10%;">
                            <select id="user_defualt_1" name="user_defualt_1" style="width: 100%; margin: 0vw;"
                                class="inputs">
                                <option value=""></option>
                                <?php
                                echo $users_list;
                                ?>
                            </select>
                        </td>
                        <td>
                            <input id="open_balance_defualt_1" name="open_balance_defualt_1"
                                style="width: 100%; margin: 0vw;" class="inputs">
                        </td>
                        <td>
                            <input id="closing_balance_defualt_1" name="closing_balance_defualt_1"
                                style="width: 100%; margin: 0vw;" class="inputs">
                        </td>
                        <td>
                            <button onclick="delete_row(this)" class="delete_btn">DELETE</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" style="text-align: right; font-size: 0.9em; font-weight: bold;">TOTAL : </td>
                        <td>
                            <input id="open_balance_total" name="open_balance_total" style="width: 100%; margin: 0vw;"
                                class="inputs">
                        </td>
                        <td>
                            <input id="open_balance_total" name="open_balance_total" style="width: 100%; margin: 0vw;"
                                class="inputs">
                        </td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>

            <input type="button" value="ADD ROW" onclick="add_row('defualt')" class="submit_btn">
        </div>

        <br>

        <?php
        $submit_btn->add();
        ?>
    </div>
</form>

<script>

    const rowIndex = {
        pump: 2,
        defualt: 2
    };

    function getStockTypeDetails(i, section) {

        const stock_type = document.getElementById(`type_${section}_${i}`).value;
        const datalist = document.getElementById(`stock_list_${i}`);

        if (!datalist) {
            console.error("Missing datalist: stock_list_" + i);
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "get_stock_type.ajax.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onload = function () {

            console.log(xhr.responseText);
            datalist.innerHTML = xhr.responseText;

        };

        xhr.send("stock_type=" + stock_type);
    }

    function getQuantity(i, section) {

        const item_name = document.getElementById(`item_${section}_${i}`).value;
        const quantity = document.getElementById(`quantity_${section}_${i}`);

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "get_stock.ajax.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onload = function () {

            console.log(xhr.responseText);
            quantity.innerHTML = xhr.responseText;

        };

        xhr.send("item_name=" + item_name);
    }

    function get_stock_data(i, section) {
        var type = document.getElementById("type_" + i + "").value;
        var item_name = document.getElementById("item_name_" + i + "").value;
        const stock_type = document.getElementById("stock_type").value;

        let xhr = new XMLHttpRequest();
        xhr.open("POST", "get_stock_data.ajax.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 🔥 Inject options into datalist
                console.log(xhr.responseText);

                document.getElementById("quantity_" + section + i + "").innerHTML = xhr.responseText;
            }
        };

        xhr.send("type=" + type + "&item_name=" + item_name + "&stock_type=" + stock_type);

    }

    function add_row(section) {

        const tableId = section === "pump" ? "table_pump" : "table_defualt";
        const tableBody = document.querySelector(`#${tableId} tbody`);

        if (!tableBody) return;

        const i = rowIndex[section];
        const row = document.createElement("tr");

        if (section === "pump") {
            row.innerHTML = `
                <td>
                <select name="type_${section}_${i}" id="type_${section}_${i}" class="inputs" style="width: 100%; margin: 0vw;" onchange="getStockTypeDetails(${i}, '${section}')">
                    <option value=""></option>
                    <?php
                    echo $stock_type_list;
                    ?>
                </select>
                </td>
                <td><input list="stock_list_${i}" id="item_${section}_${i}" name="item_${section}_${i}" onchange="get_stock_data(${i}, ${section})" style="width: 100%; margin: 0vw;" class="inputs"></td>
                <td><input type="number" name="qty_${section}_${i}" id="quantity_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs"></td>
                <td>
                    <select name="user_${section}_${i}" id="user_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs">
                        <option value=""></option>
                        <?php echo $users_list; ?>
                    </select>
                </td>
                <td><input name="open_balance_${section}_${i}" id="open_balance_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs"></td>
                <td><input name="close_balance_${section}_${i}" id="close_balance_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs"></td>
                <td><button type="button" onclick="delete_row(this)" class="delete_btn">DELETE</button></td>
            `;
        } else {
            row.innerHTML = `
                <td>
                    <select name="type_${section}_${i}" id="type_${section}_${i}" class="inputs" style="width: 100%; margin: 0vw;" onchange="getStockTypeDetails(${i}, '${section}')">
                        <option value=""></option>
                        <?php
                        echo $stock_type_list;
                        ?>
                    </select>
                </td>
                <td>
                    <input list="stock_list_${i}"
                        name="item_${section}_${i}" id="item_${section}_${i}" onchange="get_stock_data(${i}, ${section})" style="width: 100%; margin: 0vw;" class="inputs">
                        <datalist id="stock_list_${i}"></datalist>
                </td>
                <td>
                    <input type="number" name="quantity_${section}_${i}" id="quantity_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs" onchange="getQuantity(this, ${i})">
                </td>
                <td style="width: 10%;">
                    <select name="user_${section}_${i}" id="user_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs">
                        <option value=""></option>
                        <?php echo $users_list; ?>
                    </select>
                </td>
                <td>
                    <input name="open_${section}_${i}" id="open_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs">
                </td>
                <td>
                    <input name="close_${section}_${i}" id="close_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs">
                </td>
                <td>
                    <button type="button" onclick="delete_row(this)" class="delete_btn">DELETE</button>
                </td>
            `;
        }

        tableBody.appendChild(row);
        rowIndex[section]++;
    }

    function maxQuantity(input, index) {
        var j = index - 1;
        var max_quantity = document.getElementById("current_quantity_" + j).value;

        var quantity = document.getElementById("quantity_" + j).value;

        if (max_quantity < quantity) {
            alert("Quantity cannot be greater than current quantity");
        } else {
            return quantity;
        }
    }

    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>