<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php init_head(); ?>
<script src="<?php echo module_dir_url(PROPERTYBASE_MODULE_NAME, 'assets/js/html5-qrcode.min.js'); ?>"
        type="text/javascript"></script>
<style>
    #qr-reader {
        width: 500px;
        margin: auto;
    }
</style>
<div id="wrapper">
    <div class="content">
        <div class="row">
            <div class="text-center">
                <div class="panel_s text-center">
                    <div class="panel-body panel-table-full">
                        <div id="qr-reader"></div>
                        <br>
                        <div id="qr-reader-results"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php init_tail(); ?>
<script>
    (function ($) {
        "use strict";

        $(document).on("DOMContentLoaded", function () {
            const qrResult = $("#qr-reader-results");

            function onScanSuccess(decodedText, decodedResult) {
                qrResult.html(`<div>Scanned QR Code: <br>${decodedText}</div>`);
            }

            function onScanError(errorMessage) {
                console.warn(`QR Code scan error: ${errorMessage}`);
            }

            let html5QrcodeScanner = new Html5QrcodeScanner(
                "qr-reader",
                {fps: 10, qrbox: {width: 250, height: 250}},
                /* verbose= */ false
            );
            html5QrcodeScanner.render(onScanSuccess, onScanError);
        });

    })(jQuery);
</script>
