{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %} Finished Product Information | IQChem {% endblock %}

{% block content %}
<!-- UPDATE Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="updateModalLabel">UPDATE</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="p-1">
              <form method="POST" action="/finished_products/finished_product_detail/{{mat1.id}}/">
                    {% csrf_token %}
                        {{ form_update|crispy }}
                    <button type="submit" class="btn btn-primary my-2 rounded-0 shadowed" onclick="return confirm('Are you sure you want to Update this Entry?')">&nbsp;&nbsp;UPDATE&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-dark my-2 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
                </form>
          </div>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>
<!--UPDATE Ends-->


<!-- DELETE MODAL STARTS ------->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="deleteModalLabel"DELETE</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="p-1">
              <form method="POST" action="/finished_products/delete/{{mat1.id}}/">
                    {% csrf_token %}
                    <h3>ARE YOU SURE YOU WANT TO DELETE THIS MATERIAL RECORD!!!</h3>
                    <div class="mb-3">
                        <label class="form-label" name="yes_no">Confirm Yes or No</label>
                        <select class="form-select" name="yes_no">
                            <option selected="" value="NO">NO</option>
                            <option value="YES" style="color:red">YES</option>
                          </select>
                    </div>

                    <button type="submit" id="deletet_btn" class="btn btn-danger my-2 rounded-0 shadowed" onclick="if (confirm('Are you sure you want to delete this record Permanently!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">&nbsp;&nbsp;DELETE&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-dark my-2 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
                </form>
          </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<!-- DELETE MODAL Ends-->


<!-- WORKFLOW CHECK Modal -->
<div class="modal fade" id="checkModal" tabindex="-1" aria-labelledby="checkModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="checkModalLabel">CHECK FORM</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="p-1">
              <form method="POST" action="/finished_products/check/{{mat1.id}}/">
                    {% csrf_token %}
                    <h5>ANALYST 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>
                        {{ form_check|crispy }}
                    <input type="hidden" value="{{mat1.id}}" name="matid">
                    <button type="submit" class="btn btn-primary my-2 rounded-0 shadowed" id="check__submit__btn" onclick="confirmMgrPassFail()">&nbsp;&nbsp;CHECK&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-dark my-2 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>

                </form>
          </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<!--WORKFLOW CHECK Ends-->


<!-- WORKFLOW APPROVAL / REJECTION Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" id="modal-header-approval">
        <h1 class="modal-title fs-5" id="approveModalLabel">APPROVAL / REJECTION FORM</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="p-1">
              <form method="post" action="/finished_products/approval/{{mat1.id}}/" id="formPageapprove">
                  {% csrf_token %}

                  <div class="">
                    <label class="form-label requiredField mb-3">Approve / Reject?</label>
                    <select class="form-select" name="approve_reject" id="approve_reject" onchange="approveReject()">
                        <option value="APPROVED" selected>APPROVE</option>
                        <option value="REJECTED">REJECT</option>
                      </select>                          
                  </div>

                  {{ form_approve|crispy}}

                  <button type="submit" class="btn btn-primary my-2 rounded-0 shadowed" id="submitBtnapprove" onclick="return confirm(`Are you sure you want to ${document.getElementById('approve_reject').value === 'CONCESSIONAL' ? 'CONCESSIONALLY APPROVE' : document.getElementById('approve_reject').value} this Material?`)">APPROVE</button>
                  <button type="button" class="btn btn-dark my-2 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
              </form>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="window.location.reload()">Close</button>
      </div>
    </div>
  </div>
