BeWoPlaner/BeWoPlanerMobil/Views/Main/GroupBookingPartial.cshtml

@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">
	$(document).ready(function() {
		const groupBookingHoursMinutesDropdownButton = $("#gb-hours-minutes-dropdown-btn");

		groupBookingHoursMinutesDropdownButton.on("click", function() {
			groupBookingHoursMinutesDropdownButton.data("text", groupBookingHoursMinutesDropdownButton.text().replaceAll(/\s/g, ""));
		});

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

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

			const buttonText = $(this).text();
			groupBookingHoursMinutesDropdownButton.text(buttonText);

			window.setInputFilter();

			window.updateDurationUnit("gb", (buttonText === "Stunden" ? "h" : "m"));

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

			calcDuration("gb", true, false, false);
		});

		toggleGroupBookingForm();

		window.calcPrependWidth();
	});

	function resetGroupBookingForm() {
		showSpinner();
		$("#reset-group-booking-form-form").submit();
	}

	function addEmployeeToGroupBooking() {
		const oidString = getGroupBookingEmployeeOids();

		window.updateEmployeeOids("gb", oidString);

		$.get("@Url.Action("AddEmployeesToGroupBooking")", { pEmployeeOids: oidString }).done(function(numberOfSelectedEmployees) {
			$("#selected-employees-count-badge").text(numberOfSelectedEmployees);

			$("#create-button").prop("disabled", numberOfSelectedEmployees === "0" ? true : false);
		});
	}

	function getGroupBookingEmployeeOids() {
		var selectedEmployees = [];
		var oidString = "";

		$("#gb-employee-selection-popup input:checked").each(function() {
			const oid = $(this).val();

			selectedEmployees.push(oid);
		});

		for(let i = 0; i < selectedEmployees.length; i++) {
			oidString += selectedEmployees[i];

			if(i < selectedEmployees.length - 1) {
				oidString += ",";
			}
		}

		return oidString;
	}
</script>

@using(Html.BeginForm("ResetGroupBookingForm", "Main", FormMethod.Post, new { Id = "reset-group-booking-form-form" }))
{

}

<div class="row">
    <div class="col col-12">
        @if(Model != null)
        {
            @Html.Partial("GroupBookingFormPartial", Model);
        }
    </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 modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold">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="#gb-supportconcepts" data-toggle="tab" role="tab">Hilfepläne</a>
                    <a class="nav-item nav-link" href="#gb-groups" data-toggle="tab" role="tab">Gruppen</a>
                </nav>
                <div class="tab-content" id="gb-sc-cb-rel-tab-content">
                    @Html.Partial("GroupBookingScCbRelList", Model)
                </div>
            </div>
        </div>
    </div>
</div>

@* ----- (Gruppenbuchung) Mitarbeiterauswahl Popup ----- *@
<div class="modal" tabindex="-1" role="dialog" id="gb-employee-selection-popup">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold">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>
                <div id="gb-employee-selection-list">
	                @foreach(var employee in Model.EmployeesForGroupAndMultiBooking)
	                {
		                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>
</div>