BeWoPlaner/BeWoPlanerMobil/Views/Main/MultiBookingFormPartial.cshtml

@using BeWoPlanerMobil.Models
@using BeWoPlanerMobil.Util
@model BeWoPlanerMobil.Models.MainModel

@{
    if(TempData[TempDataConstants.DoLogoutKey] is bool doLogout && doLogout)
    {
        <text>
            <script type="text/javascript">
	            $("#second-logout-form").submit();
            </script>
        </text>
    }
}

<script type="text/javascript">
	function addScCbRelsToMultiBooking() {
		var selectedGroups = [];
		var selectedSupportConcepts = [];

		$("#mb-supportconcepts input:checked").each(function () {
			selectedSupportConcepts.push($(this).attr("value"));
		});

		$("#mb-groups input:checked").each(function () {
			selectedGroups.push($(this).attr("value"));
		});

		$("#mb-sc-cb-rel-tab-content").load("@Url.Action("AddScCbRelsToMultiBooking")", {relOids: selectedSupportConcepts, groupOids: selectedGroups}, function() {
			$("#multibooking-selection-container").load("@Url.Action("ReloadMultiBookingForm")", function () {
                changeMultiBookingFormEnableState($(".mb-cb2sc-input:checkbox:checked").length > 0 ? false : true);

				$("#tree").load("@Url.Action("LoadUpToDateTextModules")");
			});
		});
	}

	function removeSupportConceptCostBearerRel(relOid) {
		$(`#mb-cb2sc-checkbox-${relOid}`).prop("checked", false);

		$("#multibooking-selection-container").load("@Url.Action("RemoveSupportConceptCostbearerRelFromMultiBooking")", {relOid: relOid}
			, function () {
				$("#goals-tree").load("@Url.Action("ReloadGoals")"
					, function () {
                        changeMultiBookingFormEnableState($(".mb-cb2sc-input:checkbox:checked").length > 0 ? false : true);

						$("#tree").load("@Url.Action("LoadUpToDateTextModules")");
					}
				);
			}
		);
    }

	function updateLocallyStoredMultiBookingCb2ScRelOids() {
		let cb2ScOidString = "";
        const storage = window.getBeWoStorage();

		$("#mb-supportconcepts input:checked").each(function () {
			cb2ScOidString += `${$(this).attr("value")},`;
		});

		storage.updateGroupBookingSelectedCb2ScRelOids(cb2ScOidString.slice(0, -1));
	}

    function updateLocallyStoredMultiBookingGroupOids() {
		let groupOidString = "";
		const storage = window.getBeWoStorage();

		$("#mb-supportconcepts input:checked").each(function () {
			groupOidString += `${$(this).attr("value")},`;
		});

		storage.updateGroupBookingSelectedGroupOids(groupOidString.slice(0, -1));
	}
</script>

