{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% 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 HOURLY LINE INSPECTION DETAILS</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="" id="update_form">
                    {% csrf_token %}
                    
                    {{form|crispy}}
                    <input type="hidden" name="product_type" value="{{product_type}}"/>
                    <button type="submit" class="btn btn-warning mt-5 form-control shadowed">Update</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>
<!--UPDATE Modal Ends --------------------------------------------------------------------------------------------------------------------->

<!-- DELETE Modal----------------------------------------------------------------------------------------------------------------------- -->
<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 HOURLY LINE INSPECTION DETAILS</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="/line/inspection/hour/delete/{{ data.id }}/" id="delete_form">
                    {% csrf_token %}
                    <div class="">
                        <label class="form-label requiredField">Do you want to Delete this Hour Entry?</label>
                        <select class="form-select" name="yes_no">
                            <option value="NO" selected>NO</option>
                            <option value="YES">YES</option>
                          </select>                          
                    </div>
                    <input type="hidden" name="product_type" value="{{product_type}}"/>
                    <button type="submit" class="btn mt-3 form-control shadowed" id="submitBtnDelete" style="background-color: red;color:white;" onclick="return confirm('Are you sure you want to Delete this Material?')">Delete</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>
<!-- DELETE Modal Ends -------------------------------------------------------------------------------------------------------------------->


<!-- DEFECT CREATE Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="defectModal" tabindex="-1" aria-labelledby="defectModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="defectModalLabel">ADD DEFECT 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="/line/inspection/defect/create/{{data.id}}/" id="defect_form">
                  {% csrf_token %}
                  
                  {{defect_form|crispy}}
                  <input type="hidden" name="product_type" value="{{product_type}}"/>
                  <button type="submit" class="btn btn-warning mt-5 form-control shadowed">Submit</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>
<!--DEFECT CREATE Modal Ends --------------------------------------------------------------------------------------------------------------------->



<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
    <h3 class="p-2" style="background-color:#212529;color:white;">SACHET ANALYSIS FOR {{ data.line_id.date }} AT {{ data.hour }} HRS</h3>
    <div class="px-3 pb-3">
        <div class="mb-3">
                  <p class="mb-0">DATE : <strong>{{ data.line_id.date }}</strong></p>
                  <p class="mb-0">SHIFT : <strong id="query_shift">{{ data.line_id.shift }}</strong></p>
                  <p class="mb-0">LINE : <strong>{{ data.line_id.l_id.line }}</strong></p>
                  <p class="mb-0">PRODUCT : <strong>{{ data.line_id.product_id.product_name }} / {{ data.line_id.product_id.product_size }} ML</strong></p>
                  <p class="mb-0">HOUR : <strong>{{ data.hour }} HR</strong></p>
                  <p class="mb-0">TASTE : <strong>{{ data.taste }}</strong></p>

                  {% if data.co2_level_before_past %}<p class="mb-0">CO<sub>2</sub> BEFORE : <strong>{{ data.co2_level_before_past }} %</strong></p>{% endif %}
                  {% if data.co2_level_after_past %}<p class="mb-0">CO<sub>2</sub> AFTER : <strong>{{ data.co2_level_after_past }} %</strong></p>{% endif %}
                  <p class="mb-0">VOLUME : <strong>{{ data.volume }} ML</strong></p>
                  <p class="mb-0">CLARITY : <strong>{{ data.clarity }}</strong></p>
                  <p class="mb-0">BOTTLE DEFECT : <strong>{{ data.bottle_defect }}</strong></p>
                  {% if data.cap_defect %}<p class="mb-0">CAP DEFECT : <strong>{{ data.cap_defect }}</strong></p>{% endif %}
                  {% if data.cork_cap_defect %}<p class="mb-0">CORK / CAP DEFECT : <strong>{{ data.cork_cap_defect }}</strong></p>{% endif %}
                  <p class="mb-0">LABEL DEFECT : <strong>{{ data.label_defect }}</strong></p>
                  
                  {% if data.foil_defect  %}<p class="mb-0">FOIL DEFECT : <strong>{{ data.foil_defect  }}</strong></p>{% endif %}
                  {% if data.shrink_wrapping_defect %}<p class="mb-0">SHRINK WRAPPING DEFECT : <strong>{{ data.shrink_wrapping_defect }}</strong></p>{% endif %}
                  
                  {% if data.wire_hood_code %}<p class="mb-0">CORK / CAP PKG CODE : <strong>{{ data.wire_hood_code }}</strong></p> {% endif %}
                  {% if data.nylon_code %}<p class="mb-0">NYLON PKG CODE : <strong>{{ data.nylon_code }}</strong></p>{% endif %}
                  {% if data.cap_code %}<p class="mb-0">CAP PKG CODE : <strong>{{ data.cap_code }}</strong></p>{% endif %}
                  {% if data.corking_cap_code %}<p class="mb-0">CORK / CAP PKG CODE : <strong>{{ data.corking_cap_code }}</strong></p> {% endif %}
                  {% if data.label_code %}<p class="mb-0">LABEL PKG CODE : <strong>{{ data.label_code }}</strong></p>{% endif %}
                  {% if data.bottle_code %}<p class="mb-0">BOTTLE PKG CODE : <strong>{{ data.bottle_code }}</strong></p>{% endif %}
                  {% if data.case_code %}<p class="mb-0">CASE PKG CODE : <strong>{{ data.case_code }}</strong></p>{% endif %}
                  
                  <p class="mb-0">SIGHTER 1 : <strong>{{ data.sighter1 }}</strong></p>
                  <p class="mb-0">SIGHTER 2 : <strong>{{ data.sighter2 }}</strong></p>
                  {% if data.sighter3 %}<p class="mb-0">SIGHTER 3 : <strong>{{ data.sighter3 }}</strong></p>{% endif %}
                  {% if data.sighter4 %}<p class="mb-0">SIGHTER 4 : <strong>{{ data.sighter4 }}</strong></p>{% endif %}
                  
                  
                  {% if data.is_batch_number_correct %}<p class="mb-0">BATCH NUMBER : <strong>{{ data.is_batch_number_correct }}</strong></p>{% endif %}
                  {% if data.is_best_before_correct %}<p class="mb-0">BEST BEFORE DATE : <strong>{{ data.is_best_before_correct  }}</strong></p>{% endif %}
                  {% if data.case_stamp_code %}<p class="mb-0">CASE CODE : <strong>{{ data.case_stamp_code }}</strong></p>{% endif %}
                  {% if data.environment %}<p class="mb-0">ENVIRONMENT : <strong>{{ data.environment }}</strong></p>{% endif %}
                  <p class="mb-0">COMMENT : <strong>{{ data.comment }}</strong></p>
                  <p class="mb-0">Created by <strong>{{ data.created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></p>

                    {% if defect %}
                    <hr/>
                    <h5>DEFECTS</h5>
                    <table class="table">
                      <thead>
                        <tr style="background-color:#212529;color:white;">
                          <th>DEFECT</th>
                          <th>DESCRIPTION</th>
                          <th>CATEGORY</th>
                          <th>QUANTITY</th>
                          <th>CAUSE</th>
                          <th>ACTION</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for d in defect %}
                          <tr>
                            <td>{{d.defect_id.defect_code }}</td>
                            <td>{{d.defect_id.defect_description}}</td>
                            <td>{{d.defect_id.defect_category }}</td>
                            <td>{{ d.quantity }}</td>
                            <td>{{d.defect_cause }}</td>
                            <td>
                              <a href="/line/inspection/defect/delete/{{d.id}}/?analysis={{data.id}}" class="float-end"  onclick="return confirm('Are you sure you want to Delete this Entry?')"><i class="bi bi-trash3-fill" style="color:red;"></i></a>
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                    {% endif %}

                    <a href="/line/inspection/detail/{{data.line_id.id}}/" class="btn btn-dark shadowed mt-3">Back</a>
                    {% if data.line_id.status == 'CREATED' %}
                      <button class="btn btn-primary shadowed mt-3" data-bs-toggle="modal" data-bs-target="#defectModal">Add Defect</button>
                      <button class="btn btn-warning shadowed mt-3" data-bs-toggle="modal" data-bs-target="#updateModal">Update Form</button>
                      <button class="btn btn-danger shadowed mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Form</button>
                    
                    {% elif data.line_id.status == 'ANALYSED' %}
                        {% if data.line_id.workflow.analysed_by == user.username or user.profile.role == 'SUPERADMIN' %}
                            <button class="btn btn-primary shadowed mt-3" data-bs-toggle="modal" data-bs-target="#defectModal">Add Defect</button>
                            <button class="btn btn-warning shadowed mt-3" data-bs-toggle="modal" data-bs-target="#updateModal">Update Form</button>
                            <button class="btn btn-danger shadowed mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Form</button>
                        {% endif %}
              
                    {% elif data.line_id.status == 'CHECKED' %}
                        {% if data.line_id.workflow.checked_by == user.username or user.profile.role == 'SUPERADMIN' %}
                            <button class="btn btn-primary shadowed mt-3" data-bs-toggle="modal" data-bs-target="#defectModal">Add Defect</button>
                            <button class="btn btn-warning shadowed mt-3" data-bs-toggle="modal" data-bs-target="#updateModal">Update Form</button>
                            <button class="btn btn-danger shadowed mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Form</button>
                        {% endif %}
                    {% endif %}
                    
                </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        setShiftHours();
        var hour = "{{ data.hour|safe }}"
        $('#id_hour').prepend(`<option value="${ hour }" selected="">${ hour }</option>`);
    })
</script>

<script>
   function setShiftHours(){
    var query_shift = document.querySelector('#query_shift').innerText
    if (query_shift === 'MORNING'){
        setSelect('hour', "06,,07,,08,,09,,10,,11,,12,,13");
    }else if (query_shift === 'AFTERNOON'){
        setSelect('hour', "14,,15,,16,,17,,18,,19,,20");
    }else if (query_shift === 'NIGHT'){
        setSelect('hour', "21,,22,,23,,00,,01,,02,,03,,04,,05,,06");
    }else if (query_shift == 'DAY'){
        setSelect('hour', "08,,09,,10,,11,,12,,13,,14,,15,,16");
    }
   }
</script>
{% endblock %}