</div>
<!--WORKFLOW APPROVAL / REJECTION Ends-->




    <h3>FINISHED PRODUCT INFORMATION</h3>
    <p>Chemical Section Platform</p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <div>
        <div class="row">
            <div class="col-sm-12 col-lg-6 my-2">
                <h5>INFORMATION&nbsp;&nbsp;&nbsp;&nbsp;
                    {% if mat1.result == 'FAIL' %}
                        <span style="border-radius:50%;background-color:red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color:red;"><strong>FAIL</strong></span>
                    {% elif mat1.result == 'PASS' %}
                        <span style="border-radius:50%;background-color:green;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color:green;"><strong>PASS</strong></span>
                    {% endif %}
                </h5>
                    <p class="mb-1">PRODUCT : <strong>{{mat1.product}}</strong></p>
                    <p class="mb-1">LINE / SACHET : <strong>{{mat1.line}}</strong></p>
                    <p class="mb-1">BLEND NUMBER : <strong>{{mat1.blend_number}}</strong></p>
                    <p class="mb-1">DATE BLENDED : <strong>{{mat1.date_blended}}</strong></p>
                    <p class="mb-1">TANK : <strong>{{mat1.tank_number}}</strong></p>
                    <p class="mb-1">APPEARANCE : <strong>{{mat1.appearance}}</strong></p>
                    <p class="mb-1">ALCOHOL STR. : <strong>{{mat1.alcohol_strength}}</strong></p>
                    <p class="mb-1">TOTAL ACIDITY : <strong>{{mat1.total_acidity}}</strong></p>
                    <p class="mb-1">TOTAL ESTER : <strong>{{mat1.total_ester}}</strong></p>
                    <p class="mb-1">TOTAL ALDEHYDE : <strong>{{mat1.total_aldehyde}}</strong></p>
                    <p class="mb-1">SUGAR : <strong>{{mat1.sugar}}</strong></p>
                    <p class="mb-1">METHANOL : <strong>{{mat1.methanol}}</strong></p>
                    <p class="mb-1">FURFURAL : <strong>{{mat1.furfural}}</strong></p>
            
                    <p class="mb-1">pH : <strong>{{mat1.ph}}</strong></p>
                    <p class="mb-1">CONDUCTIVITY : <strong>{{mat1.conductivity}}</strong></p>
                    <p class="mb-1">TASTING : <strong>{{mat1.tasting_result}}</strong></p>
                    <p class="mb-1">COLOUR : <strong>{{mat1.colour}}</strong></p>
                    <p class="mb-1">LOVIBOND : <strong>{{mat1.lovibond}}</strong></p>
            </div>
            
            
            <div class="col-sm-12 col-lg-6 my-2">
                <div class="p-4 mx-3" style="border:0.3px solid gray;border-radius:1%;">
                        <h2 class="text-center" style="border-bottom:3px solid black;">WORKFLOW</h2>
                        <ul class="list-group list-group-flush">
                          <li class="list-group-item" style="border-bottom:3px solid black;">
                            <p class="mb-0">{{mat1.comment}}</p>
                            <p class="mb-0">Performed by : <strong>{{mat1.performed_by}}</strong></p>
                            <p>Created by <strong>{{mat1.formatted_username}}</strong> at <strong>{{mat1.datetime_created}}</strong></p>
                          </li>
                          {% if mat1.is_checked == True %}
                            <li class="list-group-item" style="border-bottom:3px solid black;">
                                <h5>CHECKED</h5>
                                <p class="mb-0">CHECKER COMMENT : {{mat1.checked_comment}}</p>
                                <p class="mb-0">RESULT : {% if mat1.result == 'PASS' %}<strong style="color:green;">{{mat1.result}}</strong>{% elif mat1.result == 'FAIL' %}<strong style="color:red;">{{mat1.result}}</strong>{% else %}<strong>{{mat1.result}}</strong>{% endif %}</p>
                                <p>Checked by <strong>{{mat1.formatted_checked_by}}</strong> at <strong>{{mat1.checked_by_date}}</strong></p>
                            </li>
                           {% endif %}
                           
                           {% if mat1.is_approved %}
                          <li class="list-group-item" style="border-bottom:3px solid black;">
                              <h5>APPROVED</h5>
                                <p class="mb-0">{{mat1.approver_comment}}</p>
                                <p>Approved by <strong>{{mat1.formatted_approved_by}}</strong> at <strong>{{mat1.approval_date}}</strong></p>
                          </li>
                          {% endif %}
                        </ul>
                        
                        <div>
                            {% if mat1.status == 'ANALYSED' %}
                                {% if 'user_can_unit_head_check_finished_product' in user_data.permissions %}
                                    <button class="btn btn-success shadowed mt-4" data-bs-toggle="modal" data-bs-target="#checkModal">CHECK</button>
                                {% else %}
                                    <div style="display:flex; flex-direction:row;justify-content: space-between;" class="mt-3">
                                        <p>Awaiting Chief Analyst Checks</p>
                                        <div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
                                    </div>
                                {% endif %}
                            {% elif mat1.status == 'CHECKED' %}
                                {% if 'user_can_approve_finished_product' in user_data.permissions or user_data.role == 'MANAGER-ADMIN' or user_data.role == 'SUPERADMIN' %}
                                    <button class="btn btn-success shadowed mt-4" data-bs-toggle="modal" data-bs-target="#approveModal">APPROVE</button>
                                {% else %}
                                    <div style="display:flex; flex-direction:row;justify-content: space-between;" class="mt-3">
                                        <p>Awaiting Approval</p>
                                        <div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
                                    </div>
                                {% endif %}
                            {% elif mat1.status == 'APPROVED' %}
                                {% if mat1.is_approved_or_rejected == 'APPROVED' %}
                                    <h3 class="text-center my-3" style="color:green";>APPROVED</h3>
                                {% elif mat1.is_approved_or_rejected == 'REJECTED' %}
                                    <h3 class="text-center my-3" style="color:red";>REJECTED</h3>
                                {% endif %}
                            {% endif %}
                        </div>
                </div>
            </div>
        </div>
        

            <!--CHECK ANALYST CHECK-->
            <!--div id="mgr__check__form" class="col-sm-12 col-lg-6 shadowed__box mb-3"  style="padding:15px;">
                <form method="POST" action="/finished_products/finished_product_material_mgr_check/">
                    {% csrf_token %}
                    <h5>ANALYST 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">Analyst Comment</label><br>
                        <textarea name="checked_comment" class="form-control"></textarea>
                    </div>
                    <input type="hidden" value="{{mat1.id}}" name="matid">
                    <button type="submit" class="btn btn-primary btn-sm mt-1 mb-2" id="check__submit__btn" onclick="confirmMgrPassFail()">&nbsp;&nbsp;CHECK&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-secondary btn-sm mt-1 mb-2" onclick="cancel_check_form_fxn()">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>

                </form>
            </div-->


        {% if docss|length > 0 %}
            <h5>UPLOADED DOCUMENTS</h5>
            <ol>
            {% for d in docss %}
                <li><a href="{{d.link}}" class="btn btn-light" alt="{{d.name}}">{{d.name}}<span>&nbsp;&nbsp;&nbsp;&nbsp;<sub>Uploaded by {{d.uploaded_by}}</sub></span></a></li>
            {% endfor %}
            </ol> 
            <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        {% endif %}

            <!--FILES UPLOAD-->
            <div id="file__upload__form" class="col-sm-12 col-lg-6 shadowed__box mb-3"  style="padding:15px;">
                <form method="POST" action="/file_upload/" enctype="multipart/form-data">
                    {% csrf_token %}
                    <h5>FILE UPLOAD FORM</h5>
                    <div class="mb-3">
                        <label class="form-label">Upload File</label><br>
                        <input class="form-control" type="file" name="myfile" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">File name</label><br>
                        <input class="form-control" name="file_name" required>
                    </div>
                    <input type="hidden" value="{{mat1.id}}" name="matidd">
                    <button type="submit" class="btn btn-primary btn-sm mt-1 mb-2" id="check__submit__btn" onclick="confirmAlert('Do you want to upload this file!!!')">&nbsp;&nbsp;UPLOAD&nbsp;&nbsp;</button>
                    <button type="button" class="btn btn-secondary btn-sm mt-1 mb-2" onclick="cancel_file_upload_form_fxn()">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</button>
                </form>
            </div>

                
                <button type="button" class="btn btn-primary shadowed my-3" id="file_upload_form_show_btn" onclick="file_upload_form_show()">&nbsp;&nbsp;UPLOAD FILE&nbsp;&nbsp;</button>
                <a href="/finished_products/finished_product_print_form/{{mat1.id}}/" class="btn btn-info shadowed my-3">FORM</a>
                {% if mat1.status == 'ANALYSED' %}
                    <button class="btn btn-warning shadowed my-3" data-bs-toggle="modal" data-bs-target="#updateModal" onclick="if (confirm('Do you want to Update this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">UPDATE</button>
                    <button class="btn btn-danger shadowed my-3" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="if (confirm('Do you want to Delete this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">DELETE</button>
                {% elif mat1.status == 'CHECKED' %}
                    {% if user_data.role == 'SUPERADMIN' or user_data.role == 'MANAGER-ADMIN' %}
                        <button class="btn btn-warning shadowed my-3" data-bs-toggle="modal" data-bs-target="#updateModal" onclick="if (confirm('Do you want to Update this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">UPDATE</button>
                        <button class="btn btn-danger shadowed my-3" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="if (confirm('Do you want to Delete this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">DELETE</button>
                    {% elif mat1.checked_by == user_data.username %}
                        <button class="btn btn-warning shadowed my-3" data-bs-toggle="modal" data-bs-target="#updateModal" onclick="if (confirm('Do you want to Update this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">UPDATE</button>
                        <button class="btn btn-danger shadowed my-3" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="if (confirm('Do you want to Delete this record!!!?')){return true;}else{event.stopPropagation(); event.preventDefault();};">DELETE</button>
                    {% endif %}
                {% endif %}
    </div>

    <script>
        function mgr_check_form_show(){
            $('#mgr__check__form').show();
            $('#mgr_check_form_btn').hide();
        }

        function cancel_check_form_fxn(){
            $('#mgr__check__form').hide(); 
            $('#mgr_check_form_btn').show();
        }

        function confirmAlert(msg){
            if (confirm(msg)){
                return true;
            }else{
                event.stopPropagation();
                event.preventDefault();
            }
        }


        function confirmMgrPassFail(){
            var pass_fail_select = $('#pass_fail_select').val()
            if( pass_fail_select !== ''){

                if (confirm(`Are you sure you want to ${pass_fail_select} this material?`)){
                return true;
                    }else{
                        event.stopPropagation();
                        event.preventDefault();
                    }
            }else{
                alert('Please select either PASS or FAIL!!!')
                event.stopPropagation();
                event.preventDefault();
            } 
        }
    </script>


    <script>
        function analyse_material(id){
            console.log(id);
            if (confirm('Do you want to Analyse this material?')) {
                    window.location.replace(`/material_analyse/${id}`)
                    //window.location.replace(`/${material}/${id}`)
                } else {
                // Do nothing!
                console.log('Thing was not saved to the database.');
}
        }
    </script>


    <script>
        function analysis_tab_list_formater(){
            var analysis_tab_list = $('.analysis_tab_list');

            $.each(analysis_tab_list, function(index, val){
                var elm = val.innerText;
                var elm_list = elm.replace(/_/g, ' ')
                val.innerText= elm_list;

            })
        }
    </script>



    <script>
        $(document).ready(function(){
            $("#formPage div").addClass("mb-3");
            $('#mgr__check__form').hide();
            $('#file__upload__form').hide();

            analysis_tab_list_formater();
            setProducts();
        });
    </script>

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


