{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Blend Approval Form | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Blend Approval Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<div>
    {% if blend %}
    <h5>BLEND NUMBER : <strong>{{ blend.blend_number }} / ({{ blend.blend_number_2 }})&nbsp;&nbsp;&nbsp;{% if blend.result == 'PASS' %}<span style="color:green;">{{blend.result}}<i class="bi bi-check-lg"></i></span>{% elif blend.result == 'FAIL' %}<span style="color:red;">{{blend.result}}<i class="bi bi-x-lg"></i></span>{% endif %}</strong></h5>
    <h5>PRODUCT : <strong>{{ blend.product }}</strong></h5>
    <h5>TANK NUMBER : <strong>{{ blend.tank_number }}</strong></h5>
    <h5>DATE BLENDED : <strong>{{ blend.date_blended }}</strong></h5>
    <h5>VOLUME : <strong>{{ blend.volume_in_ltr }} Litres</strong></h5>
    <h5>STATUS : <strong>{{ blend.status }}</strong></h5>
    <h5>RESULT : <strong>{{ blend.result }}</strong></h5>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h3><i>BLENDED</i></h3>
    <p class="mb-1">BLENDING INSPECTOR : <strong>{{ blend.blending_inspector }}</strong> <small>at <strong>{{blend.datetime}}</strong></small></p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">

    
    <h3><i>CHECKED</i></h3>
    <p class="mb-1">CHECKED BY BMO : <strong>{{ blend.checked_by }}</strong> <small>at <strong>{{blend.checked_by_date}}</strong></small></p>
    <p class="mb-1">BMO COMMENT : <strong>{{ blend.checked_comment }}</strong></p>

    {% if d.is_approved %}
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h3><i>APPROVED</i></h3>
        <p class="mb-1">APPROVED BY : <strong>{{ blend.approved_by }}</strong> <small>at <strong>{{blend.approval_date}}</strong></small></p>
        <p class="mb-1">APPROVER COMMENT : <strong>{{ blend.approver_comment }}</strong></p>
    {% endif %}
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        <div id="approval_bottled_form" class="col-sm-12 col-lg-8 shadowed__box mb-3"  style="padding:15px;">
            <form method="POST" action="">
                {% csrf_token %}
                <h3><i><strong>QAM APPROVAL FORM</strong></i></h3>
                <div class="mb-3">
                    <label class="form-label">Approve Blend</label><br>
                    <select class="form-select" id="approval_yes_no" name="pass_fail" required>
                        <option selected></option>
                        <option value="NO">NO</option>
                        <option value="YES">YES</option>
                    </select>
                </div>
                <div class="mb-3" id="approval_comment_box">
                    <label class="form-label">Approver Comment</label><br>
                    <textarea name="approval_comment" class="form-control"></textarea>
                </div>
                <input type="hidden" value="{{blend.id}}" name="matid">
                <button type="submit" class="btn btn-success btn-sm mt-1 mb-2" id="approve__submit__btn" onclick="confirmBlendHaveBeenApproved()">APPROVE</button>
                <a href="/blend_info/{{blend.id}}/" class="btn btn-secondary btn-sm mt-1 mb-2">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</a>
            </form>
        </div>
    {% endif %}
</div>
 <br><br>
 
 <script>
    $(document).ready(function(){
        $("#formPage div").addClass("mb-3");
        $("textarea").attr({"rows": "2", "cols": "40"});
        $("#id_date_blended").attr({'type':'date'});
        $('#id_product_type').val('');
    })
</script>

 <script>
    document.getElementById("formPage").onsubmit = function() {
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = '  UPDATING  ';
        if (document.getElementsByClassName('#errorlist')){
            document.getElementsByClassName('#errorlist').innerText;
        }
    }
</script>

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


{% endblock %}