@model CompanyManagment.App.Contracts.Employee.CreateEmployeeByClient
@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	<link href="~/AssetsClient/css/select2.css?ver=@clientVersion" rel="stylesheet" />
	<link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">
	// <link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">

	<link href="~/assetsclient/pages/employees/css/createemployeemodal.css?ver=@clientVersion" rel="stylesheet" />
	var rollCallPath = Context.Request.Path.Value;
	<style>

	   @@media (max-width: 992px) {
			.desktopNotif {
				display: none !important;
			}

			.mobileNotif {
				display: flex !important;
			}
	   }
	   .clearfix {
		   padding-top: 0;
	   }

	   .no-select {
		   user-select: none;
	   }
	</style>
}

<div>
	<div class="position-relative" id="mobileDisplay">
		<div class="modal-header d-block text-center">
			<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
			<div class="lableCheckBreakTime">
				<div class="title">افزودن پرسنل</div>
			</div>
			<div class="d-flex gap-2 align-items-center overflow-auto navbarBtn" style="margin: 15px 0 0 0;">
				<div>
					<button class="stepStatus active" id="step-1">احراز هویت</button>
				</div>
				<div>
					<button class="stepStatus" id="step-2">مشخصات پرسنل</button>
				</div>
				<div>
					<button class="stepStatus @(Model.HasRollCallService ? "" : "disable")" id="step-3">گروه‌بندی حضور و غیاب</button>
				</div>
				<div>
					<button class="stepStatus @(Model.HasRollCallService ? "" : "disable")" id="step-4">آپلود عکس حضور و غیاب</button>
				</div>
				<div class="employeePart">
					<button class="stepStatus" id="step-5">حساب بانکی پرسنل</button>
				</div>
				<div class="employeePart">
					<button class="stepStatus" id="step-6">آپلود مدارک</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal-body clearfix no-select">
		<form role="form" method="post" name="create-form" id="create-form" autocomplete="off">
			<div id="multiStepModal">
				<div id="step1" class="step">
					<div class="container m-0 d-flex align-items-center justify-content-center" id="step-form1">
						<div class="row">
							<div class="col-12">
								<div>
									<partial name="Company/Employees/_Partials/IdentityInformationForm" model="@Model" />
								</div>
							</div>
						</div>
					</div>
					<div class="stepBtnHolder2">
						<div class="d-flex gap-2 justify-content-center stepBtnFirst">
							<button type="button" class="stepBtn disable" id="prevStep1">مرحله قبل</button>
							<button type="button" class="stepBtn checkNationalCodeAndBirthDate position-relative" id="nextStep1">
								<span>مرحله بعد</span>
								<div class="spinner-loading loading" id="IdentityLoading" style="display: none;">
									<span class="spinner-border spinner-border-sm text-white" role="status" aria-hidden="true"></span>
								</div>
							</button>
						</div>
						<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
							<button type="button" class="stepBtn cancelButton">انصراف</button>
							<button type="button" class="stepBtn disable">
								<span>ذخیره</span>
								<div class="spinner-loading loading" style="display: none;">
									<span class="spinner-border spinner-border-sm text-white" role="status" aria-hidden="true"></span>
								</div>
							</button>
						</div>
					</div>
				</div>

				<div id="step2" class="step">
					<div class="container m-0" id="step-form2">
						<div class="row">
							<div class="col-12">
								<div>
									<partial name="Company/Employees/_Partials/CreateEmployeeForm" model="@Model"/>
								</div>
							</div>
						</div>
					</div>
					<div class="stepBtnHolder2">
						<div class="d-flex gap-2 justify-content-center stepBtnFirst">
							<button type="button" class="stepBtn disable" id="prevStep2">مرحله قبل</button>
							<button type="button" class="stepBtn" id="nextStep2">مرحله بعد</button>
						</div>
						<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
							<button type="button" class="stepBtn cancelButton">انصراف</button>
							<button type="button" class="stepBtn disable SaveFullData" id="submitStep2">
								<span>ذخیره</span>
								<div class="spinner-loading loading" style="display: none;">
									<span class="spinner-border spinner-border-sm text-white" role="status" aria-hidden="true"></span>
								</div>
							</button>
						</div>
					</div>
				</div>

				<div id="step3" class="step w-100 overflow-y-auto">
					<div class="container p-0 m-0 @(Model.HasRollCallService ? "" : "disable")" id="step-form3">
						<div class="row">
							<div class="col-12">
								<div id="workshopEmployeeSetting">
									<partial name="Company/Employees/_Partials/WorkshopSettingGrouping" model="@Model"/>
								</div>
							</div>
						</div>
					</div>
					<div class="stepBtnHolder2">
						<div class="stepBtnFirst d-flex gap-2 justify-content-center">
							<button type="button" class="stepBtn" id="prevStep3">مرحله قبل</button>
							<button type="button" class="stepBtn" id="nextStep3">مرحله بعد</button>
						</div>
						<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
							<button type="button" class="stepBtn cancelButton">انصراف</button>
							<button type="button" class="stepBtn saveData SaveFullData" id="saveFullData3">
								<span>ذخیره</span>
								<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>
							</button>
						</div>
					</div>
				</div>

				<div id="step4" class="step m-auto">
					<div class="container p-0 m-0 @(Model.HasRollCallService ? "" : "disable")" id="step-form4">
						<partial name="Company/Employees/_Partials/ModalUploadImagePersonnel" model="@Model"/>
					</div>
					<div class="stepBtnHolder3">
						<div class="stepBtnFirst d-flex gap-2 justify-content-center">
							<button type="button" class="stepBtn" id="prevStep4">مرحله قبل</button>
							<button type="button" class="stepBtn" id="nextStep4">مرحله بعد</button>
						</div>
						<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
							<button type="button" class="stepBtn cancelButton">انصراف</button>
							<button id="save4" type="button" class="stepBtn saveData SaveFullData">
								<span>ذخیره</span>
								<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>
							</button>
						</div>
					</div>
				</div>

				@if (rollCallPath != "/Client/Company/RollCall/EmployeeUploadPicture")
				{
						<div id="step5" class="step w-100 overflow-y-auto">
							<div class="container p-0 m-0" id="step-form5">
								<div class="row">
									<div class="col-12">
										<div id="createBank">
											<partial name="Company/Employees/_Partials/CreateBankInfoModal" model="@Model"/>
										</div>
									</div>
								</div>
							</div>
							<div class="stepBtnHolder2">
								<div class="stepBtnFirst d-flex gap-2 justify-content-center">
									<button type="button" class="stepBtn" id="prevStep5">مرحله قبل</button>
									<button type="button" class="stepBtn" id="nextStep5">مرحله بعد</button>
								</div>
								<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
									<button type="button" class="stepBtn cancelButton">انصراف</button>
									<button type="button" class="stepBtn saveData SaveFullData">
										<span>ذخیره</span>
										<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>
									</button>
								</div>
							</div>
						</div>

						<div id="step6" class="step w-100 overflow-y-auto">
							<div class="container p-0 m-0" id="step-form6">
								<div class="row">
									<div class="col-12">
										<div id="uploadDocument">
											<partial name="Company/Employees/_Partials/ModalUploadDocument" model="@Model"/>
										</div>
									</div>
								</div>
							</div>
							<div class="stepBtnHolder2">
								<div class="stepBtnFirst d-flex gap-2 justify-content-center">
									<button type="button" class="stepBtn" id="prevStep6">مرحله قبل</button>
									<button type="button" class="stepBtn disable" id="nextStep6">مرحله بعد</button>
								</div>
								<div class="w-100 d-flex gap-2 mt-2 justify-content-center">
									<button type="button" class="stepBtn cancelButton">انصراف</button>
									<button type="button" class="stepBtn saveData SaveFullData">
										<span>ذخیره</span>
										<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>
									</button>
								</div>
							</div>
						</div>
				}

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


