<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$date_returned_label = new label();
$date_returned_label->for("date_returned_label");
$date_returned_label->value("DATE RETURNED : ");
$date_returned_label->addAttribute("style", "font-size: 1.5em; width: 30%;");

$date_returned = new input();
$date_returned->class("inputs");
$date_returned->name("date_returned");
$date_returned->id("date_returned");
$date_returned->type("datetime-local");
$date_returned->style("font-size: 1.5em; width: 80%; margin: 0.5vw auto;");

$user_id = new input();
$user_id->type("hidden");
$user_id->id("user_id");
$user_id->name("user_id");
$user_id->value($_SESSION["user_id"]);

$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>RETURN 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: 10px 5px;
                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();

        $teams_list_res = $db->query("teams", "SELECT * FROM teams");
        $teams_list = "";

        while ($teams = $teams_list_res->fetch_assoc()) {
            $teams_list .= "<option value='{$teams['record_id']}'>{$teams['name']}</option>";
        }

        $booked_stock_res = $db->query("book_stock", "SELECT * FROM book_stock WHERE record_id = '{$_GET['record_id']}'");
        $booked_stock = $booked_stock_res->fetch_assoc();

        if ($booked_stock) {

        }

        ?>

        <div style="display: flex; flex-direction: row; width: 100%;">
            <?php
            $date_returned_label->add();
            $date_returned->add();
            ?>
        </div>

        <div style="display: flex; flex-direction: row; width: 100%;">
            <label for="jobcard_label" class="labels" style="font-size: 1.5em; width: 30%;">TEAM ASSIGNED : </label>
            <select id="team_defualt_1" name="team_defualt_1" style="width: 80%; margin: 0.5vw auto; font-size: 1.5em;"
                class="inputs">
                <option value=""></option>
                <?php
                echo $teams_list;
                ?>
            </select>
        </div><br>

        <table style="width:95%;" id="table_defualt">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Item Name</th>
                    <th>Amount</th>
                    <th>Registaration No.</th>
                    <th>Open Balance</th>
                    <th>Closing Balance</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input id="item_defualt_1" name="item_defualt_1" list="stock_list_1"
                            style="width: 100%; margin: 0vw;" class="inputs" onchange="getQuantity(1, 'defualt')">
                        <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="maxQuantity(1, 'defualt')">
                        <input type="number" id="max_q_defualt_1" name="max_q_defualt_1"
                            style="width: 100%; margin: 0vw;" class="inputs" hidden>
                    </td>
                    <td>
                        <input id="registration_no_defualt_1" name="registration_no_defualt_1"
                            style="width: 100%; margin: 0vw;" class="inputs">
                    </td>
                    <td>
                        <input id="open_defualt_1" name="open_defualt_1" style="width: 100%; margin: 0vw;"
                            class="inputs" onchange="calculateOpenTotals()">
                    </td>
                    <td>
                        <input id="close_defualt_1" name="close_defualt_1" style="width: 100%; margin: 0vw;"
                            class="inputs" onchange="calculateCloseTotals();">
                    </td>
                    <td>
                        <button type="button" onclick="delete_row(this, 'defualt')" 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_row_balance_total" name="open_row_balance_total"
                            style="width: 100%; margin: 0vw;" class="inputs" readonly>
                    </td>
                    <td>
                        <input id="close_row_balance_total" name="close_row_balance_total"
                            style="width: 100%; margin: 0vw;" class="inputs" readonly>
                    </td>
                    <td></td>
                </tr>
            </tfoot>
        </table>

        <input type="button" value="ADD ROW" onclick="add_row('defualt')" class="submit_btn">

        <?php
        $submit_btn->add();
        ?>

    </div>
</form>

<script>

    const rowIndex = {
        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 max_quantity = document.getElementById(`max_q_${section}_${i}`);
        const open_balance = document.getElementById(`open_${section}_${i}`);
        const stock_no = document.getElementById(`stock_no_${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 () {
            if (xhr.status === 200 && xhr.responseText !== "") {

                console.log(xhr.responseText);
                // Expected format: quantity|cost
                const data = xhr.responseText.split("|");

                open_balance.value = data[0] ?? "";
                stock_no.value = data[2] ?? "";

                calculateOpenTotals();
                calculateCloseTotals();
            }
        };

        xhr.send("item_name=" + encodeURIComponent(item_name));
    }

    function maxQuantity(i, section) {
        var max_quantity = document.getElementById(`max_q_${section}_${i}`).value;
        var quantity = document.getElementById(`quantity_${section}_${i}`).value;

        if (max_quantity < quantity) {
            alert(`Quantity cannot be greater than ` + max_quantity);
            quantity = max_quantity;
        } else {
            var open_balance = document.getElementById(`open_${section}_${i}`).value;
            var quantity = document.getElementById(`quantity_${section}_${i}`).value;
            var close_balance = parseFloat(open_balance) * parseFloat(quantity);

            document.getElementById(`close_${section}_${i}`).value = close_balance;

            calculateOpenTotals();
            calculateCloseTotals();

            return quantity;
        }
    }

    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`);
        var index = document.getElementById("no_rows").value;

        if (!tableBody) return;

        const i = rowIndex[section];
        const row = document.createElement("tr");

        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>
                <input type="text" id="stock_no_${section}_${i}" name="stock_no_${section}_${i}" hidden class="inputs">
            </td>
            <td>
                <input list="stock_list_${i}"
                    name="item_${section}_${i}" id="item_${section}_${i}" onchange="getQuantity(${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="maxQuantity(${i}, '${section}')">
                <input type="number" id="max_q_${section}_${i}" name="max_q_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs" hidden>
            </td>
                <td>
                    <input id="registration_no_${section}_${i}" name="registration_no_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs">
                </td>
            <td>
                <input name="open_${section}_${i}" id="open_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs" onchange="calculateOpenTotals()">
            </td>
            <td>
                <input name="close_${section}_${i}" id="close_${section}_${i}" style="width: 100%; margin: 0vw;" class="inputs" onchange="calculateCloseTotals()">
            </td>
            <td>
                <button type="button" onclick="delete_row(this, '${section}')" class="delete_btn">DELETE</button>
                </td>
        `;

        tableBody.appendChild(row);
        rowIndex[section]++;
        index++;
        document.getElementById("no_rows").value = index;
    }

    function delete_row(el, section) {
        el.closest("tr").remove();
        calculateOpenTotals();
        calculateCloseTotals();
    }

    calculateOpenTotals();
    calculateCloseTotals();

    function calculateOpenTotals() {
        var open_balance_total = 0;

        document.getElementById("open_row_balance_total").value = 0;

        // Only row inputs, NOT totals
        const open_balance_inputs = document.querySelectorAll(
            "input[name^='open_']"
        );

        open_balance_inputs.forEach(input => {
            open_balance_total += parseFloat(input.value) || 0;
        });

        document.getElementById("open_row_balance_total").value = open_balance_total;
    }

    function calculateCloseTotals() {
        var closing_balance_total = 0;

        document.getElementById("close_row_balance_total").value = 0;

        const closing_balance_inputs = document.querySelectorAll(
            "input[name^='close_']"
        );

        closing_balance_inputs.forEach(input => {
            closing_balance_total += parseFloat(input.value) || 0;
        });

        document.getElementById("close_row_balance_total").value = closing_balance_total;
    }


</script>