@extends('layouts.app')

@push('styles')
@endpush

@section('content')
<!-- Start Page-content-Wrapper -->
<div class="page-content-wrapper">

    @include("layouts.partials.validate_alert")

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                {{-- <div class="card-body">
                    <input type="file" id="file" accept="image/*">
                    <canvas id="canvas" style="display:none"></canvas>
                    <div id="res"></div>
                </div> --}}

                <div class="container">
                    <h2>Scan Barcode / QR Code</h2>
                    <video id="preview" style="width:100%;max-width:500px;"></video>
                    <form id="result-form" method="POST" action="">
                        @csrf
                        <input type="text" name="barcode" id="barcode" readonly class="form-control mt-3">
                        <button type="submit" class="btn btn-primary mt-2">Kirim ke Laravel</button>
                    </form>
                </div>

                <!-- End Cardbody -->
            </div>
            <!-- End Card -->
        </div>
    </div>
    <!-- End Row -->

</div>
<!-- End Page-content -->
{{-- <script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
  const inp = document.getElementById('file');
  const res = document.getElementById('res');
  const codeReader = new ZXing.BrowserQRCodeReader();

  inp.addEventListener('change', async e => {
    const f = e.target.files[0];
    if (!f) return;
    const url = URL.createObjectURL(f);
    try {
      const result = await codeReader.decodeFromImageUrl(url);
      res.innerText = "QR: " + result.text;
    } catch (err) {
      res.innerText = "QR tidak ditemukan. Coba crop area QR atau ambil foto lebih tajam.";
    }
  });
</script> --}}
<script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    const codeReader = new ZXing.BrowserMultiFormatReader();
    const preview = document.getElementById('preview');

    codeReader.listVideoInputDevices().then(videoInputDevices => {
        const firstDeviceId = videoInputDevices[0]?.deviceId;
        if (firstDeviceId) {
            codeReader.decodeFromVideoDevice(firstDeviceId, preview, (result, err) => {
                if (result) {
                    document.getElementById('barcode').value = result.text;
                    console.log('Scanned:', result.text);
                    // stop scanning after result
                    codeReader.reset();
                }
            });
        } else {
            alert("Kamera tidak ditemukan.");
        }
    }).catch(err => console.error(err));
});
</script>
@endsection