{% 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.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"> 
            OT Dudecation
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                  {{form.employee|as_crispy_field }}
            </div> 
            <div class="col-md-3">
                {{form.work_place|as_crispy_field }}
            </div>
            <div class="col-md-3">
                {{form.from_date|as_crispy_field }}
            </div> 
            <div class="col-md-3">
                {{form.to_date|as_crispy_field }}
            </div> 
        </div> 
        <div class="row">
            <div class="col-md-3">
                {{form.emplyment_status|as_crispy_field }}
            </div>
             <div class="col-md-3">
                {{form.Ot_hour|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"> 
            OT Dudecation
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                  {{form.employee|as_crispy_field }}
            </div> 
            <div class="col-md-3">
                {{form.work_place|as_crispy_field }}
            </div>
            <div class="col-md-3">
                {{form.from_date|as_crispy_field }}
            </div> 
            <div class="col-md-3">
                {{form.to_date|as_crispy_field }}
            </div> 
        </div> 
        <div class="row">
            <div class="col-md-3">
                {{form.emplyment_status|as_crispy_field }}
            </div>
             <div class="col-md-3">
                {{form.Ot_hour|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 %}
{% 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>
<script>
    $(document).ready(function() {
    $("#id_employee").select2({
     
    });
  });
      $(document).ready(function() {
    $("#id_work_place").select2({
     
    });
  });

         $(document).ready(function() {
            $("#id_emplyment_status").select2({
               
            });
        });
</script>
{% endblock JS%}