<x-filament-panels::page>
<div class="space-y-4">

     {{-- Heading label --}}
        <h2 class="text-xl font-semibold text-gray-800">
            STICKER RE-PRINT
        </h2>
    {{-- Render the Select form fields --}}
    <div class="space-y-4">
        {{-- {{ $this->filtersForm($this->form) }} --}}
        {{ $this->form }}
    </div>

    {{-- <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>


@push('scripts')
<script>
    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 = '';
                }
            }
        });
        window.addEventListener('open-pdf', event => {
            const pdfUrl = event.detail.url;
            const win = window.open(pdfUrl, '_blank');
            if (!win) {
                console.warn('Popup blocked. Please allow popups for this site.');
            }
        });
    });
</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>
