{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Add Ingredient | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Add Ingredient to Blend Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if form %}
<div>
        <h5>BLEND NUMBER : <strong>{{ d.blend_number }} / ({{ d.blend_number_2 }})</strong></h5>
        <h5>PRODUCT : <strong>{{ d.product }}</strong></h5>
        <h5>TANK NUMBER : <strong>{{ d.tank_number }}</strong></h5>
        <h5>DATE BLENDED : <strong>{{ d.date_blended }}</strong></h5>
        <h5>VOLUME : <strong>{{ d.volume_in_ltr }} Litres</strong></h5>
        <h5>BLENDING INSP. : <strong>{{ d.blending_inspector }}</strong></h5>
        {% if i %}
        <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        <h5>INGREDIENTS</h5>
            <ol>
            {% for n in i%}
                <li class="mb-0">{{n.ingredient}} / {{n.quantity}}</li>
            {% endfor %}
            </ol>
        {% 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 }}
            <small>NOTE: Ingredients from multiple sources must bear different numbers</small><br>
            <input type="hidden" name="blend_number" value="{{d.blend_number}}">
            <input type="hidden" name="blend_id" value="{{d.id}}">
            <button type="submit" class="btn btn-primary mt-3" id="submit_btn">&nbsp;&nbsp;&nbsp;ADD&nbsp;&nbsp;&nbsp;</button>
        </form>
    </div>
</div>
{% else %}

<p>Form not found</p>

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

 <script>
    document.getElementById("formPage").onsubmit = function() {
        //$("input").val(function(i,val) {return val.toUpperCase(); });
        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>
{% endblock %}