@using _0_Framework.Domain.CustomizeCheckoutShared.Enums
@model CompanyManagment.App.Contracts.CustomizeWorkshopSettings.CreateCustomizeWorkshopGroupSettings

@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	<link href="~/assetsclient/pages/rollcall/css/modalcreategroup.css?ver=@clientVersion" rel="stylesheet" />
}

<div class="modal-content">
		<div class="modal-header d-block text-center mb-0 pb-0">
			<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
			<h6>ایجاد گروه پرسنلی</h6>
		</div>

		<div class="modal-body pt-2">
			<form role="form" method="post" name="create-form" id="create-form" autocomplete="off">
				<input type="hidden" asp-for="@Model.CustomizeWorkshopSettingId" />
				<div class="container p-0 m-0">
					<div class="row">
						<div class="lableCheckBreakTime">نام گروه</div>
						<div class="col-12 d-flex align-items-center">
							<input type="text" class="form-control m-0" asp-for="@Model.Name" placeholder="نام گروه را وارد نمایید"/>
						</div>
					</div>

					<div class="row p-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 mt-3 mb-1">
								<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="workshopShiftStatus" id="organized" class="radio-workTimeOption">
								<label for="organized" class="radio-label-workTimeOption w-100">منظم</label>

								<input type="radio" value="Rotating" name="workshopShiftStatus" id="rotating_shift" class="radio-workTimeOption">
								<label for="rotating_shift" class="radio-label-workTimeOption w-100">گردشی</label>

								<input type="radio" value="Irregular" name="workshopShiftStatus" id="disorganized" class="radio-workTimeOption">
								<label for="disorganized" class="radio-label-workTimeOption w-100">مختلط</label>
							</div>
						</div>
					</div>

					<div class="row mt-2" id="step_workTimeOption" style="height: 0; display: none">
						<div class="col-12" id="appendChildTimeWorkHtml">
							<div class="groupBox">
								<div class="row align-items-center justify-content-between">
									<div class="col-3 d-flex align-items-center">
										<input type="hidden" name="ShiftViewModel[0].Placement" id="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" id="startDateTime" name="ShiftViewModel[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" id="endDateTime" name="ShiftViewModel[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>
						<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="col-12">
							<p class="m-0" id="ShowSettingMessage"></p>
						</div>
					</div>
					
					
					
					<div class="row mt-2" id="step_workTimeOptionRotatingShift" style="height: 0; display: none">
						<div class="col-12" id="appendChildTimeWorkHtmlRS">
							<div class="groupBoxRS">
								<div class="row align-items-center justify-content-between">
									<div class="col-3 d-flex align-items-center">
										<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 dateTimeRS" id="startDateTimeRS" name="CustomizeRotatingShiftsViewModels[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 dateTimeRS" id="endDateTimeRS" name="CustomizeRotatingShiftsViewModels[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>
						<div class="d-flex align-items-center justify-content-center w-100 my-2">
							<button type="button" class="btnAddTimeWorkRS">
								<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 btnAppendChildTimeWorkRS">افزودن نوبت دوم</div>
							</button>
						</div>
						<div class="col-12">
							<p class="m-0" id="ShowSettingMessageRS"></p>
						</div>
					</div>


					<div class="row p-0" id="step_workTimeOptionIrregular" style="height: 0; gap: 12px; display: none">
						<div class="btn-workTimeOption-container align-items-center justify-content-center mt-4">
							<input type="radio" id="TwelveTwentyFour" value="@WorkshopIrregularShifts.TwelveTwentyFour" name="IrregularShift.WorkshopIrregularShifts" class="radio-workTimeOption">
							<label for="TwelveTwentyFour" class="radio-label-workTimeOption w-100 outlineDate">12 ساعت کار 24 ساعت استراحت</label>

							<input type="radio" id="TwentyFourTwentyFour" value="@WorkshopIrregularShifts.TwentyFourTwentyFour" name="IrregularShift.WorkshopIrregularShifts" class="radio-workTimeOption">
							<label for="TwentyFourTwentyFour" class="radio-label-workTimeOption w-100 outlineDate">24 ساعت کار 24 ساعت استراحت</label>
						</div>
						
						<div class="btn-workTimeOption-container align-items-center justify-content-center">
							<input type="radio" id="TwelveThirtySix" value="@WorkshopIrregularShifts.TwelveThirtySix" name="IrregularShift.WorkshopIrregularShifts" class="radio-workTimeOption">
							<label for="TwelveThirtySix" class="radio-label-workTimeOption w-100 outlineDate">12 ساعت کار 36 ساعت استراحت</label>

							<input type="radio" id="TwentyFourFortyEight" value="@WorkshopIrregularShifts.TwentyFourFortyEight" name="IrregularShift.WorkshopIrregularShifts" class="radio-workTimeOption">
							<label for="TwentyFourFortyEight" class="radio-label-workTimeOption w-100 outlineDate">24 ساعت کار 48 ساعت استراحت</label>
						</div>
						
						<div class="hrLine"></div>

						<div class="col-12">
							<div class="groupBoxIrregular disable" id="irregularShiftsDateTime">
								<div class="row align-items-center justify-content-between">
									<div class="col-2 d-flex align-items-center">
										<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 dateTimeIrregular" id="irregularShiftsStartDateTime"  name="IrregularShift.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 dateTimeIrregular" id="irregularShiftsEndDateTime" name="IrregularShift.EndTime" placeholder="00:00" style="direction: ltr;">
									</div>
									<div class="col-2 d-flex align-items-center justify-content-end">
									</div>
								</div>
							</div>
						</div>

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

	<div class="modal-footer">
		<div class="container my-2">
			<div class="row breack-time">
				<div>
					<div class="d-flex align-items-center my-1 breakTimeDiv">
						<input type="checkbox" id="BreakTimeFirst" name="BreakTime.hasBreakTimeValue" class="form-check-input">
						<label for="BreakTimeFirst" class="lableCheckBreakTime">
							این پرسنل دارای ساعت استراحت نامشخص می باشد با انتخاب این تیک پرسنل باید برای استراحت ورود و خروج ثبت کند.
						</label>
					</div>
				</div>

				<div class="d-block">

					<div class="d-flex align-items-center my-1 breakTimeDiv">
						<input type="checkbox" id="BreakTime" name="BreakTime.hasBreakTimeValue" class="form-check-input">
						<label for="BreakTime" class="lableCheckBreakTime">
							این پرسنل دارای ساعت استراحت ثابت روزانه می باشد که بصورت خودکار در فیش حقوقی محاسبه می گردد:
						</label>
					</div>

					<div class="d-flex align-items-center justify-content-center my-1 mt-3 disable" id="computeTime">
						<div class="position-relative">
							<label for="hour" class="position-absolute" style="bottom: 25px; font-size: 13px; font-weight: 700; right: 5px; background-color: #fff; padding: 0 4px;">ساعت</label>
							<select id="hour" name="selectCheckBreakTime" class="form-select selectCheckBreakTime">
								<option value="0" selected>انتخاب</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
							</select>
						</div>
						<span class="mx-1">:</span>
						<div class="position-relative">
							<label for="min" class="position-absolute" style="bottom: 25px; font-size: 13px; font-weight: 700; right: 5px; background-color: #fff; padding: 0 4px;">دقیقه</label>
							<select id="min" name="selectCheckBreakTime" class="form-select selectCheckBreakTime">
								<option value="00" selected>انتخاب</option>
								<option value="5">5</option>
								<option value="10">10</option>
								<option value="15">15</option>
								<option value="20">20</option>
								<option value="25">25</option>
								<option value="30">30</option>
								<option value="35">35</option>
								<option value="40">40</option>
								<option value="45">45</option>
								<option value="50">50</option>
								<option value="55">55</option>
							</select>
						</div>
					</div>

					<input type="hidden" id="TimeOnly" name="BreakTime.BreakTimeValue"/>
					@* <span class="mx-1" id="computeTimeText"></span> *@
				</div>
			</div>

			<div class="day-off-parent">
				<div class="day-off-title mb-2">
					روزهای فعالیت مجموعه
				</div>

				<div class="day-off-button-container mb-3">
					<button type="button" name="Saturday" value="@((int)(DayOfWeek.Saturday))"
							class="day-off-button text-center day-off-button__active">
						شنبه
					</button>



					<button type="button" name="Sunday" value="@((int)(DayOfWeek.Sunday))"
							class="day-off-button text-center day-off-button__active">
						یکشنبه

					</button>



					<button type="button" name="Monday" value="@((int)(DayOfWeek.Monday))"
							class="day-off-button text-center day-off-button__active">
						دوشنبه
					</button>

					<button type="button" name="Tuesday" value="@((int)(DayOfWeek.Tuesday))"
							class="day-off-button text-center day-off-button__active">
						سه‌شنبه
					</button>

					<button type="button" name="Wednesday" value="@((int)(DayOfWeek.Wednesday))"
							class="day-off-button text-center day-off-button__active">
						چهارشنبه
					</button>

					<button type="button" name="Thursday" value="@((int)(DayOfWeek.Thursday))"
							class="day-off-button text-center day-off-button__active">
						پنج‌شنبه
					</button>

					<button type="button" name="Friday" value="@((int)(DayOfWeek.Friday))"
							class="day-off-button text-center day-off-button__diactive">
						جمعه
					</button>


					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="SaturdayInput"
						   value="@((int)(DayOfWeek.Saturday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="SundayInput" value="@((int)(DayOfWeek.Sunday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="MondayInput" value="@((int)(DayOfWeek.Monday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="TuesdayInput" value="@((int)(DayOfWeek.Tuesday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="WednesdayInput"
						   value="@((int)(DayOfWeek.Wednesday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input  day-off-button__active"
						   name="Command.WeeklyOffDays" id="ThursdayInput"
						   value="@((int)(DayOfWeek.Thursday))" />

					<input type="checkbox" style="display: none;" class="custom-checkbox weeklyOffDays-Input day-off-button__diactive"
						   name="Command.WeeklyOffDays" id="FridayInput" value="@((int)(DayOfWeek.Friday))" checked="checked" />



				</div>
				<div class="day-off-title mb-2">
					وضعیت فعالیت مجموعه در روزهای جمعه و تعطیلات رسمی
				</div>
				<div class="day-off-status-person mb-3">
					<div class="d-flex align-items-center gap-3">
						<span class="day-off-status-person__item">وضعیت پرسنل در روز های تعطیل رسمی : </span>

						<div class="d-flex align-items-center gap-1 day-off-status-person__item">
							<input type="radio" class="custom-checkbox" name="command.HolidayWork" id="OffDays2"
							@(Model.HolidayWork == HolidayWork.WorkInHolidays ? "checked" : "")
								   value="@((int)(HolidayWork.WorkInHolidays))" />
							<label class="text-nowrap day-off-status-person__item--label" for="OffDays2">
								اشتغال دارد
							</label>
						</div>

						<div class="d-flex align-items-center gap-1 day-off-status-person__item">
							<input type="radio" name="command.HolidayWork" id="OffDays1" class="custom-checkbox"
							@(Model.HolidayWork == HolidayWork.Default ? "checked" : "")
								   value="@((int)(HolidayWork.Default))" />
							<label for="OffDays1" class="text-nowrap day-off-status-person__item--label">
								اشتغال ندارد
							</label>
						</div>

					</div>
					<div>
					</div>

				</div>

			</div>


			
		</div>

		<div class="container m-0">
			<div class="row">
				<div class="col-6 text-end">
					<button type="button" class="btn-cancel2 d-flex justify-content-center w-100">انصراف</button>
				</div>
				<div class="col-6 text-start">
					<button type="button" id="btnSave" class="btn-register w-100" onclick="ajaxSaveData()">ثبت</button>
				</div>
			</div>
		</div>
	</div>

</div>

<script src="~/assetsclient/libs/cleave/cleave.min.js"></script>
<script>
	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
	var ajaxCreateGroup = `@Url.Page("./Grouping", "CreateGroup")`;
</script>
<script src="~/assetsclient/pages/rollcall/js/modalcreategroup.js?ver=@clientVersion"></script>