{% load i18n %}
{% load static %}
{% load basefilters %}
{% load horillafilters %}
{% 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>
                                                {% 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>
                                                {% 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>