{% extends "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>

  </style>


{% endblock Style %}

{% block MainContent %}
<div class="contents">
  {% if messages %}
{% for message in messages %}
        <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
{% endfor %}
{% endif %}
{% if request.user.is_superuser == True %}
    <div class="table-area">
    <div class="table-title">
        <div class="row">
        <div class="col-md-4">
            <div class="Leave-Allocation-name">
            <h4>Movement</h4>
            </div>
        </div>
        <div class="col-md-8">
            <div class="add-btn">
            <a href="{% url 'movement_create'%}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                Movement Entry
            </button></a>
        </div>
        </div>
        </div>
    </div>
<div class="table-header bg-white">
    <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <div class="col-md-12">
        <div class="row">
        <div class="col-md-3">
            {{form.mother_organization|as_crispy_field }}
        </div> 
        <div class="col-md-3">
            {{form.sister_organization|as_crispy_field }}
        </div> 
        <div class="col-md-3">
            {{form.branch|as_crispy_field }}
        </div> 
        <div class="col-md-1" style="margin-top: 31px;">
        <button type="submit" class="cus-btn">Show</button>
        </div>

        </div>
    </div>

    </div>
    </div>
    </form>
</div>
{% endif %}
{% if request.user.user_type == 'Mother_Organization_admin' %} 
    <div class="table-area">
    <div class="table-title">
        <div class="row">
        <div class="col-md-4">
            <div class="Leave-Allocation-name">
            <h4>Movement</h4>
            </div>
        </div>
        <div class="col-md-8">
            <div class="add-btn">
            <a href="{% url 'movement_create'%}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                Movement Entry
            </button></a>
        </div>
        </div>
        </div>
    </div>
<div class="table-header bg-white">
    <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <div class="col-md-12">
        <div class="row">

        <div class="col-md-3">
            {{form.sister_organization|as_crispy_field }}
        </div> 
        <div class="col-md-3">
            {{form.branch|as_crispy_field }}
        </div> 
        <div class="col-md-1" style="margin-top: 31px;">
        <button type="submit" class="cus-btn">Show</button>
        </div>

        </div>
    </div>

    </div>
    </div>
    </form>
</div>
{% endif %}
{% if request.user.user_type == 'Sister_Organization_admin' %} 
    <div class="table-area">
    <div class="table-title">
        <div class="row">
        <div class="col-md-4">
            <div class="Leave-Allocation-name">
            <h4>Movement</h4>
            </div>
        </div>
        <div class="col-md-8">
            <div class="add-btn">
            <a href="{% url 'movement_create'%}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                Movement Entry
            </button></a>
            </div>
        </div>
        </div>
    </div>
<div class="table-header bg-white">
    <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <div class="col-md-12">
        <div class="row">
        <div class="col-md-3">
            {{form.branch|as_crispy_field }}
        </div> 
        <div class="col-md-1" style="margin-top: 31px;">
        <button type="submit" class="cus-btn">Show</button>
        </div>

        </div>
    </div>

    </div>
    </div>
    </form>
</div>
{% endif %}
  <!-- table-area  -->
                <div class="table-area">

                    <!-- table-title -->
                    {% if movement %}
                    <div class="table-title">
                      <div class="row">
                        <div class="col-md-4">
                          <div class="depertment-name">
                            <h4>Movement History</h4>
                          </div>
                        </div>
                        {% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular' %}
                        <div class="col-md-8">
                            <div class="add-btn">
                                <a href="{% url 'movement_create'%}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                Movement Entry
                                </button></a>
                            </div>
                        </div>
                        {% endif %}
                      </div>
                    </div>
                <!-- table-title -->
                <div class="table-header">
                    <div class="row">
                       
                        <div class="col-md-3">
                            <div class="data-search">
                                <div class="input-group search">
                                    <input type="search" class="form-control" id="searchMovement" placeholder="Search...">
                                    <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
                                </div>
                            </div>
                          
                        </div>
                        <div class="col-md-6">

                        </div>
                        <div class="col-md-3" style="margin-right: 0px!important;">
                        <form action="" method="POST">
                            {% csrf_token %}
                            {{filter_form.action}}
                            <button type="submit" id="id_search" hidden>My Button</button>
                        </form>
                        </div>                       
                    </div>
                
                  <div class="tables table-responsive" id="MovementList">
                  <table class="table table-hover">
                      <thead>
                          
                            <tr>
                              <th>
                                  SL
                              </th>
                              <th>
                                Employee Name
                              </th>
                              <th>
                                Out Time
                              </th>
                              <th>
                                In time
                              </th>
                              <th>
                                Destination
                              </th>
                              <th>
                                Reason
                              </th>
                                <th>
                                Transport
                              </th>
                              <th>Application user</th>
                              <th>
                                Status
                              </th>

                              <th>
                                Action Testing
                              </th>
                          </tr>
                      </thead>
                      <tbody>
                        {% for item in movement  %}
                          <tr>
                              <td>{{ forloop.counter }}</td>
                              <td>{{item.employee.name_en}}</td>
                              <td>{{item.outtime}}</td>
                              <td>{{item.intime}}</td>
                              <td>{{item.destination}}</td>
                              <td>{{item.reason}}</td>
                              <td>{{item.transport}}</td>
                              <td>{{item.application_user}}</td>
                              {% if item.status == 'Pending'%}
                                <td style="background-color:#FFC20C;color:white" >
                                    {{ item.status }}
                                </td>
                                {% elif item.status == 'Rejected'%}
                                    <td style="background-color:red;color:white" >
                                    {{ item.status }}
                                    </td>
                                {% elif item.status == 'Approved'%}
                                    <td style="background-color:green;color:white">
                                    {{ item.status }}
                                    </td>    
                                {% endif %}

                              <td>
                                {% if item.status == 'Pending'%}
                                {% if request.user == item.application_user  %}
                                <ul class="action">
                                 
                                    <li><a type="button" class="update-dept" href="{% url 'movement_update' item.id %}"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
                                    <li><a  onclick="SweetDelete(event,this.href)" href="{% url 'movement_delete' item.id %}"><i class="fa fa-trash" aria-hidden="true"></i></a></li>
                              </ul>
                              {% endif %}
                               {% endif %}

                               {% if request.user.is_superuser   %}
                                <ul class="action">
                                 
                                    <li><a type="button" class="update-dept" href="{% url 'movement_update' item.id %}"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
                                    {% comment %} <li><a  onclick="SweetDelete(event,this.href)" href="{% url 'movement_delete' item.id %}"><i class="fa fa-trash" aria-hidden="true"></i></a></li> {% endcomment %}
                              </ul>
                              {% endif %}
                            </td>
                          </tr>
                          {% endfor %}
                      </tbody>
                  </table>
                  </div>
                  <div class="table-footer">
                    {% if movement.has_other_pages %}
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-end">
                            {% if movement.has_previous %}
                            <li class="page-item" >
                                    <a href="?page={{ movement.previous_page_number }}" class="page-link" tabindex="-1">Previous</a>
                                </li>
                            {% if movement.number > 3 %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">1</a>
                            </li>
                                {% if movement.number > 4 %}

                                <li class="page-item">
                                <span class="page-link">...</span>
                                </li>
                                {% endif %}
                            {% endif %}
                            {% endif %}

                            {% for num in movement.paginator.page_range %}
                            {% if movement.number == num %}
                            <li class="page-item active">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                            {% elif num > movement.number|add:'-3' and num < movement.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                            {% endif %}
                            {% endfor %}

                            {% if movement.has_next %}
                            {% if movement.number < movement.paginator.num_pages|add:'-3' %}
                                <li class="page-item">
                                <span class="page-link">...</span>
                                </li>
                                <li class="page-item">
                                <a class="page-link" href="?page={{ movement.paginator.num_pages }}">{{ movement.paginator.num_pages }}</a>
                                </li>
                            {% elif movement.number < movement.paginator.num_pages|add:'-2' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ movement.paginator.num_pages }}">{{ movement.paginator.num_pages }}</a>
                            </li>
                            {% endif %}
                            <li class="page-item">
                            <a href="?page={{ movement.next_page_number }}" class="page-link">Next</a>
                            </li>
                            {% endif %}
                        </ul>  
                    </nav> 
                    {% endif%}
                </div>
              </div>
              <!-- table-area  -->

            </div>
          </div>
            {% else %}

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

    <!-- table-title -->
    <!-- table-title -->
    <div class="table-title">
            <div class="row">
              <div class="col-md-4">
                <div class="depertment-name">
                  <h4>Movement Register</h4>
                </div>
              </div>
              {% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular' %}
              <div class="col-md-8">
                  <div class="add-btn">
                      <a href="{% url 'movement_create'%}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                      <i class="fa fa-plus-circle" aria-hidden="true"></i>
                      Movement Entry
                      </button></a>
                  </div>
              </div>
              {% endif %}
            </div>
          </div>
    <div class="table-header">
            <div class="row">
               
                <div class="col-md-3">
                    <div class="data-search">
                        <div class="input-group search">
                            <input type="search" class="form-control" placeholder="Search...">
                            <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
                        </div>
                    </div>
                  
                </div>
                <div class="col-md-6">

                </div>
                <div class="col-md-3" style="margin-right: 0px!important;">
                <form action="" method="POST">
                    {% csrf_token %}
                    {{filter_form.action}}
                    <button type="submit" id="id_search" hidden>My Button</button>
                </form>
                </div>                       
            </div>
    <div class="tables table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                  <th>
                    SL
                </th>
                <th>
                  Employee Name
                </th>
                <th>
                  Out Time
                </th>
                <th>
                  In time
                </th>
                <th>
                  Destination        
                </th>
                <th>
                  Reason
                </th>
                <th>
                  Status
                </th>
                <th>
                  Transport
                </th>
                <th>
                  Action
                </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  -->
          <!-- table-area  -->
{% endif %}

{% endblock MainContent %}
{% block meassage %}
 {% include 'notifications/notifications.html' %}               
{% endblock meassage %}
{% block JS %}

<script type=text/javascript>
  var search_url = "{% url 'ajax_search_movement' %}"
  var redirect_url = "{% url 'movement_index' %}"
  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/movement/index.js' %} "></script>
<script>
   $(document).ready(function() {
     $("#id_action").select2({
     });
   });
   $('#id_action').change(function(){
      $('#id_search').click();
   })
 </script>
<script>
$("#searchMovement").keypress(function (e) { 
    console.log('worked')
    if (e.keyCode == 13){
    $("#search-btn").click();
    }
  });
  $("#search-btn").click(function () { 
    
    console.log($("#searchMovement").val())
    if($("#searchMovement").val())
      $.ajax({                       
      url: search_url,                   
      data: {
        'search_movement': $("#searchMovement").val()     
      },
      success: function (data) {   
        $("#MovementList").html(data);  
      }
    });
    else
    location.href = redirect_url
  
  
  });
</script>


{% endblock JS %}