Backend-Api/ServiceHost/Pages/services/rollcall.cshtml

@page
@model ServiceHost.Pages.services.rollcallModel
@{
	Layout = "Shared/_LayoutHome";
}

<!-- Start Header -->
<div class="py-3 relative overflow-hidden">
	<img src="~/assetsmain/images/headerSingle.png" class="absolute inset-0 object-cover object-center dark:opacity-15 h-full w-full" alt="" srcset="">
	<div class="flex items-center justify-between gap-3 py-1 z-10">
		<div class="flex flex-col gap-2 lg:gap-4 px-6 w-full md:w-6/12 text-[#3F3F3F] dark:text-white opacity-100 z-10">
            <h4 class="text-[1.6rem] font-bold">حضور و غیاب</h4>
			<p class="text-[0.8rem] md:text-[0.9rem] font-bold md:font-medium text-justify">
				ماژول "حضور و غیاب" یکی از مهم‌ترین اجزای سامانه منابع انسانی است که به‌صورت دقیق، هوشمند و بدون نیاز به روش‌های دستی، ورود و خروج پرسنل را ثبت و تحلیل می‌کند. با استفاده از این بخش، مدیران می‌توانند به‌صورت لحظه‌ای وضعیت کاری افراد را بررسی کرده و گزارش‌های دقیق از حضور، غیبت، مرخصی و مأموریت دریافت کنند.
			</p>
			<div class="flex items-center justify-start gap-3 my-4">
				<button class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out">
					<span>تماس با فروش</span>
				</button>
				<a asp-page="/register/Index" class="py-[0.54rem] w-full md:w-[8rem] px-3 text-[0.8rem] font-[500] text-center bg-white hover:bg-[#2DBCBC] border-2 border-[#2DBCBC] text-[#138F8F] hover:text-white rounded-md duration-500 ease-in-out cursor-pointer">
					<span>ثبت نام</span>
				</a>
			</div>
		</div>
		<div class="hidden md:flex justify-end gap-6 w-6/12 opacity-100 z-1">
			<img src="~/assetsmain/images/line-wave.svg" class="absolute left-0 -top-20 " alt="">
		</div>
	</div>
</div>
<!-- End Header -->
<!-- Start Contents -->
<div class="block lg:hidden sticky top-[66px] z-[100] mx-4">
    <button class="bg-white dark:bg-[#212330] rounded-lg w-full text-[#2B2B2B] dark:text-white font-bold px-4 py-3 flex items-center justify-between shadow-lg focus:outline-none before:content-[''] before:absolute before:h-[33px] before:my-auto before:w-[6px] before:bg-[#2DBCBC] before:top-2 before:right-0 before:rounded-tl-md before:rounded-bl-md before:transition-all before:opacity-0 active before:!opacity-100" id="dropdown-rule">
        <span id="ruleBtnMobile">آپلود عکس پرسنل</span>
        <svg id="dropdown-icon" class="text-[#33363F] dark:text-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
    </button>
    <div id="dropdown-menu" class="absolute right-0 hidden w-full bg-white dark:bg-[#212330] rounded-none shadow-lg z-10">
        <a href="#tab1" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">آپلود عکس پرسنل</a>
        <a href="#tab2" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">حضور و غیاب جاری</a>
        <a href="#tab3" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">سوابق حضور و غیاب</a>
        <a href="#tab4" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">گروه‌بندی</a>
        <a href="#tab5" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">ساعت فعالیت</a>
        <a href="#tab6" class="block px-4 py-2 text-[#2B2B2B] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800">حساب دوربین</a>
    </div>
</div>

<div class="hidden lg:flex mb-4 items-center justify-center gap-9 sticky top-[127px] w-full mx-auto bg-white dark:bg-[#212330] shadow-md z-20">
    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0 active before:!opacity-100">
        <a href="#tab1" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        آپلود عکس پرسنل
        </a>
    </div>


    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
        <a href="#tab2" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        حضور و غیاب جاری
        </a>
    </div>


    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
        <a href="#tab3" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        سوابق حضور و غیاب
        </a>
    </div>


    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
        <a href="#tab4" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        گروه‌بندی
        </a>
    </div>


    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
        <a href="#tab5" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        ساعت فعالیت
        </a>
    </div>


    <div class="relative p-3 cursor-pointer before:content-[''] before:absolute before:w-full before:h-[4px] before:bg-[#2DBCBC] before:bottom-0 before:right-0 before:rounded-t-md before:transition-all before:opacity-0">
        <a href="#tab6" class="tab-link block text-[#344456] dark:text-white hover:text-[#25303D] transition-colors text-[0.9rem] font-[500]">
	        حساب دوربین
        </a>
    </div>

