{% 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>
    @media(min-width:768px){
        .right{
            text-align:right
        }
    }
     @media(max-width:768px){
        .right{
            text-align:center
        }
    }
    table, td, th {
      border: 1px solid black;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }
    @page { size: landscape; }
  .select2-selection__rendered{
      line-height: 39px !important;
      margin-top: -4px !important;
      width:100% !important;
    }
    .select2-container {
      width:100% !important;
  }
    .select2-container .select2-selection--single {
      height: 35px !important;
    }
    .select2-selection__arrow {
      height: 34px !important;
      
    }
    .select2-selection__arrow b{
      border-color:#FFF transparent transparent transparent !important;
    }
  
  </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 %}

<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0 fw-bold"> 
            Movement Attendance
        </h5>
      </div>
      <div class="card-body">
          <div class="row">
              <div class="col-md-4">
                {{user_form.mother_organization|as_crispy_field }}
              </div> 
              <div class="col-md-4">
                {{user_form.sister_organization|as_crispy_field }}
              </div> 
              <div class="col-md-4">
                {{user_form.branch|as_crispy_field }}
              </div> 
            </div>
              <div class="row">
              <div class="col-md-3">
                  {{form.month|as_crispy_field }}
              </div> 
              <div class="col-md-3">
                  {{form.year|as_crispy_field }}
              </div> 
      </div> 
    </div>
    <div class="row" style="margin-top: 0px;margin-bottom: 1px; ">
      <div class="col-md-12" style="text-align: right;">
          <button type="submit" class="cus-btn" >Submit</button>
      </div>
  </div>
</form>
{% endif %}
{% if request.user.user_type == 'Mother_Organization_admin' %}

<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0 fw-bold"> 
            Movement Attendance
        </h5>
      </div>
      <div class="card-body">
          <div class="row">
              <div class="col-md-4">
                {{user_form.sister_organization|as_crispy_field }}
              </div> 
              <div class="col-md-4">
                {{user_form.branch|as_crispy_field }}
              </div> 
            </div>
              <div class="row">
              <div class="col-md-3">
                  {{form.month|as_crispy_field }}
              </div> 
              <div class="col-md-3">
                  {{form.year|as_crispy_field }}
              </div> 
      </div> 
    </div>
    <div class="row" style="margin-top: 0px;margin-bottom: 1px; ">
      <div class="col-md-12" style="text-align: right;">
          <button type="submit" class="cus-btn" >Submit</button>
      </div>
  </div>
</form>
{% endif %}
{% if request.user.user_type == 'Sister_Organization_admin' %}

<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0 fw-bold"> 
            Movement Attendance
        </h5>
      </div>
      <div class="card-body">
          <div class="row">
              <div class="col-md-4">
                {{user_form.branch|as_crispy_field }}
              </div> 
              <div class="col-md-3">
                  {{form.month|as_crispy_field }}
              </div> 
              <div class="col-md-3">
                  {{form.year|as_crispy_field }}
              </div> 
      </div> 
    </div>
    <div class="row" style="margin-top: 0px;margin-bottom: 1px; ">
      <div class="col-md-12" style="text-align: right;">
          <button type="submit" class="cus-btn" >Submit</button>
      </div>
  </div>
</form>
{% endif %}
{% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular' %}

<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0 fw-bold"> 
            Movement Attendance
        </h5>
      </div>
      <div class="card-body">
          <div class="row">
              <div class="col-md-3">
                  {{form.month|as_crispy_field }}
              </div> 
              <div class="col-md-3">
                  {{form.year|as_crispy_field }}
              </div> 
      </div> 
    </div>
    <div class="row" style="margin-top: 0px;margin-bottom: 1px; ">
      <div class="col-md-12" style="text-align: right;">
          <button type="submit" class="cus-btn" >Submit</button>
      </div>
  </div>
</form>
{% endif %}
{% if movement %}

  <div class="tables table-responsive" id="employee-attendance-general-report-table-pdf">
    <table class="table table-striped table-hover">
        <thead>
          
            <tr>
              <th>
                  SL
              </th>
              <th>
                Employee Name
              </th>
              <th>
                  Department
              </th>
              <th>
                Designation
              </th>
              <th>
                Out Time
              </th>
              <th>
                In time
              </th>
              
              <th>
                Action
              </th>
          </tr>
      </thead>
        <tbody>
            
            {% for item in movement  %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{item.employee.name_en}}</td>
                <td>{{item.employee.department}}</td>
                <td>{{item.employee.designation}}</td>
                <td>{{item.outtime}} </td>
                <td >{{item.intime}}</td>
                

                <td>
                  <ul class="action">
                    {% comment %} <input type="hidden" name="movement_out" value="{{item.outtime}}">
                    <input type="hidden" name="movement" value="{{item.intime}}">
                    <input type="hidden" name="movement_id_number" value="{{item.id}}"> {% endcomment %}
                    <input class="form-check-input" type="checkbox" name="movement_id" value="{{item.id}}" id="flexCheckDefault">
                  </ul>
                </td>
            </tr>
            {% endfor %}
          </tr>
        </tbody> 
    </table>
  </div>
</div>
{% endif %}

{% 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' %}"
  var load_department_url = "{% url 'ajax-load-department' %}"
  var load_designation_url = "{% url 'ajax-load-designation' %}"
</script>
<script src="{% static 'js/hr_app/department/index.js' %} "></script>
{% endblock JS%}