{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %} Phosphoric Form | IQChem {% endblock %}

{% block content %}
    <h3>PHOSPHORIC ACID QUALITY SCORE FORM</h3>
    <p>Chemical Section Platform</p>
    {% if mat %}
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        <p class="mb-1">REFERENCE : <strong>{{mat.reference}}</strong></p>
        <p class="mb-1">SUPPLER : <strong>{{mat.supplier}}</strong></p>
        <p class="mb-1">SAMPLED BY : <strong>{{mat.sampled_by}}</strong></p>
        <p class="mb-1">DATE SAMPLED : <strong>{{mat.date_sampled}}</strong></p>
        <p class="mb-1">VEHICLE NUMBER : <strong>{{mat.vehicle_number}}</strong></p>
        <small>Recorded at : {{mat.datetime}}</small>
    {% endif %}
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <div class="col-md-12 col-lg-6">
        <form method="POST" action="" id="formPage">
            {% csrf_token %}
            {{ form|crispy }}
            <input type="hidden" value="{{mat.reference}}" name="reference">
            <input type="hidden" value="{{mat.supplier}}" name="supplier">
            <button type="submit" class="btn btn-primary" id="submit_btn">&nbsp;&nbsp;SUBMIT&nbsp;&nbsp;</button>
        </form>
    </div>

    <script>
        $(document).ready(function(){
            $("#formPage div").addClass("mb-3");
            $("textarea").attr({"rows": "2", "cols": "40"});
            $.get("/phosphoric/phosphoric_parameters_api/", function(data, status){
                            //alert("Data: " + data + "\nStatus: " + status);
                            localStorage.setItem("0000001_parameters_0001", JSON.stringify(data));
                        });
        });
    </script>

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

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

    <script>
        $('#id_purity').change(function(){
                $("#purity_err").remove()
                const co2_parameters1 = localStorage.getItem("0000001_parameters_0001");
                const co2_parameters = JSON.parse(co2_parameters1)

                const co2_min = co2_parameters.purity.split('-')[0]
                const co2_max = co2_parameters.purity.split('-')[1]

                //parseFloat(quantity)
                if ($('#id_purity').val() < parseInt(co2_min)){
                    $('#div_id_purity').append('<sup style="color:red;" id="purity_err">PURITY LOWER THAN STANDARD!!!</sup>')
                }else if($('#id_purity').val() > parseInt(co2_max)){
                    $('#div_id_purity').append('<sup style="color:red;" id="purity_err">PURITY MORE THAN STANDARD!!!</sup>')
                }else if( $('#id_purity').val() >= parseInt(co2_min) && $('#id_purity').val() <= parseInt(co2_max) ){
                    $('#div_id_purity').append('<sup style="color:green;" id="purity_err">PURITY IS STANDARD!!!</sup>')
                }

    })
    </script>

    
{% endblock %}