<?php
session_start();
include_once '../new/connection_sql.php';
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Sales Invoice</title>
    <style>
        body {
            overflow: hidden;
        }

        .fixed-top-section {
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .scrollable-table-container {
            height: calc(100vh - 150px);
            overflow-y: auto;
            border: 1px solid #dee2e6;
            color: black;
        }

        thead th {
            /*position: sticky;*/
            top: 0;
            background-color: #343a40 !important;
            color: white;
            z-index: 10;
        }

        .scrollable-table {
            max-height: 400px;
            overflow-y: auto;
            display: block;
        }

        .scrollable-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .scrollable-table th, .scrollable-table td {
            white-space: nowrap;
        }

        /* ✅ Dropdown fix */
        #invSuggestions {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 1050; /* Higher than sticky header z-index: 10 */
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
        }


        #invSuggestions li {
            cursor: pointer;
            padding: 5px 10px;
        }

        #invSuggestions li:hover {
            background-color: #f1f1f1;
        }

    </style>
</head>
<body>
<div class="container-fluid mt-2">
    <div class="fixed-top-section">
        <div class="row">
            <div class="col-12 position-relative">
                <div class="dropdown-wrapper" style="position: relative;">
                    <input type="text" id="invSearch" class="form-control" placeholder="Search Invoice" autocomplete="off" required>
                    <ul id="invSuggestions" class="list-group"></ul>
                </div>
            </div>

        </div>
        <div class="row mt-2">
            <div class="col-6">
                <a href="serach_inv.php?stname=inv_mast_date" class="btn btn-danger w-100"
                   onClick="NewWindow(this.href,'mywin','800','700','yes','center');return false"
                   onFocus="this.blur()" style="text-decoration: none;">
                    Find
                </a>
            </div>
            <div class="col-6">
                <button class="btn btn-success w-100">Save</button>
            </div>
        </div>
    </div>

    <div class="scrollable-table-container mt-2">
        <table class="table table-bordered table-hover">
            <thead>
            <tr class="bg-dark text-white">
                <th>Code</th>
                <th>Description</th>
                <th>Qty</th>
                <th>Serial Number</th>
            </tr>
            </thead>
            <tbody>
            <?php
            $items = [
                ['code' => '001', 'des' => 'big tyre', 'qty' => 4],
                ['code' => '002', 'des' => 'small tyre', 'qty' => 2],
                ['code' => '003', 'des' => 'medium tyre', 'qty' => 5],
                ['code' => '004', 'des' => 'Bike tyre', 'qty' => 3]
            ];

            $inputIndex = 0;

            foreach ($items as $key => $item) {
                $bgColor = ($key % 2 === 0) ? '#ffcccc' : '#ffffff';
                for ($i = 0; $i < $item['qty']; $i++) {
                    echo '<tr style="background-color: ' . $bgColor . ';">';
                    echo '<td>' . htmlspecialchars($item['code']) . '</td>';
                    echo '<td>' . htmlspecialchars($item['des']) . '</td>';
                    if ($i === 0) {
                        echo '<td rowspan="' . $item['qty'] . '">' . htmlspecialchars($item['qty']) . '</td>';
                    }
                    echo '<td><input type="text" class="form-control serial-input" data-index="' . $inputIndex . '" name="serials[' . $item['code'] . '][]"></td>';
                    echo '</tr>';
                    $inputIndex++;
                }
            }
            ?>
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputs = document.querySelectorAll('.serial-input');

        inputs.forEach((input, index) => {
            input.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const next = inputs[index + 1];
                    if (next) {
                        next.focus();
                        next.select();
                    }
                }
            });
        });
    });
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const invoices = ["INV001", "INV002", "INV003", "INV100", "SALE123"]; // example list

    $(document).ready(function () {
        $("#invSearch").on("keyup", function () {
            const query = $(this).val().toLowerCase();
            const matches = invoices.filter(item => item.toLowerCase().includes(query));

            if (query && matches.length) {
                let suggestions = matches.map(item => `<li class="list-group-item">${item}</li>`).join('');
                $("#invSuggestions").html(suggestions).show();
            } else {
                $("#invSuggestions").hide();
            }
        });

        $(document).on("click", "#invSuggestions li", function () {
            $("#invSearch").val($(this).text());
            $("#invSuggestions").hide();
        });

        $(document).click(function (e) {
            if (!$(e.target).closest("#invSearch, #invSuggestions").length) {
                $("#invSuggestions").hide();
            }
        });
    });
</script>

</body>
</html>
