pds/resources/views/filament/pages/production-quantity.blade.php

<x-filament-panels::page>

<div class="space-y-4">
    {{-- Render the Select form fields --}}
    <div class="space-y-4">
        {{-- {{ $this->filtersForm($this->form) }} --}}
        {{ $this->form }}
    </div>

    {{-- <livewire:notification-sound /> --}}

    {{-- <input
    type="text"
    id="qr-scan-input"
    class="border border-gray-300 rounded px-4 py-2 text-sm w-full"
    placeholder="Scan QR Code & Press Enter"
    autocomplete="off"
    autofocus
/> --}}
{{-- <div class="mb-4">
    <label for="qr-scan-input" class="block text-sm font-medium text-gray-700 mb-2">
        SCAN QR CODE
    </label>
    <input
        type="text"
        id="qr-scan-input"
        class="border border-gray-300 rounded px-4 py-2 text-sm w-full"
        placeholder="Scan QR Code & Press Enter"
        autocomplete="off"
        autofocus
    />
</div> --}}
{{-- <div class="mb-4">
    <label for="qr-scan-input" class="block text-sm font-medium text-gray-700 mb-2">
        SCAN QR CODE
    </label>
    <input
        type="text"
        id="qr-scan-input"
        class="border border-gray-300 rounded px-4 py-2 text-sm w-1/2"
        placeholder="Scan QR Code & Press Enter"
        autocomplete="off"
        autofocus
    />
</div> --}}
  <div class="flex gap-6 -mt-6">
        <!-- Scan QR Code -->
        <div class="w-full">
            <label for="qr-scan-input" class="block text-sm font-medium text-gray-700 mb-2">
                SCAN QR CODE
            </label>
            <input
                type="text"
                id="qr-scan-input"
                class="border border-gray-300 rounded px-4 py-2 text-sm w-full"
                placeholder="Scan QR Code & Press Enter"
                autocomplete="off"
                autofocus
            />
        </div>

        <!-- Last Scanned QR -->
        {{-- <div class="w-1/2">
            <label for="recent-qr-input" class="block text-sm font-medium text-gray-700 mb-2">
                LAST SCANNED QR
            </label>
            <input
                type="text"
                id="recent-qr-input"
                class="border border-gray-300 rounded px-4 py-2 text-sm w-full bg-white-100 text-black"
                readonly
                wire:model="recent_qr"
            />
        </div> --}}
    </div>


@push('scripts')
<script>

    window.addEventListener('focus-production-order', () => {
        const wrapper = document.getElementById('production_order');
        const input = wrapper?.querySelector('input,textarea');
        if (input) {
            input.focus();
            input.select();
        }
    });

    window.addEventListener('focus-qr-input', () => {
        const input = document.getElementById('qr-scan-input');

        if (input) {
            input.focus();
            input.select();
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        const scanInput = document.getElementById('qr-scan-input');
        if (!scanInput) return;

        scanInput.addEventListener('keydown', function (event) {
            if (event.key === 'Enter') {
                event.preventDefault();

                const value = scanInput.value.trim();

                // if (value != '') {
                    Livewire.dispatch('handleQrScan', { value: value });
                    scanInput.value = '';
                // }
            }
        });

    });
</script>
@endpush


    {{-- Render the chart widget below the form --}}
    <div class="mt-6">
        @livewire(\App\Filament\Widgets\ItemOverview::class)
    </div>

</div>

</x-filament-panels::page>