    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
ob_start();
ini_set(&#039;display_errors&#039;, 1);
ini_set(&#039;display_startup_errors&#039;, 1);
error_reporting(E_ALL);
include(&quot;db/cn.php&quot;);

$search_name = isset($_GET[&#039;search&#039;]) ? trim($_GET[&#039;search&#039;]) : &#039;&#039;;
$products = [];

$res = mysqli_query($connection, &quot;SELECT product_name, trade_price, retail_price, quantity FROM products&quot;);
while ($row = mysqli_fetch_assoc($res)) {
    $products[$row[&#039;product_name&#039;]] = [
        &#039;trade_price&#039; =&gt; $row[&#039;trade_price&#039;],
        &#039;retail_price&#039; =&gt; $row[&#039;retail_price&#039;],
        &#039;quantity&#039; =&gt; $row[&#039;quantity&#039;]
    ];
}


if ($search_name !== &#039;&#039;) {
    $stmt = $connection-&gt;prepare(&quot;SELECT product_id, product_name, retail_price FROM products WHERE product_name LIKE CONCAT(&#039;%&#039;, ?, &#039;%&#039;) LIMIT 1&quot;);
    $stmt-&gt;bind_param(&quot;s&quot;, $search_name);
    $stmt-&gt;execute();
    $result = $stmt-&gt;get_result();
    if ($result-&gt;num_rows &gt; 0) {
        $labels = $result-&gt;fetch_all(MYSQLI_ASSOC);
    }
} else {
    $query = &quot;SELECT product_id, product_name, retail_price FROM products&quot;;
    $result = mysqli_query($connection, $query);
    $labels = mysqli_fetch_all($result, MYSQLI_ASSOC);
}
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;روپ درشن سلک زری اینڈ برائڈل کلیکشن&lt;/title&gt;
    &lt;link href=&quot;../vendor/fontawesome-free/css/all.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Quicksand:wght@300;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;../css/sb-admin-2.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        body { font-family: &#039;Quicksand&#039;, sans-serif; }
        .autocomplete-suggestions { border: 1px solid #ccc; background: #fff; position: absolute; z-index: 9999; max-height: 200px; overflow-y: auto; }
        .autocomplete-suggestion { padding: 8px; cursor: pointer; }
        .autocomplete-suggestion:hover, .autocomplete-suggestion.active { background: #eee; }
        .low-stock-alert {
    color: red;
    font-weight: bold;
    animation: blink 1s step-start 0s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table class=&quot;table table-stripped text-center table-sm bg-white&quot; id=&quot;product-table&quot;&gt;
    &lt;thead&gt;
        &lt;tr style=&quot;background:#0A4567; color:#fff; font-weight:700;&quot;&gt;
            &lt;th&gt;Pr&lt;/th&gt;
            &lt;th&gt; کھلا رول&lt;/th&gt;&lt;th&gt; چار لائن&lt;/th&gt;&lt;th&gt; خانہ&lt;/th&gt;&lt;th&gt;تنگ&lt;/th&gt;&lt;th&gt; بڑا خانہ&lt;/th&gt;&lt;th&gt; بڑا چار لائن&lt;/th&gt;&lt;th&gt; سفید&lt;/th&gt;&lt;th&gt; کھلا سائنس&lt;/th&gt;&lt;th&gt; تنگ سائنس&lt;/th&gt;&lt;th&gt; مکس&lt;/th&gt;
            &lt;th&gt;T.Qty&lt;/th&gt;&lt;th&gt;PKR&lt;/th&gt;&lt;th&gt;Total&lt;/th&gt;&lt;th&gt;Add / Remove&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id=&quot;product-body&quot;&gt;
        &lt;tr class=&quot;product-row&quot;&gt;
            &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;product_name[]&quot; class=&quot;form-control product-input&quot; autocomplete=&quot;off&quot;&gt;
                &lt;div class=&quot;autocomplete-suggestions&quot;&gt;&lt;/div&gt;
                &lt;div class=&quot;low-stock-warning&quot;&gt;&lt;/div&gt;
                &lt;input type=&quot;hidden&quot; name=&quot;trade_price[]&quot; class=&quot;trade-price&quot;&gt;
            &lt;/td&gt;
            &lt;?php for ($i = 1; $i &lt;= 10; $i++): ?&gt;
                &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;pr&lt;?= $i ?&gt;[]&quot; class=&quot;form-control inform&quot;&gt;&lt;/td&gt;
            &lt;?php endfor; ?&gt;
            &lt;td class=&quot;tqty&quot;&gt;-&lt;/td&gt;
            &lt;td class=&quot;pkr&quot;&gt;
                &lt;input type=&quot;text&quot; name=&quot;product_price[]&quot; class=&quot;form-control pkr-input inform&quot; readonly&gt;
            &lt;/td&gt;
            &lt;td class=&quot;total&quot;&gt;Rs&lt;/td&gt;
            &lt;td&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-danger add-row&quot; style=&quot;border-radius:40px;&quot;&gt;+&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-dark remove-row&quot; style=&quot;border-radius:40px;&quot;&gt;-&lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;script&gt;
const productMap = &lt;?= json_encode($products) ?&gt;;

function enableAutocomplete(input) {
    const suggestionBox = input.nextElementSibling;
    let suggestions = [];
    let selectedIndex = -1;

    input.addEventListener(&#039;input&#039;, function () {
        const val = this.value.toLowerCase();
        suggestionBox.innerHTML = &#039;&#039;;
        selectedIndex = -1;
        suggestions = [];

        if (val.length === 0) return;

        for (const name in productMap) {
            if (name.toLowerCase().includes(val)) {
                const div = document.createElement(&#039;div&#039;);
                div.classList.add(&#039;autocomplete-suggestion&#039;);
                div.textContent = name;
                suggestionBox.appendChild(div);
                suggestions.push(div);

                div.addEventListener(&#039;mousedown&#039;, () =&gt; {
                    selectSuggestion(name, input);
                });
            }
        }
    });

    input.addEventListener(&#039;keydown&#039;, (e) =&gt; {
        if (suggestions.length === 0) return;

        if (e.key === &#039;ArrowDown&#039;) {
            selectedIndex = (selectedIndex + 1) % suggestions.length;
        } else if (e.key === &#039;ArrowUp&#039;) {
            selectedIndex = (selectedIndex - 1 + suggestions.length) % suggestions.length;
        } else if (e.key === &#039;Enter&#039;) {
            e.preventDefault();
            if (selectedIndex &gt;= 0 &amp;&amp; selectedIndex &lt; suggestions.length) {
                const selectedName = suggestions[selectedIndex].textContent;
                selectSuggestion(selectedName, input);
                suggestionBox.innerHTML = &#039;&#039;;
            }
        }

        suggestions.forEach((el, idx) =&gt; {
            el.classList.toggle(&#039;active&#039;, idx === selectedIndex);
        });
    });

    input.addEventListener(&#039;blur&#039;, () =&gt; {
        setTimeout(() =&gt; suggestionBox.innerHTML = &#039;&#039;, 200);
    });
}

function selectSuggestion(name, input) {
    const tr = input.closest(&#039;tr&#039;);
    const product = productMap[name];

    input.value = name;
    tr.querySelector(&#039;.trade-price&#039;).value = product[&#039;trade_price&#039;];
    tr.querySelector(&#039;.pkr-input&#039;).value = product[&#039;retail_price&#039;];

    // Low stock warning logic
    let alertBox = tr.querySelector(&#039;.low-stock-warning&#039;);
    if (!alertBox) {
        alertBox = document.createElement(&#039;div&#039;);
        alertBox.className = &#039;low-stock-warning&#039;;
        input.parentNode.appendChild(alertBox);
    }

    if (&#039;stock_qty&#039; in product &amp;&amp; product[&#039;stock_qty&#039;] &lt; 10) {
        alertBox.textContent = `⚠ Low Stock: ${product[&#039;stock_qty&#039;]}`;
        alertBox.classList.add(&#039;low-stock-alert&#039;);
    } else {
        alertBox.textContent = &#039;&#039;;
        alertBox.classList.remove(&#039;low-stock-alert&#039;);
    }
}

function addAutocompleteAll() {
    document.querySelectorAll(&#039;.product-input&#039;).forEach(input =&gt; {
        if (!input.dataset.autocomplete) {
            enableAutocomplete(input);
            input.dataset.autocomplete = &#039;true&#039;;
        }
    });
}

addAutocompleteAll();

document.addEventListener(&#039;click&#039;, function (e) {
    if (e.target.classList.contains(&#039;add-row&#039;)) {
        const tbody = document.getElementById(&#039;product-body&#039;);
        const newRow = e.target.closest(&#039;tr&#039;).cloneNode(true);
        newRow.querySelectorAll(&#039;input&#039;).forEach(input =&gt; input.value = &#039;&#039;);
        newRow.querySelectorAll(&#039;[data-autocomplete]&#039;).forEach(el =&gt; delete el.dataset.autocomplete);
        newRow.querySelector(&#039;.autocomplete-suggestions&#039;).innerHTML = &#039;&#039;;
        const warning = newRow.querySelector(&#039;.low-stock-warning&#039;);
        if (warning) warning.remove();
        tbody.appendChild(newRow);
        addAutocompleteAll();
    }

    if (e.target.classList.contains(&#039;remove-row&#039;)) {
        const rows = document.querySelectorAll(&#039;.product-row&#039;);
        if (rows.length &gt; 1) {
            e.target.closest(&#039;tr&#039;).remove();
        }
    }
});
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>        </div>
    </div>