</div>

<div class="px-6 md:px-9 lg:px-12 mx-auto max-w-[1320px]">
    <div class="mb-9 max-w-screen-xl">

        <div class="w-full md:w-10/12 lg:w-9/12 mx-auto">
            <section id="tab1" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <div>
                        <h2 class="text-[#3F3F3F] text-xl font-bold mb-2 dark:text-white">آپلود عکس پرسنل</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        این بخش مخصوص بارگذاری تصویر پرسنلی افراد برای استفاده در سامانه تشخیص چهره است. با ثبت عکس‌ها، نرم‌افزار می‌تواند به‌صورت اتوماتیک هویت کاربر را هنگام ورود و خروج از محل کار شناسایی کرده و حضور او را ثبت نماید.
                        </p>
                        
                        <div class="flex items-center gap-1 my-3">
	                        <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
		                        <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8"/>
		                        <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC"/>
		                        <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC"/>
	                        </svg>                                    
	                        <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>

                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        برای سیستم حضور و غیاب با تشخیص چهره، داشتن تصویر پرسنل الزامی است. این بخش تضمین می‌کند که هر تصویر به صورت استاندارد، واضح و مرتبط با هر کارمند ثبت شود.
	                    </p>
                    </div>
                    <img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
                </div>
            </section>

            <section id="tab2" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
                    <div class="order-1 lg:order-2">
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">حضور و غیاب جاری</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        در این بخش، وضعیت زنده (Real-time) حضور و غیاب پرسنل نمایش داده می‌شود.
                        </p>

                        <ul class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white px-6 relative mr-3 my-2">
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">چه کسانی امروز وارد شده‌اند؟</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">چه کسانی هنوز ورود نزده‌اند؟</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">چه کسانی مرخصی یا مأموریت هستند؟</li>
                        </ul>
                        <div class="flex items-center gap-1 my-3">
                            <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8" />
                                <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC" />
                                <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC" />
                            </svg>
                            <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        مدیر می‌تواند در لحظه بفهمد چند نفر در محل کار حضور دارند یا چه کسی تأخیر دارد.
                        </p>
                    </div>
                </div>
            </section>

            <section id="tab3" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <div>
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">سوابق حضور و غیاب</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        تمامی ورود و خروج‌های ثبت‌شده، همراه با تاریخ، ساعت، نوع ثبت (ورود/خروج/مرخصی/مأموریت) و روش ثبت (تشخیص چهره، دستی، کارت) در این بخش ذخیره می‌شود.
	                        
                        </p>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        همچنین گزارشات ماهانه و هفتگی قابل استخراج هستند.
                        </p>
                        
                        <div class="flex items-center gap-1 my-3">
	                        <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
		                        <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8" />
		                        <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC" />
		                        <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC" />
	                        </svg>
	                        <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        برای محاسبه حقوق، پاداش یا جریمه، این اطلاعات ضروری است. همچنین در صورت اعتراض کارمند، سوابق قابل بررسی و اثبات هستند.
                        </p>
                    </div>
                    <img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
                </div>
            </section>

            <section id="tab4" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
                    <div class="order-1 lg:order-2">
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">گروه‌بندی</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        با استفاده از این گزینه می‌توانید پرسنل را در گروه‌های مختلف دسته‌بندی کنید (مثلاً بخش مالی، پشتیبانی، فروش، تولید و ...). سپس برای هر گروه قوانین خاص حضور و غیاب تعریف شود.
                        </p>
                        
                        <div class="flex items-center gap-1 my-3">
	                        <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
		                        <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8" />
		                        <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC" />
		                        <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC" />
	                        </svg>
	                        <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        ممکن است بخش تولید از ۶ صبح تا ۳ بعدازظهر فعالیت داشته باشد ولی بخش اداری از ۸ تا ۵. با گروه‌بندی، نرم‌افزار حضور هر بخش را با شرایط خاص خودش بررسی می‌کند.
                        </p>
                    </div>
                </div>
            </section>

            <section id="tab5" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <div>
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">تنظیم ساعت فعالیت مجموعه</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        در این قسمت می‌توان بازه‌های زمانی کاری سازمان یا هر گروه شغلی را تعریف کرد.
                        </p>

                        <ul class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white px-6 relative mr-3 my-2">
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">روزهای کاری</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">ساعات شروع و پایان</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">روزهای تعطیل رسمی یا اختصاصی</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">شیفت‌های چرخشی یا ثابت</li>
                        </ul>
                        <div class="flex items-center gap-1 my-3">
                            <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8" />
                                <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC" />
                                <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC" />
                            </svg>
                            <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        برای بررسی تأخیر، اضافه‌کاری و محاسبه ساعات کاری، مرجع اصلی همین تنظیمات هستند.
                        </p>
                    </div>
                    <img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
                </div>
            </section>

            <section id="tab6" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
                    <div class="order-1 lg:order-2">
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">تنظیمات حساب کاربری دوربین</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
                            در صورتی که از دوربین یا دستگاه حضور و غیاب خاصی استفاده می‌کنید، این بخش امکان تنظیم و اتصال آن به سیستم را فراهم می‌کند.
                        </p>

                        <ul class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white px-6 relative mr-3 my-2">
	                        <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">تعیین آدرس دوربین</li>
	                        <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">فعال‌سازی تشخیص چهره</li>
                            <li class="before:content-[''] before:absolute before:h-2 before:w-2 before:rounded-full before:bg-[#27ACAC] before:right-0 before:transition-all flex items-center before:mr-2 mr-3">تنظیمات امنیتی یا محدودیت‌ها</li>
                        </ul>
                        <div class="flex items-center gap-1 my-3">
                            <svg width="27" height="27" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.33059 25.6694C6.16116 27.5 9.10744 27.5 15 27.5C20.8925 27.5 23.8389 27.5 25.6694 25.6694C27.5 23.8389 27.5 20.8925 27.5 15C27.5 9.10744 27.5 6.16116 25.6694 4.33059C23.8389 2.5 20.8925 2.5 15 2.5C9.10744 2.5 6.16116 2.5 4.33059 4.33059C2.5 6.16116 2.5 9.10744 2.5 15C2.5 20.8925 2.5 23.8389 4.33059 25.6694Z" fill="#BFE5E8" />
                                <path d="M23.2263 11.8429C23.5538 11.4418 23.4941 10.8512 23.0929 10.5238C22.6918 10.1964 22.1013 10.2561 21.7738 10.6572L15.3143 18.5699C15.0482 18.4754 14.7424 18.5018 14.4877 18.6681C14.0541 18.9511 13.9321 19.532 14.2151 19.9655L14.5719 20.5124C14.7354 20.7629 15.0086 20.9203 15.3072 20.9363C15.6058 20.9521 15.8942 20.8246 16.0833 20.5929L23.2263 11.8429Z" fill="#27ACAC" />
                                <path d="M18.2262 11.8429C18.5537 11.4418 18.494 10.8512 18.0929 10.5238C17.6917 10.1964 17.1012 10.2561 16.7737 10.6572L10.3572 18.5175L8.22627 15.9071C7.89885 15.5061 7.30827 15.4464 6.90717 15.7737C6.50608 16.1012 6.44636 16.6917 6.77378 17.0929L9.63092 20.5929C9.80897 20.811 10.0756 20.9375 10.3572 20.9375C10.6387 20.9375 10.9054 20.811 11.0834 20.5929L18.2262 11.8429Z" fill="#27ACAC" />
                            </svg>
                            <div class="text-[#178B8B] font-semibold ">کاربرد</div>
                        </div>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
	                        در شرکت‌هایی که چندین دوربین یا ورودی دارند، هر دستگاه به راحتی به سامانه متصل می‌شود و اطلاعات به‌صورت یکپارچه ثبت می‌گردد.
                        </p>
                    </div>
                </div>
            </section>

            <section id="tab7" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <div>
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">مساعده</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
                            در صورتی که کارمندی درخواست مساعده داشته باشد، اطلاعات مربوط به درخواست، مبلغ تأیید شده، تاریخ پرداخت و نحوه بازپرداخت در این بخش ثبت می‌شود. این بخش به شفاف‌سازی ارتباط مالی بین سازمان و کارمند کمک می‌کند.
                        </p>
                    </div>
                    <img src="~/assetsmain/images/contract-list.svg" class="w-full sm:w-72 md:w-80 lg:w-96 text-center" alt="">
                </div>
            </section>

            <section id="tab8" class="py-2 md:py-9">
                <div class="flex flex-col md:flex-row justify-between items-center gap-3">
                    <img src="~/assetsmain/images/checkout-list.png" class="w-full sm:w-72 md:w-80 lg:w-96 text-center order-2 lg:order-1" alt="">
                    <div class="order-1 lg:order-2">
                        <h2 class="text-[#2B2B2B] text-xl font-bold mb-2 dark:text-white">جرایم</h2>
                        <p class="text-[#2B2B2B] font-medium text-[0.9rem] dark:text-white text-justify">
                            در صورت وجود تخلفات انضباطی یا دیرکرد در ورود و خروج، تأخیر، ترک محل کار یا سایر موارد، می‌توان جرایم مربوطه را ثبت کرد. اطلاعات شامل نوع تخلف، مبلغ جریمه، تاریخ، و توضیحات تکمیلی است. این بخش به حفظ نظم و قانون‌مداری در مجموعه کمک می‌کند.
                        </p>
                    </div>
                </div>
            </section>

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


