Backend-Api/ServiceHost/Areas/Camera/Pages/ViewPersonnelModal.cshtml

@model List<CompanyManagment.App.Contracts.RollCallEmployee.RollCallEmployeeViewModel>

<style>
    .modal-content {
		background-color: #334155;
	    color: #fff;
    }
	.itemSection {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		background-color: #253247;
		padding: 7px 5px;
		border-radius: 10px;
		margin: 5px 0;
		font-size: 13px;
		gap: 10px;
	}

	.itemSection.header {
		background-color: #212c3d;
	}

	/* .itemSection:nth-child(even) {
		background-color: #212c3d;
	} */

	.form-control {
		border: none;
		background-color: #475569;
		color: #ffffff !important;
	}

	.form-control:focus {
		background-color: #475569;
		outline: none;
		border: none;
		border-color: transparent;
		box-shadow: none;
	}

    .form-control:active {
	    outline: none;
    }

    .form-control::placeholder {
	    color: #eeeeee;
    }

	.stickyHeader {
		position: sticky;
		top: 0;
	}

	.btn-cancel {
		background-color: #27272a;
		width: 100%;
		color: #ffffff;
	}

	.employee-lname {
		width: 50%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.employee-name {
		width: 30%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.employee-code {
		width: 20%;
	}
</style>


<div class="modal-content">
	<div class="modal-header text-start d-block text-center" style="border: 0">
		<div class="row align-items-center">
			<div class="col-2">
				<button type="button" class="text-start" data-bs-dismiss="modal" aria-label="Close" style="color: #fff;background: transparent;">
					<svg width="35" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
						<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 class="col-8 text-center">
				<h6 class="modal-title">لیست کارکنان</h6>
			</div>
			<div class="col-2"></div>
		</div>
	</div>

	<div class="modal-body p-0 mt-3">
		<div class="container-fluid">
			<div class="row ">
				<div class="col-12">
					<div class="stickyHeader">
						<div class="from-group position-relative">
							<input type="text" id="searchPersonnel" class="form-control" placeholder="جستجو">
							<div class="position-absolute" style="top: 50%;left: 7px;transform: translateY(-50%);">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="2" />
									<path d="M20 20L17 17" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
								</svg>
							</div>
						</div>

						<div class="itemSection header">
							<span style="width: 50%">نام خانوادگی پرسنل</span>
							<span style="width: 30%">نام پرسنل</span>
							<span class="text-end" style="width: 20%">کد پرسنل</span>
						</div>
					</div>
					<div id="employeeList">
						@foreach (var item in Model)
						{
							<div class="itemSection employee-item">
								<span class="employee-lname">@item.EmployeeLName</span>
								<span class="employee-name">@item.EmployeeFName</span>
								<span class="employee-code text-end">@item.PersonelCode</span>
							</div>
						}
					</div>
				</div>

			</div>
		</div>
	</div>
	
	<div class="modal-footer" style="border: 0">
		<button type="button" class="btn btn-cancel" data-bs-dismiss="modal">انصراف</button>
	</div>
</div>

<script>
	$(document).ready(function() {
		$('#searchPersonnel').on('keyup', function() {
			var value = $(this).val().toLowerCase();
			$('#employeeList .employee-item').filter(function() {
				var employeeFName = $(this).find('.employee-name').text().toLowerCase();
				var employeeLName = $(this).find('.employee-lname').text().toLowerCase();
				var employeeCode = $(this).find('.employee-code').text().toLowerCase();

				if (employeeFName.includes(value) || employeeLName.includes(value) || employeeCode.includes(value)) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		});
	});
</script>