@extends('layouts.index')
@section('scanner','active');

@section('title', __('menu.scanner'))


@section('javascript')
<script src="{{asset("assets/dist/js/test.js")}}"></script>
<script>
function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete"
            || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function () {
    var lastResult, countResults = 0;
    function onScanSuccess(decodedText, decodedResult) {
        if (decodedText !== lastResult) {
            ++countResults;
            lastResult = decodedText;
            // Handle on success condition with the decoded message.

            alert(decodedText);
            $.ajax({
                type: "POST",
                url: "/scanner/scan_data",
                data: {decodedResult},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert(decodedText);
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });
        }
    }

    const html5QrCode = new Html5Qrcode("reader");
    var lastResult, countResults = 0;
    const qrCodeSuccessCallback = (decodedText, decodedResult) => {
        if (decodedText !== lastResult) {
            ++countResults;
            lastResult = decodedText;
            // Handle on success condition with the decoded message.

            var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
            xmlhttp.open("POST", "{{URL::to('scanner/scan_data')}}");
            xmlhttp.setRequestHeader("Content-Type", "application/json");
            xmlhttp.send(JSON.stringify({scanned_data: decodedText}));
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(decodedText)
                }
            }
        }
    };
    const config = {fps: 10, qrbox: 250};
    html5QrCode.start({facingMode: "environment"}, config, qrCodeSuccessCallback);

});
</script>
@endsection
@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <section class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{__('menu.scanner')}}</h3>

            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
                <div id="reader" style="padding: 10px; width: 500px"  ></div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer clearfix">

            </div>
        </div>
        <!-- /.card -->
    </section>
</div>
<!-- /.row (main row) -->
@endsection