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() {
        try {
            var selectedGroups = [];
            var selectedSupportConcepts = [];

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

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

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

                    $("#tree").load("@Url.Action("LoadUpToDateTextModules")");
                });
            });
        } catch(blubb) {
            showErrorPopup(blubb);
        }
    }

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

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

                            $("#tree").load("@Url.Action("LoadUpToDateTextModules")");
                        }
                    );
                }
            );
        } catch (error) {
            showErrorPopup(error);
        }
    }
</script>

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

        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">
    <div id="multibooking-selection-container">
        @Html.Partial("MultiBookingSelectionPartial", Model)
    </div>

    @* Marker *@
    @if(Model.ShowMarker)
    {
        <div class="form-row">
            <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>
    }
    
    @* Trennlinie *@
    <div class="form-row">
        <div class="col-md">
            <hr />
        </div>
    </div>

    @* Start- und Enddatum *@
    <div class="form-row">
        <div class="col-md">
            <div class="form-group my-2">
                <div class="input-group date" id="mb-start-date-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text prepend-input-group-text">
                            Startdatum
                        </div>
                    </div>
                    <input type="text" id="mb-start-date" name="Datum" class="form-control datetimepicker-input" data-target="#mb-start-date-picker" data-toggle="datetimepicker" value="@startDate" />
                    <div class="input-group-append" data-target="#mb-start-date-picker" data-toggle="datetimepicker">
                        <div class="input-group-text">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(Model.IsEndDateVisible)
        {
            <div class="col-md">
                <div class="form-group my-2">
                    <div class="input-group date" id="mb-end-date-picker" data-target-input="nearest">
                        <div class="input-group-prepend">
                            <div class="input-group-text prepend-input-group-text">
                                Enddatum
                            </div>
                        </div>
                        <input type="text" id="mb-end-date" name="Enddatum" class="form-control datetimepicker-input" data-target="#mb-end-date-picker" data-toggle="datetimepicker" value="@endDate" />
                        <div class="input-group-append" data-target="#mb-end-date-picker" data-toggle="datetimepicker">
                            <div class="input-group-text">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                        </div>
                    </div>
                </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 = string.Empty;

            if(!(Model.SelectedServiceRecord is null))
            {
                durationValue = (Model.SelectedServiceRecord?.RoundedDuration / divisor).ToString();
            }

            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-md">
            <div class="form-group my-2">
                <div class="input-group date" id="mb-start-time-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text sm-prepend-input-group-text">
                            Von
                        </div>
                    </div>
                    <input type="text" id="mb-start-time" name="Start" class="form-control datetimepicker-input" data-target="#mb-start-time-picker" value="@startTimeValue" />
                    <div class="input-group-append" data-target="#mb-start-time-picker" data-toggle="datetimepicker">
                        <div class="input-group-text">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="form-group my-2">
                <div class="input-group date" id="mb-end-time-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text sm-prepend-input-group-text">
                            Bis
                        </div>
                    </div>
                    <input type="text" id="mb-end-time" name="Ende" class="form-control datetimepicker-input" data-target="#mb-end-time-picker" value="@endTimeValue" />
                    <div class="input-group-append" data-target="#mb-end-time-picker" data-toggle="datetimepicker">
                        <div class="input-group-text">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @* Dauer und Stunden/Minuten-Auswahl *@
    <div class="form-row">
        <div class="col-md">
            <div class="form-group my-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        @{
                            var labelText = Model.EinheitZeiterfassung == 1 ? "Dauer (h)" : "Dauer";
                        }
                        <div class="input-group-text prepend-input-group-text">
                            @labelText
                        </div>
                    </div>
                    <input type="text" class="form-control" id="mb-duration" name="Dauer" onchange="onDurationChange('mb-start-time', 'mb-end-time', 'mb-start-date', 'mb-end-date', 'mb-duration', 'mb-hours-minutes-dropdown-btn', 'mb-start-date-picker', 'mb-end-date-picker')" 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-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                Gefahrene Kilometer
                            </div>
                        </div>
                        <input type="text" class="form-control" id="mb-distance" name="Distanz" onchange="validateDistanceInput()" value="@distance">
                    </div>
                </div>
            </div>
        </div>
    }

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

    @* Dokumentationsfelder *@
    <div class="form-row">
        <div class="col-md mt-3">
            @if(Model.NumberOfDokuTypes == 0)
            {
                <div class="form-group">
                    <label for="mb-dokufeld">Dokumentation</label>
                    <textarea class="form-control" name="Dokumentation6" id="mb-dokufeld">@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" aria-controls="mb-doku_@i" class="nav-link@(i == 0 ? " active" : string.Empty)" aria-selected="true">
                                @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" aria-labelledby="mb-doku_@i-tab">
                            <textarea class="form-control doku-form-control" id="mb-doku-textarea-@i" name="@textareaName">@noticeList[i]</textarea>
                        </div>
                    }
                </div>
            }
        </div>
    </div>
</div>
    }
    <div class="d-flex bd-highlight mt-3">
        <div class="mr-auto bd-highlight">
            <!-- dient nur als Abstandshalter-->
        </div>
        <div class="ml-3 bd-highlight">
            @using(Html.BeginForm("ResetMultiBookingForm", "Main", FormMethod.Post))
            {
                <button type="submit" class="btn btn-primary" onclick="showSpinner()">Abbrechen</button>
            }
        </div>
        <div class="ml-3 bd-highlight">
            <button type="button" class="btn btn-primary" id="mb-create-button" onclick="submitMultiBookingForm()">Anlegen</button>
        </div>
    </div>
}