<div class="py-3 px-6 mx-auto max-w-[1320px]">
    <div class="relative flex flex-col md:flex-row gap-6 items-center w-full mx-auto bg-gradient-to-l to-[#2EBEBE] 1E9D9D from-[#035757] overflow-hidden rounded-2xl my-1 p-3 md:p-6 lg:p-9">
	    
	    <div class="absolute bottom-0 left-0">
		    <img src="~/assetsmain/images/lineSupportLeft.svg" class="" alt="">
	    </div>
	    <div class="absolute top-0 -right-6">
		    <img src="~/assetsmain/images/lineSupportRight.svg" class="" alt="">
	    </div>

        <div class="w-full md:w-8/12 text-center md:text-start">
            <div class="text-white font-extrabold text-[1.6rem] mb-4">مدیریت یکپارچه منابع انسانی و هوشمند</div>
            <p class="text-white font-medium text-[0.8rem] p-0 text-justify">
                با استفاده از خدمات سامانه کارگاه، به اطلاعات پرسنلی، صورت‌حساب‌های مالی، گزارشات، حضور و غیاب، کارپوشه، مدیریت کاربران و پشتیبانی دسترسی داشته باشید و فرآیندهای سازمانی خود را بهینه کنید.
            </p>
        </div>
        <div class="w-full md:w-4/12 text-center md:text-left z-10">
            <a asp-page="/contact-us/Index" class="px-9 py-2 w-full md:w-auto text-[#138F8F] text-[0.8rem] font-semibold rounded-lg cursor-pointer bg-white hover:bg-[#DDDDDD] duration-500 ease-in-out">درخواست مشاوره</a>
        </div>
    </div>
