@using BeWoPlanerMobil.Util
@model BeWoPlanerMobil.Models.DevExpressSchedulerModel

@{
    ViewBag.Title = "DevExpressScheduler";
}

<script type="text/javascript">
	$(document).ready(() => {
		const newAptBtn = $("#scheduler_fab").children().find(".dx-fab-context-text");

		if(newAptBtn.length) {
			newAptBtn.empty();
			newAptBtn.append("<span>Neuer Termin</span>");
		}
	});
	
	function UpdateSchedulerHeight() {
		scheduler.SetHeight(1);

		var containerHeight = ASPxClientUtils.GetDocumentClientHeight();

		if(document.body.scrollHeight > containerHeight) {
			containerHeight = document.body.scrollHeight;
		}

		scheduler.SetHeight(containerHeight);
	}

	function recurrenceSelectChange() {
		const selected = $("#recurrence-type").find(":selected").val();
                
		$("#daily-recurrence-form,#weekly-recurrence-form,#monthly-recurrence-form,#yearly-recurrence-form").hide();

		if(selected !== "1") {
			$("#recurrence-form-container").show();
		}

		switch(selected) {
			case "1":
				$("#recurrence-form-container").hide();
				break;
			case "2":
				$("#daily-recurrence-form").show();
				break;
			case "3":
				$("#weekly-recurrence-form").show();
				break;
			case "4":
				$("#monthly-recurrence-form").show();
				break;
			case "5":
				$("#yearly-recurrence-form").show();
				break;
		}
	}

	function getLabelByTextFromRecurrenceForm(labelText) {
		return $("#appointmentRecurrenceForm_AptRecCtl_mainDiv").filter(function() {
			return $(this).text().trim() === labelText;
		});
	}

	function resizeSchedulerEditForm() {
		const editFormPopup = $("#abc-table").parent().parent().parent();

		const vw = $(window).width();

		if(editFormPopup.css("top") !== undefined) {
			editFormPopup.css("top", "50px");

			// ToDo: Neuer Serienteil

            // ToDo: Am 30.07.2026: Mach weiter mit der Stufe 3 vom MVCxScheduler-Recurrence-Formular von gestern
            if($("#recurrence-container").length) {
                recurrenceSelectChange();
			}
			// ToDo: /Neuer Serienteil






            const recurrence = $("#appointmentRecurrenceForm_ChkRecurrence label:contains('Recurrence')");
            const daily = $("#appointmentRecurrenceForm_AptRecCtl_mainDiv label:contains('Daily')");
            const weekly = $("#appointmentRecurrenceForm_AptRecCtl_mainDiv label:contains('Weekly')");
            const monthly = $("#appointmentRecurrenceForm_AptRecCtl_mainDiv label:contains('Monthly')");
            const yearly = $("#appointmentRecurrenceForm_AptRecCtl_mainDiv label:contains('Yearly')");
            
			recurrence.text("Serie");
			daily.text("Täglich");
			weekly.text("Wöchentlich");
			monthly.text("Monatlich");
			yearly.text("Jährlich");

            $("#appointmentRecurrenceForm_AptRecCtl_Daily_mainDiv label:contains('Every weekday')").text("Jeden Wochentag");
            $("#appointmentRecurrenceForm_AptRecCtl_Daily_mainDiv label:contains('Every')").text("Alle");
            $("#appointmentRecurrenceForm_AptRecCtl_Daily_mainDiv span:contains('day(s)')").text("Tage");

            $("#appointmentRecurrenceForm_AptRecCtl_Weekly_mainDiv label:contains('Recur every')").text("Alle");
            $("#appointmentRecurrenceForm_AptRecCtl_Weekly_mainDiv span:contains('week(s) on:')").text("Wochen am:");

            $("#appointmentRecurrenceForm_AptRecCtl_Monthly_mainDiv label:contains('Day')").text("Tag");
            $("#appointmentRecurrenceForm_AptRecCtl_Monthly_ctl02").text("im");
            $("#appointmentRecurrenceForm_AptRecCtl_Monthly_mainDiv span:contains('month(s)')").text("Monat");
            $("#appointmentRecurrenceForm_AptRecCtl_Monthly_mainDiv label:contains('The')").text("Am");
            $("#appointmentRecurrenceForm_AptRecCtl_Monthly_ctl04").text("jeden");
			$("#appointmentRecurrenceForm_AptRecCtl_Monthly_mainDiv span:contains('month(s)')").text("Monats");
			$("#appointmentRecurrenceForm_AptRecCtl_Monthly_WmeWeekOfMnth_DDD_L_LBI1T0").text("zweiten");
            
            $("#appointmentRecurrenceForm_AptRecCtl_Yearly_mainDiv label:contains('Every')").text("Jeden");
            $("#appointmentRecurrenceForm_AptRecCtl_Yearly_mainDiv label:contains('The')").text("Am");
            $("#appointmentRecurrenceForm_AptRecCtl_Yearly_mainDiv label:contains('of')").text("im");

            $("#appointmentRecurrenceForm_AptRecCtl_RangeCtl_mainDiv label:contains('No end date')").text("Ohne Enddatum");
            $("#appointmentRecurrenceForm_AptRecCtl_RangeCtl_mainDiv label:contains('End after:')").text("Endet nach:");
            $("#appointmentRecurrenceForm_AptRecCtl_RangeCtl_mainDiv span:contains('occurrences')").text("Wiederholungen");
			$("#appointmentRecurrenceForm_AptRecCtl_RangeCtl_mainDiv label:contains('End by:')").text("Endet am:");
		}

		if(editFormPopup.outerWidth() !== undefined) {
			$.get("@Url.Action("GetEmployeePageCount")", function(editFormInfo) {
				pageCountCallback(editFormInfo, "emp");
			});

			$.get("@Url.Action("GetCustomerPageCount")", function(editFormInfo) {
				pageCountCallback(editFormInfo, "cus");
			});

			$.get("@Url.Action("GetResourcePageCount")", function(editFormInfo) {
				pageCountCallback(editFormInfo, "res");
			});
		}

		if(editFormPopup.outerWidth() !== undefined && vw < 678) {
			const newWidth = vw * .95;

			const allChildren = editFormPopup.parent().find("*");

			allChildren.each((index, element) => {
				const item = $(element);

				if(item[0].tagName === "SCRIPT") {
					return;
				}

				if(item.width() > newWidth) {
					item.outerWidth(newWidth);
					item.css("max-width", newWidth);
				}
			});

			$("#abc-table").siblings().css("max-width", newWidth);

			editFormPopup.outerWidth(newWidth);
			editFormPopup.css("max-width", newWidth);
			editFormPopup.css("left", "0");
			editFormPopup.css("top", "0");
			editFormPopup.css("position", "relative");
			editFormPopup.css("margin", "0 auto");
		}
	}

	function pageCountCallback(editFormInfo, prefix) {
		const info = JSON.parse(editFormInfo);
		const items = $(`#dropdown-${prefix}-itm-container .dropdown-item`);

		switch(prefix) {
			case "emp":
				aptEmpSelPageCount = info.PageCount;
				aptEmpSelPageLimit = info.PageLimit;
				aptEmpSelItems = items;
				break;
			case "cus":
				aptCusSelPageCount = info.PageCount;
				aptCusSelPageLimit = info.PageLimit;
				aptCusSelItems = items;
				break;
			case "res":
				aptResSelPageCount = info.PageCount;
				aptResSelPageLimit = info.PageLimit;
				aptResSelItems = items;
				break;
		}

		window.buildPagination(1, 5, 1, prefix);
	}

	function OnAppointmentFormSave(s, e) {
		if(IsValidAppointment()) {
			scheduler.AppointmentFormSave();
		}
	}

	function OnAppointmentFormCancel(s, e) {
		scheduler.AppointmentFormCancel();
	}

	function OnAppointmentFormDelete(s, e) {
		scheduler.AppointmentFormDelete();
	}

	function IsValidAppointment() {
		$.validator.unobtrusive.parse("form");

		return $("form").valid();
	}

	ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {
		UpdateSchedulerHeight();
	});

	ASPxClientControl.GetControlCollection().BrowserWindowResized.AddHandler(function(s, e) {
		UpdateSchedulerHeight();
	});

	function onActiveViewChanged(s, e) {
		$.get("@Url.Action("SelectActiveViewType")", { viewTypeName: e.newView });
	}

	function onMenuItemClicked(s, e) {
		try {
            if(e.itemName === "ResetRecurringApt") {
				e.handled = true;

				const oid = scheduler.GetSelectedAppointmentIds()[0];
				const appointment = scheduler.GetAppointmentById(oid);

				const recurrenceId = appointment.RecurrenceId;

				if(recurrenceId !== undefined && recurrenceId !== null && recurrenceId.length > 0) {
					showWarningMessageBox("Zurücksetzen der Serie bestätigen", "Sind Sie sicher, dass Sie die ausgewählte Terminserie zurücksetzen möchten?", () => {
						scheduler.PerformCallback({ apptID: recurrenceId, actionId: "ResetSeries", args: null }, () => { hideSpinner(); });
					}, false);
				}
            }

			if(e.itemName === "DeleteApt") {
				e.handled = true;

				const oid = scheduler.GetSelectedAppointmentIds()[0];
				const appointment = scheduler.GetAppointmentById(oid);

                if(appointment.appointmentType === "Occurrence") {
					$("#apt-del-ok-btn").on("click",
						function() {
							const radioOptionId = $("input[name='apt-del-radio-group']:checked").attr("id");

							if(radioOptionId === "apt-del-radio-1") {
								const patternId = appointment.appointmentId.split("_")[0];

								scheduler.PerformCallback({apptID: patternId, actionId: "DeleteSeries", args: null}, () => { hideSpinner(); });
							} else if(radioOptionId === "apt-del-radio-2") {
								scheduler.DeleteAppointment(appointment);
							}

							$("#apt-del-ok-btn").off("click");
							$("#recurrence-delete-popup").modal("hide");
						});

					$("#recurrence-delete-popup").modal("show");
				} else {
	                showWarningMessageBox("Löschen bestätigen", "Sind Sie sicher, dass Sie den Termin löschen möchten?", () => {
		                scheduler.PerformCallback({apptID: oid, actionID: e.itemName});
	                }, false);
                }
			}

			if(e.itemName === "ToServiceRecord") {
				e.handled = true;
				scheduler.PerformCallback({ apptID: scheduler.GetSelectedAppointmentIds()[0], actionId: e.itemName });
			}

			if(e.itemName === "ShowAvailableEmployees") {
				const start = scheduler.selection.interval.start;
				const duration = scheduler.selection.interval.duration;
				const tmpDate = new Date();

				const end = new Date(tmpDate.setTime(start.getTime() + duration));

				e.handled = true;

				const startStr = getTimeStamp(start, false, false);
				const endStr = getTimeStamp(end, false, false);

				$("#scheduler-container").load("@Url.Action("CheckEmployeeAvailability")", {startString: startStr, endString: endStr});
			}
		} catch(error) {
			console.error(error);
		}
	}

	function OnAppointmentMenuPopup(s, e) {
		const id = scheduler.GetSelectedAppointmentIds()[0];
		const selectedAppointment = scheduler.GetAppointmentById(id);
		
		for(let i = 0; i < e.item.items.length; i++) {
			const currentItem = e.item.items[i];

			switch(currentItem.name) {
				case "ResetRecurringApt":
                    if(selectedAppointment.IsAbsenceTime || selectedAppointment.IsTask || selectedAppointment.HasOccurrencies === false) {
	                    currentItem.SetVisible(false);
					}
					break;
				case "ToServiceRecord":
					if(id === undefined || selectedAppointment.IsAbsenceTime || selectedAppointment.IsTask) {
						currentItem.SetVisible(false);
					}

					break;
				case "ConfirmApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
						currentItem.SetVisible(false);
					}
					break;
				case "MaybeApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
						currentItem.SetVisible(false);
					}
					break;
				case "CancelApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
						currentItem.SetVisible(false);
					}
					break;
			}
		}
	}

	function rightClickConfirm(answer, id) {
		showSpinner();

		$("#scheduler-notification-container").load("@Url.Action("RightClickConfirm")", { answer: answer, id: id }, () => { reloadScheduler(); });
	}

	function filterAppointments() {
		const checkedBoxes = $("#filter-menu input[type='checkbox']");

		var selectedBoxes = "";

		for(let i = 0; i < checkedBoxes.length; i++) {
			const box = $(checkedBoxes[i]);
			const boxId = box.prop("id");
			const boxValue = box.prop("checked") ? "on" : "off";

			selectedBoxes += `${boxId}_${boxValue}`;

			if(i !== checkedBoxes.length - 1) {
				selectedBoxes += ";";
			}
		}

		scheduler.PerformCallback({
			apptID: "",
			actionId: "FilterAppointments",
			args: [selectedBoxes]
		});
	}

	function updateNotificationInfo() {
		$("#scheduler-notification-container").load("@Url.Action("GetNotifications")");
	}

	function resetFilterSelection(filterType) {
		var url = "";
		var getSelectedCountUrl = "";

		switch(filterType) {
			case "employee":
				url = "@Url.Action("UpdateEmployeeFilterSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedEmployeesForAptFlt")";
				break;
			case "customer":
				url = "@Url.Action("UpdateCustomerFilterSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedCustomersForAptFlt")";
				break;
			case "resource":
				url = "@Url.Action("UpdateResourceFilterSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedResourcesForAptFlt")";
				break;
		}

		$(`#${filterType}-input-container`).load(url, {selectedOids: new Array()}, () => {
			$.get(getSelectedCountUrl, function(numberOfSelectedObjects) {
				$(`#sel-${filterType.substring(0, 3)}-bdg`).text(numberOfSelectedObjects);

				scheduler.PerformCallback({
					apptID: "",
					actionId: "FilterAppointments",
					args: new Array()
				});
			});
		});
	}

	function performReload(shouldDoReloadNotifications) {
		if(shouldDoReloadNotifications === false) {
			return;
		}
        
		$("#scheduler-notification-container").load("@Url.Action("GetNotifications")");
	}

	function reloadScheduler(shouldDoReloadNotifications) {
		scheduler.PerformCallback({apptID: "", actionId: "Reload", args: null}, () => {performReload(shouldDoReloadNotifications); hideSpinner(); });
	}

	@* CustomECRSelectionPartial *@
	function onNewSearchInput(prefix) {
		var searchText = $(`#${prefix}-drop-search-input`).val();

		const menuItems = $(`#dropdown-${prefix}-itm-container .dropdown-item`);

		if(searchText === null || searchText === undefined || searchText.length === 0) {
			menuItems.show();
			return;
		}

		menuItems.hide();

		$.each(menuItems,
			function(index, item) {
				const itemText = $(item).text().toLowerCase();

				if(itemText.includes(searchText.toLowerCase())) {
					$(item).show();
				}
			}
		);
	}

	function resetNewSearch(prefix) {
		$(`#${prefix}-drop-search-input`).val("");

		buildPagination(1, 5, 1, prefix);
		showPage(1, prefix);

		const e = window.event;
		e.cancelBubble = true;

		if(e.stopPropagation) {
			e.stopPropagation();
		}
	}

	var aptEmpSelPageCount = 0;
	var aptEmpSelItems = [];
	var aptEmpSelCurrentPage = 1;
	var aptEmpSelPageLimit = 0;

	var aptCusSelPageCount = 0;
	var aptCusSelItems = [];
	var aptCusSelCurrentPage = 1;
	var aptCusSelPageLimit = 0;

	var aptResSelPageCount = 0;
	var aptResSelItems = [];
	var aptResSelCurrentPage = 1;
	var aptResSelPageLimit = 0;

	function buildPagination(firstShownButton, lastShownButton, activeButton, prefix) {
		const pagination = $(`#apt-${prefix}-pagination`);
		pagination.empty();

		var pageCount = 1;
		var currentPage = 1;

		switch(prefix) {
			case "emp":
				pageCount = aptEmpSelPageCount;
				currentPage = aptEmpSelCurrentPage;
				break;
			case "cus":
				pageCount = aptCusSelPageCount;
				currentPage = aptCusSelCurrentPage;
				break;
			case "res":
				pageCount = aptResSelPageCount;
				currentPage = aptResSelCurrentPage;
				break;
		}

		if(pageCount <= 1) {
			$(`#apt-${prefix}-pag-divider, #apt-${prefix}-pag-dropdow-item`).hide();
			return;
		}

		$(`#apt-${prefix}-pag-divider, #apt-${prefix}-pag-dropdow-item`).show();

		var limit = lastShownButton;

		if(pageCount < limit) {
			limit = pageCount;
		}

		const firstPageLiClass = firstShownButton === 1 ? "page-item disabled" : "page-igem";
		const lastPageLiClass = lastShownButton === pageCount ? "page-item disabled" : "page-igem";

		const prevPageLiClass = activeButton === 1 ? "page-item disabled" : "page-item";
		const nextPageLiClass = activeButton === pageCount ? "page-item disabled" : "page-igem";

		$(`<li class="${firstPageLiClass}" id="first-page-li"><button type="button" class="page-link" tabeindex="-1" onclick="showPage(${1}, '${prefix}')"><span class="fas fa-angle-double-left"></span></button></li>`).appendTo(pagination);
		$(`<li class="${prevPageLiClass}" id="prev-page-li"><button type="button" class="page-link" tabeindex="-1" onclick="showPage(${currentPage - 1}, '${prefix}')"><span class="fas fa-angle-left"></span></button></li>`).appendTo(pagination);

		for(let i = firstShownButton; i <= limit; i++) {
			$(`<li class="page-item ${(i === activeButton ? "active" : "")}"><button class="page-link" tabindex="-1" type="button" onclick="showPage(${i}, '${prefix}')">${i}</button></li>`).appendTo(pagination);
		}

		$(`<li class="${nextPageLiClass}" id="next-page-li"><button type="button" class="page-link" tabeindex="-1" onclick="showPage(${currentPage + 1}, '${prefix}')"><span class="fas fa-angle-right"></span></button></li>`).appendTo(pagination);
		$(`<li class="${lastPageLiClass}" id="last-page-li"><button type="button" class="page-link" tabeindex="-1" onclick="showPage(${pageCount}, '${prefix}')"><span class="fas fa-angle-double-right"></span></button></li>`).appendTo(pagination);
	}

	function showPage(page, prefix) {
		var pageCount = 1;
		var items = [];

		switch(prefix) {
			case "emp":
				pageCount = aptEmpSelPageCount;
				items = aptEmpSelItems;
				break;
			case "cus":
				pageCount = aptCusSelPageCount;
				items = aptCusSelItems;
				break;
			case "res":
				pageCount = aptResSelPageCount;
				items = aptResSelItems;
				break;
		}

		const total = (items.length / 10) | 0;
		const currentPage = Math.max(1, Math.min(page, total));

		switch(prefix) {
			case "emp":
				aptEmpSelCurrentPage = currentPage;
				break;
			case "cus":
				aptCusSelCurrentPage = currentPage;
				break;
			case "res":
				aptResSelCurrentPage = currentPage;
				break;
		}

		const start = (currentPage - 1) * 10;
		const end = currentPage * 10;

		items.hide();

		$.each(items.slice(start, end), function(index, item) {
			$(item).removeClass("d-none");
			$(item).show();
		});

		const last = Math.min(pageCount, currentPage + 2);
		const first = Math.max(1, last - 4);

		buildPagination(first, last, currentPage, prefix);
	}

	function updateEmployeeCustomerResourceSelection(prefix) {
		const checkedBoxes = $(`#dropdown-${prefix}-itm-container input[type=checkbox]:checked`);

		var url = "";

		switch(prefix) {
			case "emp":
				url = "@Url.Action("UpdateAppointmentEmployeeSelection")";
				break;
			case "cus":
				url = "@Url.Action("UpdateAppointmentCustomerSelection")";
				break;
			case "res":
				url = "@Url.Action("UpdateAppointmentResourceSelection")";
				break;
		}

		var selectedOids = [];

		checkedBoxes.each(function() {
			const id = $(this).prop("id");

			const employeeOid = id.split("-")[3];

			selectedOids.push(employeeOid.toString());
		});

		showSpinner();
		$.get(
			url,
			{ selectedOids: selectedOids.join(", ") },
			function(elementCount) {
				$(`#apt-${prefix}-badge`).text(elementCount);

				hideSpinner();
			});
	}


	function selectAllEmployeeCustomerResource(prefix) {
		const isChecked = $(`#apt-${prefix}-select-all`).prop("checked");

		$(`#dropdown-${prefix}-itm-container input[type=checkbox]`).prop("checked", isChecked);

		updateEmployeeCustomerResourceSelection(prefix);
	}

	function categoryCardHeaderClick(collapsibleId) {
		const collapsible = $(`#${collapsibleId}`);

		if(collapsible.length === false) {
			return;
		}

		collapsible.collapse("toggle");

		const e = window.event;
		e.cancelBubble = true;

		if(e.stopPropagation) {
			e.stopPropagation();
		}
	}

	function onNewResourceSeachInput() {
		var searchText = $(`#res-drop-search-input`).val().toLowerCase();

		const category2Resources = $(`#dropdown-res-itm-container .dropdown-item`);
		const collapse = $(`#dropdown-res-itm-container .dropdown-item .collapse`);

		if(searchText === null || searchText === undefined || searchText.length === 0) {
			showAllResources();
			return;
		}

		category2Resources.hide();

		$.each(category2Resources,
			function(index, item) {
				const categoryName = $(item).find("h6").text().toLowerCase();

				if(categoryName.includes(searchText)) {
					$(item).show();
				}

				const resources = $(item).find("form");

				resources.hide();

				$.each(resources, function(resourceIndex, resourceItem) {
					const itemText = $(resourceItem).text().toLowerCase();

					if(itemText.includes(searchText)) {
						$(resourceItem).show();
						$(item).show();
						collapse.collapse("show");
					}
				});
			}
		);
	}

	function resetNewResourceSearch() {
		$(`#res-drop-search-input`).val("");

		showAllResources();

		buildPagination(1, 5, 1, "res");
		showPage(1, "res");

		const e = window.event;
		e.cancelBubble = true;

		if(e.stopPropagation) {
			e.stopPropagation();
		}
	}

	function showAllResources() {
		const category2Resources = $(`#dropdown-res-itm-container .dropdown-item`);
		const collapse = $(`#dropdown-res-itm-container .dropdown-item .collapse`);

		$.each(category2Resources, function(cardIndex, card) {
			$(card).show();

			const resources = $(item).find("form");

			$.each(resources, function(formIndex, form) {
				$(form).show();
			});
		});

		collapse.collapse("show");
	}
	@* /CustomECRSelectionPartial *@







	@* ToolTip *@
	var toolTipContext;
	function onToolTipDisplaying(s, e) {
		toolTipContext = e;

		switch(e.toolTip.type) {
			case MVCxSchedulerToolTipType.Appointment:
				onAppointmentTipDisplaying(s, e);
			case MVCxSchedulerToolTipType.AppointmentDrag:
				onAppointmentDragTipDisplaying(s, e);
				break;
		}
	}
