autocrm/resources/views/filament/tenant/pages/scanner.blade.php

<x-filament-panels::page>
    <style>
        .sc-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
        .sc-cam {
            background: #111; border-radius: 12px; overflow: hidden;
            aspect-ratio: 4 / 3; position: relative;
        }
        .sc-cam video, .sc-cam canvas, .sc-cam #reader { width: 100% !important; height: 100% !important; object-fit: cover; }
        .sc-cam .placeholder {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            color: #94a3b8; font-size: 14px; padding: 24px; text-align: center;
        }
        .sc-controls { display: flex; gap: 8px; flex-wrap: wrap; }
        .sc-btn {
            padding: 10px 18px; border-radius: 8px; border: 0;
            background: #3b82f6; color: #fff; font-weight: 500; cursor: pointer;
        }
        .sc-btn.gray { background: #64748b; }
        .sc-btn:disabled { opacity: .5; cursor: not-allowed; }

        .sc-manual {
            margin-top: 8px; padding: 12px;
            background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
        }
        .dark .sc-manual { background: #1f2937; border-color: #374151; }
        .sc-manual input {
            width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
            font-family: monospace; font-size: 14px;
        }
        .dark .sc-manual input { background: #111827; border-color: #374151; color: #f9fafb; }

        .sc-status { padding: 8px 12px; background: #ecfeff; border-left: 3px solid #06b6d4; font-size: 13px; }
        .dark .sc-status { background: #083344; color: #cffafe; }
        .sc-status.err { background: #fef2f2; border-left-color: #ef4444; color: #7f1d1d; }
    </style>

    <div class="sc-wrap" x-data="scanner()" x-init="init()">
        {{-- wire:ignore: html5-qrcode injects the camera DOM here; keep
             Livewire's morph away so an update doesn't tear down the stream. --}}
        <div class="sc-cam" wire:ignore>
            <div id="reader"></div>
            <div class="placeholder" x-show="!running && !error" x-cloak>
                Apasă „Pornește" pentru a deschide camera.
            </div>
            <div class="placeholder" x-show="error" x-text="error" x-cloak></div>
        </div>

        <div class="sc-controls">
            <button class="sc-btn" type="button" @click="start" x-show="!running">📷 Pornește scanner</button>
            <button class="sc-btn gray" type="button" @click="stop" x-show="running">⏹ Oprește</button>
        </div>

        <div x-show="lastDecoded" class="sc-status" x-cloak>
            Ultimul cod citit: <strong x-text="lastDecoded"></strong>
        </div>

        <div class="sc-manual">
            <form wire:submit="submitManual" style="display:flex;gap:8px;align-items:stretch;">
                <input type="text" wire:model="manual" placeholder="Sau introdu manual (cod articol / barcode)…" />
                <button type="submit" class="sc-btn">Caută</button>
            </form>
        </div>
    </div>

    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script>
        function scanner() {
            return {
                running: false,
                error: '',
                lastDecoded: '',
                scanner: null,

                init() {
                    // Nothing on init — wait for user gesture (camera permission).
                },

                async start() {
                    this.error = '';
                    try {
                        this.scanner = new Html5Qrcode('reader');
                        const cams = await Html5Qrcode.getCameras();
                        if (!cams.length) { this.error = 'Nicio cameră detectată.'; return; }
                        const camId = cams.find(c => /back|rear|environment/i.test(c.label))?.id || cams[0].id;
                        await this.scanner.start(
                            camId,
                            { fps: 10, qrbox: { width: 250, height: 250 } },
                            (text) => this.onDecoded(text),
                            () => {}
                        );
                        this.running = true;
                    } catch (e) {
                        this.error = 'Nu pot porni camera: ' + (e.message || e);
                    }
                },

                async stop() {
                    if (this.scanner) {
                        try { await this.scanner.stop(); await this.scanner.clear(); } catch (e) {}
                    }
                    this.running = false;
                },

                onDecoded(text) {
                    if (text === this.lastDecoded) return;   // debounce duplicate
                    this.lastDecoded = text;
                    this.stop();
                    $wire.dispatch('scanner-decoded', { text });
                },
            }
        }
    </script>
</x-filament-panels::page>