<?php
include "database/database.php";
include "database/data.php";

// Initialize an array to hold product names
$data = [];

// SQL query to fetch product names
$sql = "SELECT product_name FROM ".$product."";
$result_inner = $connection->query($sql);

// Check if the query returned any results
if ($result_inner && $result_inner->num_rows > 0) {
    while ($row_inner = $result_inner->fetch_assoc()) {
        // Append each product name to the $data array
        $data[] = $row_inner['product_name'];
    }
}

// Convert PHP array to a JSON array for use in JavaScript
$jsonData = json_encode($data);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search product_name</title>
    <style>
        /* Basic styling for dropdown suggestions */
        #suggestions {
            border: 1px solid #ddd;
            max-height: 100px;
            overflow-y: auto;
            display: none;
            position: absolute;
        }

        #suggestions div {
            padding: 8px;
            cursor: pointer;
        }

        #suggestions div:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>

<form method="POST" action="">
    <label for="product_name">Type to search a product:</label>

    <input type="text" id="product_name" name="product_name" autocomplete="off" onkeyup="showSuggestions(this.value)">
    <div id="suggestions"></div>
    <button type="submit">Submit</button>
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Display the selected product
    echo "<p>You have selected: " . htmlspecialchars($_POST['product_name']) . "</p>";
}
?>

<script>
    // Convert PHP data to JavaScript
    const data = <?php echo $jsonData; ?>;

    // Function to filter and display suggestions
    function showSuggestions(input) {
        const suggestionsDiv = document.getElementById('suggestions');
        suggestionsDiv.innerHTML = '';  // Clear suggestions

        // Check if input is not empty
        if (input.length > 0) {
            const filteredData = data.filter(item => item.toLowerCase().startsWith(input.toLowerCase()));

            // Display matching results
            if (filteredData.length > 0) {
                filteredData.forEach(item => {
                    const suggestionItem = document.createElement('div');
                    suggestionItem.textContent = item;
                    suggestionItem.onclick = function() {
                        document.getElementById('product_name').value = item;
                        suggestionsDiv.style.display = 'none';
                    };
                    suggestionsDiv.appendChild(suggestionItem);
                });
                suggestionsDiv.style.display = 'block';  // Show suggestions
            } else {
                suggestionsDiv.style.display = 'none';  // Hide if no matches
            }
        } else {
            suggestionsDiv.style.display = 'none';  // Hide if input is cleared
        }
    }
</script>

</body>
</html>
