{% 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 FAULT 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 FAULT 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/analysis/fault/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 -------------------------------------------------------------------------------------------------------------------->


<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 FAULT FOR {{ data.line_id.date }} AT {{ data.hour }} HRS</h3>
    <div class="px-3 pb-3">
        <div class="mb-3">
            <div class="row">
                <div class="col-sm-12 col-lg-7">
                    <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.line }}</strong></p>
                    <p class="mb-0">PRODUCT : <strong>{{ data.line_id.product }} / {{ data.line_id.product_size }}</strong></p>
                    <p class="mb-0">HOUR : <strong>{{ data.hour }} HR</strong></p>
                    <p class="mb-0">FAULT : <strong>{{ data.fault }}</strong></p>
                    <p class="mb-0">CORRECTIVE ACTION : <strong>{{ data.corrective_action }}</strong></p>
                    <p class="mb-0">RESULT : <strong>{{ data.result }}</strong></p>
                    <p class="mb-0">Created by <strong>{{ data.created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></p>


                    <a href="/line/analysis/detail/{{data.line_id.id}}" class="btn btn-dark shadowed mt-3">Back</a>

                    {% if data.line_id.status == 'CREATED' %}
                      <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-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-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 class="col-sm-12 col-lg-5"></div>
            </div>

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

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

<script>
   function setShiftHours(){
    var query_shift = document.querySelector('#query_shift').innerText
    console.log(query_shift);
    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 %}