@extends('layouts.backend.front')

@section('contents')
<div class="position-absolute top-0 start-50 translate-middle-x bg-white pt-5" style="width:250px">
    <img src="{{asset('assets/img/banner.png') }}" class="img-fluid" />
</div>
<div class="container-xl px-4">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-6 col-md-8 col-sm-11">
                <div class="card my-5 shadow-none border-0">
                    <div class="card-body p-1">
                        <form method="post">
                            @csrf
                        </form>
                        <div id="qr-reader" class="w-100 border-0"></div>
                        <div id="qr-reader-results"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('assets/vendor/html5-qrcode/html5-qrcode.min.js') }}" type="text/javascript"></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 resultContainer = document.getElementById('qr-reader-results');
            var lastResult, countResults = 0;

            function onScanSuccess(decodedText, decodedResult) {
                if (decodedText !== lastResult) {
                    ++countResults;
                    lastResult = decodedText;
                    console.log(`Scan result ${decodedText}`, decodedResult);
                }
            }

            var html5QrcodeScanner = new Html5QrcodeScanner(
                "qr-reader", {
                    fps: 10,
                    qrbox: 250
                });
            html5QrcodeScanner.render(onScanSuccess);
        });
    </script>
@endpush


@push('styles')
    <style>
        #html5-qrcode-anchor-scan-type-change {
            display: none !important;
        }
        #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-stop, #html5-qrcode-button-camera-permission {
            border: 1px #f2f6fc solid;
            background: #f2f6fc;
            border-radius: 0.26em;
            padding: 0.5em 1em;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-stop:hover, #html5-qrcode-button-camera-permission:hover {
            background: #ced1d6;
        }
    </style>
@endpush