{% extends "factory_base.html" %}
{% load static %}
{% load crispy_forms_tags %}


{% block Style %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
    @media(min-width:768px){
        .right{
            text-align:right
        }
    }
     @media(max-width:768px){
        .right{
            text-align:center
        }
    }
    .search {
      width: 94%!important;
    }
  </style>


{% endblock Style %}

{% block MainContent %}
<div class="contents">
   <div class="table-area">
  <div class="table-title">
   <div class="row">
    <div class="col-md-8">
      <div class="depertment-name">
        <h4>Leave Approvals</h4>
      </div>
    </div>
    <div class="col-md-4">
      <form action="" method="POST">
        {% csrf_token %}
        {{form.action}}
        <button type="submit" id="id_search" hidden>My Button</button>
      </form>
    </div>
   </div>
  </div>

{% if leave_approver %}
  

  
               <!-- table-area  -->

                <!-- table-title -->

                <!-- table-title -->
                <div class="table-header">
                    <div class="tables table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Employee Name </th>
                                <th>Leave Type</th>
                                <th>Application for(day)</th>
                                <th>Application Date</th>
                                <th>Approved By </th>
                                <th>Details View</th>
                            </tr>
                        </thead>
                        <tbody>
                          
                          {% for item in leave_approver %}
                            <tr>
                               <td>{{ forloop.counter }}</td>
                                <td>{{item.employee.name_en}}</td>
                                <td>{{item.leave_type}}</td>
                                <td>{{item.allocated_day}}</td>
                                <td>{{item.application_date}}</td>
                                <td>{{item.approved_by}}</td>
                                <td>
                                     <ul class="action">
                                      {%if item.status == 'Pending'%}
                                        <li ><a href="{% url 'leave_manage_details_index-buyer' item.id %}"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
                                      {%endif%}
                                      {%if item.status == 'Approved'%}
                                      <li ><a href="{% url 'leave_manage_approved_details_index-buyer' item.id %}"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
                                     {%endif%}
                                     {%if item.status == 'Rejected'%}
                                     <li ><a href="{% url 'leave_manage_reject_details_index' item.id %}"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
                                    {%endif%}
                                    </ul> 
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>
                </div>
              </div>
              <!-- table-area  -->
 
            </div>
              

{% else %}




                         <!-- table-area  -->
    <div class="table-area">

    <!-- table-title -->
    <!-- table-title -->
    <div class="tables table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                <th>SL</th>
                <th>Employee Name </th>
                <th>Leave Type</th>
                <th>Application for(day)</th>
                <th>Application Date</th>
                <th>Details View</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align: center;" colspan="10">No Data Found</td>
                </tr>
            </tbody>
        </table>
    </div>

    
</div>
                      <!-- table-area  -->
          <!-- table-area  -->
{% endif %}
</div>

{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}         
{% endblock meassage %}
{% block JS %}
<script type=text/javascript>
    var load_sister_organization_url = "{% url 'sister-organization-load' %}"
    var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  </script>
<script src="{% static 'js/hr_app/leave_application/index.js' %} "></script>
 <script>
   $(document).ready(function() {
     $("#id_action").select2({
     });
   });
   $('#id_action').change(function(){
      $('#id_search').click();
   })
 </script>

{% endblock JS %}