{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Create Blend Form | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Blending Report Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if form %}
<div>
    
    <div class="col-md-12 col-lg-6">
        <form method="POST" action="" id="formPage">
            {% csrf_token %}
            {{ form|crispy }}
            <button type="submit" class="btn btn-primary" id="submit_btn">&nbsp;&nbsp;SUBMIT&nbsp;&nbsp;</button>
        </form>
    </div>
</div>
{% else %}

<p>Form not found</p>

{% endif %}
 <br><br>
 <script>
    function getAllProducts(){
        var all_products = "{{all_products|safe}}";
        const usingSplit = all_products.split(',');
        var id_product = document.getElementById('id_product')
        var row = '<option value="" selected="" onchange="getProductType()">-</option>'
        
        usingSplit.forEach(element => {
            row += `<option value="${element}">${element}</option>`
        });

        id_product.innerHTML = row;
    }


    $(document).ready(function(){
        $("#formPage div").addClass("mb-3");
        $("textarea").attr({"rows": "2", "cols": "40"});
        $("#id_date_blended").attr({'type':'date'});
        $('#id_product_type').val('');
        getAllProducts();
    })
</script>

 <script>
    document.getElementById("formPage").onsubmit = function() {
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'SUBMITTING';
        if (document.getElementsByClassName('#errorlist')){
            document.getElementsByClassName('#errorlist').innerText;
        }
    }
</script>

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

<script>
    function getProductType(){
        if (this.value !== ''){
            $.get(`/api/get_product_type/?product=${this.value}`, function(data, status){
                console.log(data.product.product_type);
                if (data.product !== ''){
                    $('#id_product_type').val(data.product.product_type);
                }
            })
        }
    }

    document.getElementById('id_product').addEventListener('change', getProductType)
</script>


{% endblock %}