@page
@model ServiceHost.Areas.AdminNew.Pages.Company.RollCall.CaseHistoryModel

@{
	string adminVersion = _0_Framework.Application.Version.AdminVersion;
	ViewData["Title"] = " - " + "سوابق حضور و غیاب";
	int index = 1;
	int i = 0;

	<style>
		.stickyMain {
			position: sticky;
			top: 5px;
			z-index: 10;
		}

		.sticky {
			position: sticky;
			top: 43px;
			z-index: 10;
		}

		.is-sticky {
			position: -webkit-sticky;
			position: sticky;
			top: 43px;
			z-index: 999;
		}

		.errored {
			animation: shake 300ms;
			color: #eb3434 !important;
			background-color: #fef2f2 !important;
			border: 1px solid #eb3434 !important;
			border-radius: 7px;
		}

		.goToTop {
			display: none;
			position: fixed;
			bottom: -10px;
			margin-right: 100px;
			z-index: 100;
			color: #fff;
			background-color: #25acacd6;
		}

			.goToTop:hover {
				color: #fff;
				background-color: #2ca4a4;
			}

		.textListTitle {
			color: #1A1A1A;
			font-size: 16px;
			font-weight: 500;
		}

		.sweet-alert button {
			font-family: 'IRANYekanX' !important;
		}

		@@media screen and (max-width: 767px) {
			.table-rollcall .width2 {
				width: 35% !important;
				overflow: hidden;
			}

			.sticky {
				top: 48px !important;
			}

			.goToTop {
				position: fixed;
				bottom: 54px;
				margin-right: 39%;
				z-index: 100;
				color: #fff;
				background-color: #25acac70;
			}

			.textListTitle {
				font-size: 14px;
			}
		}

		@@media (max-width: 576px) {
			.form-control {
				margin: 0px 0;
			}
		}
	</style>
}

@section Styles {
	<link href="~/assetsclient/css/table-style.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/table-responsive.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/rollcall-list-table.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsclient/css/operation-button.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/dropdown.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/select2.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/filter-search.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/datetimepicker.css?ver=@adminVersion" rel="stylesheet" />


	<link href="~/AdminTheme/assets/sweet-alert/sweet-alert.min.css" rel="stylesheet">
	<link href="~/AssetsAdminNew/rollcall/css/casehistory.css?ver=@adminVersion" rel="stylesheet" />
}



<div class="row">
	<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/rollcall-history.png" alt="" class="img-fluid mx-1" width="50px" />
			<div>
				<h4 class="title d-flex align-items-center">سوابق حضور و غیاب</h4>
				<div class="title d-flex align-items-center" id="caseHistoryWorkshopFullname">@Model.WorkshopFullName</div>
			</div>
		</div>
		<div>
			<a asp-page="/Company/RollCall/Options" asp-route-workshopId="@Model.WorkshopId" class="back-btn" type="button">
				<span>بازگشت</span>
			</a>
		</div>
	</div>
</div>

<button class="btn btn-rounded mb-5 goToTop">
	<div class="d-flex align-items-center">
		<span>برو بالا</span>
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20px" class="ms-1">
			<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5" />
			<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5" />
		</svg>
	</div>