@if(Model != null)
{
    using(Html.BeginForm("CreateMultiBooking", "Main", FormMethod.Post, new { id = "multiBookingForm" }))
    {
        var startDate = Model.SelectedServiceRecord?.Start?.ToShortDateString() ?? DateTime.Today.ToString("yyyy-MM-dd");
        var endDate = Model.SelectedServiceRecord?.End?.ToShortDateString() ?? DateTime.Today.ToString("yyyy-MM-dd");

        var distance = Model.SelectedServiceRecord?.DistanceInMeter?.ToString() ?? string.Empty;

        var notice0 = Model.SelectedServiceRecord?.Notice ?? string.Empty;
        var noticeList = new[] { string.Empty, string.Empty, string.Empty, string.Empty, string.Empty };

        if(Model.SelectedServiceRecord?.NoticeList != null)
        {
            var selectedNoticeList = Model.SelectedServiceRecord.NoticeList;
            for(var i = 0; i < selectedNoticeList.Count; i++)
            {
                noticeList[i] = selectedNoticeList[i] ?? string.Empty;
            }
        }
<div class="mt-3 booking-form-container">
    <div id="multibooking-selection-container">
        @Html.Partial("MultiBookingSelectionPartial", Model)
    </div>

    @* Marker *@
    @if(Model.ShowMarker)
    {
        <div class="form-row mt-2">
            <div class="col-md">
                <div class="custom-control custom-checkbox custom-control-inline">
                    <input type="checkbox" class="custom-control-input" name="marker-cb" id="mb-marker-cb" />
                    <label class="custom-control-label" for="mb-marker-cb">Marker</label>
                </div>
            </div>
        </div>
    }
    
    @* ----- Betrag ----- *@
    @if(Model.ShowBetrag)
    {
        <div class="form-row mt-2">
            <div class="col-md">
                <div class="form-group my-0">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text prepend-input-group-text">
                                Betrag
                            </div>
                        </div>
                        <input class="form-control" type="text" id="mb-betrag" name="betrag" />
                        <div class="input-group-append">
                            <div class="input-group-text">€</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }

    @* Trennstrich *@
    <hr class="py-0 mt-2 mb-0" />

    @* Start- und Enddatum *@
    @{
	    var columnWidth = Model.IsEndDateVisible ? "col-md-6" : "col";
    }

    <div class="form-row">
	    <div class="@columnWidth mt-2">
		    <div class="input-group">
			    <div class="input-group-prepend">
				    <span class="input-group-text">
					    Startdatum
				    </span>
			    </div>
			    <input class="form-control" type="date" name="Datum" id="mb-start-date-input" onchange="calcDuration('mb', false, true, false)" value="@startDate" />
		    </div>
	    </div>
	    @if(Model.IsEndDateVisible)
	    {
		    <div class="col-md-6 mt-2">
			    <div class="input-group">
				    <div class="input-group-prepend">
					    <span class="input-group-text">
						    Enddatum
					    </span>
				    </div>
				    <input class="form-control" type="date" name="Enddatum" id="mb-end-date-input" onchange="calcDuration('mb', false, false, true)" value="@endDate" />
				</div>
		    </div>
	    }
    </div>

    @* Start- und Endzeit *@
    <div class="form-row">
        @{
            var startTimeValue = Model.StartTimeToEdit;
            var endTimeValue = Model.EndTimeToEdit;

            var divisor = Model.SelectedDurationUnit == "Stunden" ? 60 : 1;

            var durationValue = Model.DurationToEdit;

            var afterValidationState = TempData[TempDataConstants.AfterValidationStateKey];

            if(Model.SetStartTimeToEndTimeAfterSave && !Model.IsInEditingMode && afterValidationState is bool isAfterValidation && isAfterValidation == false)
            {
                startTimeValue = Model.NewStartTime;
                endTimeValue = Model.NewEndTime;
                if(Model.NewDuration.HasValue)
                {
                    durationValue = (Model.NewDuration / divisor).ToString();
                }
            }
        }
        <div class="col mt-2">
	        <div class="input-group">
		        <div class="input-group-prepend">
			        <span class="input-group-text">
				        Von
			        </span>
		        </div>
		        <input class="form-control" type="time" name="Start" id="mb-start-time-input" onchange="calcDuration('mb', false, true, false)" value="@startTimeValue" />
		        <span class="input-group-text rounded-0 border-left-0 border-right-0">
			        Bis
		        </span>
		        <input class="form-control" type="time" name="Ende" id="mb-end-time-input" onchange="calcDuration('mb', false, false, true)" value="@endTimeValue" />
	        </div>
        </div>
    </div>

    @* Dauer und Stunden/Minuten-Auswahl *@
    <div class="form-row">
        <div class="col-md">
            <div class="form-group my-0">
                <div class="input-group mt-2">
                    <div class="input-group-prepend">
                        @{
                            var labelText = Model.EinheitZeiterfassung == 1 ? "Dauer (h)" : "Dauer";
                        }
                        <div class="input-group-text prepend-input-group-text" id="mb-duration-label">
                            @labelText
                        </div>
                    </div>
                    <input type="text" autocomplete="on" class="form-control" id="mb-duration-input" name="Dauer" onchange="beiDaueraenderung('mb')" value="@durationValue">
                    @if(Model.IsZeiterfassungInStdMin)
                    {
                        <div class="input-group-append">
                            <button id="mb-hours-minutes-dropdown-btn" class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                @Model.SelectedDurationUnit
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item hours-minutes-link" href="#">Minuten</a>
                                <a class="dropdown-item hours-minutes-link" href="#">Stunden</a>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

    @* Gefahrene Kilometer *@
    @if(Model.ShowDistanceField)
    {
        <div class="form-row">
            <div class="col-md">
                <div class="form-group my-0">
                    <div class="input-group mt-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                Gefahrene Kilometer
                            </div>
                        </div>
                        <input type="text" autocomplete="on" class="form-control" id="mb-distance-input" name="Distanz" onchange="validateDistanceInput()" value="@distance">
                    </div>
                </div>
            </div>
        </div>
    }

    @* Textbausteinebutton *@
    @if(Model.HasRightToSeeTextModules)
    {
        <div class="form-row" id="textmodule-container">
            <div class="col-md">
                <button type="button" class="btn btn-primary form-control mt-2" data-toggle="modal" data-target="#textbausteine-popup" id="mb-textbausteine-btn">Textbausteine</button>
            </div>
        </div>
    }

    @* Dokumentationsfelder *@
    <div class="form-row">
        <div class="col-md mt-2">
            @if(Model.NumberOfDokuTypes == 0)
            {
                <div class="form-group mt-2">
	                <label for="mb-dokufeld-textarea">Dokumentation</label>
                    <textarea class="form-control" autocomplete="on" name="Dokumentation6" id="mb-dokufeld-textarea">@notice0</textarea>
                </div>
            }
            else
            {
                <ul class="nav nav-tabs" role="tab-list">
                    @for(var i = 0; i < Model.Dokutypes.Length; i++)
                    {
                        var currentDokuType = Model.Dokutypes[i];

                        <li class="nav-item">
                            <a href="#mb-doku_@i" id="mb-doku_@i-tab" data-toggle="tab" role="tab" class="nav-link@(i == 0 ? " active" : string.Empty)">
                                @currentDokuType.DisplayName
                            </a>
                        </li>
                    }
                </ul>
                <div class="tab-content" id="mb-dokufelderTab">
                    @for(var i = 0; i < Model.Dokutypes.Length; i++)
                    {
                        var textareaName = i + 1 < 1 ? "Dokumentation" : "Dokumentation" + (i + 1);

                        <div class="tab-pane show@(i == 0 ? " active" : string.Empty)" id="mb-doku_@i" role="tabpanel">
                            <textarea class="form-control doku-form-control" autocomplete="on" id="mb-doku-textarea-@i" name="@textareaName">@noticeList[i]</textarea>
                        </div>
                    }
                </div>
            }
        </div>
    </div>
</div>
    }

<div class="w-100 mt-2">
    <button type="button" class="btn btn-primary float-right ml-1" id="mb-create-btn" onclick="window.submitMultiBookingForm()">Anlegen</button>

    @using(Html.BeginForm("ResetMultiBookingForm", "Main", FormMethod.Post))
    {
        <button type="submit" id="mb-reset-btn" class="btn btn-primary float-right" onclick="showSpinner()">Abbrechen</button>
    }

    @Html.Partial("RestoreServiceRecordInputsPartial", Model)
    
</div>
}