<div id= "detailcontent" style="margin-top:10vh;height:10vw;">
    <div id="qr-reader" class="col-md-12" style="z-index: 10;"></div>
    <div id="qr-reader-results"></div>
</div>
<div class="col-md-12 detailbottom" style="margin-top:0vh">
<a href="<?php echo base_url('purchase');?>">
    <div class="mycontent">
        <h1 style="color: white;">Scan QR</h1>
    </div>
</a>
</div>
<div class="col-md-12 detailbottom" style="margin-top:-30vh">
<a href="<?php echo base_url('purchase');?>">
    <div class="mycontent" style="top:60vh">
        <h1 style="color: white;">Home</h1>
    </div>
</a>
</div>
</div>  
<form style="visibility: hidden;" id="myForm" name="myform" action="<?php echo base_url();?>AuthController/qrlogin" method="POST">
  <input type="text" id="guest" name="guestid"><br>
</form>
<script>
    // see if DOM is already available
    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) {
                    document.getElementById("guest").value = decodedText ;
                    document.myform.submit();
                }
        
                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", { fps: 10, qrbox: 250 });
                html5QrcodeScanner.render(onScanSuccess);
            });
</script>