<div class="mb-3 row">
    <label class="col-2 col-form-label fw-bold">@lang('laptop') : </label>
    <div class="col-10">
                <datalist id="laptops">
                    @foreach($laptops as $laptop)
                        @if(config('app.barcode_mode') == 'dynamic')
                            <option data-laptop-id="{{$laptop->id}}">{{$laptop->category->name}}.@if(!empty($laptop->subcategory->name)){{$laptop->subcategory->name}}.@endif{{$laptop->brand->name}}.{{$laptop->model->name}}@if(!empty($laptop->name)).{{$laptop->name}}@endif</option>
                        @elseif(config('app.barcode_mode') == 'static')
                            <option data-laptop-id="{{$laptop->id}}">{{$laptop->barcode}}</option>
                        @endif
                    @endforeach
                </datalist>
                <input type="text" name="laptop" id="laptop_input" class="form-control" placeholder="@lang('barcode')" list="laptops" oninput="laptop_barcode_change(this)" required>
                <input type="hidden" name="laptop_id" id="laptop_id" value=""></td>
        </tr>
    </div>
</div>
<script>
    function laptop_barcode_change(elem){
        let laptop_input = $("#laptop_input");
        var laptop_id = $('#laptops option').filter(function() {
            return this.value == laptop_input.val();
        }).data('laptop-id');

        if(laptop_id == null || typeof laptop_id === "undefined"){
            $("#laptop_id").val();
        }
        else{
            $("#laptop_id").val(laptop_id);
        }

    }
</script>