{% 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 SACHET ANALYSIS 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}}

                    <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 SACHET ANALYSIS 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="/sachet/analysis/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>

                    <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="/sachet/analysis/defect/create/{{data.id}}/" id="defect_form">
                  {% csrf_token %}
                  
                  {{defect_form|crispy}}

                  <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.machine_id.date }} AT {{ data.hour }} HRS</h3>
    <div class="px-3 pb-3">
        <div class="mb-3">
                    <p class="mb-0">DATE : <strong>{{ data.machine_id.date }}</strong></p>
                    <p class="mb-0">SHIFT : <strong id="query_shift">{{ data.machine_id.shift }}</strong></p>
                    <p class="mb-0">MACHINE : <strong>{{ data.machine_id.mc_id.machine }}</strong></p>
                    <p class="mb-0">PRODUCT : <strong>{{ data.machine_id.product_id.product_name }} / {{ data.machine_id.product_id.product_size }}</strong></p>
                    <p class="mb-0">HOUR : <strong>{{ data.hour }} HR</strong></p>
                    <p class="mb-0">WEIGHT : <strong>{{ data.weight }} GM</strong></p>
                    <p class="mb-0">TASTE : <strong>{{ data.taste }}</strong></p>
                    <p class="mb-0">COLOR : <strong>{{ data.color }} %T</strong></p>
                    <p class="mb-0">CONDUCTIVITY : <strong>{{ data.conductivity }} &micro;S</strong></p>
                    <p class="mb-0">pH : <strong>{{ data.ph }}</strong></p>
                    <p class="mb-0">ALC. STRENGTH : <strong>{{ data.alcoholic_strength }} %</strong></p>
                    <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">CASE CODE : <strong>{{ data.case_stamp_code }}</strong></p>
                    <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="/sachet/analysis/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="/sachet/analysis/detail/{{data.machine_id.id}}" class="btn btn-dark shadowed mt-3">Back</a>
                    {% if data.machine_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.machine_id.status == 'ANALYSED' %}
                        {% if data.machine_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.machine_id.status == 'CHECKED' %}
                        {% if data.machine_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 %}