BeWoPlaner/BeWoPlanerMobil/Views/Main/Main.cshtml

@using BeWoPlanerMobil.Models;
@using BeWoPlanerMobil.Util;

@model MainModel
@{
    ViewBag.Title = "BeWoPlaner Mobil";

    if(TempData[MobileUtils.TempDataLoginStateKey] is BeWoLoginState loginState && loginState.Message != null)
    {
        var loginStateMessage = new HtmlString(loginState.Message.Replace("\n", "<br/>").Replace("\"", "\\"));

        <script type="text/javascript">
            showMessagePopupWithHtml("Warnung", "@loginStateMessage");
        </script>
    }

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

<script type="text/javascript">
    function validatePasswordStrength() {
        try {
            (new MoKPasswordSecurity("pw-strength-feedback")).validatePassword($("#new-password").val());
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function submitChangePasswordForm() {
        try {
            showSpinner();
            var form = $('#change-password-form');

            var isValid = true;

            $.each($(".pw-ch-in-container"),
                function (index, item) {
                    var input = $(item).find("input");
                    var feedback = $(item).find(".pw-chng-inv-fdb");

                    if (isEmptyOrSpaces(input.val())) {
                        feedback.addClass("d-block");
                        isValid = false;
                    } else {
                        feedback.removeClass("was-validated");
                        feedback.removeClass("d-block");
                    }

                    feedback.addClass("was-validated");
                });

            if (true === isValid) {
                form.submit();
            } else {
                hideSpinner();
            }
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function getIsZeiterfassungseinheitInMinutes() {
        return "@Model.EinheitZeiterfassung" === "0";
    }

    $(function() {
        $("#start-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#end-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#start-time-picker").datetimepicker({
            locale: "de",
            format: "LT"
        });

        if ($("#end-time-picker").length !== 0) {
            $("#end-time-picker").datetimepicker({
                locale: "de",
                format: "LT"
            });
        }

        $("#time-frame-start-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#time-frame-end-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        if("@Model.IsInMultiBookingMode".toLocaleLowerCase() === "true") {
            $("#mb-start-date-picker").datetimepicker({
                locale: "de",
                format: "L"
            });

            $("#mb-end-date-picker").datetimepicker({
                locale: "de",
                format: "L"
            });

            $("#mb-start-time-picker").datetimepicker({
                locale: "de",
                format: "LT"
            });

            if ($("#mb-end-time-picker").length !== 0) {
                $("#mb-end-time-picker").datetimepicker({
                    locale: "de",
                    format: "LT"
                });
            }
        }
    });

    $(document).ready(function () {
        try {
            @if(TempData[TempDataConstants.PwChErrKey] is string passwordChangeError)
            {
                <text>
                    $("#password-change-error-alert").html("@passwordChangeError");
                    $("#password-change-error-alert").removeClass("d-none");
                    $("#password-changing-popup").modal("show");

                    $(".pw-prepend").ready(calcChPwPrepend);
                </text>
            }

            var supportConceptOid = parseInt($("#CostBearer2SupportConceptOid").val());

            var isSupportConceptSelected = supportConceptOid !== -1;

            $("#employeesDropDown, #single-booking-dropdown-employees-menu, #category-select, #leistung-select, " +
                "#start-date, #end-date, #start-time, #end-time, #duration, " +
                "#distance, #textbausteine-button, #goals-button, textarea, #reset-button, " +
                "#create-button, #statistics-button, #timeFrameSelect, #hours-minutes-dropdown-btn, #marker-cb, #betrag").prop("disabled", (isSupportConceptSelected ? false : true));

            if("@Model.IsInGroupBookingMode".toLowerCase() === "true") {
                var hasSelectedSupportConcepts = "@Model.SelectedConceptCostBearerRelations.Any()".toLowerCase() === "true";

                $("#employees-button, #single-booking-dropdown-employees-menu, #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, #betrag").prop("disabled", (hasSelectedSupportConcepts ? false : true));
            }

            $("#fehlerdetail-textarea").prop("disabled", false);

            if ("@Model.IsInMultiBookingMode".toLowerCase() === "true") {
                var isMultiBookingFormDisabled = "@Model.MultiBookingSelectedConceptCostBearerRelations.Any()".toLowerCase() === "false";

                toggleMultiBookingForm(isMultiBookingFormDisabled);
            }
            
            initializeTimeInputs();

            initializeSignatureImagePopup();

            @if(TempData[TempDataConstants.ShowPwChPopupKey] is string passwordWarning && !string.IsNullOrEmpty(passwordWarning))
            {
                <text>
                    showMessagePopupWithHtml("Achtung!", "@Html.Raw(passwordWarning)");
                </text>
            }

            @if (Model != null && Model.IsInEditingMode)
            {
                <text>
                    $("#start-time-picker").trigger("change");
                </text>
            }

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

            @if(Model.IsInGroupBookingMode)
            {
                <text>
                    $("#create-button").prop("disabled", @Model.GroupBookingSelectedEmployees.Count === 0 ? true : false);
                </text>
            }

            @{
                var shouldShowSignaturePopup = TempData[TempDataConstants.ShowSignatureSuggestionPopup]?.GetType() == typeof(bool) && (bool) TempData[TempDataConstants.ShowSignatureSuggestionPopup];

                if(Model.ServiceRecordOid > 0)
                {
                    if(shouldShowSignaturePopup && Model.ShowSignature)
                    {
                        <text>
                            showMessagePopupWithCallback("Erfolgreich gespeichert", "Möchten Sie den Eintrag unterschreiben lassen?", function() {
                                initializeSignature(@Model.ServiceRecordOid);
                            }, false);
                        </text>
                    }
                }
            }
        } catch(error) {
            showErrorPopup(error);
        }
    });

    function initializeTimeInputs() {
        try {
            var previousStartTime = "";
            $("#start-time-picker").on("change.datetimepicker",
                () => {
                    // Von
                    var startTimeValue = $("#start-time").val();

                    if(previousStartTime.length === 5 && startTimeValue.length === 0) {
                        $("#duration").val("");
                        return;
                    }

                    if(startTimeValue.length === 5 || startTimeValue.length === 0) {
                        previousStartTime = startTimeValue;
                    }

                    calculateDuration(false, 'start-time', 'end-time', 'duration', 'hours-minutes-dropdown-btn', 'start-date-picker', 'end-date-picker', true, false);
                }
            );
            var previousEndTime = "";
            $("#end-time-picker").on("change.datetimepicker",
                () => {
                    // Bis
                    var endTimeValue = $("#end-time").val();

                    if(previousEndTime.length === 5 && endTimeValue.length === 0) {
                        $("#duration").val("");
                        return;
                    }

                    if(endTimeValue.length === 5 || endTimeValue.length === 0) {
                        previousEndTime = endTimeValue;
                    }

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

            $("#start-date-picker").on("change.datetimepicker", () => {
                calculateDuration(false, 'start-time', 'end-time', 'duration', 'hours-minutes-dropdown-btn', 'start-date-picker', 'end-date-picker', true, false);
            });

            if($("#end-time-picker").length !== 0) {
                $("#end-date-picker").on("change.datetimepicker",
                    () => {
                        calculateDuration(false, 'start-time', 'end-time', 'duration', 'hours-minutes-dropdown-btn', 'start-date-picker', 'end-date-picker', false, true);
                    });
            }

            var previousMultiBookingStartTime = "";
            $("#mb-start-time-picker").on("change.datetimepicker",
                () => {
                    // Von
                    var startTimeValue = $("#mb-start-time").val();

                    if (previousMultiBookingStartTime.length === 5 && startTimeValue.length === 0) {
                        $("#mb-duration").val("");
                        return;
                    }

                    if (startTimeValue.length === 5 || startTimeValue.length === 0) {
                        previousMultiBookingStartTime = startTimeValue;
                    }

                    calculateDuration(false, 'mb-start-time', 'mb-end-time', 'mb-duration', 'mb-hours-minutes-dropdown-btn', 'mb-start-date-picker', 'mb-end-date-picker', true, false);
                }
            );
            var previousMultiBookingEndTime = "";
            $("#mb-end-time-picker").on("change.datetimepicker",
                () => {
                    // Bis
                    var endTimeValue = $("#mb-end-time").val();

                    if (previousMultiBookingEndTime.length === 5 && endTimeValue.length === 0) {
                        $("#mb-duration").val("");
                        return;
                    }

                    if (endTimeValue.length === 5 || endTimeValue.length === 0) {
                        previousMultiBookingEndTime = endTimeValue;
                    }

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

            $("#mb-start-date-picker").on("change.datetimepicker",
                () => {
                    calculateDuration(false, 'mb-start-time', 'mb-end-time', 'mb-duration', 'mb-hours-minutes-dropdown-btn', 'mb-start-date-picker', 'mb-end-date-picker', true, false);
                });

            if($("#mb-end-time-picker").length !== 0) {
                $("#mb-end-date-picker").on("change.datetimepicker",
                    () => {
                        calculateDuration(false, 'mb-start-time', 'mb-end-time', 'mb-duration', 'mb-hours-minutes-dropdown-btn', 'mb-start-date-picker', 'mb-end-date-picker', false, true);
                    });
            }
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function initializeSignatureImagePopup() {
        try {
            $("#signature-img-popup").on("hidden.bs.modal",
                function() {
                    $("#signature-img").attr("src", null);
                    $("#signature-text").html("");
                });
        } catch(error) {
            showErrorPopup(error);
        }
    }

    function setInputFilter(durationId, distanceId, hoursMinutesDropdownBtnId) {
        $(`#${durationId}`).inputFilter(function (value) {
            var result = /^\d*$/;
            var dropdownButton = $(`#${hoursMinutesDropdownBtnId}`);

            if(dropdownButton.length && dropdownButton.text() === "Stunden" || getIsZeiterfassungseinheitInMinutes() === false) {
                result = /^\d*[.,]?\d*$/;
            }

            return result.test(value);
        });

        $(`#${distanceId}`).inputFilter(function(value) {
            return /^\d*[.,]?\d*$/.test(value);
        });

        $(`#betrag`).inputFilter(function (value) {
            return /^\d*([.,]?\d{0,2})?$/.test(value);
        });
    }

    (function($) {
        $.fn.inputFilter = function(inputFilter) {
            return this.on("input keydown keyup mouseup select mousedown contextmenu drop", function() {
                if(inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        }
    }(jQuery));

    $(window).resize(function() {
        resizeCanvas("#sketch-pad", "#canvas-row");
    });

    function getSetServiceRecordEmployeeUrl() {
        return "@Url.Action("SetServiceRecordEmployee")";
    }

    function getSetServiceDescriptionUrl() {
        return "@Url.Action("SetServiceDescription")";
    }

    function getNumberOfDokutypes() {
        return @Model.NumberOfDokuTypes;
    }

    function getRedirectLink() {
        return '@Url.Action("Index", "Login")';
    }

    function getLoadStatisticsUrl() {
        return '@Url.Action("LoadStatistics")';
    }

    function getSelectedRecordInformationUrlWithOid() {
        return '@Url.Action("GetSelectedRecordInformationWithOid")';
    }

    function getSetSelectedSignatureUrl() {
        return '@Url.Action("SaveUnterschrift")';
    }

    function getDeleteServiceRecordUrl() {
        return '@Url.Action("DeleteServiceRecord")';
    }

    function getLoadStatisticsUrl() {
        return '@Url.Action("LoadStatistics")';
    }

    function getIsDocumentationMandatory() {
        return @(Model != null && Model.IsServiceRecordNoticeMandatory ? "true" : "false");
    }

    function getSelectedGoalOids() {
        return @Html.Raw(Json.Encode(Model.SelectedGoals.Select(s => s.ValueListEntryOid.Value).ToArray()));
    }

    function getIsInEditingMode() {
        var boolString = "@Model.IsInEditingMode";

        return boolString.toLowerCase() === "true";
    }

    function getIsInGroupBookingMode() {
        var boolString = "@Model.IsInGroupBookingMode";

        return boolString.toLowerCase() === "true";
    }

    function getServiceDescriptionToEdit() {
        if (getIsInEditingMode()) {
            var floatString = "@Model.SelectedServiceRecordsServiceDescriptionOid";

            return parseFloat(floatString);
        } else {
            return 0;
        }
    }

    function getValidateServiceRecordDeletionUrl() {
        return "@Url.Action("ValidateServiceRecordDeletion")";
    }

    function getGetSignatureImageUrl() {
        return "@Url.Action("GetSignatureImage")";
    }
</script>

<div class="container mt-3" id="checkbox-container" style="max-width: 1200px !important;">
    <div class="row">
        @if(AbstractModel.IsAllowedToSeeSupportConceptFilter)
        {
            <div class="col-md">
                @using(Html.BeginForm("SetSupportConceptFilter", "Main", FormMethod.Post))
                {
                    @Html.DropDownListFor(m => m.SelectedSupportConceptFilter, Model.SupportConceptFilter, new { onchange = "submitForm(this)", @class = "custom-select" })
                }
            </div>
        }

        <div class="col-md pt-1">
            @using(Html.BeginForm("SetShowExpiredSupportConcepts", "Main", FormMethod.Post))
            {
                <div class="custom-control custom-switch custom-control-inline">
                    @Html.CheckBoxFor(m => m.ShowExpiredSupportConcepts, new { onchange = "submitForm(this)", @class = "custom-control-input" })
                    @Html.LabelFor(m => m.ShowExpiredSupportConcepts, new { @class = "custom-control-label" })
                </div>
            }
        </div>

        @if(AbstractModel.HasRightForGroupBookings)
        {
            <div class="col-md pt-1">
                @using(Html.BeginForm("SetGroupBookingMode", "Main", FormMethod.Post))
                {
                    <div class="custom-control custom-switch custom-control-inline">
                        @Html.CheckBoxFor(m => m.IsInGroupBookingMode, new { onchange = "submitForm(this)", @class = "custom-control-input" })
                        @Html.LabelFor(m => m.IsInGroupBookingMode, new { @class = "custom-control-label" })
                    </div>
                }
            </div>
        }

        @if(AbstractModel.HasRightForMultiBooking)
        {
            <div class="col-md pt-1">
                @using(Html.BeginForm("SetMultiBookingMode", "Main", FormMethod.Post))
                {
                    <div class="custom-control custom-switch custom-control-inline">
                        @Html.CheckBoxFor(m => m.IsInMultiBookingMode, new { onchange = "submitForm(this)", @class = "custom-control-input" })
                        @Html.LabelFor(m => m.IsInMultiBookingMode, new { @class = "custom-control-label" })
                    </div>
                }
            </div>
        }
    </div>
</div>

@* ----- Einzelbuchung ----- *@
<div class="container-fluid mb-3" id="main-container" style="max-width: 1200px !important;">
    @if(!Model.IsInGroupBookingMode && !Model.IsInMultiBookingMode)
    {
        @Html.Partial("SingleBookingPartial", Model)
    }
</div>

@* ----- Gruppenbuchung ----- *@
<div class="container mb-3" style="max-width: 1200px !important;">
    @if(Model.IsInGroupBookingMode && !Model.IsInMultiBookingMode)
    {
        <div id="group-booking-container">
            @Html.Partial("GroupBookingPartial", Model)
        </div>
    }
</div>

@* ----- Mehrfachbuchung ----- *@
<div class="container mb-3" style="max-width: 1200px !important;">
    @if(Model.IsInMultiBookingMode && !Model.IsInGroupBookingMode)
    {
        @Html.Partial("MultiBookingPartial", Model);
    }
</div>

@* ----- Textbausteine-Popup ----- *@
<div class="modal" tabindex="-1" role="dialog" id="textbausteine-popup">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title font-weight-bold">Textbausteine</h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="tree">
                    @{ Html.RenderAction("LoadUpToDateTextModules"); }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Schlie&szlig;en</button>
            </div>
        </div>
    </div>
</div>

@* ----- Unterschriften-Layover ----- *@
<div class="container-fluid d-none mb-3" id="signature-container" style="max-width: 1200px !important;">
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <h4 class="d-inline">Unterschrift</h4>
                <button type="button" class="btn btn-primary float-right" id="cancel-signature-btn">
                    <span class="fas fa-times-circle"></span>
                </button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <div class="alert alert-info d-none" role="alert" id="signature-alert">

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Hilfeplan:
            </div>
            <div class="col" id="signature-support-concept">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Kategorie:
            </div>
            <div class="col" id="signature-service-description">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Leistung:
            </div>
            <div class="col" id="signature-service-category">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Mitarbeiter:
            </div>
            <div class="col" id="signature-employee">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary" id="signature-date-time-left">
                Datum / Uhrzeit:
            </div>
            <div class="col" id="signature-date-time">

            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-primary float-right" id="save-signature-btn">Speichern</button>
                <button type="button" class="btn btn-secondary float-right mr-3" id="clear-canvas-btn">Neu</button>
            </div>
        </div>
        <div class="row mt-3" id="canvas-row">
            <div class="canvas-container" id="canvas-container">
                <canvas id="sketch-pad" width="500" height="200" class="bg-white" style="border: 1px solid #343A40;"></canvas>
            </div>
        </div>

        <input type="hidden" id="service-record-oid-holder" />
    </div>
</div>

@* ----- Löschformular ----- *@
@using(Html.BeginForm("DeleteServiceRecord", "Main", FormMethod.Post, new { id = "deletion-form" }))
{
    <input type="hidden" name="serviceRecordOidHolder" id="oidHolder" />
}

@* ----- Statistik-Popup ----- *@
<div id="statistics-popup" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title font-weight-bold" id="statistics-header"></h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div id="period-statistics-container">

                    </div>
                    <canvas class="mt-3" id="statistic-canvas" scaleheight="65%" scalewidth="65%"></canvas>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Zurück</button>
            </div>
        </div>
    </div>
</div>

@* ----- Unterschriftenanzeige-Popup ----- *@
<div id="signature-img-popup" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold" id="signature-text"></h5>
                <button type="button" class="close" data-dismiss="modal" onclick="hideSignature()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img id="signature-img" alt="Unterschrift" class="img-fluid mx-auto d-block" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="hideSignature()">Zurück</button>
            </div>
        </div>
    </div>
</div>

@* ----- Bewertungspopup für Ziele ----- *@
@if(AbstractModel.HasRightToRateGoals)
{
    <div id="goal-rating-popup" class="modal" tabindex="-1" role="dialog" style="z-index: 9999 !important">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">Bewertungsskala</h5>
                    <button class="close" type="button" data-dismiss="modal" onclick="hideGoalRatingPopup()">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="goal-ratings-container">
                        @Html.Partial("GoalRatingPopupContentPartial", Model)
                    </ul>
                    <input type="hidden" id="goal-to-rate-oid" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="hideGoalRatingPopup()">Zurück</button>
                </div>
            </div>
        </div>
    </div>
}

@{
    var hasRatingTypes = Model?.HasAnyRatingTypes ?? false;
}
<input type="hidden" id="has-any-rating-types" value="@hasRatingTypes" />

@* ----- Passwort ändern Popup ----- *@
@using(Html.BeginForm("ChangePassword", "Main", FormMethod.Post, new { id = "change-password-form" }))
{
    <div class="modal" id="password-changing-popup" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">Passwort &auml;ndern</h5>
                    <button type="button" class="close" data-dismiss="modal" onclick="$('#password-change-error-alert').html(''); $('#password-change-error-alert').modal('hide');">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger d-none" rolw="alert" id="password-change-error-alert">

                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3 pw-ch-in-container">
                                <div class="input-group-prepend">
                                    <div class="input-group-text pw-prepend">Altes Passwort</div>
                                </div>
                                <input type="password" class="form-control" name="old-password" required />
                                <div class="invalid-feedback pw-chng-inv-fdb">
                                    Dieses Feld darf nicht leer sein.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3 pw-ch-in-container">
                                <div class="input-group-prepend">
                                    <div class="input-group-text pw-prepend">Neues Passwort</div>
                                </div>
                                <input type="password" class="form-control" name="new-password" id="new-password" onkeyup="validatePasswordStrength()" required />
                                <div class="invalid-feedback pw-chng-inv-fdb">
                                    Dieses Feld darf nicht leer sein.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3 pw-ch-in-container">
                                <div class="input-group-prepend">
                                    <span class="input-group-text pw-prepend">Passwort bestätigen</span>
                                </div>
                                <input type="password" class="form-control" name="confirm-new-password" id="confirm-new-password" required />
                                <div class="invalid-feedback pw-chng-inv-fdb">
                                    Dieses Feld darf nicht leer sein.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <p id="pw-strength-feedback" class="d-block"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="submitChangePasswordForm()">OK</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>
}


@* ----- Validierungspopup ----- *@
@{
    var validationMessage = TempData[MobileUtils.TempDataServiceRecordValidationKey] as ValidationResult;
    var formId = TempData[MobileUtils.TempDataFormIdKey];

    if(validationMessage != null)
    {
        <div class="modal modal-open" data-backdrop="static" tabindex="-1" role="dialog" id="service-record-validation-message-modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold" id="staticBackdropLabel">Warnung</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Html.Raw(validationMessage.Message)
                    </div>
                    <div class="modal-footer">
                        @if(validationMessage.KannTrotzdemGespeichertWerden)
                        {
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="showSpinner(); $('#@formId').submit();">OK</button>
                        }
                        else
                        {
                            <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                        }

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("#service-record-validation-message-modal").modal("show");
        </script>
    }
    else if(formId != null)
    {
        <text>
            <script type="text/javascript">
                showSpinner();
                $("#@formId").submit();
            </script>
        </text>
    }
}

@using(Html.BeginForm("ValidateServiceRecord", "Main", FormMethod.Post, new { id = "service-record-validation-form" }))
{
    <input type="hidden" name="@FormCollectionConstants.DateKey" id="srv-date" />
    <input type="hidden" name="@FormCollectionConstants.EndKey" id="srv-end" />
    <input type="hidden" name="@FormCollectionConstants.StartKey" id="srv-start" />
    <input type="hidden" name="@FormCollectionConstants.EndDateKey" id="srv-end-date" />
    <input type="hidden" name="@FormCollectionConstants.Dokumentation1Key" id="srv-doku1" />
    <input type="hidden" name="@FormCollectionConstants.Dokumentation2Key" id="srv-doku2" />
    <input type="hidden" name="@FormCollectionConstants.Dokumentation3Key" id="srv-doku3" />
    <input type="hidden" name="@FormCollectionConstants.Dokumentation4Key" id="srv-doku4" />
    <input type="hidden" name="@FormCollectionConstants.Dokumentation5Key" id="srv-doku5" />
    <input type="hidden" name="@FormCollectionConstants.DistanceKey" id="srv-distance" />
    <input type="hidden" name="@FormCollectionConstants.FormIdKey" id="srv-form-id" />
    <input type="hidden" name="@FormCollectionConstants.MarkerKey" id="srv-marker" />
    <input type="hidden" name="@FormCollectionConstants.ServiceDescriptionKey" id="srv-service-description" />
    <input type="hidden" name="@FormCollectionConstants.DurationKey" id="srv-duration" />
    <input type="hidden" name="@FormCollectionConstants.BetragKey" id="srv-betrag" />
}


@*----- Ziele/Maßnahmen-Popup ----- *@
<div class="modal" tabindex="-1" role="dialog" id="goal-popup">
    <div class="modal-dialog modal-dialog-scrollable h-100" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title font-weight-bold">Ziele und Ma&szlig;nahmen</h6>
                <button type="button" class="close" data-dismiss="modal" onclick="resetGoalTreeSearch()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="container-fluid px-0">
                    <div class="input-group mb-3">
                        <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="goalTreeSearchOnChangeV2()" id="goal-search-input" />
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" onclick="resetGoalTreeSearch()">
                                <span class="fas fa-times-circle"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="goals-tree">
                    @Html.Partial("GoalTreePartial", Model)
                </div>
            </div>
            <div class="modal-footer">
                <div class="clearfix w-100">
                    <div class="custom-control custom-checkbox float-left mr-3">
                        <input type="checkbox" class="custom-control-input" id="checkAllGoalsButton" onchange="toggleAllGoalsSelection(this)" />
                        <label for="checkAllGoalsButton" class="custom-control-label">
                            Alle Ziele
                        </label>
                    </div>
                    <button type="button" class="btn btn-primary float-left mr-2" onclick="showAllGoals()">
                        Alle auf
                    </button>
                    <button type="button" class="btn btn-primary float-left" onclick="hideAllGoals()">
                        Alle zu
                    </button>
                    <button type="button" class="btn btn-primary float-right" data-dismiss="modal">Schlie&szlig;en</button>
                </div>
            </div>
        </div>
    </div>
</div>