{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

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

{% block content %}
    <h3>SUGAR QUALITY SCORE FORM</h3>
    <p>Chemical Section Platform</p>
    {% if mat %}
    <h1><i><strong>SUGAR QUALITY SCORE FORM</strong></i></h1>
    <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("/sugar/sugar_parameters_api/", function(data, status){
                            //alert("Data: " + data + "\nStatus: " + status);
                            localStorage.setItem("diesel_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_flash_point').change(function(){
                $("#flash_point_err").remove()
                const diesel_parameters1 = localStorage.getItem("diesel_parameters_0001");
                const diesel_parameters = JSON.parse(diesel_parameters1)
                console.log(diesel_parameters)

                const flash_point_min = diesel_parameters.flash_point.split('-')[0]
                const flash_point_max = diesel_parameters.flash_point.split('-')[1]

                //parseFloat(quantity)
                if ($('#id_flash_point').val() < parseInt(flash_point_min)){
                    $('#div_id_flash_point').append('<sup style="color:red;" id="flash_point_err">FLASH POINT LOWER THAN STANDARD!!!</sup>')
                }else if($('#id_flash_point').val() > parseInt(flash_point_max)){
                    $('#div_id_flash_point').append('<sup style="color:red;" id="flash_point_err">FLASH POINT MORE THAN STANDARD!!!</sup>')
                }else if( $('#id_flash_point').val() >= parseInt(flash_point_min) && $('#id_flash_point').val() <= parseInt(flash_point_max) ){
                    $('#div_id_flash_point').append('<sup style="color:green;" id="flash_point_err">FLASH POINT IS STANDARD!!!</sup>')
                }

    })
    </script>

<script>
    $('#id_density').change(function(){
            $("#density_parameters_err").remove()
            const diesel_parameters1 = localStorage.getItem("diesel_parameters_0001");
            const diesel_parameters = JSON.parse(diesel_parameters1)

            const density_min = parseFloat(diesel_parameters.density.split('-')[0])
            const density_max = parseFloat(diesel_parameters.density.split('-')[1])

            //parseFloat(quantity)
            if ($('#id_density').val() < parseFloat(density_min)){
                $('#div_id_density').append('<sup style="color:red;" id="density_parameters_err">DENSITY LOWER THAN STANDARD!!!</sup>')
            }else if($('#id_density').val() > parseFloat(density_max)){
                $('#div_id_density').append('<sup style="color:red;" id="density_parameters_err">DENSITY HIGHER THAN STANDARD!!!</sup>')
            }else if( $('#id_density').val() >= parseFloat(density_min) && $('#id_density').val() <= parseFloat(density_max) ){
                $('#div_id_density').append('<sup style="color:green;" id="density_parameters_err">DENSITY IS STANDARD!!!</sup>')
            }

})
</script>

    
{% endblock %}