{% 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 SACHET ANALYSIS 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="" 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 SACHET ANALYSIS 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/delete/{{ data.id }}" id="delete_form">
                    {% csrf_token %}
                    <div class="">
                        <label class="form-label requiredField">Do you want to Delete this Form?</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 -------------------------------------------------------------------------------------------------------------------->

<!-- HOURLY ANALYSIS FORM Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="analysisModal" tabindex="-1" aria-labelledby="analysisModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="analysisModalLabel">HOURLY ANALYSIS 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/analysis/{{data.id}}/" id="analysis_form">
                    {% csrf_token %}
                    
                    {{analysis_form|crispy}}

                    <button type="submit" class="btn btn-primary 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>
<!--HOURLY ANALYSIS FORM Modal Ends --------------------------------------------------------------------------------------------------------------------->


<!-- FAULT FORM Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="faultModal" tabindex="-1" aria-labelledby="faultModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="faultModalLabel">FAULT 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/create_fault/{{data.id}}/" id="fault_form">
                  {% csrf_token %}
                  
                  {{fault_form|crispy}}

                  <button type="submit" class="btn btn-primary 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>
<!-- FAULT FORM Modal Ends --------------------------------------------------------------------------------------------------------------------->

<!-- SUBMIT FORM Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="submitModalLabel">SUBMIT SHIFT 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/submit/{{workflow.id}}/" id="submit_form">
                  {% csrf_token %}
                  
                  {{submit_form|crispy}}

                  <button type="submit" class="btn btn-primary 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>
<!-- SUBMIT FORM Modal Ends --------------------------------------------------------------------------------------------------------------------->



<!-- CHECK FORM 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 SHIFT 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/check/{{workflow.id}}/" id="check_form">
                  {% csrf_token %}
                  
                  {{check_form|crispy}}

                  <button type="submit" class="btn btn-primary 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>
<!-- CHECK FORM Modal Ends --------------------------------------------------------------------------------------------------------------------->



<!-- APPROVALModal --------------------------------------------------------------------------------------------- -->
<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">
        <h1 class="modal-title fs-5" id="approveModalLabel">APPROVAL 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/approve/{{workflow.id}}/" id="approve_form">
                  {% csrf_token %}
                  
                  {{approve_form|crispy}}

                  <button type="submit" class="btn btn-primary 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>
<!-- APPROVALModal Ends --------------------------------------------------------------------------------------------------------------------->

<!-- UPLOAD FILE Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="uploadModalLabel">UPLOAD FILE 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/file/upload/{{data.id}}/" id="upload_form" enctype="multipart/form-data">
                  {% csrf_token %}
                  
                  {{upload_form|crispy}}

                  <button type="submit" class="btn btn-primary 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>
<!-- UPLOAD FILE Modal Ends --------------------------------------------------------------------------------------------------------------------->


<!-- DISPUTE Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="disputeModal" tabindex="-1" aria-labelledby="disputeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="disputeModalLabel">DISPUTE 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="/dispute/" id="dispute_form">
                  {% csrf_token %}
                  
                  {{dispute_form|crispy}}
                  <input class="" name="model_name" value="SACHET_ANALYSIS" />
                  <input class="" name="model_id" value="{{ data.id }}" />

                  <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>
<!--DISPUTE 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 FORM</h3>
    <div class="px-3 pb-3">
        <div class="mb-3">
            <div class="row shadowed">
                <div class="col-sm-12 col-lg-7">

                    <!-- DETAILS -->
                    <p class="mb-0">DATE : <strong>{{ data.date }}</strong></p>
                    <p class="mb-0">SHIFT : <strong id="query_shift">{{ data.shift }}</strong></p>
                    <p class="mb-0">MACHINE : <strong>{{ data.mc_id.machine }}</strong></p>
                    <p class="mb-0">PRODUCT : <strong>{{ data.product_id.product_name }} / {{ data.product_id.product_size }}ML by {{ data.product_id.case_quantity }}</strong></p>
                    <p class="mb-0">STATUS : <strong>{{ data.status }}</strong></p>
                    <p class="mb-0">BLEND NUMBER : <strong>{{ data.blend_number }}</strong></p>
                    <p class="mb-0">PROCESS TECHNICIAN : <strong>{{ data.inspector }}</strong></p>
                    <p class="mb-0">PRODUCT ANALYST : <strong>{{ data.product_analyst }}</strong></p>
                    <p class="mb-0">LINE SUPERVISOR : <strong>{{ data.supervisor }}</strong></p>
                    <p class="mb-0">Created by <strong>{{ data.created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></p>
                    <!-- DETAILS -->
                    <div class="row">
                        
                    <!-- IF DEFECT -->
                    {% if defect %}
                    <div class="col-sm-12 col-lg-12">
                      <div class="py-3">
                        <div class="accordion accordion-flush shadowed" id="accordionFlushExample">

                          <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-heading8">
                              <button class="accordion-button collapsed py-1 btn" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse8" aria-expanded="false" aria-controls="flush-collapse8">
                                  DEFECTS 
                              </button>
                            </h2>
                            <div id="flush-collapse8" class="accordion-collapse collapse" aria-labelledby="flush-heading8" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body">
                                <ul class="list-group list-group-flush">
                                  {% for d in defect %}
                                  <li class="list-group-item list-group-item-action">
                                    <p class="mb-0" style="font-size: 12px;">{{d.defect_id.defect_code}}, {{d.defect_id.defect_description }}, QTY : {{ d.quantity }}</p>
                                  </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </div>
                          </div>
                          </div>
                      </div>
                      </div>
                      {% endif %}
                    <!-- IF DEFECT -->

                     <!-- IF DISPUTES -->
                     {% if disputes|length > 0 %}
                     <div class="col-sm-12 col-lg-12">
                       <div class="py-3">
                         <div class="accordion accordion-flush shadowed" id="accordionFlushExample">
 
                           <div class="accordion-item">
                             <h2 class="accordion-header" id="flush-heading9">
                               <button class="accordion-button collapsed py-1 btn" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse9" aria-expanded="false" aria-controls="flush-collapse9">
                                   DISPUTES
                               </button>
                             </h2>
                             <div id="flush-collapse9" class="accordion-collapse collapse" aria-labelledby="flush-heading9" data-bs-parent="#accordionFlushExample">
                               <div class="accordion-body">
                                 <ul class="list-group list-group-flush">
                                   {% for d in disputes %}
                                   <li class="list-group-item list-group-item-action">
                                     <p class="mb-0" style="font-size: 12px;">{{ d.dispute }}</p>
                                     <p class="mb-0" style="font-size: 10px;">Created by {{ d.created_by }} at {{d.datetime_created}}</p>
                                     {% if d.status == 'OPEN' %}
                                       <a href="/dispute/detail/{{d.id}}/" class="float-end"  onclick="return confirm('Are you sure you want to Close this dispute?')"><i class="bi bi-eye-fill" style="color:green;"></i></a>
                                     {% else %}
                                     <p class="mb-0" style="font-size: 10px;">Closed by {{closed_by}} at {{d.datetime_closed}}</p>
                                     {% endif %}
                                   </li>
                                   {% endfor %}
                                 </ul>
                               </div>
                             </div>
                           </div>
                           </div>
                       </div>
                       </div>
                       {% endif %}
                     <!-- IF DISPUTES -->
                    

                    <!-- IF FILES -->
                    {% if files %}
                    <div class="col-sm-12 col-lg-12">
                      <div class="py-3">
                        <div class="accordion accordion-flush shadowed" id="accordionFlushExample">

                          <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-heading9">
                              <button class="accordion-button collapsed py-1 btn" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse9" aria-expanded="false" aria-controls="flush-collapse9">
                                  FILES
                              </button>
                            </h2>
                            <div id="flush-collapse9" class="accordion-collapse collapse" aria-labelledby="flush-heading9" data-bs-parent="#accordionFlushExample">
                              <div class="accordion-body">
                                <ul class="list-group list-group-flush">
                                  {% for f in files %}
                                  <li class="list-group-item list-group-item-action" style="font-size: 10px;">
                                    <a href="/media/{{f.file }}/" class="file__name" target="_blank" style="font-size: 12px;">{{ f.file }}</a>
                                    {% if actions.can_delete_dep %}
                                      <a href="/sachet/analysis/file/delete/{{f.id}}/" class="float-end"  onclick="return confirm('Are you sure you want to Delete this File?')"><i class="bi bi-trash3-fill" style="color:red;"></i></a>
                                    {% endif %}
                                  </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </div>
                          </div>
                          </div>
                      </div>
                      </div>
                      {% endif %}
                    <!-- IF FILES -->
                    </div>

                    <!-- BUTTONS -->
                    <a href="/sachet/analysis/" class="btn btn-dark shadowed mt-3">Back</a>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-dark shadowed  mt-3">&nbsp;&nbsp;&nbsp;Actions&nbsp;&nbsp;&nbsp;</button>
                        <button type="button" class="btn btn-dark shadowed dropdown-toggle dropdown-toggle-split mt-3" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu primary">
                          <li><a class="dropdown-item" href="/sachet/analysis/">Back</a></li>
                          {% if data.status != 'CREATED' %}<li><a class="dropdown-item" href="/sachet/analysis/form/{{data.id}}">Form</a></li>{% endif %}
                          
                          {% if available_hours %}
                            {% if actions.can_add_dep %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#analysisModal">Add Hourly Analysis</button></li>{% endif %}
                            {% if actions.can_add_dep %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#faultModal">Add Fault</button></li>{% endif %}
                          {% endif %}
                          
                          {% if actions.can_add_dep %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#disputeModal">Add Dispute</button></li>{% endif %}
                          {% if actions.can_update %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#updateModal">Update Form</button></li>{% endif %}
                          {% if actions.can_delete %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Form</button></li>{% endif %}
                          {% if actions.can_add_dep %}<li><button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload File</button></li>{% endif %}
                        </ul>
                    </div>
                    <!-- BUTTONS -->
                </div>

                <div class="col-sm-12 col-lg-5">
                    <div class="my-2 shadowed" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
                      <!-- WORKFLOW -->
                        <p class="p-2 text-center" style="background-color:#212529;color:white;"><strong>WORKFLOW</strong></p>
                        <div class="px-3">
                          <div class="accordion accordion-flush" id="accordionFlushExample">

                            <div class="accordion-item">
                              <h2 class="accordion-header" id="flush-heading1">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapse1">
                                    CREATED
                                </button>
                              </h2>
                              <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-heading1" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                  <p class="mb-0"><small>{{ data.comment }}</small></p>
                                  <p class="mb-0"><small>Created by <strong>{{ data.created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></small></p>
                                </div>
                              </div>
                            </div>

                            {% if workflow.analysed_by %}
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="flush-heading2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse2" aria-expanded="false" aria-controls="flush-collapse2">
                                    SUBMITTED
                                </button>
                              </h2>
                              <div id="flush-collapse2" class="accordion-collapse collapse" aria-labelledby="flush-heading2" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                  <p class="mb-0"><small>{{ workflow.analysed_comment }}</small></p>
                                  <p class="mb-0"><small>Submitted by <strong>{{ workflow.analysed_by }}</strong> at <strong>{{ workflow.analysed_datetime }}</strong></small></p>
                                </div>
                              </div>
                            </div>
                            {% endif %}

                            {% if workflow.checked_by %}
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="flush-heading3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse3" aria-expanded="false" aria-controls="flush-collapse3">
                                    CHECKED
                                </button>
                              </h2>
                              <div id="flush-collapse3" class="accordion-collapse collapse" aria-labelledby="flush-heading3" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                  <p class="mb-0"><small>{{ workflow.checked_comment }}</small></p>
                                  <p class="mb-0"><small>Checked by <strong>{{ workflow.checked_by }}</strong> at <strong>{{ workflow.checked_datetime}}</strong></small></p>
                                </div>
                              </div>
                            </div>
                            {% endif %}

                            {% if workflow.approved_by %}
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="flush-heading4">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse4" aria-expanded="false" aria-controls="flush-collapse4">
                                    APPROVED
                                </button>
                              </h2>
                              <div id="flush-collapse4" class="accordion-collapse collapse" aria-labelledby="flush-heading4" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">
                                  <p class="mb-0"><small>{{ workflow.approved_comment }}</small></p>
                                  <p class="mb-0"><small>Approved by <strong>{{ workflow.approved_by }}</strong> at <strong>{{ workflow.approved_datetime }}</strong></small></p>
                                </div>
                              </div>
                            </div>
                            {% endif %}
                          </div>
                                {% if data.status == 'APPROVED' %}
                                  <h3 class="text-center">APPROVED</h3>
                                {% endif %}
                        </div>
                        <!-- WORKFLOW -->

                        <!-- BUTTONS -->
                        <div class="m-3">
                          {% if data.status == 'CREATED' %}
                            <button class="btn btn-success shadowed form-control" type="button" data-bs-toggle="modal" data-bs-target="#submitModal">Submit Form</button>
                          {% elif data.status == 'ANALYSED' %}
                            <button class="btn btn-success shadowed form-control" type="button" data-bs-toggle="modal" data-bs-target="#checkModal">Check Form</button>
                          {% elif data.status == 'CHECKED' %}
                            <button class="btn btn-success shadowed form-control" type="button" data-bs-toggle="modal" data-bs-target="#approveModal">Approve Form</button>
                          {% endif %}
                          
                        </div>
                        <!-- BUTTONS -->

                    </div>
                    
                </div>

            </div>

            <!-- HOURLY ANALYSIS -->
            <hr />
            <div class="px-3 pb-3">
              <div class="input-group mb-3">
                <input type="text" class="form-control shadowed" id="myInput" placeholder="Search.." aria-label="Recipient's username" aria-describedby="button-addon2">
                {% if available_hours %}
                {% if actions.can_add_dep %}<button class="btn btn-primary shadowed" type="button" data-bs-toggle="modal" data-bs-target="#analysisModal">Add Hourly Analysis</button>{% endif %}
                {% endif %}
              </div>


              <table class="table" id="dtBasicExample">
                  <thead>
                    <tr style="background-color:#212529;color:white;">
                      <th scope="col">HOUR</th>
                      <th scope="col">FAULT</th>
                      <th scope="col">WEIGHT</th>
                      <th scope="col">CLARITY</th>
                      <th scope="col">MINOR</th>
                      <th scope="col">MAJOR</th>
                      <th scope="col">CRITICAL</th>
                    </tr>
                  </thead>
                  <tbody id="myTable">
                    {% for a in analysis_data %}
                      
                    {% if a.fault != None %}
                      <tr style="background-color:rgb(222, 171, 171);" onclick="window.location.href='/sachet/analysis/fault/{{a.id}}/'">
                    {% else %}
                      <tr onclick="window.location.href='/sachet/analysis/hour/{{data.id}}/{{a.id}}/'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                    {% endif %}
                        <th>{{ a.hour }}</th>
                        <td>{{ a.fault }}</td>
                        <td>{{ a.weight }}{% if a.weight != None %}GM{% endif %}</td>
                        <td>{{ a.clarity }}</td>
                        <td>{{ a.minor }}</td>
                        <td>{{ a.major }}</td>
                        <td>{{ a.critical }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
            </div>
            <!-- HOURLY ANALYSIS -->

        </div>
    </div>
</div>

<script>
  

    $(document).ready(function(){
      setShiftHours();
      setFaultHour1();
      
    })
</script>

<script>
   function setShiftHours(){
    var available_hours_str = "{{available_hours|safe}}";
    var available_hours = available_hours_str.split(',,');
    //var query_shift = document.querySelector('#query_shift').innerText
    setSelect('hour', available_hours_str, getCaseCode);
    /*
    if (query_shift === 'MORNING'){
        setSelect('hour', "06,,07,,08,,09,,10,,11,,12,,13", getCaseCode);
        //setFaultHour('fault_form' , 'hour', "06,,07,,08,,09,,10,,11,,12,,13");
    }else if (query_shift === 'AFTERNOON'){
        setSelect('hour', "14,,15,,16,,17,,18,,19,,20", getCaseCode);
        //setFaultHour('fault_form' , '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", getCaseCode);
        //setFaultHour('fault_form' , '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", getCaseCode);
        //setFaultHour('fault_form' , 'hour', "08,,09,,10,,11,,12,,13,,14,,15,,16");
    }
    */
   }
</script>

<script>
  function getCaseCode(){
    var line = "{{ data.mc_id.machine|safe }}"
    var date = "{{ data.date|safe }}"
    var hour = $('#id_hour').val();

    if (line && date && hour){
      $.get(`/utils/set_case_code/?line=${line}&date=${date}&hour=${hour}`, function(data, status){
        if (data) $("#id_case_stamp_code").val(data)
      })
    }
  }
</script>

<script>
  function setFaultHour(element, name, data_list, add_event){
    var data = data_list.split(',,')
    var ele = $(`#${element} > #div_id_${name}`);
    var row = `<label for="${name}" class="form-label requiredField">${name}<span class="asteriskField">*</span></label>`;
    row += `<select name="${name}" class="select form-select" required="" id="id_${name}" ${add_event ? onchange = add_event : '' }"><option value="" selected="">---------</option>`;
    for(let i=0;i<data.length;i++){
        row += `<option value="${data[i]}">${data[i]}</option>`;
    }
    row += '</select>';
    ele.innerHTML = row;
}

  function setFaultHour1(){
    var available_hours_str = "{{available_hours|safe}}";
    var available_hours = available_hours_str.split(',,');
    var ele = document.querySelector('#fault_form').querySelector('#id_hour');
    var row = '<option value="" selected="">---------</option>';
    for(let i=0;i<available_hours.length;i++){
      row += `<option value="${available_hours[i]}">${available_hours[i]}</option>`;
    }
    ele.innerHTML = row;
  }


  var file__name = $('.file__name');
  for(let i=0;i<file__name.length;i++){
    file__name[i].innerText = file__name[i].innerText.replace('files_folder/', '')
  }
</script>
{% endblock %}