</script>

<div class="dropdown">
    @{
        var isOnlyOwnAptsChecked = Model.ShowOnlyMyOwnAppointments ? "checked" : string.Empty;
        var isOnlyPrivateAptsChecked = Model.ShowOnlyPrivateAppointments ? "checked" : string.Empty;
        var isEmployeeColorsChecked = Model.ShowEmployeeColors ? "checked" : string.Empty;
        var isAbsenceTimesChecked = Model.ShowAbsenceTimes ? "checked" : string.Empty;
        var isTasksChecked = Model.ShowTasks ? "checked" : string.Empty;
        var isOnlyEmployeesChecked = Model.ShowOnlyEmployees ? "checked" : string.Empty;
        var isOnlyCustomersChecked = Model.ShowOnlyCustomers ? "checked" : string.Empty;
        var isOnlyResourcesChecked = Model.ShowOnlyResources ? "checked" : string.Empty;
    }
    
    <div class="d-flex justify-content-center align-items-center">
	    @*@if(Html.IsInDebugMode())
		{
			<button type="button" class="btn btn-bewo-dev m-1" onclick='scheduler.PerformCallback({ apptID: "", actionId: "debug_DummyAppointments", args: null }, () => { performReload(true);hideSpinner(); });'>
				Testtermine
			</button>
		}*@
	    <h4 id="scheduler-log"></h4>
	    <button class="btn btn-sm btn-primary dropdown-toggle m-1" type="button" data-toggle="dropdown">
		    Filtern
	    </button>
	    <div class="dropdown-menu" id="filter-menu">
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="only-my-own-appointments-cb2" @isOnlyOwnAptsChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="only-my-own-appointments-cb2">Nur meine Termine</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="only-private-appointments-cb2" @isOnlyPrivateAptsChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="only-private-appointments-cb2">Nur private Termine</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-divider"></div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="employee-colors-cb2" @isEmployeeColorsChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="employee-colors-cb2">Mitarbeiterfarben</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="absence-times-cb2" @isAbsenceTimesChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="absence-times-cb2">Abwesenheiten</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="tasks-cb2" @isTasksChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="tasks-cb2">Aufgaben</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-divider"></div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="only-employees-cb2" @isOnlyEmployeesChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="only-employees-cb2">Nur Mitarbeiter</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="only-customers-cb2" @isOnlyCustomersChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="only-customers-cb2">Nur Klienten</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-item">
			    <form class="form-inline">
				    <div class="form-group form-check">
					    <input type="checkbox" class="form-check-input" id="only-resources-cb2" @isOnlyResourcesChecked onclick="filterAppointments()">
					    <label class="form-check-label" for="only-resources-cb2">Nur Ressourcen</label>
				    </div>
			    </form>
		    </div>
		    <div class="dropdown-divider"></div>
		    <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
			    <a href="#" class="text-dark" onclick="$('#employees-popup-apt-flt').modal('show')">
				    <i class="fas fa-user text-bewo-employee"></i>
				    Mitarbeiter
				    <span class="badge badge-bewo-employee" id="sel-emp-bdg">@Model.SelectedEmployeeOidsForFiltering.Count</span>
			    </a>
			    <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('employee')">
				    <i class="fas fa-times-circle"></i>
			    </button>
		    </div>

		    <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
			    <a href="#" class="text-dark" onclick="$('#customers-popup-apt-flt').modal('show')">
				    <i class="fas fa-user text-bewo-customers"></i>
				    Klienten
				    <span class="badge badge-bewo-customers" id="sel-cus-bdg">@Model.SelectedCustomerOidsForFiltering.Count</span>
			    </a>
			    <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('customer')">
				    <i class="fas fa-times-circle"></i>
			    </button>
		    </div>

		    <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
			    <a href="#" class="text-dark" onclick="$('#resources-popup-apt-flt').modal('show')">
				    <i class="fas fa-cubes text-bewo-resource"></i>
				    Ressourcen
				    <span class="badge badge-bewo-resource" id="sel-res-bdg">@Model.SelectedResourceOidsForFiltering.Count</span>
			    </a>
			    <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('resource')">
				    <i class="fas fa-times-circle"></i>
			    </button>
		    </div>
	    </div>


	    <button class="btn btn-sm btn-success m-1 ml-0" type="button" onclick="scheduler.PerformCallback({ apptID: '', actionId: 'Reload' });performReload();">
		    <i class="fas fa-sync-alt"></i>
	    </button>

	    <div id="scheduler-notification-container" class="align-middle">
		    @Html.Partial("SchedulerNotificationPartial", Model)
	    </div>
    </div>
</div>

@using(Html.BeginForm())
{
    <div id="scheduler-container">
        @Html.Partial("SchedulerPagePartial", Model)
    </div>
}

@Html.Partial("AptFltEmployeesPartial", Model)

@Html.Partial("AptFltCustomersPartial", Model)

@Html.Partial("AptFltResourcesPartial", Model)

<div class="modal" tabindex="-1" role="dialog" id="recurrence-delete-popup">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-header py-1 px-2">
				Löschen bestätigen
				<button type="button" class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body p-2">
				Möchten Sie die ganze Serie oder nur diesen Termin löschen?
				<div class="form-check">
					<input type="radio" class="form-check-input" name="apt-del-radio-group" id="apt-del-radio-1">
					<label for="apt-del-radio-1" class="form-check-label">Die Serie</label>
				</div>
				<div class="form-check">
					<input type="radio" class="form-check-input" name="apt-del-radio-group" id="apt-del-radio-2" checked>
					<label for="apt-del-radio-2" class="form-check-label">Diesen Termin</label>
				</div>
			</div>
			<div class="modal-footer py-1 px-2">
				<button type="button" class="btn btn-primary" id="apt-del-ok-btn">OK</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal">Abbrechen</button>
			</div>
		</div>
	</div>
</div>