{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %} {% load basefilters %}
<style>
    .diff-cell {
        background: #d7d7d7 !important;
    }

    .oh-modal_close--custom {
        border: none;
        background: none;
        font-size: 1.5rem;
        opacity: 0.7;
        position: absolute;
        top: 25px;
        right: 15px;
    }

    .oh-sticky-table__th {
        width: 180px;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        /* Ensures that the tooltip container doesn't stretch to the full width */
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: auto;
        /* Allow the tooltip width to adjust based on content */
        max-width: auto;
        /* Limit the maximum width of the tooltip to prevent it from overflowing */
        background-color: hsl(8, 77%, 56%);
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 5%;
        left: 50%;
        transform: translateX(5%);
        opacity: 0;
        transition: opacity 0.3s;
        white-space: nowrap;
        /* Prevents the text from wrapping */
        overflow: hidden;
        /* Hides any overflowed content */
        font-size: 15px;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
</style>

<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
        <h1 class="oh-main__titlebar-title fw-bold">
            {% trans "Leave Requests" %}
        </h1>

        <a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
            @click="searchShow = !searchShow">
            <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
        </a>
    </div>
    <div class="oh-main__titlebar oh-main__titlebar--right">
        {% if leave_requests %}
            <form method="post" hx-get="{% url 'request-filter' %}" hx-target="#leaveRequest" id="filterForm" class="d-flex" onsubmit="event.preventDefault()">
                <div class="oh-input-group oh-input__search-group"
                    :class="searchShow ? 'oh-input__search-group--show' : ''">
                    <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left">
                    </ion-icon>
                    <input type="text" class="oh-input oh-input__icon" id="leave-request-search" aria-label="Search Input"
                        placeholder="{% trans 'Search' %}" name="search" />
                    {% comment %} <div id="searchFieldDiv" style="display:none;">
                        <select name="search_field" class='oh-input__icon'
                            style="border: none; display: flex; position: absolute; z-index: 40px; margin-left:8%;" size="3"
                            onclick="$('.filterButton')[0].click();">
                            <option style="margin-left: -10px;" value="leave_type">{% trans "Search in : Leave Type" %}
                            </option>
                            <option style="margin-left: -10px;" value="status">{% trans "Search in : Status" %}</option>
                            <option style="margin-left: -10px;" value="department">{% trans "Search in : Department" %}
                            </option>
                            <option style="margin-left: -10px;" value="job_position">{% trans "Search in : Job Position" %}
                            </option>
                            <option style="margin-left: -10px;" value="company">{% trans "Search in : Company" %}</option>
                        </select>
                    </div> {% endcomment %}
                </div>
                <div class="oh-main__titlebar-button-container">
                    <div class="oh-dropdown" x-data="{open: false}">
                        <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
                            <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
                            <div id="filterCount"></div>
                        </button>
                        {% csrf_token %}
                        <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open" style="display: none" @click.outside="open = false">
                            {% include 'leave/leave_request/filter_leave_requests.html' %}
                        </div>
                    </div>
                    <div class="oh-dropdown" x-data="{open: false}">
                        <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
                            <ion-icon name="library-outline" class="mr-1"></ion-icon>{% trans "Group By" %}
                            <div id="filterCount"></div>
                        </button>
                        <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
                            @click.outside="open = false" style="display: none">
                            <div class="oh-accordion">
                                <label for="id_field">{% trans "Group By" %}</label>
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group">
                                            <label class="oh-label" for="id_field">{% trans "Field" %}</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group">
                                            <select class="oh-select mt-1 w-100" id="id_field" name="field"
                                                class="select2-selection select2-selection--single">
                                                {% for field in gp_fields %}
                                                    <option value="{{ field.0 }}">{% trans field.1 %}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
            <div class="oh-dropdown ml-2" x-data="{open: false}" onclick="event.preventDefault();">
                <button class="oh-btn oh-btn--dropdown" @click="open = !open" @click.outside="open = false">
                    {% trans "Actions" %}
                </button>
                <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none">
                    <ul class="oh-dropdown__items">
                        {% if perms.leave.change_leaverequest or request.user|is_reportingmanager %}
                            <li class="oh-dropdown__item">
                                <a href="#" class="oh-dropdown__link" id="leaveRequestsBulkApprove">{% trans "Bulk Approve" %}</a>
                            </li>
                            <li class="oh-dropdown__item">
                                <a href="#" class="oh-dropdown__link" id="leaveRequestsBulkReject" data-toggle="oh-modal-toggle" data-target="#bulkRejectModal">{% trans "Bulk Reject" %} </a>
                            </li>
                        {% endif %}
                        <li class="oh-dropdown__item">
                            <a href="#" class="oh-dropdown__link" data-toggle="oh-modal-toggle"
                                data-target="#objectCreateModal" hx-target="#objectCreateModalTarget"
                                hx-get="{% url 'leave-requests-info-export' %}"
                                >{% trans "Export" %}
                            </a>
                        </li>
                        {% if perms.leave.delete_leaverequest or request.user|is_reportingmanager %}
                            <li class="oh-dropdown__item">
                                <a href="#" id="leaveRequestBulkDelete" data-action="delete" class="oh-dropdown__link oh-dropdown__link--danger">{% trans "Delete" %}</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        {% endif %}
        {% if perms.leave.add_leaverequest or request.user|is_reportingmanager %}
            <div class="oh-btn-group ml-2">
                <div class="oh-dropdown" x-data="{open: false}">
                    <button id="requestCreateButton" class="oh-btn oh-btn--secondary oh-btn--shadow"
                        data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-get="{% url 'request-creation' %}"
                        hx-target="#objectCreateModalTarget">
                        <ion-icon name="add-outline" class="me-1"></ion-icon>
                        {% trans "Create" %}
                    </button>
                </div>
            </div>
        {% endif %}
    </div>
    </div>
</section>

<div class="oh-checkpoint-badge mb-2" id="selectedLeaverequests" data-ids="[]" data-clicked="" style="display: none">
    {% trans "Selected Requests" %}
</div>
<span id="bulkApproveSpan" hx-post="{% url 'leave-requests-bulk-approve' %}" hx-target="#leaveRequest"></span>
<span id="bulkRejectSpan" hx-post="{% url 'leave-requests-bulk-reject' %}" hx-target="#leaveRequest"></span>

<div class="oh-wrapper" id="leaveRequest">
    {% if leave_requests %}
        {% include 'leave/leave_request/leave_requests.html'%}
    {% else %}
        <div style="
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
        " class="">
            <div class="oh-404">
                <img style="display: block; width: 150px; height: 150px; margin: 10px auto"
                    src="{% static 'images/ui/attendance.png' %}" class="mb-4" alt="" />
                <h3 style="font-size: 20px" class="oh-404__subtitle">
                    {% trans "There are no leave requests at the moment." %}
                </h3>
            </div>
        </div>
    {% endif %}
</div>

<div class="oh-modal" id="tableTimeOff" role="dialog" aria-labelledby="tableTimeOffModal" aria-hidden="true">
    <div class="oh-modal__dialog oh-modal__dialog--timeoff oh-timeoff-modal">
        <div class="oh-modal__dialog-header mb-2">
            <button class="oh-modal__close" aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div class="oh-modal__dialog-relative" id="requestView"></div>
    </div>
</div>

<div class="oh-modal" id="rejectModal" role="dialog" aria-labelledby="rejectModal" aria-hidden="true">
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
                {% trans "Rejection" %}
            </h2>
            <button class="oh-modal_close--custom" onclick="$('#rejectModal').removeClass('oh-modal--show');"
                aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div class="oh-modal__dialog-body" id="rejectForm"></div>
    </div>
</div>

<div class="oh-modal" id="bulkRejectModal" role="dialog" aria-labelledby="bulkRejectModal" aria-hidden="true">
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
                {% trans "Bulk Rejection Reason" %}
            </h2>
            <button class="oh-modal_close--custom" onclick="$('#bulkRejectModal').removeClass('oh-modal--show');"
                aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>
        <div class="oh-modal__dialog-body" id="bulkRejectForm">
            <form action="#" hx-encoding="multipart/form-data">
                <div class="oh-general__tab-target oh-profile-section">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <label class="oh-label">{% trans "Reason" %}</label>
                        <textarea name="reason" cols="40" rows="4" class="p-4 oh-input w-100" required=""
                            id="id_reject_reason" spellcheck="false"></textarea>
                    </div>
                    <div class="d-flex flex-row-reverse">
                        <button type="submit" id="idBulkRejectReason"
                            class="oh-btn oh-btn--secondary oh-btn--shadow mt-3">
                            {% trans "Save" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
    <div class="oh-activity-sidebar__body" id="commentContainer">
    </div>
</div>

<div class="oh-modal" id="clashViewModal" role="dialog" aria-hidden="true" style="z-index:99;">
    <div class="oh-modal__dialog" style="max-width: 900px;">
        <div class="oh-modal__dialog-header">
            <h3 class="oh-main__titlebar-title fw-bold ">{% trans "Clashed Leave Requests" %}</h3>
            <button class="oh-modal__close--custom"
                onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');">
                <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
            </button>
        </div>
        <div class="oh-modal__dialog-body" id="clashViewModalBody" style="overflow-x:auto;"></div>
    </div>
</div>

<script src="{% static '/leave_request/action.js' %}"></script>
<script>
    $(document).on('htmx:afterSwap', function () {
        // Create a new script element
        var scriptElement = document.createElement("script");
        // Set the source URL of the script file to be loaded
        scriptElement.src = "{% static 'build/js/web.frontend.min.js' %}";
        // Append the script element to the head of the HTML document
        document.head.appendChild(scriptElement);
    });

    $("#filterForm").submit(function (e) {
        var formData = $(this).serialize();
        count = 0;
        formData.split("&").forEach(function (field) {
            parts = field.split("=");
            value = parts[1];
            if (value != '' && parts[0] !== "csrfmiddlewaretoken") {
                count++;
            }
        });
        $("#filterCount").empty();
        if (count > 0) {
            $("#filterCount").text("(" + count + ")");
        }
    });
    $('#leave-request-search').on('keyup', function () {
        var searchFieldDiv = $('#searchFieldDiv');
        var selectedField = searchFieldDiv.find(':selected');
        if ($(this).val().trim() !== '') {
            searchFieldDiv.show();
        } else {
            searchFieldDiv.hide();
            selectedField.prop('selected', false);
        }
        $('.filterButton').eq(0).click();
    });
    $(document).ready(function () {
        $('#id_field').on('change', function () {
            $('.filterButton')[0].click();
        })
    });

    function enlargeImage(src, $element) {
        $(".enlargeImageContainer").empty()
        var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
        enlargeImageContainer.empty()
        style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
        var enlargedImage = $('<iframe>').attr({ src: src, style: style })
        var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
        enlargeImageContainer.append(enlargedImage)
        enlargeImageContainer.append(name)
        setTimeout(function () {
            enlargeImageContainer.show()

            const iframe = document.querySelector('iframe').contentWindow
            var iframe_document = iframe.document
            iframe_image = iframe_document.getElementsByTagName('img')[0]
            $(iframe_image).attr('style', 'width:100%; height:100%;')
        }, 100)
    }

    function hideEnlargeImage() {
        var enlargeImageContainer = $('.enlargeImageContainer')
        enlargeImageContainer.empty()
    }

    $(document).on('click', function (event) {
        if (!$(event.target).closest('#enlargeImageContainer').length) {
            hideEnlargeImage()
        }
    })
    function submitForm(elem) {
        $(elem).siblings(".add_more_submit").click();
    }
    function leaveRequestConfirm(message, event) {
        // Define the select box options
        event.preventDefault()
        var question = '<p> Would you like to proceed?</p>'
        html = '<p>' + message + '</p>'
        html = html + "<div align='center'>" + question + "</div>"
        Swal.fire({
            html: html,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#008000',
            cancelButtonColor: '#d33',
            confirmButtonText: "Confirm",
            cancelButtonText: "Close"
        }).then((result) => {
            if (result.isConfirmed) {
                if (event.target.tagName.toLowerCase() === "form") {
                    event.target.submit();
                } else if (event.target.tagName.toLowerCase() === "a") {
                    window.location.href = event.target.href;
                }
                else {
                    console.log(target)
                    console.log(event.target.href)
                }
            } else {
            }
        });

    }

</script>
{% endblock %}
