BeWoPlaner/BeWoPlanerMobil/Views/Main/GroupBookingFormPartial.cshtml

@using BeWoPlanerMobil.Models
@using BeWoPlanerMobil.Util
@using BS.Shared
@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 addScCbRelsToGroupBooking() {
        try {
            var selectedGroups = [];
            var selectedSupportConcepts = [];

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

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

            $("#group-booking-sc-cb-rel-tab-content").load("@Url.Action("AddScCbRelsToGroupBooking")", {relOids: selectedSupportConcepts, groupOids: selectedGroups}, function() {
                $("#groupbooking-selection-container").load("@Url.Action("ReloadGroupBookingForm")", function () {
                    var checkedCheckboxes = $(".cb2sc-input:checkbox:checked");

                    $("#employees-button, #category-select, #leistung-select, " +
                            "#start-date, #end-date, #start-time, #end-time, #duration, " +
                            "#distance, textarea, #reset-button, #create-button, #textbausteine-button, #hours-minutes-dropdown-btn, #marker-cb")
                        .prop("disabled", (checkedCheckboxes.length > 0 ? false : true));

                    $("#goals-tree").load("@Url.Action("ReloadGoals")", function () {
                        $("#goal-ratings-container").load("@Url.Action("ReloadGoalRatings")", function() {
                            try {
                                $("#tree").load("@Url.Action("LoadUpToDateTextModules")");
                            } catch (error) {
                                showErrorPopup(error);
                            }
                        });
                    });
                });
            });
        } catch(blubb) {
            showErrorPopup(blubb);
        }
    }

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

            $("#groupbooking-selection-container").load("@Url.Action("RemoveSupportConceptCostbearerRel")", {relOid: relOid}
                , function () {
                    $("#goals-tree").load("@Url.Action("ReloadGoals")"
                        , function () {
                            $("#goal-ratings-container").load("@Url.Action("ReloadGoalRatings")", function() {
                                try {
                                    var checkedCheckboxes = $(".cb2sc-input:checkbox:checked");

                                    $("#employees-button, #category-select, #leistung-select, " +
                                            "#start-date, #end-date, #start-time, #end-time, #duration, " +
                                            "#distance, textarea, #reset-button, #create-button, #textbausteine-button, #hours-minutes-dropdown-btn, #marker-cb")
                                        .prop("disabled", (checkedCheckboxes.length > 0 ? false : true));

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

@if(Model != null)
{
    var submitButtonText = Model.IsInEditingMode ? "Speichern" : "Anlegen";

    using(Html.BeginForm("CreateOrUpdateGroupBooking", "Main", FormMethod.Post, new { id = "groupBookingForm" }))
    {
        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 class="form-row">
            <div class="col-md">
                <div class="alert alert-danger collapse" role="alert" id="form-alert">

                </div>
            </div>
        </div>
            @* Hilfepläne und Mitarbeiter *@
            <div id="groupbooking-selection-container">
                @Html.Partial("GroupBookingSelectionPartial", Model)
            </div>

            <!-- Marker -->
            @if(Model.ShowMarker)
            {
                var markerCheckedValue = Model.SelectedServiceRecord?.ServiceRecordType == ServiceRecordTypeId.Content ? "checked" : string.Empty;

                <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="marker-cb" @markerCheckedValue />
                            <label class="custom-control-label" for="marker-cb">Marker</label>
                        </div>
                    </div>
                </div>
            }
            
            @* Trennstrich *@
            <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="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="start-date" name="Datum" class="form-control datetimepicker-input" data-target="#start-date-picker" data-toggle="datetimepicker" value="@startDate" />
                            <div class="input-group-append" data-target="#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="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="end-date" name="Enddatum" class="form-control datetimepicker-input" data-target="#end-date-picker" data-toggle="datetimepicker" value="@endDate" />
                                <div class="input-group-append" data-target="#end-date-picker" data-toggle="datetimepicker">
                                    <div class="input-group-text">
                                        <i class="fas fa-calendar-alt"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
            
             @* Von und Bis *@
            <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();
                        }
                    }
                }

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

                @* Bis *@
                <div class="col-md">
                    <div class="form-group my-2">
                        <div class="input-group date" id="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="end-time" name="Ende" class="form-control datetimepicker-input" data-target="#end-time-picker" value="@endTimeValue" />
                            <div class="input-group-append" data-target="#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="duration" name="Dauer" onchange="onDurationChange('start-time', 'end-time', 'start-date', 'end-date', 'duration', 'hours-minutes-dropdown-btn', 'start-date-picker', 'end-date-picker')" value="@durationValue">
                            @if(Model.IsZeiterfassungInStdMin)
                            {
                                <div class="input-group-append">
                                    <button id="hours-minutes-dropdown-btn" class="btn btn-outline-primary dropdown-toggle w-100" type="button" data-toggle="dropdown">
                                        @Model.SelectedDurationUnit
                                    </button>
                                    <div class="dropdown-menu w-100">
                                        <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="distance" name="Distanz" onchange="validateDistanceInput()" value="@distance">
                            </div>
                        </div>
                    </div>
                </div>
            }

            @* Textbausteine *@
            @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="textbausteine-button">Textbausteine</button>
                    </div>
                </div>
            }

            @* Dokumentation *@
            <div class="form-row">
                <div class="col-md mt-3">
                    @if(Model.NumberOfDokuTypes == 0)
                    {
                        <div class="form-group">
                            <label for="dokufeld">Dokumentation</label>
                            <textarea class="form-control" name="Dokumentation6" id="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="#doku_@i" id="doku_@i-tab" data-toggle="tab" role="tab" aria-controls="doku_@i" class="nav-link@(i == 0 ? " active" : string.Empty)" aria-selected="true">
                                        @currentDokuType.DisplayName
                                    </a>
                                </li>
                            }
                        </ul>
                        <div class="tab-content" id="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="doku_@i" role="tabpanel" aria-labelledby="doku_@i-tab">
                                    <textarea class="form-control doku-form-control" id="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">
            @if(TempData[TempDataConstants.IsInTransferModeKey] is bool isInTransferMode && isInTransferMode)
            {
                using(Html.BeginForm("ResetTransferMode", "Main", FormMethod.Post))
                {
                    <button type="submit" class="btn btn-primary" onclick="showSpinner()">Abbrechen</button>
                }
            }
            else
            {
                using(Html.BeginForm("ResetEditingMode", "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="create-button" onclick="submitGroupBookingForm()">@submitButtonText</button>
        </div>
    </div>
}