{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Dashboard | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Dispute Creation Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if d %}
<div>

    <h5>BLEND NUMBER : <strong>{{ d.blend_number }} / ({{ d.blend_number_2 }})&nbsp;&nbsp;&nbsp;{% if d.result == 'PASS' %}<span style="color:green;">{{d.result}}<i class="bi bi-check-lg"></i></span>{% elif d.result == 'FAIL' %}<span style="color:red;">{{d.result}}<i class="bi bi-x-lg"></i></span>{% endif %}</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>STATUS : <strong>{{ d.status }}</strong></h5>
    <h5>RESULT : <strong>{{ d.result }}</strong></h5>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        {% if disputes %}
            <ol>
                {% for dd in disputes %}
                    <li>{{dd.dispute}}</li>
                {% endfor %}
            </ol>
        
        {% else %}
            <h5>No Previous  Dispute Found</h5>
        {% 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="text" name="blend_number" value="{{d.blend_number}}">
                <button type="submit" class="btn btn-primary" id="submit_btn">&nbsp;&nbsp;SUBMIT&nbsp;&nbsp;</button>
            </form>
        </div>
</div>
{% endif %}

<script>
        $(document).ready(function(){
                $("#formPage div").addClass("mb-3");
                $("textarea").attr({"rows": "2", "cols": "40"});
            })
</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>
{% endblock %}