@model BeWoPlanerMobil.Models.DevExpressSchedulerModel

@{
    ViewBag.Title = "DevExpressScheduler";
}

<script type="text/javascript">
	$(window).on("load", () => {
		$("#employees-popup-apt-flt").on("hide.bs.modal", function(e) {
			$.get("@Url.Action("GetSelectedEmployeesForAptFlt")", function(numberOfSelectedEmployees) {
				$("#sel-emp-bdg").text(numberOfSelectedEmployees);
			});
		});

		$("#customers-popup-apt-flt").on("hide.bs.modal", function(e) {
			$.get("@Url.Action("GetSelectedCustomersForAptFlt")", function(numberOfSelectedCustomers) {
                $("#sel-cus-bdg").text(numberOfSelectedCustomers);
			});
		});

		$("#resources-popup-apt-flt").on("hide.bs.modal", function(e) {
			$.get("@Url.Action("GetSelectedResourcesForAptFlt")", function(numberOfSelectedResources) {
                $("#sel-res-bdg").text(numberOfSelectedResources);
			});
		});
	});

	function UpdateSchedulerHeight() {
		scheduler.SetHeight(1);

		var containerHeight = ASPxClientUtils.GetDocumentClientHeight();

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

		scheduler.SetHeight(containerHeight);
	}

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

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

		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 OnAppointmentFormSave(s, e) {
		if(IsValidAppointment()) {
			scheduler.AppointmentFormSave();
		}
	}

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

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

	function CloseCustomerGridLookup() {
		CustomerGridLookup.ConfirmCurrentSelection();
		CustomerGridLookup.HideDropDown();
	}

	function CloseEmployeeGridLookup() {
		EmployeeGridLookup.ConfirmCurrentSelection();
		EmployeeGridLookup.HideDropDown();
	}

	function CloseResourceGridLookup() {
		ResourceGridLookup.ConfirmCurrentSelection();
		ResourceGridLookup.HideDropDown();
	}

	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 === "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 selectedAppointment = scheduler.GetAppointmentById(scheduler.GetSelectedAppointmentIds()[0]);
		console.log(selectedAppointment);
		for(let i = 0; i < e.item.items.length; i++) {
			const currentItem = e.item.items[i];

			if(currentItem.name === "ToServiceRecord") {
				const isTask = selectedAppointment.customField("IsTask");
				const isAbsenceTime = selectedAppointment.customField("IsAbsenceTime");

				if(isTask === true || isAbsenceTime === true) {
					currentItem.SetVisible(false);
				}
			}
		}
	}
</script>

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle m-1" type="button" data-toggle="dropdown">
        Filtern
    </button>
    <div class="dropdown-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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <label class="form-check-label" for="only-resources-cb2">Nur Ressourcen</label>
                </div>
            </form>
        </div>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item" 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">0</span>
        </a>
        <a href="#" class="dropdown-item" 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">0</span>
        </a>
        <a href="#" class="dropdown-item">
            <i class="fas fa-cubes text-bewo-resource" onclick="$('#resources-popup-apt-flt').modal('show')"></i>
            Ressourcen
            <span class="badge badge-bewo-resource" id="sel-res-bdg">0</span>
        </a>
    </div>
</div>

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

@Html.Partial("AptFltEmployeesPartial")

@Html.Partial("AptFltCustomersPartial")

@Html.Partial("AptFltResourcesPartial")