@using BeWoPlanerMobil.Models;
@using BS.Shared.Extensions

@model IAbsenceTimeModel

@{
    var controllerName = Model is EmployeeModel ? "Employee" : "Customer";
    var prefix = Model.HtmlPrefix;
}

<script type="text/javascript">
	var initialDatePrependWidth = 0;
	function calcAbsenceTimePrependWidth() {
		try {
			setTimeout(function () {
				if(initialDatePrependWidth <= 0 && $.isNumeric(getMaxWidth(`absence-time-prepend`))) {
					initialDatePrependWidth = getMaxWidth(`absence-time-prepend`);
				}

				if(initialDatePrependWidth <= 0) {
					return;
				}

				$(`.absence-time-prepend`).width(getMaxWidth(`absence-time-prepend`));
			});
		} catch(error) {
			showErrorPopup(error);
		}
	}

	function validateAbsenceTimeForm() {
		try {
			$("#form-validation-result-column").addClass("d-none");
			$("#form-validation-result-container").html("");

			let validationMessage = "";

			const startAndEnd = getStartAndEndAndIfInfinite();
			const [start, end, isInfinite] = startAndEnd;

			const isStartValid = false === isNaN(start.getTime());
			const isEndValid = false === isNaN(end.getTime()) || isInfinite;

			if(!isStartValid || !isEndValid) {
				return "Die Datumsangaben sind ungültig!";
			}

			const selectedOption = $("#absence-reason-select option:selected");

			if(!isInfinite && end.getTime() < start.getTime()) {
				validationMessage = "Das Startdatum muss vor dem Enddatum liegen.";
			}

			if(selectedOption.val() === "-1") {
				if(validationMessage.length === 0) {
					validationMessage = "Die Kategorie darf nicht leer sein.";
				} else {
					validationMessage += "<br />Die Kategorie darf nicht leer sein.";
				}
			}

			return validationMessage;
		} catch(error) {
			showErrorPopup(error);
		}
	}

	function getStartAndEndAndIfInfinite() {
		const allDay = $(`#@Model.HtmlPrefix-absence-time-allday-cb`).is(":checked");

		const startDateString = $(`#@Model.HtmlPrefix-absence-time-start-date-input`).val();
		const endDateString = $(`#@Model.HtmlPrefix-absence-time-end-date-input`).val();     // z.B. 2025-05-20
		const startTimeString = $(`#@Model.HtmlPrefix-absence-time-start-time-input`).val(); // z.B. 09:17
		const endTimeString = $(`#@Model.HtmlPrefix-absence-time-end-time-input`).val();

		const isInfinite = endDateString.length === 0 && endTimeString.length === 0;

        const start = allDay ? new Date(`${startDateString}T00:00`) : combineDateAndTime(new Date(startDateString), startTimeString);
		const end = allDay ? new Date(`${endDateString}T00:00`) : combineDateAndTime(new Date(endDateString), endTimeString);

        return [start, end, isInfinite];
	}

	function toggleAllDay() {
		try {
			const checkbox = $(`#@Model.HtmlPrefix-absence-time-allday-cb`);
			const isChecked = checkbox.is(":checked");

			if(isChecked === true) {
				$(`#@Model.HtmlPrefix-absence-time-start-time-input, #@Model.HtmlPrefix-absence-time-end-time-input`).val(null);
			}

			$(`#@Model.HtmlPrefix-absence-time-start-time-input, #@Model.HtmlPrefix-absence-time-end-time-input`).prop("disabled", isChecked);
		} catch(error) {
			showErrorPopup(error);
		}
	}

	function submitAbsenceTimesForm() {
		try {
			const validationMessage = validateAbsenceTimeForm();

			if(validationMessage !== undefined && validationMessage !== null && validationMessage.length > 0) {
				$("#form-validation-result-row").removeClass("d-none");
				$("#form-validation-result-container").html(validationMessage);

				return;
			}

            const [start, end] = getStartAndEndAndIfInfinite();

			$.get("@Url.Action("CheckForOverlappingAbsenceTimes", controllerName)",
				{
					startStr: getUnixTimeStamp(start, true, false),
					endStr: getUnixTimeStamp(end, true, false),
					oid: @Model.AbsenteeOid
				}
			).done(
				function(messagesJson) {
					const messages = JSON.parse(messagesJson);

					if(messages.length === 0) {
						showSpinner();
						$("#create-absence-time-form").submit();
						$(`#@Model.HtmlPrefix-absence-times-form-popup`).modal("hide");
					} else {
						$(`#@Model.HtmlPrefix-absence-times-form-popup`).modal("hide");

						let messagesStr = "";

						for(let i = 0; i < messages.length; i++) {
							messagesStr += messages[i];
						}

						showMessagePopupWithHtmlAndCallbacks(
							"BeWoPlaner",
							messagesStr,
							() => {
								showSpinner();
								$("#create-absence-time-form").submit();
								$(`#@Model.HtmlPrefix-absence-times-form-popup`).modal("hide");
							},
							() => {
								$("#messagePopup").modal("hide");
								$(`#@Model.HtmlPrefix-absence-times-form-popup`).modal("show");
							}
						);
					}
				}
			);
		} catch(error) {
			showErrorPopup(error);
		}
	}

	function clearAbsenceTimesForm() {
		try {
			$(`#@Model.HtmlPrefix-absence-time-notice, #@Model.HtmlPrefix-absence-time-start-date, #@Model.HtmlPrefix-absence-time-end-date, #@Model.HtmlPrefix-absence-time-start-time, #@Model.HtmlPrefix-absence-time-end-time`).val("");
			$.get("@Url.Action("DeselectAbsenceTime", controllerName)");
		} catch(error) {
			showErrorPopup(error);
		}
	}