</button>

	<div class="container-fluid">
		<div class="row">
			<div class="col-12 p-0 mb-2 d-none d-md-block">
				<div class="search-box card border-0">
					<div class="d-flex align-items-center gap-2">

						<div class="col-3 col-xl-2">
							<div class="wrapper-dropdown-normal btn-dropdown">
								<span class="selected-display">تاریخ براساس یک روز</span>
								<svg id="drp-arrow" class="arrow transition-all ml-auto rotate-180" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M7 14.5l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
								</svg>
								<ul class="dropdown-normal dropdown-days boxes">
									<li class="item active" value-data-normal="OneDay">تاریخ براساس یک روز</li>
									<li class="item" value-data-normal="RangeDays">تاریخ براساس بازه ی زمانی</li>
								</ul>
							</div>
						</div>
						<div class="">
							<div class="d-flex align-items-center gap-2">
								<div>
									<input type="text" class="form-control date start-date text-center" id="StartDate" placeholder="تاریخ">
								</div>

								<div class="d-flex align-items-center d-none" id="endDateRollcall">
									<div class="me-2 elay">الی</div>
									<input type="text" class="form-control date end-date text-center" id="EndDate" placeholder="تاریخ پایان">
								</div>
							</div>
						</div>

						<div class="col-3 col-xl-2">
							<select class="form-select select2Option" aria-label="انتخاب پرسنل ..." id="employeeSelect">
								<option value="0">انتخاب پرسنل ...</option>
								@foreach (var itemEmployee in Model.RollCallEmployeeList)
								{
									<option value="@itemEmployee.EmployeeId">@itemEmployee.EmployeeFullName</option>
								}
							</select>
						</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>
						<a asp-page="/Company/RollCall/CaseHistory" asp-route-workshopId="@Model.WorkshopId" class="btn-clear-filter btn-w-size text-nowrap d-flex align-items-center justify-content-center disable" id="filterRemove" style="padding: 7px 10px;">
							<span>حذف جستجو</span>
						</a>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- List Items -->
	<div class="container-fluid" id="containerHeight">
		<div class="row p-lg-2">

			<div class="card" style="margin: 0 0 60px 0;">
				@if (@Model.RollCallViewModels.ActiveEmployees.Any())
				{

					<!-- Advance Search Box -->
					<div class="search-box bg-white d-block d-md-none p-1">
						<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>
					<!-- End Advance Search Box -->


					<div class="d-flex align-items-center mb-1 p-1">
						<div class="col-12 col-md-4">
							<div class="d-flex align-items-center gap-1">
								<button type="button" class="btn-search text-nowrap d-flex align-items-center justify-content-center" onclick="addWorkTime()">
									<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="col-6 col-xl-6 position-relative">
									<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>
						</div>

						<div class="col-4 d-none d-md-block text-center">
							<span class="textListTitle">لیست سوابق حضور و غیاب</span>
						</div>

						<div class="col-4 d-none d-md-block">
						</div>
					</div>


					<div class="wrapper table-rollcall">
						<div class="rollcall-list Rtable Rtable--5cols Rtable--collapse px-1">

							<div class="Rtable-row Rtable-row--head align-items-center d-flex stickyMain d-none d-md-flex">
								<div class="Rtable-cell column-heading width1">ردیف</div>
								<div class="Rtable-cell column-heading width2">نام پرسنل</div>
								<div class="Rtable-cell column-heading width3">شماره پرسنلی</div>
								<div class="Rtable-cell column-heading width3" id="dateFaEmployee">تاریخ</div>
								<div class="Rtable-cell column-heading width4 text-end">تاخیر در ورود</div>
								<div class="Rtable-cell column-heading width5 text-center">ورود</div>
								<div class="Rtable-cell column-heading width6 text-center">خروج</div>
								<div class="Rtable-cell column-heading width7 text-start">تجمیع در خروج</div>
								<div class="Rtable-cell column-heading width8 text-center">مجموع ساعات کاری</div>
								<div class="Rtable-cell column-heading width9 text-end">عملیات</div>
							</div>

							<div class="w-100 rollcall-list Rtable Rtable--5cols Rtable--collapse" id="caseHistoryLoadData">
							</div>

						</div>
					</div>
				}
				else
				{
					<partial name="Company/Partial/_EmptySection" />
				}
			</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">
		<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" style="overflow-y: inherit;">
				<div class="container-fluid">

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

					<div class="row">

						<div class="col-12 col-xl-12">
							<div class="wrapper-dropdown-normal btn-dropdown">
								<span class="selected-display">تاریخ براساس یک روز</span>
								<svg id="drp-arrow" class="arrow transition-all ml-auto rotate-180" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M7 14.5l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
								</svg>
								<ul class="dropdown-normal dropdown-days boxes">
									<li class="item active" value-data-normal="OneDay">تاریخ براساس یک روز</li>
									<li class="item" value-data-normal="RangeDays">تاریخ براساس بازه ی زمانی</li>
								</ul>
							</div>


							<div class="mb-2">
								<span class="form-control text-center persianDateInputStartDate" id="start-date">تاریخ شروع</span>
								<input type="hidden" class="form-control date start-date" id="StartDateMobile" placeholder="تاریخ شروع">
							</div>

							<div class="d-block d-none" id="endDateRollcallMobile">
								<div class="mb-2">
									<div class="mx-auto text-center elay">الی</div>
									<span class="form-control text-center persianDateInputEndDate" id="end-date">تاریخ پایان</span>
									<input type="hidden" class="form-control date end-date text-center" id="EndDateMobile" placeholder="تاریخ پایان">
								</div>
							</div>

							<select class="form-select select2OptionMobile" aria-label="انتخاب پرسنل ..." id="employeeSelectMobile">
								<option value="0">انتخاب پرسنل ...</option>
								@foreach (var itemEmployee in Model.RollCallEmployeeList)
								{
									<option value="@itemEmployee.EmployeeId">@itemEmployee.EmployeeFullName</option>
								}
							</select>
						</div>

						<div class="col-12 text-start">
							<div class="row">
								<div class="col-12">
									<a asp-page="/Company/RollCall/CaseHistory" asp-route-workshopId="@Model.WorkshopId" class="btn-clear-filter py-2 text-center d-block w-100 mt-2" id="filterRemoveMobile">
										<span class="w-100">حذف جستجو</span>
									</a>
								</div>
							</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="button" class="btn-search btn-search-click w-100" id="searchBtnMobile">جستجو</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" tabindex="-1" data-bs-backdrop="static" style="display: none;">
	<div class="modal-dialog modal-md modal-dialog-centered">
		<div class="modal-content" id="ModalContent">
		</div>
	</div>
</div>

@section Script {
	<script src="~/assetsclient/js/site.js"></script>
	<script src="~/AdminTheme/assets/sweet-alert/sweet-alert.min.js"></script>
	<script src="~/AssetsClient/js/dropdown.js?ver=@adminVersion"></script>
	<script>
		var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
		var caseHistoryAjaxLoadData = `@Url.Page("./CaseHistory", "CaseHistoryRollCallAjax")`;
		var itemsYearList = @Html.Raw(Json.Serialize(Model.YearlyList.OrderBy(x => x)));
		// var dateIndex = 0;
		var deleteRollCallData = `@Url.Page("./CaseHistory", "RemoveEmployeeRollCallsInDate")`;
		var wpId = Number(@Model.WorkshopId);
	</script>
	<script src="~/AssetsAdminNew/RollCall/js/CaseHistory.js?ver=@adminVersion"></script>
}