@props([
    'inputName' => 'scan_barcode',
    'categoryId' => null,
    'branchId' => null,
    'label' => null,
    'targetCheckboxClass' => 'asset-pick-cb',
])

<div class="asset-barcode-scan mb-3 p-2 border rounded bg-light">
    <label class="small font-weight-bold d-block mb-1">{{ $label ?? __('Scan barcode / QR') }}</label>
    <div class="input-group input-group-sm">
        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-barcode"></i></span></div>
        <input type="text" name="{{ $inputName }}" class="form-control asset-barcode-input" autocomplete="off"
               placeholder="{{ __('Scan or type code / serial and press Enter') }}"
               data-category="{{ $categoryId }}"
               data-branch="{{ $branchId }}"
               data-target="{{ $targetCheckboxClass }}">
    </div>
    <div class="small mt-1 asset-barcode-feedback text-muted"></div>
</div>

<script>
(function () {
    function handleBarcode($input) {
        var code = $.trim($input.val());
        if (!code) return;
        var $fb = $input.closest('.asset-barcode-scan').find('.asset-barcode-feedback');
        $fb.text(@json(__('Looking up…')));
        $.get('{{ route('asset.barcode.lookup') }}', {
            barcode: code,
            category_id: $input.data('category') || '',
            branch_id: $input.data('branch') || ''
        }, function (res) {
            if (!res.found) {
                $fb.removeClass('text-success').addClass('text-danger').text(@json(__('No matching asset found.')));
                return;
            }
            $fb.removeClass('text-danger').addClass('text-success').text(res.name + ' (' + res.barcode + ') — ' + res.status);
            var $cb = $('.' + $input.data('target') + '[value="' + res.id + '"]');
            if ($cb.length) {
                $cb.prop('checked', true).trigger('change');
            }
        });
    }

    $(document).on('keypress', '.asset-barcode-input', function (e) {
        if (e.which === 13) {
            e.preventDefault();
            handleBarcode($(this));
        }
    });
})();
</script>