@using _0_Framework.Domain.CustomizeCheckoutShared.Enums
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model CompanyManagment.App.Contracts.RollCall.AccountAndSettingViewModel
@{
	string adminVersion = _0_Framework.Application.Version.AdminVersion;
	<link rel="stylesheet" href="~/AssetsClient/css/rollcall-package.css">
	<link href="~/assetsclient/pages/rollcall/css/modalcreateaccountsetting.css?ver=@adminVersion" rel="stylesheet" />
}

<form role="form" method="post" name="create-form" id="create-form" autocomplete="off">

	<input type="hidden" asp-for="@Model.HasCamera" />
	<input type="hidden" asp-for="@Model.HasGroupWorkshop" />

	<div class="modal-content">
		<div class="modal-header d-block text-center mb-2">
			<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
			<div class="d-flex justify-content-center align-items-center" style="margin: 15px 0 0 0;">
				<div class="step-progress">
					<h5 class="d-flex justify-content-center align-items-center" id="step-1">1</h5>
					<p>ساخت اکانت جدید</p>
				</div>

				<div class="line"></div>

				<div class="step-progress">
					<h5 class="d-flex justify-content-center align-items-center not-step" id="step-2">2</h5>
					<p>ساعات کاری مجموعه</p>
				</div>
			</div>
		</div>

		<div class="modal-body">
			<div class="container p-0 m-0" id="step-form1">
				<div class="row">
					<div class="col-12">
						<div class="form-group text-start my-2">
							<label for="username">حساب کاربری</label>
							<div class="position-relative">
								<input type="text" class="form-control" id="username" asp-for="CreateCameraAccount.Username" placeholder="" style="direction: ltr;" />

								<div class="position-absolute top-0 start-0 m-1 bg-transparent">
									<div class="spinner-border spinner-border-sm m-1 d-none" id="loadingSpinner" role="status">
										<span class="visually-hidden">Loading...</span>
									</div>
									<svg id="successSvg" class="d-none" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="14" cy="14" r="10.5" stroke="#65A30D" stroke-width="1.5" />
										<path d="M9.33342 14L12.8334 17.5L18.6667 10.5" stroke="#65A30D" stroke-width="1.5" stroke-linecap="round" />
									</svg>
									<svg id="errorSvg" class="d-none" width="28" height="28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
										<path stroke="#ef4444" 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>
								</div>
							</div>
						</div>
					</div>
					<div class="col-12">
						<div class="form-group text-start my-2">
							<label for="signupInputPassword">گذرواژه</label>
							<div class="position-relative">
								<input asp-for="CreateCameraAccount.Password" type="password" class="form-control mb-1" id="signupInputPassword" aria-describedby="passwordHelp" placeholder="رمز جدید" style="direction: ltr;" />

								<button type="button" class="position-absolute top-0 start-0 m-1 bg-transparent" onclick="passFunction()">
									<svg class="eyeShow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M15.58 11.9999C15.58 13.9799 13.98 15.5799 12 15.5799C10.02 15.5799 8.42004 13.9799 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C13.98 8.41992 15.58 10.0199 15.58 11.9999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
									<svg class="eyeClose" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M14.53 9.46992L9.47004 14.5299C8.82004 13.8799 8.42004 12.9899 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C12.99 8.41992 13.88 8.81992 14.53 9.46992Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M17.82 5.76998C16.07 4.44998 14.07 3.72998 12 3.72998C8.46997 3.72998 5.17997 5.80998 2.88997 9.40998C1.98997 10.82 1.98997 13.19 2.88997 14.6C3.67997 15.84 4.59997 16.91 5.59997 17.77" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M8.42004 19.5299C9.56004 20.0099 10.77 20.2699 12 20.2699C15.53 20.2699 18.82 18.1899 21.11 14.5899C22.01 13.1799 22.01 10.8099 21.11 9.39993C20.78 8.87993 20.42 8.38993 20.05 7.92993" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M15.5099 12.7C15.2499 14.11 14.0999 15.26 12.6899 15.52" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M9.47 14.53L2 22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M22 2L14.53 9.47" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</button>


								<div class="input-icon-right peek-password-button" data-peek-password="signupInputPassword">
									<span class="peek-password-icon icon-visibility d-none"></span>
								</div>

							</div>

							<div class="password-strength-group" data-strength="">
								<div id="password-strength-meter" class="password-strength-meter" style="direction: ltr;">
									<div class="meter-block"></div>
									<div class="meter-block"></div>
									<div class="meter-block"></div>
									<div class="meter-block"></div>
								</div>

								<div class="password-strength-message">
									<div class="message-item">
										ضعیف
									</div>

									<div class="message-item">
										متوسط
									</div>

									<div class="message-item">
										خوب
									</div>

									<div class="message-item">
										عالی
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="col-12">
						<div class="form-group mt-3">
							<div class="position-relative">
								<input type="password" asp-for="CreateCameraAccount.RePassword" class="form-control" id="repeat_password" placeholder="تکرار گذرواژه" style="direction: ltr;" />
								<button type="button" class="position-absolute top-0 start-0 m-1 bg-transparent" onclick="rePassFunction()">
									<svg class="reEyeShow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M15.58 11.9999C15.58 13.9799 13.98 15.5799 12 15.5799C10.02 15.5799 8.42004 13.9799 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C13.98 8.41992 15.58 10.0199 15.58 11.9999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
									<svg class="reEyeClose" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M14.53 9.46992L9.47004 14.5299C8.82004 13.8799 8.42004 12.9899 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C12.99 8.41992 13.88 8.81992 14.53 9.46992Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M17.82 5.76998C16.07 4.44998 14.07 3.72998 12 3.72998C8.46997 3.72998 5.17997 5.80998 2.88997 9.40998C1.98997 10.82 1.98997 13.19 2.88997 14.6C3.67997 15.84 4.59997 16.91 5.59997 17.77" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M8.42004 19.5299C9.56004 20.0099 10.77 20.2699 12 20.2699C15.53 20.2699 18.82 18.1899 21.11 14.5899C22.01 13.1799 22.01 10.8099 21.11 9.39993C20.78 8.87993 20.42 8.38993 20.05 7.92993" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M15.5099 12.7C15.2499 14.11 14.0999 15.26 12.6899 15.52" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M9.47 14.53L2 22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M22 2L14.53 9.47" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</button>
								<div id="passwordErrorMessage" class="text-danger" style="text-align: start;font-size: 12px;position: absolute;bottom: -20px;"></div>
							</div>
						</div>
					</div>
					<div class="ShowMessage d-none">
						<p class="m-0" id="ShowAccountMessage"></p>
					</div>
				</div>
			</div>

			<div class="container p-0 m-0" id="step-form2" style="display: none">

				<div class="p-0 m-0">
					<div class="d-flex flex-column align-items-center justify-content-center h-100">
						<div class="d-flex align-items-center justify-content-center mb-2">
							<p class="m-0">ساعات کاری مجموعه این کارگاه را مشخص نمائید</p>
						</div>
						<div class="btn-workTimeOption-container align-items-center justify-content-center w-100">
							<input type="radio" value="Regular" name="CreateWorkshopSettings.WorkshopShiftStatus" id="organized" class="radio-workTimeOption">
							<label for="organized" class="radio-label-workTimeOption w-100">منقطع</label>

							<input type="radio" value="Irregular" name="CreateWorkshopSettings.WorkshopShiftStatus" id="disorganized" class="radio-workTimeOption">
							<label for="disorganized" class="radio-label-workTimeOption w-100">مستمر</label>
						</div>
					</div>
				</div>


				<div class="row" id="step_workTimeOption" style="height: 0">
					<div class="col-12" id="appendChildTimeWorkHtml">
						<div class="groupBox">
							<div class="row align-items-center justify-content-between">
								@if (Model.HasGroupWorkshop)
								{
									@for (var i = 0; i < Model.CreateWorkshopSettings.ShiftsList.Count(); i++)
									{
										<div class="col-3 d-flex align-items-center">
											<input type="hidden" name="CreateWorkshopSettings.ShiftsList[0].Placement" value="@Model.CreateWorkshopSettings.ShiftsList[@i].Placement" disabled="disabled" />
											<div class="timeWorkTitle">
												@if (i == 0)
												{
													@("نوبت اول")
												}
												else if (i == 1)
												{
													@("نوبت دوم")
												}
												else
												{
													@("نوبت سوم")
												}
											</div>
										</div>

										<div class="col-4 d-flex align-items-center">
											<div class="timeWorkTitle">از</div>
											<input type="text" class="form-control text-center dateTime" name="CreateWorkshopSettings.ShiftsList[0].StartTime" value="@Model.CreateWorkshopSettings.ShiftsList[@i].StartTime" placeholder="00:00" style="direction: ltr;">
										</div>

										<div class="col-4 d-flex align-items-center">
											<div class="timeWorkTitle">الی</div>
											<input type="text" class="form-control text-center dateTime" name="CreateWorkshopSettings.ShiftsList[0].EndTime" value="@Model.CreateWorkshopSettings.ShiftsList[@i].EndTime" placeholder="00:00" style="direction: ltr;">
										</div>
										@if (i == 0)
										{
											<div class="col-2 d-flex align-items-center justify-content-end">
											</div>
										}
										else
										{
											<div class="col-1 d-flex align-items-center justify-content-end">
												<button type="button" class="btnRemoveTimeWork">
													<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="M6.875 11H15.125" stroke="white" />
													</svg>
												</button>
											</div>
										}
									}
								}
								else
								{
									<div class="col-3 d-flex align-items-center">
										<input type="hidden" name="CreateWorkshopSettings.ShiftsList[0].Placement" value="First" />
										<div class="timeWorkTitle">
											نوبت اول
										</div>
									</div>

									<div class="col-4 d-flex align-items-center">
										<div class="timeWorkTitle">از</div>
										<input type="text" class="form-control text-center dateTime" name="CreateWorkshopSettings.ShiftsList[0].StartTime" placeholder="00:00" style="direction: ltr;">
									</div>

									<div class="col-4 d-flex align-items-center">
										<div class="timeWorkTitle">الی</div>
										<input type="text" class="form-control text-center dateTime" name="CreateWorkshopSettings.ShiftsList[0].EndTime" placeholder="00:00" style="direction: ltr;">
									</div>
									<div class="col-1 d-flex align-items-center justify-content-end">
									</div>
								}

							</div>
						</div>
					</div>
					@if (Model.HasGroupWorkshop)
					{
						<div class="d-flex align-items-center justify-content-center w-100 my-2">
							<button type="button" class="btnAddTimeWork">
								<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>
								@if (Model.CreateWorkshopSettings.ShiftsList.Count() == 2)
								{
									<div class="mx-1 btnAppendChildTimeWork">افزودن نوبت سوم</div>
								}
								else
								{
									<div class="mx-1 btnAppendChildTimeWork">افزودن نوبت دوم</div>
								}
							</button>
						</div>
					}
					else
					{
						<div class="d-flex align-items-center justify-content-center w-100 my-2">
							<button type="button" class="btnAddTimeWork">
								<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>
								<div class="mx-1 btnAppendChildTimeWork">افزودن نوبت دوم</div>
							</button>
						</div>
					}

					<div class="ShowMessage d-none">
						<p class="m-0" id="ShowSettingMessage"></p>
					</div>
				</div>

				<div id="step_workTimeOptionIrregular" style="display: none">
					<div class="show-disorganized mt-5">
						<p class="m-0">مجموعه بدون وقفه و بصورت مستمر فعال می‌باشد</p>
					</div>
				</div>

			</div>
		</div>

		<div class="modal-footer">
			<div class="container m-0">
				<div class="row">
					<div class="col-6 text-end">
						<button type="button" class="btn-cancel2 justify-content-center w-100" id="prev-step">انصراف</button>
					</div>
					<div class="col-6 text-start">
						<button type="button" class="btn-register w-100" id="next-step">مرحله بعد</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</form>

<script src="~/assetsclient/libs/cleave/cleave.min.js"></script>
<script>
	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
	var checkAccountAjax = `@Url.Page("./Index", "CheckAccount")`;
	var hasCamera = @(Model.HasCamera ? "true" : "false");
	var hasGroupWorkshop = @(Model.HasGroupWorkshop ? "true" : "false");
	var saveCameraAccountAndWorkshopSettingAjax = `@Url.Page("./Index", "SaveCameraAccountAndWorkshopSetting")`;
</script>
<script src="~/AssetsAdminNew/rollcall/js/modalcameraaccount.js?ver=adminVersion"></script>