Backend-Api/ServiceHost/Areas/Client/Pages/Company/CustomizeCheckout/Grouping.cshtml

@page
@using _0_Framework.Application
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model ServiceHost.Areas.Client.Pages.Company.CustomizeCheckout.GroupingModel
@inject _0_Framework.Application.IAuthHelper AuthHelper

@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	ViewData["Title"] = " - " + "تنظیمات گروه‌بندی و حقوق پرسنل";
	int index = 1;
	int i = 0;
}

@section Styles {
	<link href="~/AssetsClient/css/table-style.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/table-responsive.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/operation-button.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/assetsclient/pages/CustomizeCheckout/css/group.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/select2.css?ver=@clientVersion" rel="stylesheet" />

	<style>
		button.btn-setting {
			border: 1px solid transparent;
			width: 30px;
			height: 30px;
			border-radius: 5px;
			padding: 3px 1px;
			color: #64748b;
			margin: auto 0 auto 1px;
			background-color: #fff;
			background-color: rgba(100, 116, 139, 0.20);
			box-shadow: none;
			transition: ease .2s;
		}

		button.btn-setting:hover {
			color: #ffffff;
			background-color: rgba(100, 116, 139, 0.40);
		}

		button.btn-add {

			border: 1px solid transparent;
			width: 30px;
			height: 30px;
			border-radius: 5px;
			padding: 3px 1px;
			color: #84cc16;
			margin: auto 0 auto 1px;
			background-color: #ffffff;
			background-color: rgba(132, 204, 22, 0.20);
			box-shadow: none;
			transition: ease .2s;
		}

		button.btn-add:hover {
			color: #ffffff;
			background-color: rgba(132, 204, 22, 0.40);
		}

		.greenBtn {
			background: linear-gradient(90deg, #63d141 0%, #8adb30 100%);
			color: #fff !important;
			padding: 5px;
			border-radius: 8px;
			border: none;
			transition: all ease-in .3s;
			width: 215px;
			transition:all ease-in .3s
		}

		@@media (max-width: 768px) {
			.greenBtn {
				width: 100%;
			}
		}
	</style>
}

<div class="content-container">

	<div class="container-fluid">
		<div class="row p-2">
			<div class="col p-0 m-0 d-flex align-items-center justify-content-between">
				<div class="col d-flex align-items-center justify-content-start">
					<img src="~/AssetsClient/images/icons/group-setting.png" alt="" class="img-fluid me-2" style="width: 45px;" />
					<div>
						<h4 class="title d-flex align-items-center">تنظیمات گروه‌بندی و حقوق پرسنل</h4>
						<div class="title d-flex align-items-center">@Model.WorkshopFullName</div>
					</div>
				</div>
				<div>
					<a asp-page="/Index" class="back-btn" type="button">
						<span>بازگشت</span>
					</a>
				</div>
			</div>
		</div>
	</div>

	<!-- List Items -->
	<div class="container-fluid">
		<div class="row px-lg-1">
			
			<div class="col-12" Permission="@SubAccountPermissionHelper.CustomizeCheckoutSettingsPermissionCode">
				<a href="#showmodal=@Url.Page("../CustomizeCheckout/Index", "ModalSettingRollCall")" class="click loadingButton position-relative greenBtn d-block">
					<div class="d-flex align-items-center justify-content-center p-1">
						<div class="text-center">
							<div class="card-title">تنظیمات محاسبه فیش حقوقی</div>
						</div>
					</div>
					<div class="spinner-loading loading" style="display: none;">
						<span class="spinner-border spinner-border-sm loading text-white" role="status" aria-hidden="true"></span>
					</div>
				</a>
			</div>
			
			<div class="col-12 p-0 mb-2 d-none d-md-block px-2 mt-2">
				<div class="search-box card border-0">
					<div class="d-flex align-items-center gap-2">

						<div class="col-3 col-xl-2">
							<select class="form-select select2Option" aria-label="انتخاب پرسنل ..." id="employeeSelect">
								<option value="0">انتخاب پرسنل ...</option>
								@foreach (var itemEmployee in Model.RollCallEmployeeList)
								{
									<option value="@itemEmployee.EmployeeId">@itemEmployee.EmployeeFullName</option>
								}
							</select>
						</div>

						<button class="btn-search btn-w-size btn-search-click text-nowrap d-flex align-items-center justify-content-center" id="searchBtn" type="submit">
							<span>جستجو</span>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
								<circle cx="11" cy="11" r="6" stroke="white" />
								<path d="M20 20L17 17" stroke="white" stroke-linecap="round" />
							</svg>
						</button>
						<a asp-page="./Grouping" class="btn-clear-filter btn-w-size text-nowrap d-flex align-items-center justify-content-center disable" id="filterRemove" style="padding: 7px 10px;">
							<span>حذف جستجو</span>
						</a>

					</div>
				</div>
			</div>


			<div class="col-12 col-md-6 col-lg-5 p-0">
				<div class="wrapper list-box w-100 table-rollcall-group1">
					<div class="Rtable Rtable--5cols Rtable--collapse">

						<div class="Rtable-row Rtable-row--head align-items-center d-none d-md-flex mb-2 px-2">
							<div class="Rtable-cell column-heading width1">ردیف</div>
							<div class="Rtable-cell column-heading width2">نام گروه</div>
							<div class="Rtable-cell column-heading text-center width3">ساعت کاری</div>
							<div Permission="@SubAccountPermissionHelper.CustomizeCheckoutSettingsSalaryPermissionCode" class="Rtable-cell column-heading text-center width4">حقوق</div>
							<div class="Rtable-cell column-heading width5 text-end">عملیات</div>
						</div>

						<div class="w-100" id="ajaxDataMain"></div>
					</div>
				</div>
			</div>
			<div class="col-12 col-md-6 col-lg-7 p-0 d-none d-md-flex">
				<div class="wrapper list-box w-100 table-rollcall-group2">
					<div class="Rtable Rtable--5cols Rtable--collapse">

						<div class="Rtable-row Rtable-row--head align-items-center d-flex mb-2 px-3">
							<div class="Rtable-cell column-heading width1">ردیف</div>
							<div class="Rtable-cell column-heading width2">نام پرسنل</div>
							<div class="Rtable-cell column-heading text-center width3">ساعت کاری</div>
							<div Permission="@SubAccountPermissionHelper.CustomizeCheckoutSettingsSalaryPermissionCode" class="Rtable-cell column-heading width4">حقوق</div>
							<div class="Rtable-cell column-heading text-center width5">مرخصی مجاز</div>
							<div class="Rtable-cell column-heading text-end width6">عملیات</div>
						</div>

						<div class="w-100 overflow-auto" id="loadAccountItems"></div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div id="MainModal" class="modal fade personalListModal" aria-labelledby="myModalLabel" data-bs-backdrop="static" aria-hidden="true" tabindex="-1" style="display: none;">
	<div class="modal-dialog modal-md modal-dialog-centered">
		<div class="modal-content" id="ModalContent">
		</div>
	</div>
</div>

@section Script {
	<script src="~/assetsclient/js/site.js?ver=@clientVersion"></script>
	<script src="~/assetsadminnew/libs/sweetalert2/sweetalert2.all.min.js"></script>
	<script>
		var salaryPermission = @(AuthHelper.GetPermissions().Contains(@SubAccountPermissionHelper.CustomizeCheckoutSettingsSalaryPermissionCode) ? "true" : "false");

		$(document).ready(function () {
			

			$('.loadingButton').on('click', function () {
				var button = $(this);
				var loadingDiv = button.find('.loading');
				loadingDiv.show();
			});
		});

		var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
		var loadWorkshopSettingsDataAjax = `@Url.Page("./Grouping", "WorkshopSettingsDataAjax")`;
		var loadEmployeesGroupAjax = `@Url.Page("./Grouping", "EmployeesGroupAjax")`;
		var loadEmployeesGroupSettingsByEmployeeIdAjax = `@Url.Page("./Grouping", "EmployeesGroupSettingsByEmployeeId")`;
		var removeGroupAjax = `@Url.Page("./Grouping", "DeleteGroup")`;
		var removeEmployeeFromGroupAjax = `@Url.Page("./Grouping", "RemoveEmployee")`;
		var workshopSettingId = Number((@Model.RollCallWorkshopSettings.Id));
		var isSettingChangedGlobal = false;



		$(document).ready(function () {
			$(".select2Option").select2({
				language: "fa",
				dir: "rtl",
				templateResult: function (data, container) {
					if (data.element) {
						$(container).addClass($(data.element).attr("class"));
					}
					return data.text;
				}
			});
			
			$(document).on('click', ".openAction", function () {
				var id = $(this).data('index');

				if (window.matchMedia('(max-width: 767px)').matches) {
					$(this).next().find(".operations-btns").slideToggle(500);
					$(".operations-btns").not($(this).next().find(".operations-btns")).slideUp(500);
				}

				loadEmployeeAjax(id);
				$(`.openAction`).removeClass('active');
				$(this).addClass('active');
			});

			$('.btn-search-click').click(function () {

				var filterEmployeeId = 0;

				if (window.matchMedia('(max-width: 767px)').matches) {
					filterEmployeeId = $('#employeeSelectMobile').val();
				} else {
					filterEmployeeId = $('#employeeSelect').val();
				}

				if (filterEmployeeId !== "0") {
					$('.btn-clear-filter').removeClass('disable');
				} else {
					$('.btn-clear-filter').addClass('disable');
				}

				$.ajax({
					async: false,
					contentType: 'charset=utf-8',
					dataType: 'json',
					type: 'GET',
					url: loadEmployeesGroupSettingsByEmployeeIdAjax,
					data: { employeeId: Number(filterEmployeeId) },
					headers: { "RequestVerificationToken": `${antiForgeryToken}` },
					success: function (response) {
						var responseData = response.data;

						if (responseData == null || responseData.mainGroup === true) {
							$('.alert-msg').show();
							$('.alert-msg p').text("این پرسنل درهیچ گروهی یافت نشد.");
							setTimeout(function() {
									$('.alert-msg').hide();
									$('.alert-msg p').text('');
								},
								3000);
						} else {
							$(`[data-index="${responseData.id}"]`).click();

							$('.itemResultEmployee').each(function () {
								var employeeId = $(this).data('employee-id');
								if (employeeId !== Number(filterEmployeeId)) {
									$(this).remove();
								}
							});

							updateIndexesGrouping();
						}
					},
					failure: function (response) {
						console.log(5, response);
					}
				});
			});

			loadDataAjax();
		});

		function loadDataAjax() {
			var html = "";
			var index = 0;
			$.ajax({
				async: false,
				contentType: 'charset=utf-8',
				dataType: 'json',
				type: 'GET',
				url: loadWorkshopSettingsDataAjax,
				headers: { "RequestVerificationToken": `${antiForgeryToken}` },
				success: function (response) {
					var responseData = response.data;

					if (responseData.groupSettings.length > 0) {
						responseData.groupSettings.forEach(function (item, indexItem) {
							index = index + 1;

							html += `
								<div class="p-2 rounded-3 d-flex align-items-center justify-content-between w-100 btnPosition openAction ${indexItem === 0 ? 'active' : ''}" data-index="${item.id}">
									<div class="width1">
										<span class="d-none" id="groupSettingsId">${item.id}</span>
										<span class="row-index1">${index}</span>
									</div>

									<div class="title-group1 width2">
										<p class="m-0 d-block d-md-none">نام گروه:</p>
										<p class="m-0">${item.groupName}</p>
									</div>
									<div class="title-group1 text-center d-none d-md-block width3">`;

							if (item.workshopShiftStatus === 0) {
								item.rollCallWorkshopShifts.forEach(function (itemShifts) {
									html += `
										<p class="m-0 time-set-title">
											<span style="width: 46px;display: inline-block;">${itemShifts.startTime}</span>
											الی
											<span style="width: 46px;display: inline-block;">${itemShifts.endTime}</span>
										</p>
									`;
								});
							} else if (item.workshopShiftStatus === 1) {
								html += `<p class="m-0 time-set-title">`;
								if (item.irregularShift.workshopIrregularShifts === 1) {
									html += `<span>12-24</span>`;
								} else if (item.irregularShift.workshopIrregularShifts === 2) {
									html += `<span>24-24</span>`;
								} else if (item.irregularShift.workshopIrregularShifts === 3) {
									html += `<span>12-36</span>`;
								} else if (item.irregularShift.workshopIrregularShifts === 4) {
									html += `<span>24-48</span>`;
								}

								html += `</p>`;
							} else {
								item.customizeRotatingShiftsViewModels.forEach(function (itemRotatingShifts) {
									html += `
                                <p class="m-0 time-set-title">
                                    <span style="width: 46px;display: inline-block;">${itemRotatingShifts.startTime}</span>
                                    الی
                                    <span style="width: 46px;display: inline-block;">${itemRotatingShifts.endTime}</span>
                                </p>
						    `;
								});
							}

							html += `</div>
							${salaryPermission
								? `<div class="title-group1 text-center d-none d-md-block width4">
										<p class="m-0 d-block d-md-none text-center">حقوق</p>
										<p class="m-0">
											${item.salary.toLocaleString() !== 0 ? item.salary.toLocaleString() + ` ریال` : `-`}
										</p>
									</div>`
								: ``}
									
									<div class="d-flex align-items-center justify-content-end gap-1 width5">
										<button type="button" class="btn-setting" onclick="showModalGroupSetting(${item.id})">
											<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
											  <path stroke-linecap="round" stroke="#475569" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
											  <path stroke-linecap="round" stroke="#475569" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
											</svg>
										</button>
									</div>
								</div>

								 <div class="operation-div w-100 d-block d-md-none" style="margin: -5px 0 0 0;">
									<div class="operations-btns px-2" id="loadEmployeeItemsMobile_${item.id}">
									</div>
								</div>
							`;

							if (indexItem === 0) {
								loadEmployeeAjax(item.id);
							}
						});

						$('#ajaxDataMain').html(html);
					} else {
						var htmlEmpty = `<div class="text-center bg-white card py-5 d-flex align-items-center justify-content-center">
							<div class="">
								<img src="/assetsclient/images/empty.png" alt="" class="img-fluid" />
								<h5>اطلاعاتی وجود ندارد.</h5>
							</div>
						</div>`;

						$('#ajaxDataMain').html(htmlEmpty);
						$('#loadAccountItems').html(htmlEmpty);
					}
				},
				failure: function (response) {
					console.log(5, response);
				}
			});
		}

		function loadEmployeeAjax(groupSettingId) {
			var htmlEmployee = "";
			$(`#loadEmployeeItemsMobile_${groupSettingId}`).html('');

			var indexEmployee = 1;
			$.ajax({
				async: false,
				contentType: 'charset=utf-8',
				dataType: 'json',
				type: 'GET',
				url: loadEmployeesGroupAjax,
				data: { 'groupId': groupSettingId },
				headers: { "RequestVerificationToken": `${antiForgeryToken}` },
				success: function (response) {
					var responseDataEmployee = response.data;

					if (response.success) {
						if (responseDataEmployee.length > 0) {
							htmlEmployee += `
									<div>
										<div class="col-12 col-md-6 col-lg-3 mt-2 mb-2">
											<input type="text" class="form-control" id="searchEmployee" placeholder="جستجو ..." />
										</div>
									</div>`;

							responseDataEmployee.forEach(function (itemEmployee) {
								if (itemEmployee.isSettingChanged === true) {
									isSettingChangedGlobal = true;
								}

								htmlEmployee += `<div></div>
																	<div class="my-1 Rtable-row align-items-center position-relative itemResultEmployee" data-employee-id="${itemEmployee.employeeId}">
																		<div class="Rtable-cell width1 widthMobile1">
																			<div class="Rtable-cell--content">
																				<span class="d-flex justify-content-center row-index2">
																					${indexEmployee++}
																				</span>
																			</div>
																		</div>
																		<div class="Rtable-cell width2 widthMobile2">
																			<div class="Rtable-cell--heading d-none">نام پرسنل:</div>
																			<div class="Rtable-cell--content">
																				<div class="d-flex d-md-none">نام پرسنل:</div>
																				<div class="itemEmployeeName">${itemEmployee.name} </div>
																			</div>
																		</div>

																		<div class="Rtable-cell width3 widthMobile2 text-center d-none d-md-block">
																			<div class="Rtable-cell--heading d-none">ساعت کاری:</div>
																			<div class="Rtable-cell--content d-flex text-center">
																				<div class="d-flex d-md-none mx-1">ساعت کاری: </div>
																				<div class="w-100">`;
								if (itemEmployee.workshopShiftStatus === 0) {
									itemEmployee.rollCallWorkshopShifts.forEach(function (itemEmployeeShifts) {
										htmlEmployee += `
											<p class="m-0 time-set-title">
												<span style="width: 46px;display: inline-block;text-align: center;">${itemEmployeeShifts.startTime}</span>
												الی
												<span style="width: 46px;display: inline-block;text-align: center;">${itemEmployeeShifts.endTime}</span>
											</p>`;
									});
								} else if (itemEmployee.workshopShiftStatus === 1) {
									htmlEmployee += `<p class="m-0 time-set-title">`;
									if (itemEmployee.irregularShift.workshopIrregularShifts === 1) {
										htmlEmployee += `<span>12-24</span>`;
									} else if (itemEmployee.irregularShift.workshopIrregularShifts === 2) {
										htmlEmployee += `<span>24-24</span>`;
									} else if (itemEmployee.irregularShift.workshopIrregularShifts === 3) {
										htmlEmployee += `<span>12-36</span>`;
									} else if (itemEmployee.irregularShift.workshopIrregularShifts === 4) {
										htmlEmployee += `<span>24-48</span>`;
									}

									htmlEmployee += `</p>`;
								} else {
									itemEmployee.customizeRotatingShiftsViewModels.forEach(function (itemRotatingShifts) {
										htmlEmployee += `
			                                <p class="m-0 time-set-title">
			                                    <span style="width: 46px;display: inline-block;">${itemRotatingShifts.startTime}</span>
			                                    الی
			                                    <span style="width: 46px;display: inline-block;">${itemRotatingShifts.endTime}</span>
			                                </p>`;
									});
								}

								htmlEmployee += `</div></div>
																		</div>
									${salaryPermission
									? `<div class="Rtable-cell width4 d-md-block d-none">
											<div class="Rtable-cell--heading">حقوق</div>
											<div class="Rtable-cell--content">
												${itemEmployee.salary.toLocaleString() !== 0 ? itemEmployee.salary.toLocaleString() + ` ریال` : `-`}
											</div>
										</div>`
									: ``}
																		

																		<div class="Rtable-cell width5 d-md-block d-none">
																			<div class="Rtable-cell--heading">مرخصی مجاز</div>
																			<div class="Rtable-cell--content text-center">
																				${itemEmployee.leavePermittedDays}
																			</div>
																		</div>

																		<div class="d-flex align-items-center justify-content-end gap-1 width6 widthMobile3">
																			 <button type="button" class="btn-setting" onclick="showModalGroupEmployeeSetting(${itemEmployee.id}, ${itemEmployee.employeeId})">
																				 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
																				   <path stroke-linecap="round" stroke="#475569" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
																				   <path stroke-linecap="round" stroke="#475569" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
																				 </svg>
																			 </button>
																		</div>
																	</div>`;
							});

							$('#loadAccountItems').html(htmlEmployee);
							$(`#loadEmployeeItemsMobile_${groupSettingId}`).append(htmlEmployee);

						} else {
							isSettingChangedGlobal = false;
							var htmlEmpty = `<div class="text-center bg-white card py-5 d-flex align-items-center justify-content-center">
								<div class="">
									<img src="/assetsclient/images/empty.png" alt="" class="img-fluid" />
									<h5>اطلاعاتی وجود ندارد.</h5>
								</div>
							</div>`;

							$('#loadAccountItems').html(htmlEmpty);
							$(`#loadEmployeeItemsMobile_${groupSettingId}`).html(htmlEmpty);
						}
					}
				},
				failure: function (response) {
					console.log(5, response);
				}
			});
		}

		$(document).on('keyup', '#searchEmployee', function () {
			var value = $(this).val().toLowerCase();
			var indexEmployee = 1;
			$('.itemResultEmployee').filter(function () {
				var employeeFName = $(this).find('.itemEmployeeName').text().toLowerCase();

				if (employeeFName.includes(value)) {
					$(this).show();
					$(this).find('.row-index2').text(indexEmployee++);
				} else {
					$(this).hide();
				}
			});
		});

		function showModalGroupSetting(groupId) {
			window.location.href = `#showmodal=/Client/Company/CustomizeCheckout/Grouping?groupId=${groupId}&handler=GroupingSetting`;
		}

		function showModalGroupEmployeeSetting(id, employeeIds) {
			if (!Array.isArray(employeeIds)) {
				employeeIds = [employeeIds];
			}
			var employeeIdListStr = employeeIds.map(employeeId => `employeeId=${employeeId}`).join('&');

			window.location.href = `#showmodal=/Client/Company/CustomizeCheckout/Grouping?customizeEmployeeId=${id}&${employeeIdListStr}&handler=GroupingEmployeeSetting`;
		}

		function updateIndexesGrouping() {
			let indexGrouping = 0;

			$(`.itemResultEmployee .row-index2`).each(function () {
				$(this).text(indexGrouping++);
			});
		}
	</script>
	@* <script src="~/assetsclient/pages/CustomizeCheckout/js/Grouping.js?ver=@clientVersion"></script> *@
}