{% 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-3 shadowed">Update</button>
                    <button type="button" class="btn btn-dark mt-3 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">Close</button>
                </form>
            </div>
        </div>
        <div class="modal-footer">
        </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 btn-danger mt-3 shadowed" id="submitBtnDelete" onclick="return confirm('Are you sure you want to Delete this Material?')">Delete</button>
                              <button type="button" class="btn btn-dark mt-3 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 -------------------------------------------------------------------------------------------------------------------->


<!-- 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">HOURLY LINE INSPECTION OBSERVATION</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/line_inspection_hourly_fault_for_form/{{data.line_id.id}}/" id="defect_form">
                  {% csrf_token %}
                  
                  {{defect_form|crispy}}
                  <input type="hidden" name="analysis_id" value="{{data.id}}"/>
                    <input type="hidden" name="hour" value="{{data.hour}}"/>
                  <input type="hidden" name="product_type" value="{{product_type}}"/>
                  <button type="submit" class="btn btn-warning mt-3 rounded-0 shadowed">SUBMIT</button>
                    <button type="button" class="btn btn-dark mt-3 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
              </form>
          </div>
      </div>
      <div class="modal-footer">
        
      </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;">LINE INSPECTION 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 CHIPS : <strong>{{ data.bottle_chips }}</strong></p>
                  <p class="mb-0">PARTICLES : <strong>{{ data.particle }}</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.foil_code %}<p class="mb-0">FOIL PKG CODE : <strong>{{ data.foil_code }}</strong></p>{% endif %}
                  {% if data.wooden_corking_metal_cap_code %}<p class="mb-0">WOODEN CORK / METAL CAP PKG CODE : <strong>{{ data.wooden_corking_metal_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 %}
                  
                  {% if data.is_rinser_jet_pressure_okay %}<p class="mb-0">IS RINSER JET PRESSURE OKAY : <strong>{{ data.is_rinser_jet_pressure_okay }}</strong></p>{% endif %}
                  {% if data.is_cap_jet_print_okay %}<p class="mb-0">IS CAP JET PRINT : <strong>{{ data.is_cap_jet_print_okay }}</strong></p>{% endif %}
                  {% if data.is_bottle_clean %}<p class="mb-0">IS BOTTLE CLEAN : <strong>{{ data.is_bottle_clean }}</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.table_packers %}<p class="mb-0">TABLE PACKERS : <strong>{{ data.table_packers }}</strong></p>{% endif %}
                  {% if data.palletizers %}<p class="mb-0">PALLETIZERS : <strong>{{ data.palletizers }}</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">FIRST COMPARTMENT : <strong>{{ data.first_compartment }}</strong></p>
                  <p class="mb-0">SECOND COMPARTMENT : <strong>{{ data.second_compartment }}</strong></p>
                  <p class="mb-0">THIRD COMPARTMENT : <strong>{{ data.third_compartment }}</strong></p>
                  <p class="mb-0">FOURTH COMPARTMENT : <strong>{{ data.fourth_compartment }}</strong></p>
                  
                  
                  <p class="mb-0">COMMENT : <strong>{{ data.comment }}</strong></p>
                  <p class="mb-0">Created by <strong>{{ data.formatted_created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></p>

                    {% if data.hourly_form_fault.all %}
                    <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 data.hourly_form_fault.all %}
                          <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 Fault</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 Fault</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 Fault</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>
                
                <!-- HOURLY FAULTS -->
        <div class="my-3">
            {% if faults %}
            <table class="table">
                <thead>
                    <tr style="background-color:#212529;color:white;">
                      <th scope="col">HOUR</th>
                      <th scope="col">FAULT</th>
                      <th scope="col">CORRECTIVE ACTION</th>
                      <th scope="col">RESULT</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                      {% for f in faults %}
                        <tr>
                            <td>{{ f.hour }}</td>
                            <td>{{ f.fault }}</td>
                            <td>{{ f.corrective_action }}</td>
                            <td>{{ f.result }}</td>
                            <td><a href=""><i class="bi bi-trash3-fill" style="color:red;"></i></a></td>
                        </tr>
                      {% endfor %}
                  </tbody>
            </table>
            {% 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 %}