BeWoPlaner/BeWoPlanerMobil/Views/Main/GroupBookingPartial.cshtml

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

<script>
    $(document).ready(function () {
        $("#hours-minutes-dropdown-btn").on("click", function() {
            $("#hours-minutes-dropdown-btn").data("text", $("#hours-minutes-dropdown-btn").text().replaceAll(/\s/g, ""));
        });

        $(".hours-minutes-link").on("click", function () {
            var previousText = $("#hours-minutes-dropdown-btn").data("text");
            var currentText = $(this).text().replaceAll(/\s/g, "");

            if(previousText === currentText) {
                return;
            }

            var buttonText = $(this).text();
            $("#hours-minutes-dropdown-btn").text(buttonText);

            setInputFilter('duration', 'distance', 'hours-minutes-dropdown-btn');

            $.get('@Url.Action("ToggleDurationUnit")', { isInHoursMode: buttonText === "Stunden" });

            calculateDuration(true, 'start-time', 'end-time', 'duration', 'hours-minutes-dropdown-btn', 'start-date-picker', 'end-date-picker', false, false);
        });
    });
</script>

<div class="row">
    <div class="col col-12">
        @if(Model != null)
        {
            var submitButtonText = Model.IsInEditingMode ? "Speichern" : "Anlegen";

            using(Html.BeginForm("CreateOrUpdateGroupBooking", "Main", FormMethod.Post, new { onreset = "serviceDescriptionSelectOnReset('category-select', 'leistung-select', 'textmodule-container', 'tree')", id = "groupBookingForm" }))
            {
                var startDate = Model.SelectedServiceRecord?.Start?.ToShortDateString() ?? DateTime.Today.ToShortDateString();
                var endDate = Model.SelectedServiceRecord?.End?.ToShortDateString() ?? DateTime.Today.ToShortDateString();

                var startTime = Model.SelectedServiceRecord?.Start?.ToShortTimeString() ?? string.Empty;
                var endTime = Model.SelectedServiceRecord?.End?.ToShortTimeString() ?? string.Empty;

                var duration = Model.SelectedServiceRecord?.GroupRoundedDuration?.ToString() ?? string.Empty;
                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>

            <div class="form-row">
                <div class="col-md">
                    <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#group-booking-popup" id="support-concepts-and-groups-button">Hilfepläne und Gruppen hinzufügen</button>
                </div>
            </div>

            <!-- Hilfeplanauswahl -->
            <div class="form-row">
                <div class="col-md">
                    <div class="form-group my-1">
                        <div class="list-group" id="selected-cb2sc-list">
                            @foreach(var selectedCb2ScRelation in Model.GroupBookingSelectionObject.SelectedRelations)
                            {
                                <div class="list-group-item" id="relation-item-@selectedCb2ScRelation.Value">
                                    <div class="row">
                                        <div class="col">
                                            <span>
                                                @selectedCb2ScRelation.Text1
                                                <br />
                                                <span class="@selectedCb2ScRelation.TextColor">
                                                    @selectedCb2ScRelation.Text2
                                                </span>
                                            </span>
                                        </div>
                                        <div class="col-auto my-auto">
                                            <button type="button" class="btn btn-primary" onclick="removeCb2ScRelation(@selectedCb2ScRelation.Value)">
                                                <span class="fas fa-times-circle"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mitarbeiter -->
            <div class="form-row">
                <div class="col-md">
                    <div class="form-group mb-1">
                        <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#group-booking-employee-selection-popup" id="employees-button">
                            Mitarbeiter hinzufügen <span class="badge badge-light text-primary" id="selected-employees-count-badge">@Model.GroupBookingSelectedEmployees.Count</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Kategorie -->
            <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 prepend-input-group-text">
                                    Kategorie
                                </div>
                            </div>
                            @Html.DropDownListFor(m => m.SelectedServiceCategoryOid, Model.ServiceCategoryListItems, new { onchange = "loadServiceDescriptions('category-select', 'leistung-select', 'textmodule-container', 'tree')", @class = "custom-select", Id = "category-select" })
                        </div>
                    </div>
                </div>
            </div>

            <!-- Leistung -->
            <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 prepend-input-group-text">
                                    Leistung
                                </div>
                            </div>
                            <select class="custom-select" id="leistung-select" name="ServiceDescription" onchange="setServiceDescription('leistung-select')"></select>
                        </div>
                    </div>
                </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>

            <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();
                    }

                    if(Model.SetStartTimeToEndTimeAfterSave && !Model.IsInEditingMode)
                    {
                        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">
                                <div class="input-group-text prepend-input-group-text">
                                    Dauer
                                </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>

            @if(Model.ShowDistanceField)
            {
                <!-- Gefahrene Kilomter -->
                <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>
            }

            @if(AbstractModel.HasRightToSeeTextModules)
            {
                <!-- Textbausteine -->
                <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>
        }
    </div>
</div>

<!-- (Gruppenbuchung) Hilfeplan- und Gruppenauswahl Popup -->
<div class="modal" data-backdrop="static" tabindex="-1" role="dialog" id="group-booking-popup">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Gruppen und Hilfepläne für Gruppenbuchung</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <nav class="nav nav-pills nav-fill">
                    <a class="nav-item nav-link active" href="#group-booking-supportconcepts" data-toggle="tab" role="tab">Hilfepläne</a>
                    <a class="nav-item nav-link" href="#group-booking-groups" data-toggle="tab" role="tab">Gruppen</a>
                </nav>
                <div class="tab-content">
                    <div class="tab-pane show active" role="tabpanel" id="group-booking-supportconcepts">
                        <ul class="list-group">
                            @foreach (var cb2Sc in Model.SupportConceptListObjectsForGroupBooking)
                            {
                                <li class="list-group-item">
                                    @{
                                        var timeSpanColorClass2 = cb2Sc.IsAboutToExpire ? "text-bewo-is-about-to-expire" : cb2Sc.ExpiresInThreeMonthsOrLess ? "text-bewo-expires-in-three-months" : "text-dark";

                                        var wasSuccessful = long.TryParse(cb2Sc.CostBearer2SupportConceptOid, out var cb2ScOid);

                                        var checkedValue = wasSuccessful ? Model.SelectedConceptCostBearerRelations.Any(a => a.CostBearer2SupportConceptOid.Equals(cb2ScOid)) : wasSuccessful;
                                    }

                                    <div class="custom-control custom-checkbox custom-control-inline">
                                        <input type="checkbox"
                                               @{ if (checkedValue) { @Html.Raw("checked=\"checked\"")  ; } }
                                               class="custom-control-input" id="cb2sc-checkbox-@cb2Sc.CostBearer2SupportConceptOid" onchange="addCostBearer2SupportConceptsToGroupBooking()" name="cb2sc-checkbox-@cb2Sc.CostBearer2SupportConceptOid" value="@cb2Sc.CostBearer2SupportConceptOid">
                                        <label for="cb2sc-checkbox-@cb2Sc.CostBearer2SupportConceptOid" class="custom-control-label">
                                            <span class="justify-content-between mb-1 text-dark text-left">
                                                @cb2Sc.NameAndDateOfBirth
                                            </span>
                                            <br />
                                            <span class="mb-1 text-left @timeSpanColorClass2">
                                                @cb2Sc.SupportConceptTimeSpan
                                            </span>
                                        </label>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                    <div class="tab-pane show" role="tabpanel" id="group-booking-groups">
                        <ul class="list-group">
                            @foreach (var group in Model.GroupOfPeopleListItems)
                            {
                                <li class="list-group-item">
                                    @{
                                        long groupOid;
                                        var wasSuccessful = long.TryParse(group.Value, out groupOid);

                                        var shouldBeChecked = wasSuccessful ? Model.GroupBookingSelectedGroupOfPeopleOids.Contains(groupOid) : wasSuccessful;

                                        var attribute = shouldBeChecked ? "checked=\"checked\"" : string.Empty;
                                    }
                                    <div class="custom-control custom-checkbox custom-control-inline">
                                        <input type="checkbox" @attribute class="custom-control-input" id="group-checkbox-@group.Value" value="@group.Value" onchange="addCostBearer2SupportConceptsToGroupBooking()" />
                                        <label for="group-checkbox-@group.Value" class="custom-control-label">
                                            @group.Text
                                        </label>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- (Gruppenbuchung) Mitarbeiterauswahl Popup -->
<div class="modal" tabindex="-1" role="dialog" id="group-booking-employee-selection-popup">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mitarbeiter hinzufügen</h5>
                <button type="button" class="close" data-dismiss="modal" onclick="resetSearch('gb-employee-search-input', 'employee-text')">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input class="form-control w-100" type="text" id="gb-employee-search-input" placeholder="Suchen..." oninput="listSearchOnChange('gb-employee-search-input', 'employee-text', 'employee-name-label')" />
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" onclick="resetSearch('gb-employee-search-input', 'employee-text')">
                            <span class="fas fa-times-circle"></span>
                        </button>
                    </div>
                </div>

                @foreach (var employee in Model.Employees)
                {
                    var checkedValue = Model.GroupBookingSelectedEmployees.Contains(employee) ? "checked=\"checked\"" : string.Empty;

                    <div class="custom-control custom-checkbox employee-text">
                        <input type="checkbox" @checkedValue class="custom-control-input" id="group-employee-@employee.EmployeeOid" onchange="addEmployeeToGroupBooking()" value="@employee.EmployeeOid" />
                        <label for="group-employee-@employee.EmployeeOid" class="custom-control-label employee-name-label">@employee.DetailDescription</label>
                    </div>
                }
            </div>
        </div>
    </div>
</div>