Files
Backend-Api/ServiceHost/Areas/Client/Pages/Company/InsuranceList/Index.cshtml
2025-04-16 20:04:57 +03:30

1024 lines
62 KiB
Plaintext

@page
@using CompanyManagment.App.Contracts.PersonalContractingParty
@using Version = _0_Framework.Application.Version
@model ServiceHost.Areas.Client.Pages.Company.InsuranceList.IndexModel
@{
ViewData["title"] = " - تنظیم لیست بیمه ";
int i = 0;
}
@section Styles {
<link href="~/assetsclient/css/table-style.css?ver=@Version.StyleVersion" rel="stylesheet"/>
<link href="~/assetsclient/css/table-responsive.css?ver=@Version.StyleVersion" rel="stylesheet"/>
<link href="~/assetsclient/css/operation-button.css?ver=@Version.StyleVersion" rel="stylesheet"/>
<link href="~/AssetsClient/css/dropdown.css?ver=@Version.StyleVersion" rel="stylesheet" />
<link href="~/AssetsClient/css/datetimepicker.css?ver=@Version.StyleVersion" rel="stylesheet" />
<link href="~/AssetsClient/css/filter-search.css?ver=@Version.StyleVersion" rel="stylesheet" />
<style>
#my-scrollbar {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
@@media screen and (min-width: 1240px) {
.lessThan992 {
display: none;
}
#MainModal{
visibility :visible !important;
}
}
@@media screen and (max-width: 1240px) {
.moreThan992 {
display: none;
}
}
</style>
}
@Html.AntiForgeryToken()
<input type="hidden" name="pageIndex" id="pageIndex" value="@Model.PageIndex" />
<input type="hidden" name="workshopIds" id="workshopIds" value="@Model.WorkshopId" />
<input type="hidden" name="year" id="year" value="@Model.Year" />
<input type="hidden" name="month" id="month" value="@Model.Month" />
<input type="hidden" name="Sorting" id="sortingList" value="@Model.Sorting" />
<div class="content-container">
<div class="container-fluid">
<div class="row p-2">
<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/insuranceList.png" alt="" class="img-fluid me-2" style="width: 45px;" />
<div>
<h4 class="title d-flex align-items-center">اطلاعات لیست بیمه</h4>
<div>@Model.WorkshopName</div>
</div>
</div>
<div>
<a asp-page="/Index" class="back-btn" type="button">
<span>بازگشت</span>
</a>
</div>
</div>
</div>
</div>
<!-- Search Box -->
<form role="form" method="get" name="search-theme-form1" id="search-theme-form1" autocomplete="off">
<input type="hidden" value="@Model.WorkshopId" asp-for="SearchModel.WorkshopId" />
<div class="container-fluid d-none d-md-block">
<div class="row px-2">
<div class="search-box card border-0">
<div class="row">
<div class="col-12">
<div class="d-grid search-insurance-section gap-2">
<div class="d-grid grid-cols-2 col-span-2 lg-col-span-4 xl-col-span-3 gap-2" id="accordion-test">
<div class="wrapper-dropdown-year btn-dropdown" id="dropdown-year">
<span class="selected-display" id="destination-year">سال</span>
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition-all ml-auto rotate-180">
<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-year boxes" id="my-scrollbar">
@* <div class="scroll">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="226" viewBox="0 0 26 226">
<g id="container_line" transform="translate(3 3)">
<rect id="rectangle" width="26" height="226" transform="translate(-3 -3)" fill="none" opacity="0" />
<path id="line" class="line" d="M0,0H0A20.059,20.059,0,0,1,20,20V200A20.059,20.059,0,0,1,0,220H0" fill="none" stroke="#2fc0c0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1" />
</g>
</svg>
</div> *@
<li class="item" value-data-year=" ">سال</li>
@foreach (string year in @Model.YearlyList)
{
<li class="item" value-data-year="@year">@year</li>
}
</ul>
<input type="hidden" id="sendDropdownYear" asp-for="SearchModel.Year" />
</div>
<div class="wrapper-dropdown-month btn-dropdown" id="dropdown-month">
<span class="selected-display" id="destination-month">ماه</span>
<svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition-all ml-auto rotate-180">
<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-month boxes">
<li class="item" value-data-month=" ">ماه</li>
<li class="item" value-data-month="01">فروردین</li>
<li class="item" value-data-month="02">اردیبهشت</li>
<li class="item" value-data-month="03">خرداد</li>
<li class="item" value-data-month="04">تیر</li>
<li class="item" value-data-month="05">مرداد</li>
<li class="item" value-data-month="06">شهریور</li>
<li class="item" value-data-month="07">مهر</li>
<li class="item" value-data-month="08">آبان</li>
<li class="item" value-data-month="09">آذر</li>
<li class="item" value-data-month="10">دی</li>
<li class="item" value-data-month="11">بهمن</li>
<li class="item" value-data-month="12">اسفند</li>
</ul>
<input type="hidden" id="sendDropdownMonth" asp-for="SearchModel.Month" />
</div>
</div>
<div class="col-span-3 lg-col-span-5 xl-col-span-4">
<div class="wrapper-dropdown" id="dropdown">
<span class="selected-display" id="destination">مرتب سازی</span>
<svg class="arrow" id="drp-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition-all ml-auto rotate-180">
<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">
<li class="item" value-data="CreationDate-Max">مرتب سازی </li>
<li class="item" value-data="CreationDate-Min">تاریخ ایجاد لیست - کوچک به بزرگ </li>
<li class="item" value-data="Month-Min">بر اساس ماه - کوچک به بزرگ </li>
<li class="item" value-data="Month-Max">بر اساس ماه - بزرگ به کوچک </li>
<li class="item" value-data="Year-Min">بر اساس سال - کوچک به بزرگ </li>
<li class="item" value-data="Year-Max">بر اساس سال - بزرگ به کوچک </li>
</ul>
<input type="hidden" id="sendSorting" asp-for="SearchModel.Sorting" />
</div>
</div>
<div class="col-span-2 d-flex gap-2">
<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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20" height="20" class="ms-1">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
<a href="/Client/Company/InsuranceList" class="btn-clear-filter btn-w-size text-nowrap d-flex align-items-center justify-content-center disable">
<span>حذف جستجو</span>
</a>
@* <button onclick="printAll()" class="btn-print-all text-nowrap" type="button" data-title="پرینت گروهی" data-intro="شما برای گرفتن پرینت گروهی ابتدا باید ردیف را انتخاب کنید و سپس دکمه پرینت گروهی بزنید.">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" stroke="#1E293B" />
<path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" stroke="#1E293B" />
<path d="M7.91675 11.25L11.2501 11.25" stroke="#1E293B" stroke-linecap="round" />
<path d="M7.91675 13.75L12.0834 13.75" stroke="#1E293B" stroke-linecap="round" />
<path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" stroke="#1E293B" />
</svg>
<span>پرینت گروهی</span>
</button> *@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- End Search Box -->
<!-- List Items -->
<div class="container-fluid">
<div class="row px-lg-2 p-auto">
<div class="wrapper bg-white my-2 list-box table-insurance">
<!-- Advance Search Box -->
<div class="container-fluid d-block d-md-none">
<div class="row d-flex align-items-center justify-content-between">
<div class="search-box bg-white">
<div class="col text-center">
<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>
</div>
</div>
</div>
<!-- End Advance Search Box -->
<div class="Rtable Rtable--5cols Rtable--collapse">
<div class="Rtable-row Rtable-row--head align-items-center sticky-div">
<div class="Rtable-cell column-heading">
<span class="d-flex justify-content-center text-white align-items-center justify-content-between">
ردیف
</span>
</div>
<div class="Rtable-cell column-heading">سال</div>
<div class="Rtable-cell column-heading">ماه</div>
<div class="Rtable-cell column-heading text-end">عملیات</div>
</div>
@if (@Model.InsurancList.Count > 0)
{
@foreach (var item in Model.InsurancList)
{
<div class="Rtable-row align-items-center position-relative">
<div class="Rtable-cell d-md-block d-none">
<div class="Rtable-cell--heading">
ردیف
</div>
<div class="Rtable-cell--content">
<span class="d-flex justify-content-center align-items-center justify-content-center">
@(i = i + 1)
</span>
</div>
</div>
<div class="Rtable-cell d-md-block d-none">
<div class="Rtable-cell--heading">سال</div>
<div class="Rtable-cell--content">
@item.Year
</div>
</div>
<div class="Rtable-cell d-md-block d-none">
<div class="Rtable-cell--heading">ماه</div>
<div class="Rtable-cell--content">@item.MonthName</div>
</div>
<div class="Rtable-insurance w-100 d-flex d-md-none align-items-center justify-content-between">
<div class="d-flex justify-content-center align-items-center justify-content-between">
<div class="checkbox-responsive d-flex justify-content-center align-items-center justify-content-around">
<span>@i</span>
</div>
<div class="Rtable-cell--heading">
<div>
@item.Year
@* @item.WorkShopName *@
</div>
@* <span>
@item.EmployerName
</span> *@
</div>
</div>
<div class="Rtable-cell--content d-flex justify-content-end align-items-center">
<div class="d-block text-center">
@* <span class="d-block">@item.Year</span> *@
<span class="d-block">@item.MonthName</span>
</div>
</div>
<div class="Rtable-cell--content d-flex justify-content-end align-items-center">
<div class="Rtable-cell--heading d-block text-center">
<a class="btn-print lessThan992" type="button" onclick="AjaxUrlContentModal('@Url.Page("./Index", "PrintOneMobile", new { Id = item.Id })');">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20" fill="none" stroke="currentColor">
<path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008"/>
<path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z"/>
<path d="M7.91675 11.25L11.2501 11.25" stroke-linecap="round"/>
<path d="M7.91675 13.75L12.0834 13.75" stroke-linecap="round"/>
<path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732"/>
</svg>
</a>
</div>
</div>
</div>
<div class="Rtable-cell d-md-block d-none">
<div class="Rtable-cell--content align-items-center d-flex d-md-block text-end">
<button class="btn-print moreThan992" type="button" onclick="AjaxUrlContentModal('@Url.Page("./Index", "PrintOne", new { Id = item.Id })')">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
<path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008"/>
<path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z"/>
<path d="M7.91675 11.25L11.2501 11.25" stroke-linecap="round"/>
<path d="M7.91675 13.75L12.0834 13.75" stroke-linecap="round"/>
<path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732"/>
</svg>
</button>
<button class="btn-print lessThan992" type="button" onclick="AjaxUrlContentModal('@Url.Page("./Index", "PrintOneMobile", new { Id = item.Id })')">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
<path d="M15.0001 11.2493H15.139C16.0279 11.2493 16.4723 11.2493 16.759 10.9866C16.7805 10.967 16.801 10.9464 16.8207 10.9249C17.0834 10.6382 17.0834 10.1938 17.0834 9.3049V9.3049C17.0834 7.52714 17.0834 6.63826 16.558 6.06484C16.5187 6.02194 16.4775 5.98077 16.4346 5.94146C15.8612 5.41602 14.9723 5.41602 13.1945 5.41602H6.91675C5.03113 5.41602 4.08832 5.41602 3.50253 6.0018C2.91675 6.58759 2.91675 7.5304 2.91675 9.41602V10.2493C2.91675 10.7208 2.91675 10.9565 3.06319 11.1029C3.20964 11.2493 3.44534 11.2493 3.91675 11.2493H5.00008" />
<path d="M5.41675 16.3903L5.41675 9.91732C5.41675 8.97451 5.41675 8.5031 5.70964 8.21021C6.00253 7.91732 6.47394 7.91732 7.41675 7.91732L12.5834 7.91732C13.5262 7.91732 13.9976 7.91732 14.2905 8.21021C14.5834 8.5031 14.5834 8.97451 14.5834 9.91732L14.5834 16.3903C14.5834 16.7068 14.5834 16.8651 14.4796 16.9399C14.3758 17.0148 14.2256 16.9647 13.9253 16.8646L12.2572 16.3086C12.1712 16.2799 12.1282 16.2656 12.0839 16.2669C12.0396 16.2682 11.9975 16.285 11.9134 16.3187L10.1858 17.0097C10.0941 17.0464 10.0482 17.0647 10.0001 17.0647C9.95194 17.0647 9.90609 17.0464 9.81439 17.0097L8.0868 16.3187C8.00267 16.285 7.9606 16.2682 7.91627 16.2669C7.87194 16.2656 7.82896 16.2799 7.74299 16.3086L6.07486 16.8646C5.77455 16.9647 5.62439 17.0148 5.52057 16.9399C5.41675 16.8651 5.41675 16.7068 5.41675 16.3903Z" />
<path d="M7.91675 11.25L11.2501 11.25" stroke-linecap="round" />
<path d="M7.91675 13.75L12.0834 13.75" stroke-linecap="round" />
<path d="M14.5834 5.41732V5.41732C14.5834 3.97799 14.5834 3.25833 14.1954 2.76756C14.1087 2.65791 14.0095 2.55874 13.8998 2.47204C13.4091 2.08398 12.6894 2.08398 11.2501 2.08398H8.75008C7.31076 2.08398 6.5911 2.08398 6.10032 2.47204C5.99068 2.55874 5.8915 2.65791 5.8048 2.76756C5.41675 3.25833 5.41675 3.97799 5.41675 5.41732V5.41732" />
</svg>
</button>
</div>
</div>
</div>
}
}
else
{
<div class="w-100 empty text-center bg-white d-flex align-items-center justify-content-center">
<div class="">
<img src="~/assetsclient/images/empty.png" alt="" class="img-fluid" />
<h5>اطلاعاتی وجود ندارد.</h5>
</div>
</div>
}
</div>
</div>
</div>
</div>
<!-- End List Items -->
</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 modal-fullscreen">
<div class="modal-content">
<form role="form" method="get" name="search-theme-form2" id="search-theme-form2" autocomplete="off">
<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>
<input type="hidden" value="@Model.WorkshopId" asp-for="SearchModel.WorkshopId" />
<div class="modal-body pt-0 mb-3">
<div class="container-fluid search-box">
<div id="overlaySearchAdvance" class=""></div>
<div class="row">
<div class="col-12 text-start mb-4">
<div>
<label class="text-nowrap">مرتب سازی</label>
<select class="form-select" id="sorting" asp-for="SearchModel.Sorting">
<option value="CreationDate-Max">مرتب سازی</option>
<option value="CreationDate-Min">تاریخ ایجاد لیست - کوچک به بزرگ</option>
<option value="Month-Min">بر اساس ماه - کوچک به بزرگ</option>
<option value="Month-Max">بر اساس ماه - بزرگ به کوچک</option>
<option value="Year-Min">بر اساس سال - کوچک به بزرگ</option>
<option value="Year-Max">بر اساس سال - بزرگ به کوچک</option>
</select>
</div>
</div>
<div class="col-12 text-start">
<p class="mb-3">جستجو بر اساس سال و ماه</p>
<div class="row">
<div class="col-6">
<div class="form-group">
<span class="form-control text-center persianDateInputYear" id="yearText">
@{
if (string.IsNullOrWhiteSpace(Model.SearchModel.Year))
{
<span>سال</span>
}
else
{
@Model.SearchModel.Year
}
}
</span>
<input type="hidden" class="form-control" asp-for="SearchModel.Year" value="@Model.SearchModel.Year" id="yearModal" maxlength="4" />
@* <span asp-validation-for="DateOfYear" class="error"></span> *@
</div>
</div>
<div class="col-6">
<div class="form-group">
<span class="form-control text-center persianDateInputMonth" id="monthText">
@{
if (string.IsNullOrWhiteSpace(Model.SearchModel.Month))
{
<span>ماه</span>
}
else
{
@switch (@Model.SearchModel.Month)
{
case "01":
<span>فروردین</span>
break;
case "02":
<span>اردیبهشت</span>
break;
case "03":
<span>خرداد</span>
break;
case "04":
<span>تیر</span>
break;
case "05":
<span>مرداد</span>
break;
case "06":
<span>شهریور</span>
break;
case "07":
<span>مهر</span>
break;
case "08":
<span>آبان</span>
break;
case "09":
<span>آذر</span>
break;
case "10":
<span>دی</span>
break;
case "11":
<span>بهمن</span>
break;
case "12":
<span>اسفند</span>
break;
default:
<span>ماه</span>
break;
}
}
}
</span>
<input type="hidden" class="form-control" asp-for="SearchModel.Month" value="@Model.SearchModel.Month" id="monthModal" />
@* <span asp-validation-for="DateOfMonth" class="error"></span> *@
</div>
</div>
<div class="col-12">
<a href="/Client/Company/InsuranceList" class="btn-clear-filter py-2 text-center d-block w-100 mt-2" id="filterRemove">
<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="submit" class="btn-search btn-search-click w-100">جستجو</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Modal From Bottom For Advance Search -->
<!--Start Print Modal Main -->
<div id="MainModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-xxl">
<div class="modal-content" id="ModalContent">
</div>
</div>
</div>
<!--End Of Print Modal Main -->
@section Script {
<script src="~/AssetsClient/js/dropdown.js?ver=@Version.StyleVersion"></script>
<script src="~/AssetsClient/js/site.js?ver=@Version.StyleVersion"></script>
<script src="~/assetsclient/js/smooth-scrollbar.js"></script>
<script>
// $('#sorting').on("change", function () {
// $('#searchBtn').click();
// });
var Scrollbar = window.Scrollbar;
Scrollbar.init(document.querySelector('#my-scrollbar'), {
alwaysShowTracks: true,
});
const selectedAll = document.querySelectorAll(".wrapper-dropdown");
// *************************** مربوط به مرتب سازی ********************************
var wrapperDropdown = $(".wrapper-dropdown");
$(document).ready(function () {
wrapperDropdown.on("click", function () {
var dropdown = $(this);
var optionsContainer = dropdown.children(".dropdown");
var optionsList = optionsContainer.find(".item");
dropdown.toggleClass("active");
if (dropdown.hasClass("active")) {
wrapperDropdown.not(this).removeClass("active");
}
optionsList.on("click", function () {
var selectedOption = $(this);
var valueData = selectedOption.data("value");
dropdown.removeClass("active");
dropdown.find(".selected-display").text(selectedOption.text());
$("#sendSorting").val(valueData);
optionsList.removeClass("active");
selectedOption.addClass("active");
});
});
var defaultValue = $("#sendSorting").val();
if (defaultValue) {
let defaultItem = $(".dropdown").find(".item[value-data='" + defaultValue + "']");
defaultItem.addClass("active");
var selectedDisplay = wrapperDropdown.find(".selected-display");
selectedDisplay.text(defaultItem.text());
}
});
$('.dropdown .item').on("click", function () {
let dataVal = $(this).attr("value-data");
$('#sendSorting').val(dataVal);
$('#searchBtn').click();
});
$('.dropdown-year .item').on("click", function () {
let dataVal = $(this).attr("value-data-year");
$('#sendDropdownYear').val(dataVal);
});
$('.dropdown-month .item').on("click", function () {
let dataVal = $(this).attr("value-data-month");
$('#sendDropdownMonth').val(dataVal);
});
var sendDropdownYear = $("#sendDropdownYear").val();
if (sendDropdownYear) {
let itemDropdownYear = $(".dropdown-year").find(".item[value-data-year='" + sendDropdownYear + "']");
itemDropdownYear.addClass("active");
var selectedYearDisplay = $(".wrapper-dropdown-year").find(".selected-display");
selectedYearDisplay.text(itemDropdownYear.text());
}
var sendDropdownMonth = $("#sendDropdownMonth").val();
if (sendDropdownMonth) {
let itemDropdownMonth = $(".dropdown-month").find(".item[value-data-month='" + sendDropdownMonth + "']");
itemDropdownMonth.addClass("active");
var selectedMonthDisplay = $(".wrapper-dropdown-month").find(".selected-display");
selectedMonthDisplay.text(itemDropdownMonth.text());
}
// check if anything else ofther than the dropdown is clicked
window.addEventListener("click", function (e) {
if (e.target.closest(".wrapper-dropdown") === null) {
closeAllDropdowns();
}
});
// close all the dropdowns
function closeAllDropdowns() {
const selectedAll = document.querySelectorAll(".wrapper-dropdown");
selectedAll.forEach((selected) => {
const optionsContainer = selected.children[2];
let arrow = selected.children[1];
handleDropdown(selected, arrow, false);
});
}
// open all the dropdowns
function handleDropdown(dropdown, arrow, open) {
if (open) {
arrow.classList.add("rotated");
dropdown.classList.add("active");
} else {
arrow.classList.remove("rotated");
dropdown.classList.remove("active");
}
}
// *************************** مربوط به مرتب سازی ********************************
//******************** برای تاریک و محو کردن بکگراند مربوط به انتخاب تاریخ سال و ماه ********************
$("#overlaySearchAdvance").click(function () {
$('#overlaySearchAdvance').toggleClass("overlaySearchAdvance");
$('.datepicker-container-year').remove();
$('.datepicker-container-month').remove();
});
//******************** برای تاریک و محو کردن بکگراند مربوط به انتخاب تاریخ سال و ماه ********************
//******************** فیلتر کردن برای جستجو ********************
$(document).on('click',
'.btn-search-click',
function () {
$('#filterRemove').show();
});
$(document).on('click',
'.btn-view-all',
function () {
$(this).hide();
$('.search-box input').val('');
$('.search-box .form-select').val(null);
$('#yearText').text('سال');
$('#monthText').text('ماه');
middleYearIndex = 2;
selectedMonth = 1;
});
//******************** فیلتر کردن برای جستجو ********************
$(document).ready(function () {
var filterYear = $('#year').val();
var filterMonth = $('#month').val();
if (filterYear != '' || filterMonth != '') {
$('.btn-clear-filter').removeClass('disable');
} else {
$('.btn-clear-filter').addClass('disable');
}
});
//******************** نمایش سال و ماه در موبایل ********************
if ($(window).width() < 768) {
var middleYearIndex = 2;
var selectedMonth = 2;
//************* Year *************
$('.persianDateInputYear').on('click',
function () {
$('#overlaySearchAdvance').addClass("overlaySearchAdvance");
var datepicker = $(this);
if ($(this).parent().find('.datepicker-container-year').length) {
return false;
} else {
$(this).parent().append(`
<div class="datepicker-container-year">
<div class="datepicker-container-date-div">
<div class="date-container">
<div id="years" class="scrollable-container"></div>
</div>
<div class="d-flex justify-content-around">
<button type="button" class="btn-secondary" id="cancelYear" style="width:100px; font-size: 11px;">انصراف</button>
<button type="button" class="btn-primary" id="confirmYear" style="width:100px; font-size: 11px;">تائید</button>
</div>
</div>
</div>
`);
}
var datepickerContainer = $(this).parent().find('.datepicker-container-year');
var years = datepickerContainer.find('#years');
// datepickerContainer.width(datepicker.outerWidth());
var middleYearIndexArray = [];
let yearlyList = [];
yearlyList.push({ year: 1368 });
yearlyList.push({ year: 1369 });
@foreach (var items in Model.YearlyList.OrderBy(x => x))
{
@:yearlyList.push({ year: Number(@items) });
}
var yearIndex = yearlyList.length;
yearIndex = yearIndex - 1;
var no3 = yearlyList[yearIndex].year + 1;
var no4 = yearlyList[yearIndex].year + 2;
yearlyList.push({ year: no3 });
yearlyList.push({ year: no4 });
var i = 0;
for (var j = yearlyList[yearIndex + 2].year; j >= 1368; j--) {
let y = { index: i, value: j };
middleYearIndexArray.push(j);
i++;
var formattedNumber = String(j).padStart(2, '0');
if (j == no3 || j == no4) {
years.append($('<span>').text('-').css('visibility', 'hidden'));
} else if (j == 1368 || j == 1369) {
years.append($('<span>').text(formattedNumber).css('visibility', 'hidden'));
} else {
years.append($('<span>').text(formattedNumber));
}
// var middleYearIndex = Math.floor(years.children('span').length / 2) - 2;
years.children('span').eq(middleYearIndex).addClass('chosen-date');
var containerHeightYear = years.height();
var optionHeightYear = years.children('span').outerHeight();
var scrollOffsetYear = optionHeightYear * middleYearIndex;
years.scrollTop(scrollOffsetYear - containerHeightYear / 2);
}
// datepickerContainer.addClass("date-container");
var selectedYear = yearlyList[yearIndex].year;
var yearsScrollTop;
var scrollTimeout;
// Scroll event listener
datepickerContainer.find('.scrollable-container').on('scroll',
function () {
var optionHeightYear = years.children('span').outerHeight();
// var scrollTopYear = years.scrollTop() + (optionHeightYear * 2);
var scrollTopYear = Math.round((years.scrollTop() + (optionHeightYear * 2)) / 10) * 10;
var selectedIndexYear = Math.round(scrollTopYear / optionHeightYear);
years.children('span').removeClass('chosen-date');
years.children('span').eq(selectedIndexYear).addClass('chosen-date');
yearsScrollTop = years.scrollTop();
var selectedValueYear = years.children('span').eq(selectedIndexYear).text();
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function () {
var scrollTopYearRounded = customRound(yearsScrollTop);
if (yearsScrollTop !== scrollTopYearRounded) {
years.scrollTop(scrollTopYearRounded);
}
},
250);
var containerId = $(this).attr('id');
if (containerId === 'years') {
selectedYear = selectedValueYear;
index = middleYearIndexArray.indexOf(Number(selectedValueYear));
middleYearIndex = index;
}
if (selectedYear) {
var formattedDate = selectedYear;
datepicker.val(formattedDate);
$('#yearModal').val(formattedDate);
$('#yearText').text(selectedYear);
}
});
$(document).on('click',
'#confirmYear',
function (event) {
$('#yearModal').val(selectedYear);
$('#yearText').text(selectedYear);
datepickerContainer.remove();
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
});
$(document).on('click',
'#cancelYear',
function (event) {
$('#yearModal').val('');
$('#yearText').text('سال');
middleYearIndex = 2;
datepickerContainer.remove();
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
});
$(document).on('click',
'.chosen-date',
function () {
// if (selectedYear == 0) {
// $('#yearModal').val($(this).text());
// console.log(selectedYear)
// $('#yearText').text($(this).text());
// } else {
$('#yearModal').val(selectedYear);
$('#yearText').text(selectedYear);
// }
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
datepickerContainer.remove();
});
});
//************* End Year *************
//************* Month *************
$('.persianDateInputMonth').on('click',
function () {
$('#overlaySearchAdvance').addClass("overlaySearchAdvance");
var datepicker = $(this);
if ($(this).parent().find('.datepicker-container-month').length) {
return false;
} else {
$(this).parent().append(`
<div class="datepicker-container-month">
<div class="datepicker-container-date-div">
<div class="date-container">
<div id="months" class="scrollable-container"></div>
</div>
<div class="d-flex justify-content-around">
<button type="button" class="btn-secondary" id="cancelMonth" style="width:100px; font-size: 11px;">انصراف</button>
<button type="button" class="btn-primary" id="confirmMonth" style="width:100px; font-size: 11px;">تائید</button>
</div>
</div>
</div>
`);
if ($(this).val() != '') {
let number = selectedMonth + 1;
var middleMonthIndex = number;
}
}
var datepickerContainer = $(this).parent().find('.datepicker-container-month');
var months = datepickerContainer.find('#months');
// Populate months
var monthNames = ['-', 'فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند', '-'];
for (var j = 0; j < 14; j++) {
var monthIndex = j;
// var monthIndex = (j * 12) % 12;
// var monthIndex = (j + i * 12) % 12;
var monthName = monthNames[j];
if (j == 0) {
months.append($('<span>').text('-').css('visibility', 'hidden'));
months.append($('<span>').text('-').css('visibility', 'hidden'));
} else if (j == 13) {
months.append($('<span>').text('-').css('visibility', 'hidden'));
months.append($('<span>').text('-').css('visibility', 'hidden'));
} else {
months.append($('<span>').text(monthName));
}
// var middleMonthIndex = selectedMonth;
// var middleMonthIndex = Math.floor(months.children('span').length / 2) - 17;
months.children('span').eq(selectedMonth).addClass('chosen-date');
var containerHeightMonth = months.height();
var optionHeightMonth = months.children('span').outerHeight();
var scrollOffsetMonth = optionHeightMonth * middleMonthIndex;
months.scrollTop(scrollOffsetMonth - containerHeightMonth / 2);
}
var selectedMonthValue = "01";
var selectedNumber = 2;
var selectedMonthText = "فروردین";
var monthScrollTop;
var scrollTimeout;
// Scroll event listener
datepickerContainer.find('.scrollable-container').on('scroll',
function () {
var optionHeightMonth = months.children('span').outerHeight();
var scrollTopMonth = Math.round((months.scrollTop() + (optionHeightMonth * 2)) / 10) * 10;
var selectedIndexMonth = Math.round(scrollTopMonth / optionHeightMonth);
months.children('span').removeClass('chosen-date');
months.children('span').eq(selectedIndexMonth).addClass('chosen-date');
monthScrollTop = months.scrollTop();
var selectedValueMonth = months.children('span').eq(selectedIndexMonth).text();
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function () {
var scrollTopMonthRounded = customRound(monthScrollTop);
if (monthScrollTop !== scrollTopMonthRounded) {
months.scrollTop(scrollTopMonthRounded);
}
},
250);
var containerId = $(this).attr('id');
if (containerId === 'months') {
if (selectedValueMonth === 'فروردین') {
selectedMonthValue = '01';
selectedNumber = 1;
selectedMonthText = "فروردین";
} else if (selectedValueMonth === 'اردیبهشت') {
selectedMonthValue = '02';
selectedNumber = 2;
selectedMonthText = "اردیبهشت";
} else if (selectedValueMonth === 'خرداد') {
selectedMonthValue = '03';
selectedNumber = 3;
selectedMonthText = "خرداد";
} else if (selectedValueMonth === 'تیر') {
selectedMonthValue = '04';
selectedNumber = 4;
selectedMonthText = "تیر";
} else if (selectedValueMonth === 'مرداد') {
selectedMonthValue = '05';
selectedNumber = 5;
selectedMonthText = "مرداد";
} else if (selectedValueMonth === 'شهریور') {
selectedMonthValue = '06';
selectedNumber = 6;
selectedMonthText = "شهریور";
} else if (selectedValueMonth === 'مهر') {
selectedMonthValue = '07';
selectedNumber = 7;
selectedMonthText = "مهر";
} else if (selectedValueMonth === 'آبان') {
selectedMonthValue = '08';
selectedNumber = 8;
selectedMonthText = "آبان";
} else if (selectedValueMonth === 'آذر') {
selectedMonthValue = '09';
selectedNumber = 9;
selectedMonthText = "آذر";
} else if (selectedValueMonth === 'دی') {
selectedMonthValue = '10';
selectedNumber = 10;
selectedMonthText = "دی";
} else if (selectedValueMonth === 'بهمن') {
selectedMonthValue = '11';
selectedNumber = 11;
selectedMonthText = "بهمن";
} else if (selectedValueMonth === 'اسفند') {
selectedMonthValue = '12';
selectedNumber = 12;
selectedMonthText = "اسفند";
}
}
if (selectedMonthValue) {
var formattedDate = selectedMonthValue;
datepicker.val(formattedDate);
$('#monthModal').val(formattedDate);
$('#monthText').text(selectedMonthText);
selectedMonth = selectedNumber;
}
});
$(document).on('click',
'#confirmMonth',
function (event) {
$('#monthModal').val(selectedMonthValue);
$('#monthText').text(selectedMonthText);
selectedMonth = selectedNumber;
datepickerContainer.remove();
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
});
$(document).on('click',
'#cancelMonth',
function (event) {
$('#monthModal').val('');
$('#monthText').text('ماه');
selectedMonth = 2;
datepickerContainer.remove();
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
});
$(document).on('click',
'.chosen-date',
function () {
$('#monthModal').val(selectedMonthValue);
$('#monthText').text(selectedMonthText);
selectedMonth = selectedNumber;
$('#overlaySearchAdvance').removeClass("overlaySearchAdvance");
datepickerContainer.remove();
});
});
//************* End Month *************
//Pixel of height for Span in date
//For example: datepicker-container-date .years span
function customRound(number) {
var roundedNumber = Math.round(number);
var remainder = roundedNumber % 60; //60px
if (remainder <= 10) {
return roundedNumber - remainder;
} else {
return roundedNumber + (60 - remainder);
}
}
}
//******************** نمایش سال و ماه در موبایل ********************
</script>
}