{% extends 'base.html' %}

{% load static %}

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

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Blend Details</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">

{% if d1 %}
<div>
    <h1><i><strong>BLEND DETAILS</strong></i></h1>
    <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> {% if d.status == 'APPROVED' %} & <strong style="color:rgb(4, 99, 4);">APPROVED</strong>{% endif %}</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>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    
    
    <h3><i>ALCOHOL</i></h3>
    <p class="mb-1">ALCOHOL STRENGTH : <strong>{{ d.alcohol_strength }} %</strong></p>
    <p class="mb-1">ALCOHOL SOURCE : <strong>{{ d.alcohol_source }}</strong></p>
    <p class="mb-1">ALCOHOL TASTING SCORE : <strong>{{ d.alcohol_tasting_score }}</strong></p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h3><i>DEMIN WATER</i></h3>
    <p class="mb-1">DEMIN WATER PLANT : <strong>{{ d.demin_water_plant }}</strong></p>
    <p class="mb-1">DEMIN WATER PH : <strong>{{ d.demin_water_ph }}</strong></p>
    <p class="mb-1">DEMIN WATER CONDUCTIVITY : <strong>{{ d.demin_water_conductivity }} &micro;</strong></p>
    <p class="mb-1">DEMIN WATER CHLORINE : <strong>{{ d.demin_water_chlorine }}</strong></p>
    <p class="mb-1">DEMIN WATER IRON : <strong>{{ d.demin_water_iron }}</strong></p>
    <p class="mb-1">DEMIN WATER CALCIUM : <strong>{{ d.demin_water_calcium }}</strong></p>
    <p class="mb-1">DEMIN WATER CAUSTIC CODE : <strong>{{ d.demin_water_caustic_code }}</strong></p>
    <p class="mb-1">DEMIN WATER HCL CODE : <strong>{{ d.demin_water_hcl_code }}</strong></p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h3><i>SUGAR SYRUP</i></h3>
    <p class="mb-1">SUGAR BRIX : <strong>{{ d.sugar_brix }}</strong></p>
    <p class="mb-1">SUGAR PH : <strong>{{ d.sugar_ph }}</strong></p>
    <p class="mb-1">SUGAR CONDUCTIVITY : <strong>{{ d.sugar_conductivity }}</strong></p>
    <p class="mb-1">SUGAR TEMPERATURE : <strong>{{ d.sugar_temperature }}</strong></p>
    <p class="mb-1">SUGAR PASS OR FAIL : <strong>{{ d.sugar_pass_or_fail }}</strong></p>

    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <h3><i>PRODUCT</i></h3>
    <p class="mb-1">PRODUCT ALCOHOLIC STRENGTH : <strong>{{ d.product_alcoholic_strength }} %</strong></p>
    <p class="mb-1">PRODUCT COLOR : <strong>{{ d.product_color }}</strong></p>
    <p class="mb-1">PRODUCT PH : <strong>{{ d.product_ph }}</strong></p>
    <p class="mb-1">PRODUCT CONDUCTIVITY : <strong>{{ d.product_conductivity }} &micro;</strong></p>
    <p class="mb-1">PRODUCT TASTING RESULT : <strong>{{ d.product_tasting_result }}</strong></p>
    <p class="mb-1">PRODUCT BRIX : <strong>{{ d.product_brix }}</strong></p>
    <p class="mb-1">RESULT : <strong>{{ d.result }}</strong></p>
    <p class="mb-1">STATUS : <strong>{{ d.status }}</strong></p>
    <p class="mb-1">HYGIENE : <strong>{{ d.hygiene }}</strong></p>
    <p class="mb-1">COMMENT : <strong>{{ d.comment }}</strong></p>
    <p class="mb-1">FORMS IMAGES UPLOADED : <strong>{{ d.forms_images_uploaded }}</strong></p>
    <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>{{ d.blending_inspector }}</strong> <small>at <strong>{{d.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>{{ d.checked_by }}</strong> <small>at <strong>{{d.checked_by_date}}</strong></small></p>
    <p class="mb-1">BMO COMMENT : <strong>{{ d.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>{{ d.approved_by }}</strong> <small>at <strong>{{d.approval_date}}</strong></small></p>
        <p class="mb-1">APPROVER COMMENT : <strong>{{ d.approver_comment }}</strong></p>
    {% endif %}
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
</div>
{% endif %}

<!--DISPUTES AREA-->
<div>
  {% if disputes|length > 0 %}
  <h5>DISPUTES</h5>
  <ol>
      {% for d in disputes %}
      <li>
          <p class="mb-1">{{d.dispute|upper}}</p>
          <sup>Created by {{d.created_by}} at {{d.datetime_created}}</sup>
          <p class="mb-3">{% if d.status == 'OPEN' %}<a class="btn btn-secondary btn-sm" href="/dispute/close_dispute/{{d.id}}">CLOSE</a>{% else %}STATUS : <span style="color:green">{{d.status}}</span>{% endif %}</p>
      </li>
      {% endfor %}
  </ol>
  <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% else %}
  <h5>NO DISPUTES FOUND</h5>
  <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% endif %}
</div>
            
          
{% if d2 %}
    <div>
        <h5><strong>INGREDIENTS</strong></h5>
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col" class="mobile__hidden"></th>
                <th scope="col" class="mobile__tab__heading">INGREDIENT</th>
                <th scope="col" class="mobile__tab__heading">QUANTITY</th>
                <th scope="col" class="mobile__tab__heading">SUPPLIER</th>
                <th scope="col" class="mobile__tab__heading">CODE</th>
                <th scope="col" class="mobile__hidden">SUPPLY DATE</th>
                <th scope="col" class="mobile__hidden">RECORDED BY</th>
                <th scope="col" class="mobile__hidden">DATE RECORDED</th>
              </tr>
            </thead>
            <tbody>
                {% for r in d2 %}  
              <tr onclick="window.location.href='/ingredient_info/{{r.id}}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                <td class="mobile__hidden">{{ forloop.counter }}</td>
                <td class="mobile__text">{{r.ingredient}}</td>
                <td class="mobile__text">{{r.quantity}}</td>
                <td class="mobile__text">{{r.supplier}}</td>
                <td class="mobile__text">{{r.ingredient_code}}</td>
                <td class="mobile__hidden">{{r.date_of_supply}}</td>
                <td class="mobile__hidden">{{r.username}}</td>
                <td class="mobile__hidden">{{r.datetime}}</td>
              </tr>
              {% endfor %}
             </tbody>
        </table>        
    </div>
{% else %}
    <h5>No Ingredients have been added to this Blend</h5>
{% endif %}
<!-- CBMO APPROVAL AREA -->
{% if d.status == 'BLENDED' %}
    <div id="cbmo_check_form" class="col-sm-12 col-lg-5 shadowed__box mb-3"  style="padding:15px;">
        <form method="POST" action="/blend_cbmo_approval/">
            {% csrf_token %}
            <h5>CBMO CHECK FORM</h5>
            <div class="mb-3">
                <label class="form-label">Pass/Fail</label><br>
                <select class="form-select" id="pass_fail_select" name="pass_fail" required>
                    <option selected></option>
                    <option value="PASS" style="color:rgb(16, 158, 16);">PASS</option>
                    <option value="FAIL" style="color:rgb(216, 9, 9);">FAIL</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">CBMO Comment</label><br>
                <textarea name="checked_comment" class="form-control"></textarea>
            </div>
            <input type="hidden" value="{{d.id}}" name="matid">
            <button type="submit" class="btn btn-primary btn-sm mt-1 mb-2" id="check__submit__btn" onclick="confirmMgrPassFail()">&nbsp;&nbsp;CBMO CHECK&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-secondary btn-sm mt-1 mb-2" onclick="hide_cbmo_form_box()">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>

        </form>
    </div>
{% endif %}

<!-- PRODUCT BOTTLED AREA -->
{% if d.status == 'CHECKED' %}
    <div id="blend_bottled_form" class="col-sm-12 col-lg-5 shadowed__box mb-3"  style="padding:15px;">
        <form method="POST" action="/blend_bottled_completed/">
            {% csrf_token %}
            <h5>BLEND BOTTLED FORM</h5>
            <div class="mb-3">
                <label class="form-label">Have the Blend Been Bottled Completely</label><br>
                <select class="form-select" id="bottled_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">
                <label class="form-label">Comment</label><br>
                <textarea name="bottled_comment" class="form-control"></textarea>
            </div>
            <input type="hidden" value="{{d.id}}" name="matid">
            <button type="submit" class="btn btn-primary btn-sm mt-1 mb-2" id="check__submit__btn" onclick="confirmBlendHaveBeenBottled()">BLEND HAVE BEEN BOTTLED</button>
            <button type="button" class="btn btn-secondary btn-sm mt-1 mb-2" onclick="hide_cbmo_form_box()">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>

        </form>
    </div>
{% endif %}

<!-- QAM APPROVAL FORM -->
{% if d.status == 'CHECKED' %}
    <div id="approval_bottled_form" class="col-sm-12 col-lg-5 shadowed__box mb-3"  style="padding:15px;">
        <form method="POST" action="/blend_approval_page/">
            {% 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="{{d.id}}" name="matid">
            <button type="submit" class="btn btn-success btn-sm mt-1 mb-2" id="approve__submit__btn" onclick="confirmBlendHaveBeenApproved()">APPROVE</button>
            <button type="button" class="btn btn-secondary btn-sm mt-1 mb-2" onclick="hide_approval_form_box()">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>
        </form>
    </div>
{% endif %}


<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    {% if d.status != 'BLENDED' %}
        {% if user_data.role == 'SUPERADMIN' or user_data.role == 'ADMIN' %}
            <a href="/add_ingredient/?ref={{d.blend_number}}" class="btn btn-primary" onclick="if (confirm('Do you want to Add Ingredient to this Blend!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">ADD INGREDIENT</a>
        {% endif %}
    {% else %}
    <a href="/add_ingredient/?ref={{d.blend_number}}" class="btn btn-primary" onclick="if (confirm('Do you want to Add Ingredient to this Blend!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">ADD INGREDIENT</a>
    <a href="/update_blend/{{d.id}}" class="btn btn-warning" onclick="if (confirm('Do you want to update this Blend!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">UPDATE</a>
    {% endif %}


    <a href="/dispute/create_dispute/?ref={{d.blend_number}}" class="btn btn-danger" onclick="if (confirm('Do you want to a Dispute to this Blend!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">DISPUTE</a>
    <a href="/despatch/{{d.id}}/" class="btn btn-secondary">PRINT DESPATCH</a>
    <a href="/report/blend/{{d.id}}/" class="btn btn-dark">PRINT REPORT</a>
    
    {% if d.status != 'BOTTLED' %}
    <a href="/blend_file/join_blend/{{d.id}}" class="btn btn-warning" onclick="if (confirm('Do you want to join this Blend to the Line!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">JOIN BLEND</a>
    {% endif %}
    
    
    {% if user_data.role == 'SUPERADMIN' or user_data.role == 'ADMIN' %}
        {% if d.status == 'BLENDED' %}
            <button class="btn btn-info" onclick="show_cbmo_form_box()" id="cbmo_show_hide_btn">CBMO Confirmation</button>
        {% endif %}
        {% if d.status == 'CHECKED' %}
            <button class="btn btn-outline-success" onclick="show_bottled_form_box()" id="show_bottled_form_btn">BLEND BOTTLED</button>
        {% endif %}
    {% endif %}

    {% if user_data.role == 'SUPERADMIN' or user_data.role == 'MANAGER-ADMIN' %}
        {% if d.status == 'CHECKED' %}
            <button class="btn btn-success" onclick="show_manager_approval_form_box()" id="show_manager_approval_form_btn">MGR APPROVAL</button>
        {% endif %}
    {% endif %}
 <br><br>

 <script>
    $(document).ready(function(){
        $('#cbmo_check_form').hide();
        $('#blend_bottled_form').hide();
        $('#approval_bottled_form').hide();

        $('#approval_yes_no').val('');
        $('#approval_comment_box').hide();
        //$("#formPage div").addClass("mb-3");
        //$("textarea").attr({"rows": "2", "cols": "40"});
        //$("#id_date_of_supply").attr({'type':'date'});
    })
</script>

<script>
    function show_cbmo_form_box(){
        $('#cbmo_check_form').show();
        $('#cbmo_show_hide_btn').hide();
        //if (confirm('Do you want to Confirm this Blend!!!?')){
        //    return true;
        //}else{
        //    event.stopPropagation();
        //    event.preventDefault();
        //}
    }

    function hide_cbmo_form_box(){
        $('#cbmo_check_form').hide();
        $('#cbmo_show_hide_btn').show();
        }

    function show_bottled_form_box(){
        $('#blend_bottled_form').show();
        $('#show_bottled_form_btn').hide();
    }

    function confirmBlendHaveBeenBottled(){
        if (confirm('Do you want to Add Ingredient to this Blend!!!?')){
            return true;
            $('#blend_bottled_form').hide();
        }else{
            event.stopPropagation();
            event.preventDefault();
        };
    }
</script>

<script>
    function show_manager_approval_form_box(){
        $('#approval_bottled_form').show();
        $('#show_manager_approval_form_btn').hide();
    }

    function hide_approval_form_box(){
        $('#approval_bottled_form').hide();
        $('#show_manager_approval_form_btn').show();
    }

    document.getElementById('approval_yes_no').addEventListener('change', function(){
        if (this.value === 'YES'){
            $('#approval_comment_box').show();
        }else{
            $('#approval_comment_box').hide();
        }
    })


    function confirmBlendHaveBeenApproved(){
        if (confirm('Do you want to Approve this Blend!!!?')){
            document.getElementById("approve__submit__btn").disabled = true;
            document.getElementById("approve__submit__btn").innerText = 'APPROVING';
            return true;
        }else{
            event.stopPropagation();
            event.preventDefault();
        };
    }
</script>
{% endblock %}