</div>

@section Script {

    <script>
        $(document).ready(function () {
            $('.tab-link').on('click', function (e) {
                e.preventDefault();
                let target = $(this).attr('href');

                $('html, body').animate({
                    scrollTop: $(target).offset().top - 110
                }, 500);

                $('.tab-link').parent().removeClass('active before:!opacity-100');
                $(this).parent().addClass('active before:!opacity-100');
            });

            $('#dropdown-rule').on('click', function () {
                $('#dropdown-menu').toggleClass('hidden');
            });

            $('#dropdown-menu a').on('click', function (e) {
                e.preventDefault();
                const target = $(this).attr('href');

                $('html, body').animate({
                    scrollTop: $(target).offset().top - 110
                }, 500);

                $('#dropdown-menu').addClass('hidden');
                $('#ruleBtnMobile').text($(this).text());
            });

            $(window).on('scroll', function () {
                let scrollPosition = $(window).scrollTop();

                $('section[id^="tab"]').each(function () {
                    let sectionOffset = $(this).offset().top - 110;
                    let sectionHeight = $(this).outerHeight();
                    let sectionId = $(this).attr('id');

                    if (scrollPosition >= sectionOffset && scrollPosition < sectionOffset + sectionHeight) {
                        $('.tab-link').parent().removeClass('active before:!opacity-100');
                        $('.tab-link[href="#' + sectionId + '"]').parent().addClass('active before:!opacity-100');

                        const currentDropdownItem = $('#dropdown-menu a[href="#' + sectionId + '"]');
                        $('#ruleBtnMobile').text(currentDropdownItem.text());
                    }
                });
            });
        });

    </script>
}