{% load i18n %} {% load static horillafilters %}{% include "filter_tags.html" %}
<div class="d-flex flex-row-reverse oh-wrapper">
    <span
        class="mb-3"
        onclick="$('[name=status]').val('rejected').change();  $('.filterButton').click()"
        style="cursor: pointer; margin-right: 15px"
    >
        <span
            class="oh-dot oh-dot--small me-1"
            style="background-color: red"
        ></span>
        {% trans "Rejected" %}
    </span>
    <span
        class="mb-3"
        onclick="$('[name=status]').val('approved').change();$('.filterButton').click()"
        style="cursor: pointer; margin-right: 15px"
    >
        <span
            class="oh-dot oh-dot--small me-1"
            style="background-color: yellowgreen"
        ></span>
        {% trans "Approved" %}
    </span>
    <span
        class="mb-3"
        onclick="$('[name=status]').val('requested').change(); $('.filterButton').click()"
        style="cursor: pointer; margin-right: 15px"
    >
        <span
            class="oh-dot oh-dot--small me-1"
            style="background-color: rgba(128, 128, 128, 0.482)"
        ></span>
        {% trans "Requested" %}
    </span>

</div>

<div class="oh-tabs oh-wrapper">
    <ul class="oh-tabs__tablist">
        <li class="oh-tabs__tab" data-target="#reimbursement_tab">
            {% trans "Reimbursements" %}
        </li>
        {% if "leave"|app_installed %}
        <li class="oh-tabs__tab" data-target="#leave_encashment_tab">
            {% trans "Leave Encashments" %}
        </li>
        {% endif %}
        <li class="oh-tabs__tab" data-target="#bonus_encashment_tab">
            {% trans "Bonus Encashments" %}
        </li>
    </ul>
    <div>
        <div class="oh-tabs__contents">
            <!-- Reimbursement-->
            <div class="oh-tabs__content" id="reimbursement_tab">
                {% if reimbursements %}
                    <div class="oh-faq-cards">
                        {% for req in reimbursements %}
                        <div class="oh-faq-card" id="requestCard{{ req.id }}">
                            <div class="d-flex justify-content-between">
                                <div style="margin-bottom: 10px">
                                    {% comment %} <div class="loan-type" style="display: inline; background:hsl(58.85deg 100% 80.93%);">
                                        {{ req.get_type_display }}
                                    </div> {% endcomment %}
                                    <div class="loan-type"
                                        style="display: inline;
                                        {% if req.status == "approved" %}background:#9acd3245; {% elif req.status == "rejected" %}
                                        background:#ff45002e;{% endif %}">
                                        {{ req.get_status_display }}
                                    </div>
                                </div>
                                <div>
                                    {% if req.status != "approved" %}
                                    <a
                                        hx-get="{% url 'create-reimbursement' %}?instance_id={{ req.id }}"
                                        hx-target="#objectCreateModalTarget"
                                        class="mr-2"
                                        style="cursor:pointer;"
                                        title='{% trans "Update" %}'
                                        data-toggle="oh-modal-toggle"
                                        data-target="#objectCreateModal"
                                        ><ion-icon
                                            class="text-dark md hydrated"
                                            name="create-outline"
                                            role="img"
                                            aria-label="create outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                    {% if perms.payroll.delete_reimbursement  %}
                                    <a href="{% url "delete-reimbursement" %}?ids={{req.id}}" onclick="return confirm('Do you want to delete this record?')"
                                        title='{% trans "Delete" %}'
                                        ><ion-icon
                                            class="text-danger md hydrated"
                                            name="trash-outline"
                                            role="img"
                                            aria-label="trash outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                </div>

                            </div>
                            <div class="oh-timeoff-modal__profile-content">
                                <div class="oh-profile mb-2">
                                    <div class="oh-profile__avatar">
                                        <img
                                            src="{{ req.employee_id.get_avatar }}"
                                            class="oh-profile__image me-2"
                                        />
                                    </div>
                                    <div class="oh-timeoff-modal__profile-info">
                                        <span class="oh-timeoff-modal__user m-0 fw-bold"
                                            >{{ req.employee_id }}</span
                                        >
                                        <span
                                            class="oh-timeoff-modal__user m-0"
                                            style="font-size: 12px; color: #4d4a4a"
                                        >
                                            {{req.employee_id.get_department }} /
                                            {{ req.employee_id.get_job_position }}</span
                                        >
                                    </div>
                                </div>
                            </div>
                            <h3 class="oh-faq-card__title">{{ req.title }}</h3>
                            <p class="oh-faq-card__desc">{{ req.description }}.</p>
                            <span
                                class="oh-card__footer--border-top pt-1"
                                style="display: block"
                            >
                                <div class="mb-2">
                                    <i
                                        ><a
                                            hx-get="{% url 'payroll-request-view-comment' req.id %}"
                                            hx-target="#commentContainer"
                                            data-target = '#activitySidebar'
                                            class="text-primary fw-bold oh-activity-sidebar__open w-100"
                                            style="cursor: pointer"
                                            >{% trans 'Comments' %}</a
                                        ></i
                                    >
                                </div>

                                <i style="color: hsl(0, 0%, 45%)"
                                    >{% trans 'Allowance on' %}</i
                                >
                                <span class="dateformat_changer"
                                    >{{ req.allowance_on }}</span
                                >
                                {% if req.type == 'reimbursement' %}
                                <i
                                    ><a
                                        data-target="#reimbursementAttachementModal"
                                        data-toggle="oh-modal-toggle"
                                        hx-get="{% url "reimbursement-attachments" req.id %}"
                                        hx-target="#reimbursementAttachementModalBody"
                                        role="button"
                                        class="text-danger"
                                        title="Attachments"
                                        rel="noopener noreferrer"
                                        >{% trans 'View Attachments' %}</a
                                    ></i
                                >
                                {% endif %}
                            </span>
                            {% if perms.payroll.change_reimbursement %}
                            <form action="{% url 'approve-reimbursements' %}">
                                <input type="hidden" name="ids" value="{{ req.id }}" />
                                <input type="hidden" name="status" />
                                {% if req.type == 'reimbursement' %}
                                <p class="oh-faq-card__desc" style="height: 150px">
                                    <iframe
                                        id="iframe_pdf"
                                        src="{{ req.attachment.url }}"
                                        style="width: 100%"
                                        frameborder="0"
                                    ></iframe>
                                </p>
                                {% elif req.type == 'bonus_encashment' %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for' %}
                                        <span class="text-danger">
                                            {{ req.bonus_to_encash }}
                                        </span>
                                        {% trans 'Bonus points to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% else %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for total' %}
                                        <span class="text-danger">
                                            {{ req.ad_to_encash|add:req.cfd_to_encash }}
                                        </span>
                                        {% trans 'days' %} {% trans 'days to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% endif %}
                                <div class="oh-btn-group">
                                    <button
                                        type="button"
                                        title="{% trans 'Reject' %}"
                                        onclick="$('#requestCard{{ req.id }} [name=amount]').attr('required',false);reimbursementConfirm('Do You really want to reject the request?','#requestCard{{ req.id }}');$('#requestCard{{ req.id }} [name=status]').val('canceled')"
                                        class="oh-btn oh-btn--danger w-100"
                                    >
                                        <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                                    </button>
                                    {% if req.status != "approved" and req.status != "rejected" %}
                                        <button
                                            type="button"
                                            onclick="reimbursementConfirm('Do You really want to approve the request?','#requestCard{{ req.id }}',true);$('#requestCard{{ req.id }} [name=status]').val('approved')"
                                            title="{% trans 'Approve' %}"
                                            class="oh-btn oh-btn--success w-100"
                                        >
                                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                        </button>
                                    {% else %}
                                        <button
                                            type="button"
                                            class="oh-btn oh-btn--success oh-btn--disabled w-100"
                                        >
                                        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                        </button>
                                    {% endif %}
                                </div>
                                <input
                                    type="submit"
                                    hidden
                                    id="requestCard{{ req.id }}Button"
                                />
                            </form>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>

                    <div class="oh-wrapper w-100">
                        <div class="oh-pagination">
                            <span
                                class="oh-pagination__page"
                                data-toggle="modal"
                                data-target="#addEmployeeModal"
                                >{% trans 'Page'  %} {{ reimbursements.number }} {% trans 'of' %} {{ reimbursements.paginator.num_pages }}.</span
                            >

                            <nav class="oh-pagination__nav">
                                <div class="oh-pagination__input-container me-3">
                                    <span class="oh-pagination__label me-1"
                                        >{% trans 'Page' %}</span
                                    >

                                    <input
                                        type="number"
                                        name="page"
                                        class="oh-pagination__input"
                                        value="{{ reimbursements.number }}"
                                        hx-get="{% url 'search-reimbursement' %}?{{ pd }}"
                                        hx-target="#reimbursementContainer"
                                        min="1"
                                    />
                                    <span class="oh-pagination__label"
                                        >{% trans 'of' %} {{ reimbursements.paginator.num_pages }}</span
                                    >
                                </div>

                                <ul class="oh-pagination__items">
                                    {% if reimbursements.has_previous %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&rpage=1"
                                            class="oh-pagination__link"
                                            >{% trans 'First' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&rpage={{ reimbursements.previous_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Previous' %}</a
                                        >
                                    </li>
                                    {% endif %} {% if reimbursements.has_next %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&rpage={{ reimbursements.next_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Next' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&rpage={{ reimbursements.paginator.num_pages }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Last' %}</a
                                        >
                                    </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                {% else %}
                    <!-- start of empty page -->
                    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
                        <img
                        style="width: 150px; height: 150px"
                        src="{% static 'images/ui/no-results.png' %}"
                        class="oh-404__image mb-4"
                        />
                        <h5 class="oh-404__subtitle">
                        {% trans "No search result found!" %}
                        </h5>
                    </div>
                    <!-- end of empty page -->
                {% endif %}
            </div>
            <!--  Leave Encashments-->
            <div class="oh-tabs__content" id="leave_encashment_tab">
                {% if leave_encashments %}
                    <div class="oh-faq-cards">
                        {% for req in leave_encashments %}
                        <div class="oh-faq-card" id="requestCard{{ req.id }}">
                            <div class="d-flex justify-content-between">
                                <div style="margin-bottom: 10px">
                                    {% comment %} <div class="loan-type" style="display: inline; background:hsl(58.85deg 100% 80.93%);">
                                        {{ req.get_type_display }}
                                    </div> {% endcomment %}
                                    <div class="loan-type"
                                        style="display: inline;
                                        {% if req.status == "approved" %}background:#9acd3245; {% elif req.status == "rejected" %}
                                        background:#ff45002e;{% endif %}">
                                        {{ req.get_status_display }}
                                    </div>
                                </div>
                                <div>
                                    {% if req.status != "approved" %}
                                    <a
                                        hx-get="{% url 'create-reimbursement' %}?instance_id={{ req.id }}"
                                        hx-target="#objectCreateModalTarget"
                                        class="mr-2"
                                        style="cursor:pointer;"
                                        title='{% trans "Update" %}'
                                        data-toggle="oh-modal-toggle"
                                        data-target="#objectCreateModal"
                                        ><ion-icon
                                            class="text-dark md hydrated"
                                            name="create-outline"
                                            role="img"
                                            aria-label="create outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                    {% if perms.payroll.delete_reimbursement  %}
                                    <a href="{% url "delete-reimbursement" %}?ids={{req.id}}" onclick="return confirm('Do you want to delete this record?')"
                                        title='{% trans "Delete" %}'
                                        ><ion-icon
                                            class="text-danger md hydrated"
                                            name="trash-outline"
                                            role="img"
                                            aria-label="trash outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="oh-timeoff-modal__profile-content">
                                <div class="oh-profile mb-2">
                                    <div class="oh-profile__avatar">
                                        <img
                                            src="{{ req.employee_id.get_avatar }}"
                                            class="oh-profile__image me-2"
                                        />
                                    </div>
                                    <div class="oh-timeoff-modal__profile-info">
                                        <span class="oh-timeoff-modal__user m-0 fw-bold"
                                            >{{ req.employee_id }}</span
                                        >
                                        <span
                                            class="oh-timeoff-modal__user m-0"
                                            style="font-size: 12px; color: #4d4a4a"
                                        >
                                            {{req.employee_id.get_department }} /
                                            {{ req.employee_id.get_job_position }}</span
                                        >
                                    </div>
                                </div>
                            </div>
                            <h3 class="oh-faq-card__title">{{ req.title }}</h3>
                            <p class="oh-faq-card__desc">{{ req.description }}.</p>
                            <span
                                class="oh-card__footer--border-top pt-1"
                                style="display: block"
                            >
                                <div class="mb-2">
                                    <i
                                        ><a
                                            hx-target="#commentContainer"
                                            hx-get="{% url 'payroll-request-view-comment' req.id %}"
                                            class="text-primary fw-bold oh-activity-sidebar__open w-100"
                                            data-target = '#activitySidebar'
                                            style="cursor: pointer"
                                            >{% trans 'Comments' %}</a
                                        ></i
                                    >
                                </div>

                                <i style="color: hsl(0, 0%, 45%)"
                                    >{% trans 'Allowance on' %}</i
                                >
                                <span class="dateformat_changer"
                                    >{{ req.allowance_on }}</span
                                >
                                {% if req.type == 'reimbursement' %}
                                <i
                                    ><a
                                        data-target="#reimbursementAttachementModal"
                                        data-toggle="oh-modal-toggle"
                                        hx-get="{% url "reimbursement-attachments" req.id %}"
                                        hx-target="#reimbursementAttachementModalBody"
                                        class="text-danger"
                                        title="Attachments"
                                        rel="noopener noreferrer"
                                        >{% trans 'View Attachments' %}</a
                                    ></i
                                >
                                {% endif %}
                            </span>
                            {% if perms.payroll.change_reimbursement %}
                            <form action="{% url 'approve-reimbursements' %}">
                                <input type="hidden" name="ids" value="{{ req.id }}" />
                                <input type="hidden" name="status" />
                                {% if req.type == 'reimbursement' %}
                                <p class="oh-faq-card__desc" style="height: 150px">
                                    <iframe
                                        id="iframe_pdf"
                                        src="{{ req.attachment.url }}"
                                        style="width: 100%"
                                        frameborder="0"
                                    ></iframe>
                                </p>
                                {% elif req.type == 'bonus_encashment' %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for' %}
                                        <span class="text-danger">
                                            {{ req.bonus_to_encash }}
                                        </span>
                                        {% trans 'Bonus points to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% else %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for total' %}
                                        <span class="text-danger">
                                            {{ req.ad_to_encash|add:req.cfd_to_encash }}
                                        </span>
                                        {% trans 'days' %} {% trans 'days to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% endif %}
                                <div class="oh-btn-group">
                                    <button
                                        type="button"
                                        onclick="$('#requestCard{{ req.id }} [name=amount]').attr('required',false);reimbursementConfirm('Do You really want to reject the request?','#requestCard{{ req.id }}');$('#requestCard{{ req.id }} [name=status]').val('canceled')"
                                        class="oh-btn oh-btn--danger w-100"
                                    >
                                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                                    </button>
                                    {% if req.status != "approved" and req.status != 'rejected' %}
                                    <button
                                        type="button" title="{% trans 'Approve' %}"
                                        onclick="reimbursementConfirm('Do You really want to approve the request?','#requestCard{{ req.id }}',true);$('#requestCard{{ req.id }} [name=status]').val('approved')"
                                        class="oh-btn oh-btn--success w-100"
                                    >
                                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                    </button>
                                    {% else %}
                                    <button
                                        type="button" title="{% trans 'Approve' %}"
                                        class="oh-btn oh-btn--success oh-btn--disabled w-100"
                                    >
                                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                    </button>
                                    {% endif %}
                                </div>
                                <input
                                    type="submit"
                                    hidden
                                    id="requestCard{{ req.id }}Button"
                                />
                            </form>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    <div class="oh-wrapper w-100">
                        <div class="oh-pagination">
                            <span
                                class="oh-pagination__page"
                                data-toggle="modal"
                                data-target="#addEmployeeModal"
                                >{% trans 'Page' %} {{ leave_encashments.number }} {% trans 'of' %}
                                {{ leave_encashments.paginator.num_pages }}.</span
                            >

                            <nav class="oh-pagination__nav">
                                <div class="oh-pagination__input-container me-3">
                                    <span class="oh-pagination__label me-1"
                                        >{% trans 'Page' %}</span
                                    >

                                    <input
                                        type="number"
                                        name="page"
                                        class="oh-pagination__input"
                                        value="{{ leave_encashments.number }}"
                                        hx-get="{% url 'search-reimbursement' %}?{{ pd }}"
                                        hx-target="#reimbursementContainer"
                                        min="1"
                                    />
                                    <span class="oh-pagination__label"
                                        >{% trans 'of' %} {{ leave_encashments.paginator.num_pages }}</span
                                    >
                                </div>

                                <ul class="oh-pagination__items">
                                    {% if leave_encashments.has_previous %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&lpage=1"
                                            class="oh-pagination__link"
                                            >{% trans 'First' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&lpage={{ leave_encashments.previous_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Previous' %}</a
                                        >
                                    </li>
                                    {% endif %} {% if leave_encashments.has_next %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&lpage={{ leave_encashments.next_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Next' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&lpage={{ leave_encashments.paginator.num_pages }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Last' %}</a
                                        >
                                    </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                {% else %}
                        <!-- start of empty page -->
                        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
                            <img
                            style="width: 150px; height: 150px"
                            src="{% static 'images/ui/no-results.png' %}"
                            class="oh-404__image mb-4"
                            />
                            <h5 class="oh-404__subtitle">
                            {% trans "No search result found!" %}
                            </h5>
                        </div>
                        <!-- end of empty page -->
                {% endif %}
            </div>
            <!-- Bonus Encashments-->
            <div class="oh-tabs__content" id="bonus_encashment_tab">
                {% if bonus_encashments %}
                    <div class="oh-faq-cards">
                        {% for req in bonus_encashments %}
                        <div class="oh-faq-card" id="requestCard{{ req.id }}">
                            <div class="d-flex justify-content-between">
                                <div style="margin-bottom: 10px">
                                    {% comment %} <div class="loan-type" style="display: inline; background:hsl(58.85deg 100% 80.93%);">
                                        {{ req.get_type_display }}
                                    </div> {% endcomment %}
                                    <div class="loan-type"
                                        style="display: inline;
                                        {% if req.status == "approved" %}background:#9acd3245; {% elif req.status == "rejected" %}
                                        background:#ff45002e;{% endif %}">
                                        {{ req.get_status_display }}
                                    </div>
                                </div>
                                <div>
                                    {% if req.status != "approved" %}
                                    <a
                                        hx-get="{% url 'create-reimbursement' %}?instance_id={{ req.id }}"
                                        hx-target="#objectCreateModalTarget"
                                        class="mr-2"
                                        style="cursor:pointer;"
                                        title='{% trans "Update" %}'
                                        data-toggle="oh-modal-toggle"
                                        data-target="#objectCreateModal"
                                        ><ion-icon
                                            class="text-dark md hydrated"
                                            name="create-outline"
                                            role="img"
                                            aria-label="create outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                    {% if perms.payroll.delete_reimbursement  %}
                                    <a href="{% url "delete-reimbursement" %}?ids={{req.id}}" onclick="return confirm('Do you want to delete this record?')"
                                        title='{% trans "Delete" %}'><ion-icon
                                            class="text-danger md hydrated"
                                            name="trash-outline"
                                            role="img"
                                            aria-label="trash outline"
                                        ></ion-icon
                                    ></a>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="oh-timeoff-modal__profile-content">
                                <div class="oh-profile mb-2">
                                    <div class="oh-profile__avatar">
                                        <img
                                            src="{{ req.employee_id.get_avatar }}"
                                            class="oh-profile__image me-2"
                                        />
                                    </div>
                                    <div class="oh-timeoff-modal__profile-info">
                                        <span class="oh-timeoff-modal__user m-0 fw-bold"
                                            >{{ req.employee_id }}</span
                                        >
                                        <span
                                            class="oh-timeoff-modal__user m-0"
                                            style="font-size: 12px; color: #4d4a4a"
                                        >
                                            {{req.employee_id.get_department }} /
                                            {{ req.employee_id.get_job_position }}</span
                                        >
                                    </div>
                                </div>
                            </div>
                            <h3 class="oh-faq-card__title">{{ req.title }}</h3>
                            <p class="oh-faq-card__desc">{{ req.description }}.</p>
                            <span
                                class="oh-card__footer--border-top pt-1"
                                style="display: block"
                            >
                                <div class="mb-2">
                                    <i
                                        ><a
                                            hx-target="#commentContainer"
                                            hx-get="{% url 'payroll-request-view-comment' req.id %}"
                                            class="text-primary fw-bold oh-activity-sidebar__open w-100"
                                            data-target = '#activitySidebar'
                                            style="cursor: pointer"
                                            >{% trans 'Comments' %}</a
                                        ></i
                                    >
                                </div>

                                <i style="color: hsl(0, 0%, 45%)"
                                    >{% trans 'Allowance on' %}</i
                                >
                                <span class="dateformat_changer"
                                    >{{ req.allowance_on }}</span
                                >
                                {% if req.type == 'reimbursement' %}
                                <i
                                    ><a
                                        data-target="#reimbursementAttachementModal"
                                        data-toggle="oh-modal-toggle"
                                        hx-get="{% url "reimbursement-attachments" req.id %}"
                                        hx-target="#reimbursementAttachementModalBody"
                                        class="text-danger"
                                        title="Attachments"
                                        rel="noopener noreferrer"
                                        >{% trans 'View Attachments' %}</a
                                    ></i
                                >
                                {% endif %}
                            </span>
                            {% if perms.payroll.change_reimbursement %}
                            <form action="{% url 'approve-reimbursements' %}">
                                <input type="hidden" name="ids" value="{{ req.id }}" />
                                <input type="hidden" name="status" />
                                {% if req.type == 'reimbursement' %}
                                <p class="oh-faq-card__desc" style="height: 150px">
                                    <iframe
                                        id="iframe_pdf"
                                        src="{{ req.attachment.url }}"
                                        style="width: 100%"
                                        frameborder="0"
                                    ></iframe>
                                </p>
                                {% elif req.type == 'bonus_encashment' %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for' %}
                                        <span class="text-danger">
                                            {{ req.bonus_to_encash }}
                                        </span>
                                        {% trans 'Bonus points to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% else %}
                                <p class="oh-faq-card__desc" style="max-height: 180px">
                                    <i>
                                        {% trans 'Requsted for total' %}
                                        <span class="text-danger">
                                            {{ req.ad_to_encash|add:req.cfd_to_encash }}
                                        </span>
                                        {% trans 'days' %} {% trans 'days to encash.' %}
                                    </i>
                                    <input style="display: block;padding:
                                    10px;margin-top: 10px;" type="number" required
                                    default="0" min="0" placeholder="Amount"
                                    name="amount" class="mt-2"{% if req.status == "approved" %}disabled{% endif %} {% if req.amount %}
                                    value="{{req.amount}}"{% endif %} />
                                </p>
                                {% endif %}
                                <div class="oh-btn-group">
                                    <button
                                        type="button"
                                        onclick="$('#requestCard{{ req.id }} [name=amount]').attr('required',false);reimbursementConfirm('Do You really want to reject the request?','#requestCard{{ req.id }}');$('#requestCard{{ req.id }} [name=status]').val('canceled')"
                                        class="oh-btn oh-btn--danger w-100"
                                    >
                                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
                                    </button>
                                    {% if req.status != "approved" and req.status != 'rejected' %}
                                    <button
                                        type="button"
                                        title="{% trans 'Approve' %}"
                                        onclick="reimbursementConfirm('Do You really want to approve the request?','#requestCard{{ req.id }}',true);$('#requestCard{{ req.id }} [name=status]').val('approved')"
                                        class="oh-btn oh-btn--success w-100"
                                    >
                                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                    </button>
                                    {% else %}
                                    <button
                                        type="button"
                                        class="oh-btn oh-btn--success oh-btn--disabled w-100"
                                    >
                                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
                                    </button>
                                    {% endif %}
                                </div>
                                <input
                                    type="submit"
                                    hidden
                                    id="requestCard{{ req.id }}Button"
                                />
                            </form>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    <div class="oh-wrapper w-100">
                        <div class="oh-pagination">
                            <span
                                class="oh-pagination__page"
                                data-toggle="modal"
                                data-target="#addEmployeeModal"
                                >{% trans 'Page' %} {{ bonus_encashments.number }} {% trans 'of' %} {{ bonus_encashments.paginator.num_pages }}.</span
                            >

                            <nav class="oh-pagination__nav">
                                <div class="oh-pagination__input-container me-3">
                                    <span class="oh-pagination__label me-1"
                                        >{% trans 'Page' %}</span
                                    >

                                    <input
                                        type="number"
                                        name="page"
                                        class="oh-pagination__input"
                                        value="{{ bonus_encashments.number }}"
                                        hx-get="{% url 'search-reimbursement' %}?{{ pd }}"
                                        hx-target="#reimbursementContainer"
                                        min="1"
                                    />
                                    <span class="oh-pagination__label"
                                        >{% trans 'of' %} {{ bonus_encashments.paginator.num_pages }}</span
                                    >
                                </div>

                                <ul class="oh-pagination__items">
                                    {% if bonus_encashments.has_previous %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&bpage=1"
                                            class="oh-pagination__link"
                                            >{% trans 'First' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&bpage={{ bonus_encashments.previous_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Previous' %}</a
                                        >
                                    </li>
                                    {% endif %} {% if bonus_encashments.has_next %}
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&bpage={{ bonus_encashments.next_page_number }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Next' %}</a
                                        >
                                    </li>
                                    <li
                                        class="oh-pagination__item oh-pagination__item--wide"
                                    >
                                        <a
                                            hx-target="#reimbursementContainer"
                                            hx-get="{% url 'search-reimbursement' %}?{{ pd }}&bpage={{ bonus_encashments.paginator.num_pages }}"
                                            class="oh-pagination__link"
                                            >{% trans 'Last' %}</a
                                        >
                                    </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                {% else %}
                    <!-- start of empty page -->
                    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
                        <img
                        style="width: 150px; height: 150px"
                        src="{% static 'images/ui/no-results.png' %}"
                        class="oh-404__image mb-4"
                        />
                        <h5 class="oh-404__subtitle">
                        {% trans "No search result found!" %}
                        </h5>
                    </div>
                    <!-- end of empty page -->
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Activty side bar for comment section-->

    <div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000;">

        <div class="oh-activity-sidebar__body" id="commentContainer">
        </div>
    </div>

    <!-- End of Activty side bar for comment section-->


    <script>
        function reimbursementConfirm(params, target, approve = false) {
            Swal.fire({
                text: params,
                icon: "question",
                showCancelButton: true,
                confirmButtonColor: "#008000",
                cancelButtonColor: "#d33",
                confirmButtonText: "Confirm",
                cancelButtonText: "Close",
            }).then((result) => {
                if (result.isConfirmed) {
                    if (approve) {
                        $(`${target} [name=amount]`).attr("required", true);
                    }
                    $(target + "Button").click();
                    if (event.target.tagName.toLowerCase() === "form") {
                        event.target.submit();
                    } else if (event.target.tagName.toLowerCase() === "a") {
                        window.location.href = event.target.href;
                    }
                } else {
                }
            });
        }
        $(document).ready(function () {
            var activeTab = localStorage.getItem("activeTabReimbursment");
            if (activeTab != null) {
                var tab = $(`[data-target="${activeTab}"]`);
                var tabContent = $(activeTab);
                $(tab).addClass( "oh-tabs__tab--active");
                $(tabContent).addClass( "oh-tabs__content--active");
            } else {
                $('[data-target="#reimbursement_tab"]').attr(
                    "class",
                    "oh-tabs__tab oh-tabs__tab--active"
                );
                $("#reimbursement_tab").attr("class", "oh-tabs__content oh-tabs__content--active");
            }

            $(".oh-tabs__tab").click(function (e) {
                var activeTab = $(this).attr("data-target");
                $(".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");
                localStorage.setItem("activeTabReimbursment", activeTab);
            });
        });
    </script>
</div>
