<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

// generate a stock id using 3
$stock_res = $db->query("stock", "SELECT * FROM stock ORDER BY stock_no DESC LIMIT 1");

if (!$stock_res) {
    die("Database query failed: ");
}

if ($stock = $stock_res->fetch_assoc()) {
    //get the last 3 digits in the stock_id
    $last_three_digits = substr($stock["stock_no"], -3);
    $next_three_digits = $last_three_digits + 1;
    $stock_no = "ST" . str_pad($next_three_digits, 3, "0", STR_PAD_LEFT);

} else {
    $stock_no = "ST001";
}

$stock_id_label = new label();
$stock_id_label->for("stock_no_label");
$stock_id_label->value("STOCK NO : ");
$stock_id_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$stock_id = new input();
$stock_id->type("text");
$stock_id->name("stock_no");
$stock_id->id("stock_no");
$stock_id->value($stock_no);
$stock_id->readonly();
$stock_id->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$item_name_label = new label();
$item_name_label->for("item_name_label");
$item_name_label->value("ITEM NAME : ");
$item_name_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$item_name = new input();
$item_name->type("text");
$item_name->name("item_name");
$item_name->id("item_name");
$item_name->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$unit_of_measure_label = new label();
$unit_of_measure_label->for("quantity_type_label");
$unit_of_measure_label->value("UNIT TYPE : ");
$unit_of_measure_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$measuring_unit = new select();
$measuring_unit->name("unit_of_measure");
$measuring_unit->id("unit_of_measure");
$measuring_unit->add_option("liters", "liters");
$measuring_unit->add_option("kg", "kg");
$measuring_unit->add_option("meters", "meters");
$measuring_unit->addAttribute("style", "font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$quantity_label = new label();
$quantity_label->for("quantity_label");
$quantity_label->value("STOCK QUANTITY : ");
$quantity_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$quantity = new input();
$quantity->type("number");
$quantity->name("quantity");
$quantity->id("quantity");
$quantity->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$weight_label = new label();
$weight_label->for("weight_label");
$weight_label->value("AMOUNT : ");
$weight_label->addAttribute("style", "font-size: 1.5em; width: 20%;");

$weight = new input();
$weight->type("number");
$weight->name("weight");
$weight->id("weight");
$weight->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$item_price_label = new label();
$item_price_label->for("item_price_label");
$item_price_label->value("COST : ");
$item_price_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$status = new input();
$status->type("hidden");
$status->name("status");
$status->id("status");
$status->value(0);

$type_label = new label();
$type_label->for("type_label");
$type_label->value("STOCK TYPE : ");
$type_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$type = new select();
$type->name("stock_type");
$type->id("stock_type");
$type->style("width: 20vw;");
$type->fill_from_db("stock_types", "record_id", "name");
$type->onchange("change_stock_type()");
$type->addAttribute("style", "font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$vehicle_type_label = new label();
$vehicle_type_label->for("vehicle_type_label");
$vehicle_type_label->value("VEHICLE TYPE : ");
$vehicle_type_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$vehicle_type = new select();
$vehicle_type->class("inputs");
$vehicle_type->name("vehicle_type");
$vehicle_type->id("vehicle_type");
$vehicle_type->add_option("ALL", "ALL");
$vehicle_type->add_option("T", "TRUCK");
$vehicle_type->add_option("D", "DONKIE");
$vehicle_type->add_option("C", "COMP");
$vehicle_type->add_option("CT", "COMP TRUCK");
$vehicle_type->add_option("OTHER", "OTHER");
$vehicle_type->addAttribute("style", "font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$supplier_label = new label();
$supplier_label->for("supplier_label");
$supplier_label->value("SUPPLIER : ");
$supplier_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$supplier = new select();
$supplier->class("inputs");
$supplier->name("supplier_id");
$supplier->id("supplier_id");
$supplier->fill_from_db("suppliers", "record_id", "name");
$supplier->addAttribute("style", "font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$serial_number_label = new label();
$serial_number_label->for("serial_number_label");
$serial_number_label->value("SERIAL NUMBER : ");
$serial_number_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$serial_number = new input();
$serial_number->type("text");
$serial_number->name("serial_number");
$serial_number->id("serial_number");
$serial_number->addAttribute("style", "font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$submit_btn = new button();
$submit_btn->value("SUBMIT");
?>

<form action="add_stock.ajax.php" method="POST">
    <div class="form_down">
        <h1 style="font-size: 3em; margin-bottom: 0.5vw; margin-top: 1.5vw;">ADD STOCK</h1>

        <div style="width: 95%; background-color: white; border-radius: 2vw; padding: 1vw;">
            <div>
                <?php
                $status->add();
                ?>
                <div style="display: flex; flex-direction: row; width: 100%;">
                    <input type="hidden" name="status" id="status" value="0">
                    <?php
                    $stock_id_label->add();
                    $stock_id->add();
                    ?>
                </div>

                <div style="display: flex; flex-direction: row; width: 100%;">
                    <?php
                    $type_label->add();
                    $type->add();
                    ?>
                </div>

                <div id="hydrolic_stock" style="display: none; flex-direction: column; width: 100%;">
                    <div style="display: flex; flex-direction: row; width: 100%;">
                        <label for="" class="labels" style="font-size: 1.5em; width: 30%;">TYPE : </label>
                        <select name="type" id="type" onchange="change_type();" class="inputs"
                            style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;">
                            <option value=""></option>
                            <option value="Pipe">PIPE</option>
                            <option value="Fitting">FITTING</option>
                        </select>
                    </div>

                    <div id="pipe_section" style="display: none; flex-direction: row; width: 100%;">
                        <div style="display: flex; flex-direction: row; width: 100%;">
                            <label for="size_labels" class="labels" style="font-size: 1.5em; width: 30%;">PIPE SIZE :
                            </label>
                            <select name="pipe_size" id="pipe_size" class="inputs"
                                style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;" onchange="change_item_name()">
                                <option value=""></option>
                                <option value="2">2"</option>
                                <option value="1 1/2">1 1/2"</option>
                                <option value="1 p.m 2 wire">1" p.m 2 wire</option>
                                <option value="1 p.m 4 wire">1" p.m 4 wire</option>
                                <option value="1/2 p.m">1/2" p.m</option>
                                <option value="3/4 p.m">3/4" p.m</option>
                                <option value="3/8 p.m">3/8" p.m</option>
                                <option value="5/8 p.m">5/8" p.m</option>
                            </select>
                        </div>
                    </div>

                    <div id="fittings_section" style="display: none; flex-direction: column; width: 100%;">
                        <div style="display: flex; flex-direction: row; width: 100%; align-items: baseline;">
                            <label for="size_labels" class="labels" style="font-size: 1.5em; width: 30%;">COLLAR SIZE :
                            </label>
                            <select name="collar_size" id="collar_size" class="inputs"
                                style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;" onchange="change_item_name()">
                                <option value=""></option>
                                <option value="2">2"</option>
                                <option value="1 1/2">1 1/2"</option>
                                <option value="1 p.m 2 wire">1" p.m 2 wire</option>
                                <option value="1 p.m 4 wire">1" p.m 4 wire</option>
                                <option value="1/2 p.m">1/2" p.m</option>
                                <option value="3/4 p.m">3/4" p.m</option>
                                <option value="3/8 p.m">3/8" p.m</option>
                                <option value="5/8 p.m">5/8" p.m</option>
                            </select>
                        </div>

                        <div style="display: flex; flex-direction: row; width: 100%; align-items: baseline;">
                            <label for="type_labels" class="labels" style="font-size: 1.5em; width: 30%;">CONNECTOR TYPE
                                :
                            </label>
                            <select name="type_size" id="type_size" class="inputs"
                                style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;" onchange="change_item_name()">
                                <option value=""></option>
                                <option value="Female straight">Female Straight</option>
                                <option value="Female elbow">Female Elbow</option>
                                <option value="Male straight">Male Straight</option>
                            </select>
                        </div>
                    </div>

                    <script>
                        function change_type() {
                            var type = document.getElementById("type").value;

                            if (type == "Pipe") {
                                var size = document.getElementById("pipe_size").value;
                                var pipe_section = document.getElementById("pipe_section");
                                var fittings_section = document.getElementById("fittings_section");

                                pipe_section.style.display = "flex";
                                fittings_section.style.display = "none";

                                let xhr = new XMLHttpRequest();
                                xhr.open("POST", "get_type.ajax.php", true);
                                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState === 4 && xhr.status === 200) {
                                        console.log(xhr.responseText);
                                    }
                                };

                                xhr.send("size=" + size);

                            } else if (type == "Fitting") {

                                var size = document.getElementById("collar_size").value;
                                var pipe_section = document.getElementById("pipe_section");
                                var fittings_section = document.getElementById("fittings_section");

                                pipe_section.style.display = "none";
                                fittings_section.style.display = "flex";

                                let xhr = new XMLHttpRequest();
                                xhr.open("POST", "get_type.ajax.php", true);
                                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState === 4 && xhr.status === 200) {
                                        console.log(xhr.responseText);
                                    }
                                };

                                xhr.send("size=" + size);

                            }

                            document.getElementById("type").addEventListener("change", function () {
                                var pipe_size = document.getElementById("pipe_size").value;
                                var collor_size = document.getElementById("collar_size").value;
                                var pipe_section = document.getElementById("pipe_section");
                                var fittings_section = document.getElementById("fittings_section");

                                pipe_select.value = "";
                                fittings_select.value = "";
                                pipe_section.style.display = "none";
                                fittings_section.style.display = "none";
                                pipe_section.value = "none";
                                fittings_section.value = "none";
                            });

                        }
                    </script>

                    <?php
                    $item_name->onchange("get_item_datalist()");
                    ?>
                </div>

                <div id="bn_stock" style="display: none; flex-direction: column; width: 100%;">
                    <div style="display: flex; flex-direction: row; width: 100%; align-items: baseline;">
                        <label for="" class="labels" style="font-size: 1.5em; width: 30%;">SIZE : </label>
                        <select name="bn_type" id="bn_type" onchange="change_item_name()" class="inputs"
                            style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;">
                            <option value=""></option>
                            <option value="M6">M6</option>
                            <option value="M8">M8</option>
                            <option value="M10">M10</option>
                            <option value="M12">M12</option>
                            <option value="M16">M16</option>
                        </select>
                    </div>

                    <div style="display: flex; flex-direction: row; width: 100%; align-items: baseline;">
                        <label for="" class="labels" style="font-size: 1.5em; width: 30%;">TYPE : </label>
                        <select name="bn_size" id="bn_size" onchange="change_item_name()" class="inputs"
                            style="font-size: 1.5em; width: 80%; margin: 0.5vw auto;">
                            <option value=""></option>
                            <option value="25">25</option>
                            <option value="45">45</option>
                            <option value="70">70</option>
                            <option value="100">100</option>
                            <option value="Nuts">Nuts</option>
                            <option value="Lock Nuts">Lock Nuts</option>
                            <option value="Flat Washers">Flat Washers</option>
                            <option value="Spring Washers">Spring Washers</option>
                        </select>
                    </div>
                </div>

                <script>
                    function get_item_datalist() {
                        var size = document.getElementById("size").value;

                        let xhr = new XMLHttpRequest();
                        xhr.open("POST", "get_type.ajax.php", true);
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                console.log(xhr.responseText);
                            }
                        };

                        xhr.send("size=" + size);
                    }
                </script>

                <div id="item_div" style="display: flex; flex-direction: row; width: 100%;">
                    <?php
                    $item_name_label->add();
                    $item_name->add();
                    ?>
                </div>

                <div id="supplier_div" style="display: flex; flex-direction: row; width: 100%;">
                    <?php
                    $supplier_label->add();
                    $supplier->add();
                    ?>
                </div>

            </div>

            <div id="default_stock" style="display: none; flex-direction: column; width: 100%;">
                <div>
                    <div id="hammer_stock" style="display: none; flex-direction: row; width: 100%;">
                        <?php
                        $serial_number_label->add();
                        $serial_number->add();
                        ?>
                    </div>

                    <div style="display: flex; flex-direction: row; width: 100%;">
                        <?php
                        $quantity_label->add();
                        $quantity->add();
                        ?>
                    </div>
                    <div style="display: flex; flex-direction: row; width: 100%;">
                        <?php
                        $unit_of_measure_label->add();
                        $measuring_unit->add();
                        ?>
                    </div>
                    <div style="display: flex; flex-direction: row; width: 100%;">
                        <?php
                        $item_price_label->add();
                        ?>
                        <input type="number" name="item_price" id="item_price" class="inputs" step="0.01"
                            style="width: 80%; font-size: 1.5em; margin: 0.5vw auto;">
                    </div>

                    <div id="oil_stock" style="display: none; flex-direction: row; width: 100%;">
                        <?php
                        $vehicle_type_label->add();
                        $vehicle_type->add();
                        ?>
                    </div>
                </div>
            </div>

            <div id="pump_stock" style="display: none; flex-direction: column; ">
                <div style="display: flex; flex-direction: row; width: 100%;">
                    <label for="code_label" 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>
            </div>
        </div>

        <?php
        $submit_btn->add();
        ?>

    </div>

    <script>
        function change_stock_type() {
            var stock_type = document.getElementById("stock_type").value;

            var item_name_input = document.getElementById("item_name");
            var supplier_input = document.getElementById("supplier_id");
            var quantity_input = document.getElementById("quantity");
            var unit_of_measure_input = document.getElementById("unit_of_measure");
            var item_price_input = document.getElementById("item_price");
            var vehicle_type_input = document.getElementById("vehicle_type");
            var pump_code_input = document.getElementById("pump_code");
            var status_input = document.getElementById("status");

            if (stock_type == "4") {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "flex";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "flex";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("supplier_div").style.display = "flex";


            } else if (stock_type == "3") {
                document.getElementById("pump_stock").style.display = "flex";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "none";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("supplier_div").style.display = "flex";


            } else if (stock_type == "2") {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "flex";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("hydrolic_stock").style.display = "flex";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("item_div").style.display = "flex";
                document.getElementById("supplier_div").style.display = "flex";

                let xhr = new XMLHttpRequest();
                xhr.open("POST", "get_type.ajax.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                };

                xhr.send("stock_type=" + stock_type);

            } else if (stock_type == "1") {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("oil_stock").style.display = "flex";
                document.getElementById("default_stock").style.display = "flex";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("supplier_div").style.display = "flex";

            } else if (stock_type == "5") {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "flex";
                document.getElementById("bn_stock").style.display = "flex";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("item_div").style.display = "flex";
                document.getElementById("supplier_div").style.display = "flex";

            } else if (stock_type == "6") {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "flex";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("supplier_div").style.display = "flex";

            } else {
                document.getElementById("pump_stock").style.display = "none";
                document.getElementById("hammer_stock").style.display = "none";
                document.getElementById("oil_stock").style.display = "none";
                document.getElementById("default_stock").style.display = "none";
                document.getElementById("hydrolic_stock").style.display = "none";
                document.getElementById("bn_stock").style.display = "none";
                document.getElementById("item_div").style.display = "none";
                document.getElementById("supplier_div").style.display = "none";

            }

            //add a listener function to stock type change to clear all inputs
            document.getElementById("stock_type").addEventListener("change", function () {

                item_name_input.value = "";
                supplier_input.value = "";
                quantity_input.value = "";
                unit_of_measure_input.value = "";
                item_price_input.value = "";
                vehicle_type_input.value = "";
                pump_code_input.value = "";
                status_input.value = "";
            });

            // document.getElementsByClassName("form_down").c

        }

        function get_item_datalist() {
            var type = document.getElementById("type").value;

            let xhr = new XMLHttpRequest();
            xhr.open("POST", "get_type.ajax.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            };

            xhr.send("type=" + type);
        }

        function change_item_name() {
            var stock_type = document.getElementById("stock_type").value;
            var type = document.getElementById("type").value;
            var pipe_size = document.getElementById("pipe_size").value;
            var collar_size = document.getElementById("collar_size").value;
            var type_size = document.getElementById("type_size").value;
            var bn_type = document.getElementById("bn_type").value;
            var bn_size = document.getElementById("bn_size").value;

            let item_name = "";

            if (stock_type === "2") {
                if (type === "Pipe") {
                    item_name = pipe_size + " Pipe";
                } else {
                    item_name = collar_size + " " + type_size;
                }
            } else if (stock_type === "5") {
                item_name = bn_type + " X " + bn_size;
            }

            // ✅ Update the input field
            document.getElementById("item_name").value = item_name;
        }

    </script>

</form>