{% extends 'base.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>SEARCH MATERIAL</strong></h3>
        <form method="post" id="formPage">
            <div class="row mt-5">
                <div class="col-md-12 col-lg-8">
                    <div class="mb-0">
                        <label for="date" class="form-label">PKG CODE</label>
                        <input type="text" id="ref" class="form-control" placeholder="PKG Code" required>
                    </div>                      
                </div>
                <div class="col-md-12 col-lg-4"></div>
            </div>  
            <button type="submit" class="btn btn-primary my-3" id="submit_btn">&nbsp;&nbsp;SEARCH&nbsp;&nbsp;</button>          
        </form>
</div>
 <br><br>

 <script>
    document.getElementById("formPage").onsubmit = function(e) {
        e.preventDefault();
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'SEARCHING....';
        var ref = $('#ref').val();
        if (ref !== '' ){
            window.location.href = `/pkg/pkg_code_detail/?ref=${ref.toUpperCase() }`
        }else{
            alert('Enter PKG Code');
            window.location.reload();
        }
    }
</script>

<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>
{% endblock %}