{% extends 'scan.html' %}

{% load static %}

{% load crispy_forms_tags %}


{% block content %}
<div class="box__bg">
    <h3 class="p-2 text-center mt-2" style="background-color:rgb(130, 98, 53);color:white;"><strong>SCAN MATERIAL</strong></h3>
    <div id="qr-reader" width="600px" height="600px"></div>   
</div>

<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

<script>
    function onScanSuccess(decodedText, decodedResult) {
        console.log(`Code scanned = ${decodedText}`, decodedResult);
        
       // var text_to_remove = $('#qr-reader').find('span')[0];
        //text_to_remove.innerHTML = `<span style="color:#013220;">${decodedText}</span>`;
        
        window.location.href = `/pkg/pkg_code_detail/?ref=${decodedText}`
        
    }

    var html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-reader", { fps: 20, qrbox: 240 });
    html5QrcodeScanner.render(onScanSuccess);

    $(function() {
       $("#scanForm").hide();
   });

   $(document).ready(function(){
        $('img').hide()
       $('#scan_toggle_btn').click(function(){
           $('#printable').toggle();
           $('#scanForm').toggle();
       })

       $('#search_code').click(function(){
           var input_scan_val = $('#scanned_code_input').val();
           if(input_scan_val === ''){
               $('#scan_input_err').text('Invalid QRCode Entered')
           }else{
               window.location.href = `/pallet_info/?pallet=${input_scan_val}`
           }
       })
       
       //var text_to_remove = $('#qr-reader').find('span')[0];
       //text_to_remove.innerHTML = '<span>Code Scanner</span>';
       
       var img_to_remove = $('#qr-reader').find('img')[0];
       img_to_remove.innerHTML = '';
   })
</script>
 <br><br>
{% endblock %}