{% 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>
  .right{
    text-align: right !important;
  }
</style>

{% endblock Style %}

{% block MainContent %}

{% 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="contents">
    <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-11">
                    <div class="benefit-type">
                    <h4>Eid Bonus</h4>
                    </div>
                </div>
                <div class="col-md-1">
                    <button type="submit" class="cus-btn">Create</button>
                </div>
            </div>
        </div>
        <div class="table-header bg-white">

                <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-3">
                                {{date_form.date|as_crispy_field }}
                            </div> 

                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                {{date_form.eid_name|as_crispy_field }}
                            </div> 
                            <div class="col-md-4">
                                {{date_form.category|as_crispy_field }}
                            </div>
                            <div class="col-md-3" id="click">
                                {{date_form.process|as_crispy_field }}
                            </div> 
                           
                        </div>
                        <div class="row">
                            <div class="col-md-3" id="which_persent">
                                {{date_form.which_percent|as_crispy_field }}
                            </div> 
                            <div class="col-md-3" id="how_much">
                                {{date_form.how_much|as_crispy_field }}
                            </div> 
        
                            <div class="col-md-3" id="amount">
                                {{date_form.amount|as_crispy_field }}
                            </div>

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

    </div>

{% endif %}
{% if request.user.user_type == 'Mother_Organization_admin'%}
<div class="contents">
        <form method="post" id="personForm" data-cities-url="" novalidate>
        {% csrf_token %}
        <div class="table-area">
            <div class="table-title">
                <div class="row">
                    <div class="col-md-11">
                        <div class="benefit-type">
                        <h4>Eid Bonus</h4>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="cus-btn">Create</button>
                    </div>
                </div>
            </div>
            <div class="table-header bg-white">
    
                    <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-3">
                                    {{date_form.date|as_crispy_field }}
                                </div> 
                                <div class="col-md-3">
                                        {{date_form.eid_name|as_crispy_field }}
                                </div> 
                            </div>
                            <div class="row">

                                <div class="col-md-4">
                                    {{date_form.category|as_crispy_field }}
                                </div>
                                <div class="col-md-3" id="click">
                                    {{date_form.process|as_crispy_field }}
                                </div> 
                                <div class="col-md-3" id="which_persent">
                                        {{date_form.which_percent|as_crispy_field }}
                                </div> 
                            </div>
                            <div class="row">

                                <div class="col-md-3" id="how_much">
                                    {{date_form.how_much|as_crispy_field }}
                                </div> 
            
                                <div class="col-md-3" id="amount">
                                    {{date_form.amount|as_crispy_field }}
                                </div>
    
                            </div>
                        </div>
                    </div>
                </form>
            </div>
    
        </div>
    
{% endif %}
{% if request.user.user_type == 'Sister_Organization_admin'%}
<div class="contents">
        <form method="post" id="personForm" data-cities-url="" novalidate>
        {% csrf_token %}
        <div class="table-area">
            <div class="table-title">
                <div class="row">
                    <div class="col-md-11">
                        <div class="benefit-type">
                        <h4>Eid Bonus</h4>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="cus-btn">Create</button>
                    </div>
                </div>
            </div>
            <div class="table-header bg-white">
    
                    <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-3">
                                    {{date_form.date|as_crispy_field }}
                                </div> 
                                <div class="col-md-3">
                                        {{date_form.eid_name|as_crispy_field }}
                                </div> 
                                <div class="col-md-3">
                                        {{date_form.category|as_crispy_field }}
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-3" id="click">
                                    {{date_form.process|as_crispy_field }}
                                </div> 
                                <div class="col-md-3" id="which_persent">
                                        {{date_form.which_percent|as_crispy_field }}
                                </div> 
                                <div class="col-md-3" id="how_much">
                                    {{date_form.how_much|as_crispy_field }}
                                </div> 
            
                                <div class="col-md-3" id="amount">
                                    {{date_form.amount|as_crispy_field }}
                                </div>
    
                            </div>
                        </div>
                    </div>
                </form>
            </div>
    
        </div>
    
{% endif %}
{% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular'%}
<div class="contents">
        <form method="post" id="personForm" data-cities-url="" novalidate>
        {% csrf_token %}
        <div class="table-area">
            <div class="table-title">
                <div class="row">
                    <div class="col-md-11">
                        <div class="benefit-type">
                        <h4>Eid Bonus</h4>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="cus-btn">Create</button>
                    </div>
                </div>
            </div>
            <div class="table-header bg-white">
    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row"> 
                                <div class="col-md-3">
                                    {{date_form.date|as_crispy_field }}
                                </div> 
                                <div class="col-md-3">
                                        {{date_form.eid_name|as_crispy_field }}
                                </div> 
                                <div class="col-md-6">
                                        {{date_form.category|as_crispy_field }}
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-3" id="click">
                                    {{date_form.process|as_crispy_field }}
                                </div> 
                                <div class="col-md-3" id="which_persent">
                                        {{date_form.which_percent|as_crispy_field }}
                                </div> 
                                <div class="col-md-3" id="how_much">
                                    {{date_form.how_much|as_crispy_field }}
                                </div> 
            
                                <div class="col-md-3" id="amount">
                                    {{date_form.amount|as_crispy_field }}
                                </div>
    
                            </div>
                        </div>
                    </div>
                </form>
            </div>
    
        </div>
    
{% endif %}
{% if employee_list_all %}

   <!-- table-area  -->
   <div class="table-area">
    <!-- table-title -->
    <div class="table-title">
      <div class="row">
        <div class="col-md-4">
          <div class="benefit-type">
            <h4>Eid Bonus List</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- table-title -->
    
      <div class="table-header">

        <div class="row">
          {% if employee_list_all %}
          <div class="col-md-3">
            <div class="data-search">
                <div class="input-group search">
                    <input type="search" class="form-control" id="searchEidBouns" placeholder="Search...">
                    <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
                </div>
            </div>
            {% endif%}  
            </div>
        </div>
        {% comment %} <div class="row">
            <form action="{% url 'eid-bonus-delete' %}" method="POST">
                    {% csrf_token %}
                <div class="col-md-12 col-sm-12" style="text-align: right;">
                <button type="submit" class="cus-btn-red" >Delelte</button>
                </div>
        </div> {% endcomment %}
      <div class="tables table-responsive" id="eid_bonus">
      <table class="table table-striped table-hover">
          <thead>
                {% comment %} <th style="text-align: right;" colspan = "15"><div class="checkbox">
                <input style="height: 17px; width: 17px;" type="checkbox" class="check" id="checkAll"> Check All
                </div></th> {% endcomment %}
              <tr>
                    <th style = 'text-align: center'>SL</th>
                    <th style = 'text-align: center'>Employee Name</th>
                    <th style = 'text-align: center'>Employee Code</th>
                    <th style = 'text-align: center'>Department</th>
                    <th style = 'text-align: center'>Designation</th>
                    <th style = 'text-align: center'>Days</th>
                    <th style = 'text-align: center'>Amount</th>
                    <th style = 'text-align: center'>process</th>
                    <th style = 'text-align: center'>which percent</th>
                    <th style='text-align: center'>How much</th>
                    <th style = 'text-align: center'>Eid Name</th>
{% comment %}                     
                    <th class="text-center">Action</th> {% endcomment %}
              </tr>
          </thead>
          <tbody>
            {% for item in employee_list_all  %}
              <tr>
                    <td style = 'text-align: center'>{{forloop.counter}}</td>
                    <td style="text-align: center;">{{item.employee_name}}</td>
                    <td style="text-align: center;">{{item.employee.employee_code}}</td>
                    <td style="text-align: center;">{{item.employee.department}}</td>
                    <td style="text-align: center;">{{item.employee.designation}}</td>
                    {% if item.day == '0_89' %}
                    <td style="text-align: center;">0 days - 89 days</td>
                    {% elif item.day == '90_179' %}
                    <td style="text-align: center;">90 days - 179 days</td>
                    {% elif item.day == '180_364' %}
                    <td style="text-align: center;">180 days -364 days</td>
                     {% elif item.day == '365' %}
                    <td style="text-align: center;">365 days and above</td>
                    {% endif %}
                    
                    <td style="text-align: center;">{{item.amount}}</td>
                    <td style="text-align: center;">{{item.process}}</td>
                    <td style="text-align: center;">{{item.which_percent}}</td>
                    <td style="text-align: center;">{{item.how_much}}</td>
                    <td style="text-align: center;">{{item.eid_name}}</td>
                    {% comment %} <td>
                    <input class="form-check-input" type="checkbox" name="eid_bonus_list" value="{{item.id}}" id="flexCheckDefault">   
                    </td> {% endcomment %}
                </tr>
               {% endfor %}
          </tbody>
      </table>
      </div>
    {% comment %} </form> {% endcomment %}
      <div class="table-footer">
        {% if employee_list_all.has_other_pages %}
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
                {% if employee_list_all.has_previous %}
                <li class="page-item" >
                    <a href="?page={{ employee_list_all.previous_page_number }}" class="page-link">Previous</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                    
                </li>
                {% endif %}
                {% for i in employee_list_all.paginator.page_range %}
                {% if employee_list_all.number == i %}
                    <li class="page-item active">
                    
                            <a class="page-link" href="#">{{i}}</a>
    
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                    </li>
                {% endif %}
                {% endfor %}
                {% if employee_list_all.has_next %}
                
                <li class="page-item">
                    <a href="?page={{ employee_list_all.next_page_number }}" class="page-link">Next</a>
                </li>
    
                    
                {% else %}
                <li class="disabled page-item">
                    <a href="#" class="page-link">Next</a>
                    
                </li>
                {% endif %}
            </ul>
        
                
        </nav>
       {% endif %}
      </div>
    
  </div>
  {% else %}

</div>
{% endif %}
</div>
    
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}         
{% endblock meassage %}
{% block JS %}
<script type=text/javascript>
    var redirect_url = "{% url 'eid-bonus-index' %}"
    var load_sister_organization_url = "{% url 'sister-organization-load' %}"
    var load_branch_organization_url = "{% url 'load-branch-organization' %}"
    var ajax_search_url = "{% url 'search-eid-bonus' %}"
  </script>
<script src="{% static 'js/payroll/eid_bonus/index.js' %} "></script>

<script>
    $(document).ready(function(){
      var which_persent = document.getElementById('which_persent');
      var how_much = document.getElementById('how_much');
      var amount = document.getElementById('amount');
      var check=document.getElementById('click');
      console.log(check)
      which_persent.style.visibility = 'hidden';
      how_much.style.visibility = 'hidden';
      amount.style.visibility = 'hidden';
      $('#click').change((e)=>{ 
          
          if(e.target.value=="is_percent"){
            console.log('hdjkreh')
            $('#id_how_much').attr("required","required")
            $('#id_which_percent').attr("required","required")
            $('#id_amount').attr("required","")
            which_persent.style.visibility = 'visible'; 
            how_much.style.visibility = 'visible'; 
            amount.style.visibility = 'hidden';
            }
            else{
              which_persent.style.visibility = 'hidden'; 
              how_much.style.visibility = 'hidden';
              amount.style.visibility = 'visible'; 
              $('#id_amount').attr("required","required") 
              $('#id_how_much').attr("required","")
              $('#id_which_percent').attr("required","")
            }
        }); 
     
          
        });

        $(document).ready(function() {
            $("#id_category").select2({
               
            });
        });
        $(document).ready(function() {
            $("#id_process").select2({
               
            });
        });
        $(document).ready(function() {
            $("#id_which_percent").select2({
               
            });
        });

        
  $("#checkAll").click(function () {
    $(".form-check-input").prop('checked', $(this).prop('checked'));
  });

  </script>


{% endblock JS %}