@page
@model ServiceHost.Areas.Client.Pages.Company.SubAccounts.IndexModel

@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	Layout = "Shared/_ClientLayout";
	ViewData["title"] = " - مدیریت کاربران";
	int index = 1;
}

@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/css/filter-search.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/card.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/datetimepicker.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">

	<link href="~/assetsclient/pages/SubAccounts/css/index.css?ver=85569" rel="stylesheet" />
}

<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/list-info-personnel.png" alt="" class="img-fluid me-2" style="width: 45px;" />
					<div>
						<h4 class="title d-flex align-items-center">مدیریت کاربران</h4>
						<div>@Model.WorkshopFullName</div>
					</div>
				</div>
				<div>
					<a asp-page="/Company/Index" class="back-btn" type="button">
						<span>بازگشت</span>
					</a>
				</div>
			</div>
		</div>
	</div>

@* 	<div class="container-fluid d-none d-md-block">
		<div class="row px-2">
			<div class="search-box card">
				<div class="row">
					<div class="col-12">
						<div class="row search-personal-section gap-2">

							<div class="col-3">
								<input type="text" name="employeeName" class="form-control employeeName" placeholder="نام و نام خانوادگی پرسنل ...">
							</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>

							<div class="btn-clear-filter btn-w-size text-nowrap d-flex align-items-center justify-content-center disable">
								<span>حذف جستجو</span>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div> *@

	<div class="container-fluid">

		<!-- Advance Search Box -->
		@* <div class="d-block d-md-none mb-1">
			<div class="row d-flex align-items-center justify-content-between">
				<div class="search-box bg-white p-2">
					<div class="d-flex justify-content-between text-center">
						<button class="btn-search w-100" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
							<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>
					</div>

				</div>
			</div>
		</div> *@
		<!-- End Advance Search Box -->
		
		<div class="row p-lg-2">

			
			<div class="wrapper p-0">
				<div class="subAccountHeaderList Rtable Rtable--collapse">
					<div class="Rtable-row Rtable-row--head align-items-center sticky-div">
						<div class="rightHeaderMenu px-3">
							<div class="Rtable-cell column-heading width1">نام نقش</div>
							<div class="Rtable-cell column-heading text-end width2">عملیات</div>
						</div>
						<div class="leftHeaderMenu px-2">
							<div class="Rtable-cell column-heading width3 d-flex align-items-center">
								@* <div class="select-all d-none d-md-flex align-items-center">
									<input type="checkbox" class="form-check-input checkAll" name="" id="checkAll2">
								</div> *@
								<label for="checkAll2">ردیف</label>
							</div>
							<div class="Rtable-cell column-heading width4">نام و نام خانوادگی</div>
							<div class="Rtable-cell column-heading width5">نام کابری</div>
							<div class="Rtable-cell column-heading width6 d-xl-block d-none">شماره تماس</div>
							<div class="Rtable-cell column-heading width7 text-center">وضعیت</div>
							<div class="Rtable-cell column-heading text-end pe-2 width8">عملیات</div>
						</div>
					</div>
				</div>
			</div>
			<div class="p-0 d-flex overflow-hidden rounded-3 my-2 d-none d-md-flex">
				
				@if (@Model.HasRole)
				{
					<div id="navbar-animmenu">
						<div class="createRoleBox align-items-center">
							<button type="button" class="btn-create text-nowrap d-flex align-items-center justify-content-center" onclick="addNewRole()">
								<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
									<circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"></circle>
									<path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"></path>
									<path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
								</svg>
								<span class="mx-1">افزودن نقش جدید</span>
							</button>
						</div>
						
						<div class="lineRole"></div>

						<ul class="show-dropdown main-navbar" id="loadDataRole">
							@* <li>
								<div class="d-flex alien-items-center justify-content-between">
									<a href="javascript:void(0);">مدیریت فیش حقوقی</a>
								</div>
							</li>
							<li>
								<div class="d-flex alien-items-center justify-content-between">
									<a href="javascript:void(0);">مدیریت دوربین</a>
								</div>
							</li>
							<li>
								<div class="d-flex alien-items-center justify-content-between">
									<a href="javascript:void(0);">مدیریت حسابداری</a>
								</div>
							</li>
							<li class="lastRole">
								<div class="d-flex alien-items-center justify-content-between">
									<a href="javascript:void(0);">مدیریت کاربران</a>
								</div>
							</li> *@
						</ul>
					</div>

					<div class="" id="accountList">
						<div class="card p-2">
							<div class="row align-items-center mb-1">
								<div class="col-12 col-md-8 col-lg-8">
									<div class="d-flex align-items-center">
										<button class="btn-create" onclick="openAddUserModal()">
											<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
												<circle cx="11" cy="11" r="8.25" stroke="white"/>
												<path d="M11 13.75L11 8.25" stroke="white" stroke-linecap="round"/>
												<path d="M13.75 11L8.25 11" stroke="white" stroke-linecap="round"/>
											</svg>
											افزودن کاربر
										</button>

										<div class="position-relative ms-2">
											<input type="text" class="form-control" id="search" placeholder="جستجو ...">
											<button type="button" id="clear-search" class="close-btn-search d-none">
												<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
													<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
												</svg>
											</button>
										</div>

										@* <div class="select-all d-flex d-md-none align-items-center">
											<input type="checkbox" class="form-check-input checkAll" name="" id="checkAll1">
											<label for="checkAll1">انتخاب همه</label>
										</div> *@
									</div>
								</div>
								@* d-xxl-flex *@
								<div class="d-none col-12 col-md-4 col-lg-4">
									لیست
									<span class="accountListHead">
										مدیریت
									</span>
								</div>
								<div class="col-1 col-lg-4 text-end">
									@* <div class="d-flex align-items-center justify-content-end my-1">
										<button class="btn-print-all" type="button" onclick="printAll()">
											<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
												<path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B"/>
												<path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B"/>
												<path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round"/>
												<path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round"/>
												<path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B"/>
											</svg>
											<span>پرینت گروهی</span>
										</button>
										<button class="btn-delete-all ms-2" type="button" onclick="printAll()">
											<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M8.70825 13.2891L8.70825 10.5391" stroke="#BF3737" stroke-linecap="round"/>
												<path d="M13.2917 13.2891L13.2917 10.5391" stroke="#BF3737" stroke-linecap="round"/>
												<path d="M2.75 5.96094H19.25V5.96094C18.122 5.96094 17.558 5.96094 17.1279 6.18191C16.7561 6.37284 16.4536 6.67541 16.2626 7.04713C16.0417 7.47732 16.0417 8.0413 16.0417 9.16927V13.8776C16.0417 15.7632 16.0417 16.706 15.4559 17.2918C14.8701 17.8776 13.9273 17.8776 12.0417 17.8776H9.95833C8.07271 17.8776 7.12991 17.8776 6.54412 17.2918C5.95833 16.706 5.95833 15.7632 5.95833 13.8776V9.16927C5.95833 8.0413 5.95833 7.47732 5.73737 7.04713C5.54643 6.67541 5.24386 6.37284 4.87214 6.18191C4.44195 5.96094 3.87797 5.96094 2.75 5.96094V5.96094Z" stroke="#BF3737" stroke-linecap="round"/>
												<path d="M8.70841 3.20595C8.70841 3.20595 9.16675 2.28906 11.0001 2.28906C12.8334 2.28906 13.2917 3.20573 13.2917 3.20573" stroke="#BF3737" stroke-linecap="round"/>
											</svg>
											<span>حذف گروهی</span>
										</button>
									</div> *@
								</div>
							</div>

							<div class="wrapper" style="margin-top: 4px;">
								<div class="subAccountList Rtable Rtable--collapse">
									<div class="w-100" id="subAccountListAjax">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				}
				else
				{
					<div class="card w-100">
						<div class="d-flex align-items-center">
							<button type="button" class="btn-create text-nowrap d-flex align-items-center justify-content-center" onclick="addNewRole()">
								<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
									<circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"></circle>
									<path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"></path>
									<path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
								</svg>
								<span class="mx-1">افزودن نقش جدید</span>
							</button>
						</div>
						<partial name="Company/Partial/_EmptySection"></partial>
					</div>
				}

			</div>
			
			<div class="d-flex d-md-none">
				<div class="wrapper bg-white my-1 list-box roleSubaccountListMobile">
					@if (@Model.HasRole)
					{
						
						<button type="button" class="btn-create text-nowrap d-flex align-items-center justify-content-center mt-1" onclick="addNewRole()">
							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
								<circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"></circle>
								<path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"></path>
								<path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
							</svg>
							<span class="mx-1">افزودن نقش جدید</span>
						</button>

						<div class="Rtable Rtable--collapse">
							@* <div class="Rtable-row Rtable-row--head d-flex align-items-center sticky">
								<div class="Rtable-cell column-heading width1">ردیف</div>
								<div class="Rtable-cell column-heading width2">نام و نام خانوادگی</div>
								<div class="Rtable-cell column-heading width3 d-none d-sm-block">شماره تماس</div>
								<div class="Rtable-cell column-heading width4 d-none d-md-block text-center">نقش</div>
								<div class="Rtable-cell column-heading width5 d-none d-md-block text-center">وضعیت</div>
								<div class="Rtable-cell column-heading width6 text-end">عملیات</div>
							</div> *@

							<div class="Rtable Rtable--collapse w-100" id="loadDataRoleAndSubAccountMobile">
							</div>

						</div>
					}
					else
					{
						<div class="card w-100">
							<div class="createRoleBox align-items-center">
								<button type="button" class="btn-create text-nowrap d-flex align-items-center justify-content-center" onclick="addNewRole()">
									<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 25" fill="none">
										<circle cx="12.5" cy="12.5" r="8.775" stroke="white" stroke-width="2" stroke-opacity="0.84"></circle>
										<path d="M12.5 8.3335L12.5 16.6668" stroke="white" stroke-width="2" stroke-linecap="round"></path>
										<path d="M16.6667 12.5L8.33342 12.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
									</svg>
									<span class="mx-1">افزودن نقش جدید</span>
								</button>
							</div>
							<partial name="Company/Partial/_EmptySection"></partial>
						</div>
					}
				</div>
			</div>
		</div>
	</div>
