{% extends 'base.html' %}

{% load static %}

{% block title %}Add Tasting | 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);">

<!--MODALS AREA STARTS HERE-->
<!-- CBMO CHECK MODAL STARTS HERE -->
<div class="modal fade" id="cbmoModal" tabindex="-1" role="dialog" aria-labelledby="cbmoModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cbmoModalLabel">CBMO CONFIRMATION</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <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 mt-3 mb-2" id="check__submit__btn" onclick="confirmMgrPassFail()">&nbsp;&nbsp;CBMO CHECK&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-secondary mt-3  mb-2" data-bs-dismiss="modal">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>

        </form>
      </div>
      <div class="modal-footer">
        <p>CBMO Check</p>
      </div>
    </div>
  </div>
</div>
<!--CBMO CHECK MODAL ENDS HERE-->

<!-- APPROVAL MODAL STARTS HERE -->
<div class="modal fade" id="approvalModal" tabindex="-1" role="dialog" aria-labelledby="approvalModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="approvalModalLabel">BLEND APPROVAL</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="/blend_approval_page/{{d.id}}/">
                {% csrf_token %}
                <h3><i><strong>APPROVAL FORM</strong></i></h3>
                <div class="mb-3">
                    <label class="form-label">DO YOU WANT TO APPROVE THIS 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 mt-3 mb-2" id="approve__submit__btn">APPROVE</button>
                <button type="button" class="btn btn-secondary mt-3  mb-2" data-bs-dismiss="modal">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>
            </form>
        
      </div>
      <div class="modal-footer">
        <p>QAM Approval</p>
      </div>
    </div>
  </div>
</div>
<!-- APPROVAL MODAL ENDS HERE-->

<!--MODALS AREA ENDS HERE-->

{% if blend %}
<div class="px-5">
        <div class="col">
            <h1><i><strong>BLEND DETAILS</strong></i></h1>
            <h5>BLEND NUMBER : <strong>{{ blend.blend_number }}&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> {% if blend.status == 'APPROVED' %} & <strong style="color:rgb(4, 99, 4);">APPROVED</strong>{% endif %}</h5>
            <p class="mb-0">PRODUCT : <strong>{{ blend.product }}</strong></p>
            <p class="mb-0">TANK NUMBER : <strong>{{ blend.tank_number }}</strong></p>
            <p class="mb-0">DATE BLENDING STARTED : <strong>{{ blend.date_blending_started }}</strong></p>
            <p class="mb-0">DATE BLENDING ENDED : <strong>{{ blend.date_blending_ended }}</strong></p>
            <p class="mb-0">VOLUME : <strong>{{ blend.volume_in_ltr }} Litres</strong></p>
            <p class="mb-0">STATUS : <strong>{{ blend.status }}</strong></p>

        </div>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    
    <div>
        <form method="POST" action="">
            {% csrf_token %}
            <h3 class="text-center">TRIANGLE TEST SUMMARY</h3>
            <p class="mb-0">SAMPLE OF : <strong>{{ blend.product }}</strong></p>
            <div class="form-group mb-3">
                <label class=" requiredField">DATE*</label>
                <div class="mb-3">
                    <input type="date" name="triangulation_date" class="dateinput form-control" required="" id="id_triangulation_date">
                </div>
            </div>
            <div class="form-group mb-3">
                <label class=" requiredField">TRIANGULAR CODE*</label>
                <div class="mb-3">
                    <input type="text" name="triangulation_code" maxlength="3" class="textinput textInput form-control" required="" id="id_triangulation_code">
                </div>
            </div>
            
            <div class="form-group mb-3">
                <label class=" requiredField">SINGLE SAMPLE*</label>
                <div class="mb-3">
                    <input type="text" name="single_sample" maxlength="1" class="textinput textInput form-control" required="" id="id_single_sample">
                </div>
            </div>
            
            <div class="form-group mb-3">
                <label class=" requiredField">RESULT*</label>
                <div class="mb-3">
                    <input type="text" name="result" class="textinput textInput form-control" required="" id="id_result">
                </div>
            </div>
            
            <div class="form-group mb-3">
                <label class=" requiredField">SIGNIFICANCE*</label>
                <div class="mb-3">
                    <select name="significance" class="select form-control" required="" id="id_significance">
                        <option value="" selected=""></option>
                        <option value="NOT SIGNIFICANT">NOT SIGNIFICANT</option>
                        <option value="SIGNIFICANT">SIGNIFICANT</option>
                    </select>
                </div>
            </div>
            <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            <h3 class="text-center mt-3">ADD TASTERS RESULTS</h3>
            <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">TASTER</th>
                      <th scope="col">ANSWER</th>
                    </tr>
                  </thead>
                  <tbody id="table_body">
                    <tr class="taster_row">
                      <th scope="row">1</th>
                      <td><input type="text" name="taster1" class="textinput textInput form-control" required="" id="id_taster1"></td>
                      <td><select name="score1" class="select form-control" required="" id="id_score1">
                        <option value="" selected=""></option>
                        <option value="CORRECT">CORRECT</option>
                        <option value="NOT CORRECT">NOT CORRECT</option>
                        <option value="NONE-SELECTED">NONE-SELECTED</option>
                    </select></td>
                    </tr>
                  </tbody>
            </table>
            
            <input type="hidden" value=1 name="no_of_tasters" id="no_of_tasters">
            
            <button type="button" class="btn btn-secondary" onclick="addTaster()">ADD TASTER</button>
            <button type="button" class="btn btn-danger" onclick="removeTaster()">REMOVE TASTER</button>
            <button type="submit" class="btn btn-primary">SUBMIT</button>
            <a href="/blend_info/{{blend.id}}/" class="btn btn-outline-dark">BACK</a>
            
        </form>
        
    </div>
</div>
{% endif %}


 <br><br><br><br>
 <script>
     function addTaster(){
         var taster_row = $('.taster_row')
         var new_row = `<tr class="taster_row"><th scope="row">${taster_row.length + 1}</th> <td><input type="text" name="taster${taster_row.length + 1}" class="textinput textInput form-control" required="" id="id_taster${taster_row.length + 1}"></td>`;
         new_row += `<td><select name="score${taster_row.length + 1}" class="select form-control" required="" id="id_score${taster_row.length + 1}">`;
         new_row += '<option value="" selected=""></option><option value="CORRECT">CORRECT</option><option value="NOT CORRECT">NOT CORRECT</option><option value="NONE-SELECTED">NONE-SELECTED</option></select></td></tr>';
        $('#table_body').append(new_row);
        $('#no_of_tasters').val(taster_row.length + 1)
         
     }
     
     function removeTaster(){
         var taster_row = $('.taster_row')
         if (taster_row.length > 1){
             taster_row[taster_row.length-1].remove();
             $('#no_of_tasters').val(taster_row.length - 1)
         }else{
             alert('TASTE TABLE CAN NOT BE LESS THAN ONE!!!')
         }
     }
 </script>

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

<script>

    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>
    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 %}