{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
{% load basefilters %}
<style>
	.oh-modal_close--custom {
		border: none;
		background: none;
		font-size: 1.5rem;
		opacity: 0.7;
		position: absolute;
		top: 25px;
		right: 15px;
	}
	.diff-cell {
		background: rgba(255, 166, 0, 0.158);
	}
</style>

<!-- start of messages  -->
{% 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 %}
<!-- end of messages -->

<!-- start of nav bar -->
<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 Allocation 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_allocation_requests or my_leave_allocation_requests %}
			<form
				method="post"
				hx-get="{% url 'leave-allocation-request-filter' %}"
				hx-target="#view-container"
				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"
						aria-label="Search Input"
						placeholder="{% trans 'Search' %}"
						name="search"
						onkeyup="$('.filterButton')[0].click()"
					/>
				</div>
				<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>
					<div
						class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
						x-show="open"
						style="display: none"
						@click.outside="open = false"
					>
						<div class="oh-dropdown__filter-body">
							<div class="oh-accordion">
								<div
									class="oh-accordion-header"
									onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
								>
									{% trans "Leave Allocation Request" %}
								</div>
								<div class="oh-accordion-body">
									<div class="row">
										<div class="col-sm-12 col-md-12 col-lg-12">
											<div class="oh-input-group">
												<label class="oh-label">{% trans "Leave Type" %}</label>
												{{form.leave_type_id}}
											</div>
										</div>
										<div class="col-sm-12 col-md-12 col-lg-6">
											<div class="oh-input-group">
												<label class="oh-label">{% trans "Employee" %}</label>
												{{form.employee_id}}
											</div>
										</div>
										<div class="col-sm-12 col-md-12 col-lg-6">
											<div class="oh-input-group">
												<label class="oh-label">{% trans "Created By" %}</label>
												{{form.created_by}}
											</div>
										</div>
										<div class="col-sm-12 col-md-12 col-lg-6">
											<div class="oh-input-group">
												<label class="oh-label"
													>{% trans "Requested days Up To" %}</label
												>
												{{form.number_of_days_up_to}}
											</div>
										</div>
										<div class="col-sm-12 col-md-12 col-lg-6">
											<div class="oh-input-group">
												<label class="oh-label"
													>{% trans "Requested days More Than " %}</label
												>
												{{form.number_of_days_more_than}}
											</div>
										</div>

										<div class="col-sm-12 col-md-12">
											<div class="oh-input-group">
												<label class="oh-label">{% trans "Status" %}</label>
												{{form.status}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="oh-dropdown__filter-footer">
							<button
								class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
								type="submit"
							>
								{% trans "Filter" %}
							</button>
						</div>
					</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" %}
					</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>{% 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">{% 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>
			<!-- end of filter  -->
		{% endif %}

		<!-- start of create button  -->
		<div class="oh-btn-group ml-2">
			<div class="oh-dropdown" x-data="{open: false}">
				<button
					class="oh-btn oh-btn--secondary oh-btn--shadow"
					hx-target="#objectCreateModalTarget"
					hx-get="{% url 'leave-allocation-request-create' %}"
					data-toggle="oh-modal-toggle"
					data-target="#objectCreateModal"
				>
					<ion-icon
						name="add-outline"
						class="me-1 md hydrated"
						role="img"
						aria-label="add outline"
					></ion-icon>
					{% trans "Create" %}
				</button>
			</div>
		</div>
		<!-- end of create button    -->
	</div>
</section>

<!-- start of request view  -->
<div class="oh-wrapper" id="userRequest">
	{% if leave_allocation_requests or my_leave_allocation_requests %}
	<!-- start of Quick filters  -->
	<div class="d-flex flex-row-reverse mb-2">
		<span
			class="me-3 review_ongoing"
			onclick="$('[name=status]').val('rejected');$('[name=status]').first().change();$('.filterButton').click()"
			style="cursor: pointer"
		>
			<span
				class="oh-dot oh-dot--small me-1"
				style="background-color: red"
			></span>
			{% trans "Rejected" %}
		</span>
		<span
			class="me-3 confirmed"
			onclick="$('[name=status]').val('requested');$('[name=status]').first().change();$('.filterButton').click()"
			style="cursor: pointer"
		>
			<span
				class="oh-dot oh-dot--small me-1"
				style="background-color: rgb(103, 171, 238)"
			></span>
			{% trans "Requested" %}
		</span>
		<span
			class="me-3 paid"
			onclick="$('[name=status]').val('approved');$('[name=status]').first().change();$('.filterButton').click()"
			style="cursor: pointer"
		>
			<span
				class="oh-dot oh-dot--small me-1"
				style="background-color: yellowgreen"
			></span>
			{% trans "Approved" %}
		</span>
	</div>
	<!-- end of quick filters  -->
	<!-- start of contents -->
	<div class="oh-tabs">
		<ul class="oh-tabs__tablist">
			<li class="oh-tabs__tab oh-tabs__tab--active" data-target="#tab_1">
				{% trans "My leave allocation request" %}
			</li>
			{% if request.user|is_reportingmanager or perms.leave.view_leaveallocationrequest %}
			<li class="oh-tabs__tab" data-target="#tab_2">
				{% trans "Leave allocation requests" %}
			</li>
			{% endif %}
		</ul>
		{% include "leave/leave_allocation_request/leave_allocation_request_list.html" %}
	</div>
	<!-- end of contents -->
	{% else %}
	<div
		style="
			height: 70vh;
			display: flex;
			align-items: center;
			justify-content: center;
		"
		class=""
	>
		<div style="" 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 allocation requests at the moment." %}
			</h3>
		</div>
	</div>
	{% endif %}
</div>
<!-- end of request view  -->

<div
	class="oh-modal"
	id="editModal"
	role="dialog"
	aria-labelledby="editDialogModal"
	aria-hidden="true"
>
	<div class="oh-modal__dialog">
		<div class="oh-modal__dialog-header">
			<h2 class="oh-modal__dialog-title" id="editDialogDialog">
				{% trans "Update Request" %}
			</h2>
			<button class="oh-modal_close--custom" aria-label="Close">
				<ion-icon name="close-outline"></ion-icon>
			</button>
		</div>
		<div class="oh-modal__dialog-body" id="editTarget"></div>
	</div>
</div>


<div
	class="oh-modal"
	id="rejectModal"
	role="dialog"
	aria-labelledby="rejectDialogModal"
	aria-hidden="true"
>
	<div class="oh-modal__dialog" id="rejectTarget"></div>
</div>


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


<script>
	$(document).ready(function () {
		$(".oh-modal_close--custom").click(function () {
			$(this).closest(".oh-modal").removeClass("oh-modal--show");
		});
		$("#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();
	}

</script>

<script src="{% static '/base/filter.js' %}"></script>
<script
	type="module"
	src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
	nomodule
	src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
{% endblock %}