@* Camera Modal *@
<div class="md-modal md-effect-12">
	<div class="md-content" style="width: 100%;">
		<div class="panel panel-default">
			<div class="panel-body" style="width: 360px;height: 360px;text-align: center;margin: auto;">
				@*<div id="my_camera" style="margin: auto; display: none;"></div>*@
				@* <div id="video" style="margin: auto;"></div> *@
				@* <div id="video" style="margin: auto; width: 100%; height: 100%;"></div> *@
				<div style="display: block; position: relative; width: 360px; height: 360px;">
					@*<div id="video" style="position: absolute; top: 0px; right: 0; margin: auto; width: 100%; height: 100%;"></div>*@
					<video id="videoElement" autoplay></video>
					<img src="~/AssetsClient/images/face.png" style="position: absolute; top: 0; right: 0; width: 360px; transform: scale(1.006); border-radius: 10px;" />
				</div>

				<div style="margin: 10px 0 0 0; text-align: center;">
					<input type="button" class="btn btn-success take_snapshot1" style="display: none;" value="گرفتن عکس اول" onclick="take_snapshot1()" />
					<input type="button" class="btn btn-success take_snapshot2" style="display: none;" value="گرفتن عکس دوم" onclick="take_snapshot2()" />
				</div>
			</div>
		</div>

		<button class="camera_close">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="35" height="35">
				<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
			</svg>
		</button>
	</div>
</div>

<div class="md-overlay"></div>


@* <script src="~/assetsadminnew/libs/sweetalert2/sweetalert2.all.min.js"></script> *@
<script src="~/AdminTheme/assets/sweet-alert/sweet-alert.min.js"></script>
<script src="~/assetsadminnew/libs/sweetalert2/sweetalert2.all.min.js"></script>
<script src="~/assetsclient/libs/cleave/cleave.min.js"></script>
<script src="~/assetsclient/js/site.js?ver=@clientVersion"></script>
<script src="~/assetsclient/js/jquery-mask-v1.13.4.js"></script>

<script>
	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();

	var saveEmployeeURL = `@Url.Page("/Company/Employees/EmployeeList", "CreateEmployee")`;
	var saveUrlRollCall = `@Url.Page("/Company/RollCall/EmployeeUploadPicture", "CreateEmployee")`;

	// list of roll call group
	var workshopSettingListAjax = `@Url.Page("/Company/Employees/EmployeeList", "WorkshopSettingList")`;
	var workshopSettingListAjaxRollCall = `@Url.Page("/Company/RollCall/EmployeeUploadPicture", "WorkshopSettingList")`;

	// @* var workshopSettingEmployeeSelecting = @Html.Raw(Json.Serialize(Model.EmployeeSettings)); *@
</script>

<script src="~/assetsclient/pages/employees/js/createemployeemodal.js?ver=@clientVersion"></script>