{% load i18n %}
{% load static %}
{% load basefilters %}
{% load attendancefilters %}
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
        {{ message }}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
<div class="oh-wrapper mt-4" id="AllowanceAndDeduction">
    <div class="oh-tabs">
		<ul class="oh-tabs__tablist">
			<li class="oh-tabs__tab oh-tabs__tab--active d-flex justify-content-between" data-target="#allowance_tab">
				<div>
					<div>
            <img
						src="{% static 'images/ui/allowance_icon.png' %}"
						alt=""
						style="width: 25px; height: 25px; margin-right: 3px"
					/>
					{% trans "Allowances" %}
          </div>
				</div>
        {% if perms.payroll.add_allowance and active_contracts %}
        <button title="Add Bonus" class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2" title="Add" hx-get="{% url "add-bonus" %}?employee_id={{employee.id}}" hx-target="#addBonusModalBody" data-target="#addBonusModal" data-toggle="oh-modal-toggle">
          <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
        </button>
        {% endif %}

			</li>
			<li class="oh-tabs__tab" data-target="#deduction_tab">
				<div>
					<img
						src="{% static 'images/ui/deduction_icon.png' %}"
						alt=""
						style="width: 25px; height: 25px; margin-right: 3px"
					/>
					{% trans "Deductions" %}
				</div>

			</li>
		</ul>
		<div class="oh-tabs__contents" id="view-container">
			<div class="oh-tabs__content oh-tabs__content--active" id="allowance_tab">
			<!-- Sticky Table -->
			{% if allowances %}
                <div class="oh-sticky-table">
                <div class="oh-sticky-table__table oh-table--sortable">
                  <div class="oh-sticky-table__thead">
                    <div class="oh-sticky-table__tr">
                      <div class="oh-sticky-table__th">
                        <div class="d-flex">
                          <div
                            hx-target="#section"
                            hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list"
                          >
                            {% trans "Allowance" %}
                          </div>
                        </div>
                      </div>

                      <div class="oh-sticky-table__th">{% trans "Is Taxable" %}</div>
                      <div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
                      <div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
                      <div class="oh-sticky-table__th">{% trans "Amount" %}</div>
                      <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
                      {% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
                      <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
                      {% endif %}
                    </div>
                  </div>
                  {% for allowance in allowances %}
                  <div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle" data-target = "#objectDetailsModal" hx-get="{% url 'single-allowance-view' allowance.id %}?instances_ids={{allowance_ids}}" hx-target = "#objectDetailsModalTarget">
                    <div class="oh-sticky-table__tr ui-sortable-handle">
                      <div class="oh-sticky-table__td">{{allowance.title}}</div>
                      <div class="oh-sticky-table__td">
                        {{allowance.is_taxable|yesno|capfirst}}
                      </div>
                      <div class="oh-sticky-table__td" >
                        {{allowance.is_condition_based|yesno|capfirst}}
                      </div>
                      <div class="oh-sticky-table__td">
                        {{allowance.is_fixed|yesno|capfirst}}
                      </div>
                      <div class="oh-sticky-table__td">
                        {% if allowance.amount %}{{allowance.amount}}{% endif %}
                      </div>
                      <div class="oh-sticky-table__td">
                        {% if allowance.get_based_on_display%}
                          {{allowance.get_based_on_display}}
                        {% endif %}
                      </div>
                      {% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
                      <div class="oh-sticky-table__td oh-sticky-table__right">
                        <div class="oh-btn-group">

                          <a
                            onclick="event.stopPropagation();"
                            class="oh-btn oh-btn--light-bkg w-100"
                            href="{% url 'update-allowance' allowance.id %}"
                            title='{% trans "Update" %}'
                          >
                            <ion-icon
                              name="create-outline"
                              role="img"
                              class="md hydrated"
                              style="color: blue"
                              aria-label="create outline"
                            ></ion-icon>
                          </a>

                          <a
                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                            onclick = "event.preventDefault();event.stopPropagation();"
                            hx-confirm="{% trans 'Do you want to delete this Allowance?' %}"
                            hx-post="{% url 'delete-employee-allowance' allowance.id %}"
                            hx-target="#AllowanceAndDeduction"
                            title="{% trans 'Delete' %}"
                          >
                            <ion-icon
                              name="trash-outline"
                              role="img"
                              class="md hydrated"
                              aria-label="trash outline"
                            ></ion-icon>
                          </a>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                  </div>
                  {% endfor %}
                </div>
                </div>
			{% else %}
			    <div class="d-flex justify-content-center align-items-center" style="height:40vh">
                    {% if active_contracts %}
                      {% if basic_pay <= 0 %}
                        <h5 class="oh-404__subtitle">{% trans "Basic pay not added . Please update in the active contract." %}</h5>
                      {% else %}
                        <h5 class="oh-404__subtitle">{% trans "This employee is not eligible for any allowances." %}</h5>
                      {% endif %}
                    {% else %}
                        <h5 class="oh-404__subtitle">{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}</h5>
                    {% endif %}
			    </div>
			{% endif %}
			</div>
			<div class="oh-tabs__content" id="deduction_tab">
				{% if deductions %}
				    <div class="oh-sticky-table">
                        <div class="oh-sticky-table__table oh-table--sortable">
                          <div class="oh-sticky-table__thead">
                            <div class="oh-sticky-table__tr">
                              <div class="oh-sticky-table__th">
                                <div class="d-flex">
                                  <div
                                    hx-target="#section"
                                    hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list"
                                  >
                                    {% trans "Deduction" %}
                                  </div>
                                </div>
                              </div>

                              <div class="oh-sticky-table__th">{% trans "Is Pretax" %}</div>
                              <div class="oh-sticky-table__th">{% trans "Is Condition Based" %}</div>
                              <div class="oh-sticky-table__th">{% trans "Condition" %}</div>
                              <div class="oh-sticky-table__th">{% trans "Is Fixed" %}</div>
                              <div class="oh-sticky-table__th">{% trans "Amount" %}</div>
                              <div class="oh-sticky-table__th">{% trans "Based On" %}</div>
                              {% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
                              <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
                              {% endif %}
                            </div>
                          </div>
                          {% for deduction in deductions %}
                          <div class="oh-sticky-table__tbody ui-sortable" draggable="true" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-get="{% url 'single-deduction-view' deduction.id %}?instances_ids={{deduction_ids}}" hx-target = "#objectDetailsModalTarget">
                            <div class="oh-sticky-table__tr ui-sortable-handle">
                              <div class="oh-sticky-table__sd">{{deduction.title}}</div>

                              <div class="oh-sticky-table__td">
                                {{deduction.is_pretax|yesno|capfirst}}
                              </div>
                              <div class="oh-sticky-table__td">
                                {{deduction.is_condition_based|yesno|capfirst}}
                              </div>
                              <div class="oh-sticky-table__td">
                                {% if deduction.field %} {{deduction.get_field_display}}
                                  {{deduction.get_condition_display}} {{deduction.value}}
                                {% endif %}
                              </div>
                              <div class="oh-sticky-table__td">
                                {{deduction.is_fixed|yesno|capfirst}}
                              </div>
                              <div class="oh-sticky-table__td">
                                {% if deduction.amount %}
                                  {{deduction.amount}}
                                {% endif %}
                              </div>
                              <div class="oh-sticky-table__td">
                                {% if deduction.based_on %}
                                  {{deduction.get_based_on_display}}
                                {% endif%}
                              </div>
                              {% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
                              <div class="oh-sticky-table__td oh-sticky-table__right">
                                <div class="oh-btn-group">
                                  <a
                                    onclick="event.stopPropagation();"
                                    class="oh-btn oh-btn--light-bkg w-100"
                                    href="{% url 'update-deduction' deduction.id %}"
                                    title="{% trans 'Update' %}"
                                    >
                                    <ion-icon
                                      name="create-outline"
                                      role="img"
                                      class="md hydrated"
                                      style="color: blue"
                                      aria-label="create outline"
                                    ></ion-icon>
                                  </a>
                                  <a
                                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                                    onclick = "event.preventDefault();event.stopPropagation();"
                                    hx-confirm="{% trans 'Do you want to delete this Deduction?' %}"
                                    hx-post="{% url 'delete-deduction' deduction.id employee.id %}"
                                    hx-target="#allowance_deduction"
                                    title="{% trans 'Delete' %}"
                                    >
                                    <ion-icon
                                      name="trash-outline"
                                      role="img"
                                      class="md hydrated"
                                      aria-label="trash outline"
                                    ></ion-icon>
                                  </a>
                                </div>
                              </div>
                              {% endif %}
                            </div>
                          </div>
                          {% endfor %}
                        </div>
                    </div>
				{% else %}
				    <div class="d-flex justify-content-center align-items-center" style="height:40vh">
                        {% if active_contracts %}
				          <h5 class="oh-404__subtitle">{% trans "This employee is not eligible for any deductions." %}</h5>
                          {% else %}
                            <h5 class="oh-404__subtitle">{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}</h5>
                        {% endif %}
				    </div>
				{% endif %}
			</div>
		</div>
	</div>
</div>


<div class="oh-modal" id="addBonusModal" role="dialog" aria-hidden="true">
  <div class="oh-modal__dialog" id="addBonusModalBody"> </div>
</div>

<script>
    $(document).ready(function () {
        const activeTab = localStorage.getItem('EmployeeAttendanceRequestActiveTab')
        if (activeTab!=null) {
            $(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
            $(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
            $(`[data-target="${activeTab}"]`).toggleClass("oh-tabs__tab--active");
            $(activeTab).toggleClass("oh-tabs__content--active");
        }
        $(".oh-tabs__tab[data-target]").click(function (e) {
            e.preventDefault();
            localStorage.setItem("EmployeeAttendanceRequestActiveTab",$(this).attr('data-target'))
			var newActiveTab = $(this).attr('data-target')
			$(".oh-tabs__content--active").toggleClass('oh-tabs__content--active');
            $(".oh-tabs__tab--active").toggleClass('oh-tabs__tab--active');
            $(`[data-target="${newActiveTab}"]`).toggleClass("oh-tabs__tab--active");
            $(newActiveTab).toggleClass("oh-tabs__content--active");
        });
    });
    let activeTabs = $("#AllowanceAndDeduction .oh-tabs__tab--active").length
    if(!activeTabs){
      $("#AllowanceAndDeduction .oh-tabs__tab").first().toggleClass("oh-tabs__tab--active")
    }
</script>