<script>
            function file_upload_form_show(){
            $('#file__upload__form').show();
            $('#file_upload_form_show_btn').hide();
        }

        function cancel_file_upload_form_fxn(){
            $('#file__upload__form').hide();
            $('#file_upload_form_show_btn').show();
        }
</script>

<script>
    $('#pass_fail_select').change(function(){
        var pass_fail_select = $('#pass_fail_select').val()
        if (pass_fail_select === 'PASS'){
            $('#check__submit__btn').text('    PASS    ')
            $('#check__submit__btn').removeClass("btn-primary");
            $('#check__submit__btn').removeClass("btn-danger");
            $('#check__submit__btn').addClass("btn-success");
        }else if (pass_fail_select === 'FAIL'){
            $('#check__submit__btn').text('    FAIL    ')
            $('#check__submit__btn').removeClass("btn-primary");
            $('#check__submit__btn').removeClass("btn-success");
            $('#check__submit__btn').addClass("btn-danger");
        }else{
            $('#check__submit__btn').text('  CHECK  ')
            $('#check__submit__btn').removeClass("btn-success");
            $('#check__submit__btn').removeClass("btn-danger");
            $('#check__submit__btn').addClass("btn-primary");
        }
        $('#check__submit__btn').text()
    })
</script>

<script>
  function approveReject(){
    var approve_reject = $('#approve_reject').val();
    var submitBtnapprove = $('#submitBtnapprove');
    var modal_header = $('#modal-header-approval');
    submitBtnapprove.text(approve_reject);
    
    if (approve_reject === 'APPROVE'){
      submitBtnapprove.css({'background-color':'green'});
      modal_header.css({'background-color':'green'});
      $('#div_id_approved_comment label').html('<span><br>APPROVAL COMMENT</span>');
    
    }else if (approve_reject === 'REJECT'){
      submitBtnapprove.css({'background-color':'red'});
      modal_header.css({'background-color':'red'});
      $('#div_id_approved_comment label').html('<span><br>REJECTION COMMENT</span>');
  }else if (approve_reject === 'CONCESSIONAL'){
    submitBtnapprove.css({'background-color':'teal'});
    modal_header.css({'background-color':'teal'});
    $('#div_id_approved_comment label').html('<span><br>CONCESSIONAL APPROVAL COMMENT</span>');
}
}
</script>

