@model CompanyManagment.App.Contracts.Leave.CreateLeave

@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
	<link href="~/AssetsClient/css/select2.css?ver=@clientVersion" rel="stylesheet" />
    <style>
        .errored {
            color: #FF3A3A !important;
            border: 1px solid #FF3A3A !important
        }
        #printSection {
            display: none;
        }
    </style>
}


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

	<div class="modal-content">
		<div class="modal-header d-block text-center position-relative">
			<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
			<h5 class="modal-title" id="morakhasiEstehghaghiModalLabel">ثبت مرخصی</h5>
		</div>

		<div class="modal-body">
			<div class="container-fluid">
				<div class="row form-morakhasi-estehghaghi">
					<div class="container-fluid">
						<div class="row mb-3">
							<div class="col-12 my-1">
								<select class="form-select select2Option" aria-label="انتخاب پرسنل ..." asp-for="EmployeeId" id="employeeSelect">
                                    <option value="">پرسنل را انتخاب کنید ...</option>
								</select>
							</div>
						</div>

						<div id="cardSectionLeave" class="card border p-1 blur">
							<div class="row my-3">
								<div class="col-12 col-md-8">
									<label class="d-flex justify-content-start align-items-center mb-2">نوع مرخصی:</label>
									<div class="d-block d-sm-flex">
										<div class="d-flex align-items-center">
											<div class="inputGroup-morakhasi-type d-flex flex-sm-column">
												<div class="d-flex align-items-center mb-2">
													<div>
														<input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="paid" value="استحقاقی" checked>
														<label class="form-check-label" for="paid">
															استحقاقی
														</label>
													</div>
												</div>

												<div>
													<input class="form-check-input LeaveType" type="radio" asp-for="LeaveType" id="sick" value="استعلاجی">
													<label class="form-check-label" for="sick">
														استعلاجی
													</label>
												</div>
											</div>
										</div>
										<div class="ms-sm-4" id="dailyType">
											<div class="d-flex align-items-center">
												<label class="d-block d-sm-flex justify-content-center align-items-center" for="inputGroup-morakhasi-time">مدت مرخصی:</label>
												<div class="inputGroup-morakhasi-time d-flex align-items-center">
													<input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="daily" value="روزانه" checked>
													<label class="form-check-label" for="daily">
														روزانه
													</label>

													<input class="form-check-input LeaveTime" type="radio" asp-for="PaidLeaveType" id="hourly" value="ساعتی">
													<label class="form-check-label" for="hourly">
														ساعتی
													</label>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-12 col-md-4 mt-2 mt-md-0 disable" id="rotatingShiftSection">
									<div>
										<input type="hidden" asp-for="HasRollCall" id="HasRollCall">
										<input type="hidden" name="SelectedShift.StartTime" id="SelectedShift_StartTime" />
										<input type="hidden" name="SelectedShift.EndTime" id="SelectedShift_EndTime" />

										<label class="w-100">
											<span>شیفت</span>
											<select class="form-select select2Option" aria-label="انتخاب شیفت ..." id="rotatingShift">
												<option value="">شیفت را انتخاب کنید ...</option>
											</select>
										</label>
									</div>
								</div>
							</div>

							<div class="row my-3">
								<div class="col-lg-6 col-12 my-1">
									<div class="input-group">
										<label class="input-group-text" for="StartLeave">تاریخ شروع</label>
										<input type="text" asp-for="StartLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="StartLeave">
									</div>
								</div>
								<div class="col-lg-6 col-12 my-1" id="end_date_estehghaghi">
									<div class="input-group">
										<label class="input-group-text" for="EndLeave">تاریخ پایان</label>
										<input type="text" asp-for="EndLeave" class="form-control d-flex justify-content-center align-items-center text-center date" id="EndLeave">
									</div>
								</div>
								<div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
									<div class="input-group">
										<label class="input-group-text" for="start_time">ساعت شروع</label>
										<input type="text" asp-for="StartHoures" class="form-control d-flex justify-content-center align-items-center text-center dateTime" id="StartHoures" style="direction: ltr">
									</div>
								</div>

								<div class="col-lg-3 col-6 my-1 time_paid" style="display:none;">
									<div class="input-group">
										<label class="input-group-text" for="end_time">ساعت پایان</label>
										<input type="text" asp-for="EndHours" class="form-control d-flex justify-content-center align-items-center text-center dateTime" id="EndHours" style="direction: ltr">
									</div>
								</div>



								<p class="mt-2">
									<span>مدت مرخصی: </span>
									<span class="sumHours sumHourseDiv"></span>
									<span class="sumDaysDiv sumDays"></span>
								</p>
							</div>

							<div class="row">
								<div class="col-12">
									<div class="form-check form-switch d-flex align-items-center">
										<label class="form-check-label me-2" for="IsAccepted">عدم موافقت</label>
										<input type="checkbox" asp-for="IsAccepted" id="IsAccepted" class="form-check-input" checked>
										<label class="form-check-label" for="IsAccepted">موافقت</label>
									</div>
								</div>
							</div>

							<div class="row">
								<div class="col-12">
									<div class="position-relative blur" id="blur-div">
										<div class="position-absolute title-legend">دلیل عدم موافقت:</div>
										<textarea asp-for="Decription" disabled="disabled" id="descriptionAcceptedCheck" class="w-100 my-3 p-2" cols="10" rows="2"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="modal-footer">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12 text-center">
						<div class="d-flex justify-content-center">
							<a class="btn-cancel text-white w-25 mx-2" data-bs-dismiss="modal" aria-label="Close">انصراف</a>
							<a href="#" id="save" class="btn-primary text-white w-25 mx-2" style="padding: 10px 8px;font-size: 14px;">ثبت</a>
							<a id="printSingle" class="btn-blue text-white w-25 mx-2" style="cursor: pointer; display: none">پرینت</a>
							<input type="hidden" id="printSingleID" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</form>


<script src="~/admintheme/js/jquery.mask_1.14.16.min.js"></script>
<style>
	.validTime {
		color: #4d7c0f !important;
	}

	.invalidTime {
		color: #b91c1c !important;
	}
</style>

<script src="~/assetsclient/libs/cleave/cleave.min.js"></script>
<script>
	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
	var leaveSaveAjax = `@Url.Page("/Index", "LeaveSave")`;
	var computeLeaveHourlyAjax = `@Url.Page("/Company/Employees/Leave", "ComputeLeaveHourly")`;
	var computeLeaveDailyAjax = `@Url.Page("/Company/Employees/Leave", "ComputeLeaveDaily")`;
	var employeeListAjax = `@Url.Page("Index", "EmployeeList")`;
	var hasRotatingShiftAjax = `@Url.Page("Index", "HasRotatingShift")`;
</script>
<script src="~/assetsclient/pages/index/js/leavecreate.js?ver=@clientVersion"></script>