{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %} Finished Product Analysis Form | IQChem {% endblock %}

{% block content %}
    <h3>FINISHED PRODUCT ANALYSIS FORM</h3>
    <p>Chemical Section Platform</p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h1><i><strong>FINISHED PRODUCT ANALYSIS FORM</strong></i></h1>
    <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>

    <script>
        $(document).ready(function(){
            $("#formPage div").addClass("mb-3");
            $("textarea").attr({"rows": "2", "cols": "40"});
            $("#id_line").attr({"min":1, "max":25})
            $("#id_date_blended").attr({"type":"date"})
            
            $('input[type=number]').attr({"min":0});
            
            setProducts();
            capLabels();
        });
    </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>
        function setProducts(){
            var product_list = "{{products|safe}}";
            var products = product_list.split(',,');
            var appearance_list = "{{appearance|safe}}";
            var appearances = appearance_list.split(',,');
            var id_product = document.getElementById('div_id_product');
            var id_appearance = document.getElementById('div_id_appearance');
            var option1 = '<label for="id_product" class=" requiredField">Product*<span class="asteriskField">*</span> </label><select name="product" class="select form-control" required="" id="id_product"><option value="" selected="">----</option>';
            var option2 = '<label for="id_appearance" class=" requiredField">Appearance*<span class="asteriskField">*</span> </label><select name="appearance" class="select form-control" required="" id="id_appearance"><option value="" selected="">----</option>';
            
            for(let i=0;i<products.length;i++){
                option1 += `<option value="${products[i]}">${products[i]}</option>`;
            }
            
            option1 += '</select>';
            
            id_product.innerHTML = option1
            
            for(let i=0;i<appearances.length;i++){
                option2 += `<option value="${appearances[i]}">${appearances[i]}</option>`;
            }
            
            option2 += '</select>';
            
            id_appearance.innerHTML = option2;
            
            
            var div_id_line = $('#div_id_line label').text('Enter Lines or Sachets');
        }
    </script>
    
    <script>
        function capLabels(){
            var labels = $('form > label');
            for(let i=0;i<labels.length;i++){
                console.log(labels[i].innerText)
                labels[i].innerText = labels[i].innerText.toUpperCase();
            }
        }
    </script>
    
{% endblock %}