<script>
        function setProducts(){
            var product_list = "{{products|safe}}";
            var products = product_list.split(',,');
            var appearance_list = "{{appearance|safe}}";
            var appearances = appearance_list.split(',,');
            var div_id_product = document.getElementById('div_id_product');
            var div_id_appearance = document.getElementById('div_id_appearance');
            var id_product_val = document.getElementById('id_product').value;
            var id_appearance_val = document.getElementById('id_appearance').value;
            var option1 = `<label for="id_product" class=" requiredField">Product*<span class="asteriskField">*</span> </label><select name="product" class="select form-control" required="" id="id_product" value="${id_product_val}"><option value="${id_product_val}" selected>${id_product_val}</option>`;
            var option2 = `<label for="id_appearance" class=" requiredField">Appearance*<span class="asteriskField">*</span> </label><select name="appearance" class="select form-control" required="" id="id_appearance" value="${id_appearance_val}"><option value="${id_appearance_val}" selected>${id_appearance_val}</option>`;
            
            for(let i=0;i<products.length;i++){
                option1 += `<option value="${products[i]}">${products[i]}</option>`;
            }
            
            option1 += '</select>';
            
            div_id_product.innerHTML = option1;
            
            for(let i=0;i<appearances.length;i++){
                option2 += `<option value="${appearances[i]}">${appearances[i]}</option>`;
            }
            
            option2 += '</select>';
            
            div_id_appearance.innerHTML = option2;
            
            
            var div_id_line = $('#div_id_line label').text('Enter Lines or Sachets');
        }
    </script>
    
{% endblock %}