@php
    // Set a default placeholder if not passed in
    $placeholder = $placeholder ?? 'Search Product Name, Article Number, UPC, Style Code';
@endphp

<div class="input-group mt-1 position-relative">
    <input type="search" id="search-box" class="form-control form-control-lg" placeholder="{{ $placeholder }}" autocomplete="off" style="font-family: 'Gotham-Book';">
    <div class="input-group-append">
        <button type="button" id="search-btn" class="btn btn-lg btn-default">
            <i class="fa fa-search"></i>
        </button>
    </div>

    <!-- 🔽 Suggestions Dropdown -->
    <ul id="search-suggestions" class="list-group position-absolute w-100" style="top: 100%; z-index: 1000; display: none;"></ul>
</div>

<div class="card card-default mt-3 mb-0" id="card-results">
    <div class="card-body m-0 p-0">
        <h3 class="card-title mb-3 text-medium" id="resultfor" style="font-family: 'Gotham-Book';">Results for :</h3>
        <table class="table">
            <tbody id="scanned-items-table">
            </tbody>
        </table>
    </div>
</div>
<div class="text-center mt-2" id="scroll-hint" style="display: none;font-family: 'Gotham-Book';">
    <small class="text-muted">Scroll to view more <i class="fas fa-angle-down"></i></small>
</div>