</script>

@using(Html.BeginForm("CreateOrUpdateAbsenceTime", controllerName, FormMethod.Post, new { id = "create-absence-time-form" }))
{
    var isAllDay = Model.SelectedAbsenceTime?.Start?.IsTimeZero() ?? false;
    var allDay = Model.SelectedAbsenceTimeOid is null || isAllDay ? "checked" : "";
    var isDisabled = Model.SelectedAbsenceTimeOid is null || isAllDay ? "disabled" : "";
    var startDate  = Model.SelectedAbsenceTime?.Start?.ToString("yyyy-MM-dd");
    var endDate = Model.SelectedAbsenceTime?.End?.ToString("yyyy-MM-dd");
    var startTime = Model.SelectedAbsenceTime?.Start?.ToString("HH:mm");
    var endTime =  Model.SelectedAbsenceTime?.End?.ToString("HH:mm");

    if(startTime?.Equals("00:00") ?? false)
    {
        startTime = string.Empty;
    }

    if(endTime?.Equals("00:00") ?? false)
    {
        endTime = string.Empty;
    }

    var absenceTimeOid = Model.SelectedAbsenceTime?.AbsenceTimeOid;

    <input type="hidden" name="@prefix-absence-time-oid" value="@absenceTimeOid" />

    <div class="form-row d-none" id="form-validation-result-row">
	    <div class="col-12">
		    <div class="alert alert-danger mb-0" role="alert" id="form-validation-result-container"></div>
	    </div>
    </div>

    #region Datumsangaben
    <div class="form-row">
	    <div class="col-md-6 mt-2">
		    <div class="input-group">
			    <div class="input-group-prepend">
				    <span class="input-group-text absence-time-prepend">
					    Startdatum
				    </span>
			    </div>
			    <input type="date" value="@startDate" class="form-control" id="@prefix-absence-time-start-date-input" name="@prefix-absence-time-start-date" />
		    </div>
	    </div>
	    <div class="col-md-6 mt-2">
		    <div class="input-group">
			    <div class="input-group-prepend">
				    <span class="input-group-text absence-time-prepend">
					    Enddatum
				    </span>
			    </div>
			    <input type="date" value="@endDate" class="form-control" id="@prefix-absence-time-end-date-input" name="@prefix-absence-time-end-date" />
		    </div>
	    </div>
    </div>

    <div class="form-row">
	    <div class="col-md-6 mt-2">
		    <div class="input-group">
			    <div class="input-group-prepend">
				    <span class="input-group-text absence-time-prepend">
					    Von
				    </span>
			    </div>
			    <input type="time" class="form-control" id="@prefix-absence-time-start-time-input" name="@prefix-absence-time-start-time" @isDisabled value="@startTime" />
		    </div>
	    </div>
	    <div class="col-md-6 mt-2">
		    <div class="input-group">
			    <div class="input-group-prepend">
				    <span class="input-group-text absence-time-prepend">
					    Bis
				    </span>
			    </div>
			    <input type="time" class="form-control" id="@prefix-absence-time-end-time-input" name="@prefix-absence-time-end-time" @isDisabled value="@endTime" />
		    </div>
	    </div>
    </div>

    <div class="form-row">
        <div class="col-md py-1">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" name="@prefix-absence-time-allday-cb" id="@prefix-absence-time-allday-cb" onclick="toggleAllDay()" @allDay />
                <label class="custom-control-label" for="@prefix-absence-time-allday-cb">Ganztägig</label>
            </div>
        </div>
    </div>
    #endregion

    <div class="form-row">
        <div class="col-md">
            <div class="form-group mb-2 mt-0">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text absence-time-prepend">
                            Kategorie
                        </div>
                    </div>
                    @Html.DropDownListFor(m => m.SelectedAbsenceReasonOid, Model.AbsenceReasonItems, new { @class = "custom-select", Id = "absence-reason-select", Name = Model.HtmlPrefix + "-absence-time-category" })
                </div>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md">
            <div class="form-group mb-1">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text absence-time-prepend">
                            Erläuterung
                        </div>
                    </div>
                    <textarea class="form-control" autocomplete="on" id="@prefix-absence-time-notice" name="@prefix-absence-time-notice" maxlength="1024">@(Model.SelectedAbsenceTime?.Notice ?? string.Empty)</textarea>
                </div>
            </div>
        </div>
    </div>
}