{% load i18n %}
<div class="oh-modal__dialog-header">
    <span
      class="oh-modal__dialog-title"
      id="shiftRequestDetailModalLabel"
    >
      {% trans "Details" %}
    </span>
    <button class="oh-modal__close" aria-label="Close">
      <ion-icon name="close-outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-body oh-modal__dialog-relative">
    {% if request.GET.instances_ids %}
    <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
        <button
            hx-get="{% url 'reimbursement-individual-view' previous %}?instances_ids={{instances_ids}}"
            hx-target="#objectDetailsModalTarget" data-action="previous"
            class="oh-modal__diaglog-nav oh-modal__nav-prev">
            <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
            aria-label="chevron back outline"></ion-icon>
        </button>

        <button
            hx-get="{% url 'reimbursement-individual-view' next %}?instances_ids={{instances_ids}}"
            hx-target="#objectDetailsModalTarget" data-action="next"
            class="oh-modal__diaglog-nav oh-modal__nav-next">
            <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
            aria-label="chevron forward outline"></ion-icon>
        </button>
    </div>
    {% endif %}
    <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
        href ="{% url 'employee-view-individual' reimbursement.employee_id.id %}">
        <div class="oh-profile mb-2">
            <div class="oh-profile__avatar">
                <img
                src="{{reimbursement.employee_id.get_avatar}}"
                class="oh-profile__image me-2"
                alt="Mary Magdalene"
                />
            </div>
            <div class="oh-timeoff-modal__profile-info">
            <span class="oh-timeoff-modal__user fw-bold"
            >{{reimbursement.employee_id}}</span
            >
            <span
            class="oh-timeoff-modal__user m-0"
            style="font-size: 18px; color: #4d4a4a"
            >
            {{reimbursement.employee_id.employee_work_info.department_id}} /
            {{reimbursement.employee_id.employee_work_info.job_position_id}}</span
            >
            </div>
        </div>
    </a>
    <div class="oh-modal__dialog-header" style="padding-top: 5px">
        <h3 class="oh-faq-card__title">
          {{reimbursement.title}}
        </h3>
        <div class="oh-timeoff-modal__stats-container mb-3">
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-title">{% trans "Amount" %}</span>
                <span class="oh-timeoff-modal__stat-count">{{reimbursement.amount}}</span>
            </div>
            <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                <span class="oh-timeoff-modal__stat-title">{% trans "Status" %}</span>
                <span class="oh-timeoff-modal__stat-count">{{reimbursement.get_status_display}}</span>
            </div>
        </div>
        {% if reimbursement.type == 'reimbursement' %}
            <!-- start of reimbursement details -->
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{reimbursement.created_at|date:"F j, Y"}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Description" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.description}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Attachments" %}</span>
                    <span class="oh-timeoff-modal__stat-count">
                        {% for doc in reimbursement.other_attachments.all %}
                        <a
                            href="{{doc.attachment.url}}"
                            rel="noopener noreferrer"
                            target="_blank"
                            ><span
                                class="oh-file-icon oh-file-icon--pdf"
                                onmouseover="enlargeattachment('{{doc.attachment.url}}')"
                                style="width:40px;height:40px"
                            ></span
                        ></a>
                    {% endfor %}
                    </span>
                </div>
            </div>
            <div class="m-3 " id="enlargeattachmentContainer"></div>
            <!-- end of reimbursement details -->
        {% elif reimbursement.type == 'leave_encashment' %}
            <!-- start of leave encashment details -->
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{reimbursement.created_at|date:"F j, Y"}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Leave type" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.leave_type_id}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Available days to encash" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.ad_to_encash}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Carryforward to encash" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.cfd_to_encash}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Description" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.description}}</span>
                </div>
            </div>
            <!-- end of leave encashment details -->
        {% else %}
            <!-- start of bonous encashment details -->
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Date" %}</span>
                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{reimbursement.created_at|date:"F j, Y"}}</span>
                </div>
                <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Bonus to encash" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.bonus_to_encash}}</span>
                </div>
            </div>
            <div class="oh-timeoff-modal__stats-container mb-3">
                <div class="oh-timeoff-modal__stat">
                    <span class="oh-timeoff-modal__stat-title">{% trans "Description" %}</span>
                    <span class="oh-timeoff-modal__stat-count">{{reimbursement.description}}</span>
                </div>
            </div>
            <!-- end of bonous encashment details -->
        {% endif %}
        <!-- start of edit delete buttons -->
        <div class="oh-modal__button-container text-center">
            <div class="oh-btn-group">
                <!-- start of edit button  -->
                {% if perms.payroll.change_reimbursement or request.user %}
                <a
                    onclick="event.stopPropagation()"
                    hx-get="{% url 'create-reimbursement' %}?instance_id={{ reimbursement.id }}"
                    hx-target="#objectCreateModalTarget"
                    data-toggle="oh-modal-toggle"
                    data-target="#objectCreateModal"
                    class="oh-btn oh-btn--info w-50"
                    title="{% trans 'Edit' %}"
                >
                <ion-icon name="create-outline"></ion-icon>
                </a>
                    {% comment %} <a hx-get="{% url 'shift-request-update' shift_request.id %}" hx-target='#shiftRequestModalUpdateBody' data-toggle="oh-modal-toggle" data-target='#shiftRequestModalUpdate' class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a> {% endcomment %}

                {% endif %}
                <!-- end of edit button  -->
                <!-- start of remove button  -->
                {% if perms.payroll.delete_reimbursement %}
                    <a href="{% url "delete-reimbursement" %}?ids={{reimbursement.id}}" onclick="return confirm('Do you want to delete this record?')"
                    class="oh-btn oh-btn--secondary w-50"  title='{% trans "Delete" %}'>

                        <ion-icon name="trash-outline"></ion-icon>
                    </a>
                {% endif %}
                <!-- end of remove button  -->
            </div>
        </div>
        <!-- end of edit delete buttons -->

    </div>

</div>
<script>

</script>