</div>



<!-- Modal From Bottom For Advance Search -->
@* <div class="modal fade" id="searchModal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="searchModalModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen">
		<div class="modal-content">

			<div class="modal-header d-block text-center pb-0">
				<div class="iphone-line mx-auto mb-3"></div>
				<h5 class="modal-title mb-4 text-start" id="searchModalLabel">جستجوی پیشرفته</h5>
			</div>

			<div class="modal-body pt-0 mb-3">
				<div class="container-fluid search-box">

					<div id="overlaySearchAdvance" class=""></div>

					<div class="row">
						<div class="col-12 text-start mb-4">
							<div><input type="text" name="employeeName" class="form-control employeeName" placeholder="نام پرسنل"></div>
						</div>
						<div class="col-12">
							<div class="btn-clear-filter py-2 text-center d-block w-100 mt-2">
								<span class="w-100">حذف جستجو</span>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="modal-footer justify-content-center align-items-center">
				<div class="container-fluid">
					<div class="row">
						<div class="col-6 text-end">
							<button type="button" class="btn-cancel w-100" data-bs-dismiss="modal">بستن</button>
						</div>
						<div class="col-6 text-start">
							<button type="submit" class="btn-search btn-search-click w-100">جستجو</button>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div> *@
<!-- End Modal From Bottom For Advance Search -->


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


@section Script {
	<script src="~/assetsclient/js/site.js?ver=@clientVersion"></script>
	<script src="~/AdminTheme/assets/sweet-alert/sweet-alert.min.js"></script>
	<script>
		var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
		var rolesAndSubAccountsListLoadDataAjax = `@Url.Page("./Index", "SubAccountsGroupedByRole")`;
		var removeRoleAjax = `@Url.Page("./Index", "RemoveRole")`;
		var removeSubAccountAjax = `@Url.Page("./Index", "RemoveAccount")`;

		var hasRole = @(Model.HasRole ? "true" : "false");
		var isRoleOne = @(Model.Roles.Count() == 1 ? "true" : "false");

		var changeSubAccountChangeStatusAjax = `@Url.Page("./Index", "SubAccountChangeStatus")`;
	</script>
	<script src="~/assetsclient/pages/SubAccounts/js/index.js?ver=@clientVersion"></script>
}