{% extends 'scan.html' %}

{% load static %}

{% load crispy_forms_tags %}


{% block content %}
<div id="device_scan" class="responsive__element_center box__bg" style="height: 100vh;">
    <h3 class="p-2 text-center mt-2" style="background-color:rgb(130, 98, 53);color:white;"><strong>SCAN MATERIAL</strong></h3>
    <h4 id="scanned_code_text" class="mt-2 mb-3" style="color: #301934;">Point the Scanning device and press "SCAN"</h4>
    <div>
        <div style="position: fixed;z-index: 2; border : 1px solid #301934; background-color:white; padding : 12px;">
            <img src="{% static 'assets/img/scannerlogo.png' %}" width="250px" height="250px" id="scanimg">
        </div>
        
        <div style="position: fixed;z-index: 1;">
            <input type="text" onchange="handleCodeScan(this.value)" id="scanned_code" class="mt-3" onblur="this.focus()" autofocus="">
        </div>
    </div>
    <!--<iframe src="https://giphy.com/embed/bLeARYYZSjAAz40cKU" width="200" height="100" frameBorder="0" class="giphy-embed" allowFullScreen>
    </iframe>-->  
</div>
<script>
    $(document).ready(function(){
        $('#scanned_code').val('');
    })
</script>
<script>
    function handleCodeScan(scanned_code){
        console.log(scanned_code)
        if(scanned_code !== ""){
            $("#scanned_code_text").html(`<strong>Code Scanned : ${scanned_code}</strong>`);
             window.location.href = `/pkg/pkg_code_detail/?ref=${scanned_code}`;
        }else{
            $("#scanned_code_text").html('<strong>Invalid Code detected</strong>');
        }
    }
</script>
 <br><br>
{% endblock %}