<?php
include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();
$function = new call_functions();
// category list
$category_list = '<option value="0">STOCK</option><option value="1">NON STOCK</option><option value="2">UNITS</option><option value="3">NOT COUNTABLE ITEMS</option>';

$stock_res = $db->query("item_code_alocation", "SELECT * FROM item_code_alocation WHERE 1");
?>

<div class="container"
    style="position: sticky; top: 0; display: flex; flex-direction: column;background-color: lightgray;">
    <div style=" display: flex; flex-direction: row; padding: 1vw; ">
        <button onclick="window.location.href = 'item_code_allocation_add.php'" class="submit_btn">ADD NEW</button>
    </div>
</div>

<div class="container"
    style="position: sticky; top: 0; display: flex; flex-direction: column;background-color: lightgray;">
    <div style=" display: flex; flex-direction: row; padding: 1vw; ">
        <input type="text" id="search_details" style='width: 30vw; margin-right: 3vw;border-radius: 1vw;padding: 1vw;'
            placeholder="Search..." class="submit" />
        <button onclick="search()" class="submit_btn">SEARCH</button>

    </div>
    <script>
        function search() {
            search_details = document.getElementById('search_details').value.toUpperCase();
            let textareas = document.getElementsByTagName('input');
            showLoading();
            let found = false;
            for (let i = 0; i < textareas.length; i++) {
                if (textareas[i].value.includes(search_details)) {
                    if (!found) {
                        textareas[i].focus();
                        found = true;
                    }
                    textareas[i].style.backgroundColor = 'yellow';
                } else {
                    textareas[i].style.backgroundColor = 'white';
                }
            }
            hideLoading();


        }
    </script>
</div>

<div id="loadingOverlay"
    style="display: none; position: sticky; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 1000; display: flex; justify-content: center; align-items: center;">
    <div class="spinner"
        style="border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;">
    </div>
</div>

<style>
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        border-radius: 8px;
        overflow: hidden;
        min-width: 700px;
    }

    thead th {
        position: sticky;
        top: 0;
        background-color: #1e90ff;
        color: white;
        text-align: left;
        padding: 12px 15px;
        font-weight: 600;
        letter-spacing: 0.03em;
        user-select: none;
        z-index: 1;
    }

    table td {
        padding: 12px 15px;
        border-bottom: 1px solid #eaeaea;
    }

    table tr:nth-child(even) {
        background: #f9f9f9;
    }

    table tbody tr:hover {
        background-color: #d0e7ff;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
</style>

<script>
    function showLoading() {
        document.getElementById('loadingOverlay').style.display = 'flex';
    }

    function hideLoading() {
        document.getElementById('loadingOverlay').style.display = 'none';
    }

    window.addEventListener("load", function () {
        hideLoading();
    });

    function change(obj, column, record_id) {
        var value = obj.value;
        var data = {
            column: column,
            value: value,
            record_id: record_id
        };
        var row = obj.closest('tr');

        fetch("update_data_item_codes.ajax.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: new URLSearchParams(data)
        })
            .then(response => response.text())
            .then(result => {
                row.style.transition = "background-color 0.5s ease";
                row.style.backgroundColor = result.trim() === '1' ? "green" : "red";
                setTimeout(() => row.style.backgroundColor = "", 1000);
            })
            .catch(error => console.error('Error:', error));
    }
</script>

<div class="table-responsive">
    <table class="table">
        <tbody>
            <?php $index = 0;
            while ($stock = $stock_res->fetch_assoc()) { ?>
                <tr>
                    <td>
                        <label>CODE</label>
                        <input type="text" class="inputs" value="<?php echo $stock['code']; ?>"
                            onchange="change(this, 'code', '<?php echo $stock['record_id']; ?>')" />
                    </td>
                    <td>
                        <label>Stock Type</label>
                        <select class="inputs" id="stock_type_<?php echo $index; ?>"
                            onchange="change(this, 'stock_type', '<?php echo $stock['record_id']; ?>')">
                            <option value="-1">Select stock type</option>
                            <option value="0">STOCK</option>
                            <option value="1">NON STOCK</option>
                            <option value="2">UNITS</option>
                            <option value="3">NOT COUNTABLE</option>
                        </select>
                        <script>document.getElementById('stock_type_<?php echo $index; ?>').value = '<?php echo $stock['stock_type']; ?>';</script>
                    </td>
                    <td>
                        <label>Date Added</label>
                        <input type="text" readonly class="inputs" value="<?php echo $stock['date_time_added']; ?>" />
                    </td>
                    <td>
                        <label>User Added</label>
                        <input type="text" readonly class="inputs"
                            value="<?php echo $function->get_username($stock['user_id']); ?>" />
                    </td>
                </tr>
                <?php $index++;
            } ?>
        </tbody>
    </table>
</div>