@extends('layouts.app')

@section('title', 'ambil Hampers')

@section('content')
    <x-section.card
        title="Ambil Hampers"
        subtitle="Scan QR pada voucher ke kolom input untuk otomatis mengisi."
    >
    <div id="reader" width="600px"></div>
    <form action="{{route('hampers.take')}}" method="POST" class="space-y-4" id="guest-find-form" enctype="multipart/form-data">
        @csrf
        <x-form.input-text name="nik" id="nik" label="Scan QR" placeholder="scan QR " autofocus />
        
        {{-- <input type="file" name="qr"  accept="image/*" capture="environment" id="qr-input"> --}}
        <div class="flex items-center gap-3">
            <button type="submit" class="inline-flex items-center text-white justify-center rounded-md glass-effect hover:bg-white hover:text-gray-800 transition-all-smooth px-4 py-2 text-sm font-medium">
                Ambil Hampers
            </button>
            <button type="button" id="clearNik" class="inline-flex items-center text-white justify-center rounded-md glass-effect hover:bg-red-500 hover:text-white transition-all-smooth px-4 py-2 text-sm font-medium">Bersihkan</button>
        </div>
        {{-- {{ asset('qrcode-scanner/qr-scanner.umd.min.js') }} --}}
        {{-- <video id="qr-video"></video> --}}

    </form>


        @if (session('success'))
            <div class="mt-4 text-white-400 text-sm">Success: {{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="mt-4 text-white-400 text-sm">Fail: {{ $errors->first() }}</div>
        @endif

        {{-- <script src="{{ asset('public/qrcode-scanner/qr-scanner-worker.min.js') }}"></script> --}}
        {{-- <script src="{{ asset('public/qrcode-scanner/qr-scanner.min.js') }}"></script> --}}
        <script src="https://unpkg.com/html5-qrcode" type="text/javascript">
        // <script src="{{ asset('public/qrcode-scanner/qr-scanner.umd.min.js') }}">
        </script>

            <script>
                function onScanSuccess(decodedText, decodedResult) {
                // handle the scanned code as you like, for example:
                console.log(`Code matched = ${decodedText}`, decodedResult);
                document.getElementById('nik').value = decodedText;
                }

                function onScanFailure(error) {
                // handle scan failure, usually better to ignore and keep scanning.
                // for example:
                console.warn(`Code scan error = ${error}`);
                }

                let html5QrcodeScanner = new Html5QrcodeScanner(
                "reader",
                { fps: 10, qrbox: {width: 250, height: 250} },
                /* verbose= */ false);
                html5QrcodeScanner.render(onScanSuccess, onScanFailure);
            </script>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const nikInput = document.getElementById('nik');
                const clearBtn = document.getElementById('clearNik');

                if (nikInput) {
                    nikInput.addEventListener('keydown', (e) => {
                        // Many USB barcode scanners end input with Enter
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            e.target.form?.submit();
                        }
                    });
                }

                clearBtn?.addEventListener('click', () => {
                    nikInput.value = '';
                    nikInput.focus();
                });
            });
        </script>
    </x-section.card>
@endsection