<?= $this->extend('Panel/Layouts/App_display') ?>

<?= $this->section('css') ?>
<style>
    #qrcode {
        cursor: pointer;
    }
</style>
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="m-2">
    <div class="container mt-5">
        <div class="text-center">
            <div class="row">
                <div class="col-md-8 pt-5">
                    <div class="_3AjBo">
                        <div class="landing-title _2K09Y">Gunakan Candy CBT di telepon Anda</div>
                        <div class="_1MxED"></div>
                        <ol class="_1G5cu">
                            <li class="_3JRy8">Buka Candy CBT di telepon Anda</li>
                            <li class="_3JRy8"><span>Arahkan telepon Anda ke layar ini untuk memindai kode QR</span></li>
                        </ol>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <div style="display: none;" id="qrcode"></div>
                        <div style="display: none;" id="spinner" class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script src="<?= base_url() ?>/vendors/davidshimjs-qrcodejs/qrcode.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/jquery/jquery-3.6.0.min.js?v=<?= versioningjs() ?>"></script>
<script>
    const img = new Image();
    var qrcode = null;
    var qrData = '';
    img.onload = () => generateQR();
    img.src = '<?= logo() ?>';
    timeoutAjax = null;

    function generateQR() {
        if (timeoutAjax) {
            clearTimeout(timeoutAjax);
            timeoutAjax = null;
        }
        $("#qrcode").empty();
        $("#qrcode").hide();
        $("#spinner").show();
        var jqxhr = $.ajax("<?= base_url('panel/display/get-app-qr') ?>")
            .done(function(result) {
                qrcode = new QRCode(document.getElementById("qrcode"), {
                    text: result.qr,
                    width: 200,
                    height: 200,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
                imgQR(qrcode._oDrawing._elCanvas, img, 0.2);
                $("#qrcode").show();
                $("#spinner").hide();
                $("#qrcode").on('click', function() {
                    $("#qrcode").off('click');
                    generateQR();
                });
            })
            .fail(function(err) {
                timeoutAjax = setTimeout(() => {
                    generateQR();
                }, 5000);
                console.log(err);
            });
    }

    function imgQR(qrCanvas, centerImage, factor) {
        var h = qrCanvas.height;
        //Center size
        var cs = h * factor;
        //Center offset
        var co = (h - cs) / 2;
        var ctx = qrCanvas.getContext("2d");
        ctx.drawImage(centerImage, 0, 0, centerImage.width, centerImage.height, co, co, cs, cs);
    }
</script>
<?= $this->endSection() ?>