$(document).ready(async function () {
	/* سلکت شدن ماه جاری */
	const monthSelect = document.getElementById('month-select');
	monthSelect.value = currentMonth;
	/* سلکت شدن ماه جاری */

	const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
	$('#year-select').val(year !== "0" ? year : Number($('#year-select').val()));
	$("#month-select").val(month !== "0" ? month : currentMonth);
	$("#employer-select").val(employer);
	$("#workshop-select").val(workshopAndArchive);

    $('#year-select-mobile').val(year !== "0" ? year : Number($('#year-select').val()));
	$("#month-select-mobile").val(month !== "0" ? month : currentMonth);
	$("#employer-select-mobile").val(employer);
	$("#workshop-select-mobile").val(workshopAndArchive);

    if (workshopAndArchive && workshopAndArchiveName) {
		const option = new Option(workshopAndArchiveName, workshopAndArchive, true, true);
		$("#workshop-select").append(option).trigger('change');
		$("#workshop-select-mobile").append(option).trigger('change');
	}

	if (employer && employerName) {
		const option = new Option(employerName, employer, true, true);
		$("#employer-select").append(option).trigger('change');
		$("#employer-select-mobile").append(option).trigger('change');
	}

    $("#admin-personnel-select").val(adminPersonnel);
	$("#admin-personnel-select-mobile").val(adminPersonnel);
	$("#status-select").val(status !== "" ? status : 2);
	$("#status-select-mobile").val(status !== "" ? status : 2);

	if (year !== "0" || month !== '0' || employer !== '0' || workshopAndArchive !== '0' || adminPersonnel !== '0' || status !== '') {
		$('.btn-clear-filter').removeClass('disable');
	} else {
		$('.btn-clear-filter').addClass('disable');
	}

    $(".EmployerSelect2Option").select2({
        language: "fa",
        dir: "rtl",
        ajax: {
            url: employerSelectListUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (response) {
                const originalList = response.data.map(item => ({
                    id: item.id,
                    text: item.name
                }));

				const manualItems = [
					{ id: 0, text: 'انتخاب کارفرما ...' }
				];

				const finalList = manualItems.concat(originalList);

                return {
                    results: finalList
                };
            },
            cache: false
        },
        minimumInputLength: 0
        //dropdownParent: $('#MainModal')
	});

    $(".EmployerSelect2OptionMobile").select2({
        language: "fa",
        dir: "rtl",
        ajax: {
            url: employerSelectListUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (response) {
                const originalList = response.data.map(item => ({
                    id: item.id,
                    text: item.name
                }));

                const manualItems = [
                    { id: 0, text: 'انتخاب کارفرما ...' }
                ];

                const finalList = manualItems.concat(originalList);

                return {
                    results: finalList
                };
            },
            cache: false
        },
        minimumInputLength: 0,
		dropdownParent: $('#searchModal')
    });

    $(".WorkshopSelect2Option").select2({
        language: "fa",
        dir: "rtl",
        ajax: {
            url: workshopSelectListUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
			processResults: function (response) {
				const originalList = response.data.map(item => ({
					id: item.id,
					text: item.name + " - " + item.archiveCode
				}));

				const manualItems = [
					{ id: 0, text: 'انتخاب نام کارگاه /شماره بایگانی ...' }
				];

				const finalList = manualItems.concat(originalList);

				return {
					results: finalList
				};
            },
            cache: false
        },
        minimumInputLength: 0
        //dropdownParent: $('#MainModal')
	});

    $(".WorkshopSelect2OptionMobile").select2({
        language: "fa",
        dir: "rtl",
        ajax: {
            url: workshopSelectListUrl,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
			processResults: function (response) {
                const originalList = response.data.map(item => ({
                    id: item.id,
					text: item.name + " - " + item.archiveCode
				}));

                const manualItems = [
					{ id: 0, text: 'انتخاب نام کارگاه /شماره بایگانی ...' }
				];

                const finalList = manualItems.concat(originalList);

                return {
                    results: finalList
				};
            },
            cache: false
        },
        minimumInputLength: 0,
		dropdownParent: $('#searchModal')
    });

	$(".AdminPersonnelNameSelect2Option").select2({
		language: "fa",
		dir: "rtl"
		//dropdownParent: $('#MainModal')
	});
	
	$(".AdminPersonnelNameSelect2OptionMobile").select2({
        language: "fa",
        dir: "rtl",
        dropdownParent: $('#MainModal')
	});


	$("#status-select").select2({
        language: "fa",
        dir: "rtl"
        //dropdownParent: $('#MainModal')
    });
	$("#status-select-mobile").select2({
        language: "fa",
        dir: "rtl",
        dropdownParent: $('#searchModal')
    });

    $("#year-select").select2({
        language: "fa",
        dir: "rtl"
        //dropdownParent: $('#MainModal')
    });
	$("#year-select-mobile").select2({
        language: "fa",
        dir: "rtl",
        dropdownParent: $('#searchModal')
    });

	$("#month-select").select2({
		language: "fa",
		dir: "rtl"
		//dropdownParent: $('#MainModal')
	});
	$("#month-select-mobile").select2({
        language: "fa",
        dir: "rtl",
        dropdownParent: $('#searchModal')
	});

	await ajaxAdminPersonnel();
	await loadMonthlyOverviewData();
});

// Open Div Mobile
$(document).on('click', '.monthly-table__row', function () {
	var container = $(this).closest('.monthly-table__container');
	var toggleDiv = container.find('.monthly-table__toggle');
	var isOpen = toggleDiv.hasClass('show');

	// Close all
	$('.monthly-table__toggle.show').removeClass('show');

	// Open this one only if it wasn't already open
	if (!isOpen) {
		toggleDiv.addClass('show');
	}
});

$(document).on('click', '.btn-search-click, .btn-search-click-mobile', function () {

	const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();

	var filterYear = year;
	var filterMonth = month;
	var filterEmployer = employer;
	var filterEmployerName = employerName;
	var filterWorkshopAndArchive = workshopAndArchive;
	var filterWorkshopAndArchiveName = workshopAndArchiveName;
	var filterAdminPersonnel = adminPersonnel;
	var filterStatus = status;

	if (window.matchMedia('(max-width: 767px)').matches) {
		filterYear = $('#year-select-mobile').val();
		filterMonth = $('#month-select-mobile').val();
		filterEmployer = $('#employer-select-mobile').val();
		filterEmployerName = $('#employer-select-mobile').select2('data')[0].text;
		filterWorkshopAndArchive = $('#workshop-select-mobile').val();
		filterWorkshopAndArchiveName = $("#workshop-select-mobile").select2('data')[0].text;
		filterAdminPersonnel = $('#admin-personnel-select-mobile').val();
		filterStatus = $('#status-select-mobile').val();
	} else {
        filterYear = $('#year-select').val();
        filterMonth = $('#month-select').val();
        filterEmployer = $('#employer-select').val();
        filterEmployerName = $('#employer-select').select2('data')[0].text;
        filterWorkshopAndArchive = $('#workshop-select').val();
        filterWorkshopAndArchiveName = $("#workshop-select").select2('data')[0].text;
        filterAdminPersonnel = $('#admin-personnel-select').val();
        filterStatus = $('#status-select').val();
    }

	if (filterYear !== "0" || filterMonth !== '0' || filterEmployer !== '0' || filterWorkshopAndArchive !== '0' || filterAdminPersonnel !== '0' || filterStatus !== '') {
		$('.btn-clear-filter').removeClass('disable');
	} else {
		$('.btn-clear-filter').addClass('disable');
	}

	paramsUrl(filterYear, filterMonth, filterEmployer, filterEmployerName, filterWorkshopAndArchive, filterWorkshopAndArchiveName, filterAdminPersonnel, filterStatus);

	var isMobile = window.matchMedia('(max-width: 767px)').matches;
	if (isMobile) {
		$('#searchModal').modal('hide');
	}

    loadMonthlyOverviewData();
});

$(document).on('click', '.btn-clear-filter', function () {
	$('.btn-clear-filter').addClass('disable');
	//$('.employeeName').val('');
	$('#searchModal').modal('hide');
	loadMonthlyOverviewData();
});

$(document).on('click', '.js-document-click', function () {
	$('.js-document-click').removeClass('tab-bar__tab--active');
	$(this).addClass('tab-bar__tab--active');
	var statusValue = $(this).prop('value');

	var isMobile = window.matchMedia('(max-width: 767px)').matches;

	$(".monthly-table__body").hide();
	$(".card-container").hide();
	switch (statusValue) {
		case "0":
			!isMobile ? $('#load-data-html-step0').show() : $('#load-data-html-step0-mobile').show();
			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
			break;
		case "1":
			!isMobile ? $('#load-data-html-step1').show() : $('#load-data-html-step1-mobile').show();
			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
			break;
		case "2":
			!isMobile ? $('#load-data-html-step2').show() : $('#load-data-html-step2-mobile').show();
			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
			break;
		case "3":
			!isMobile ? $('#load-data-html-step3').show() : $('#load-data-html-step3-mobile').show();
			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
			break;
		case "4":
			!isMobile ? $('#load-data-html-step4').show() : $('#load-data-html-step4-mobile').show();
			!isMobile ? $('#overviewSteps').show() : $('#overviewSteps-mobile').show();
			!isMobile ? $('#overviewAll').hide() : $('#overviewAll-mobile').hide();
			break;
		case "5":
			!isMobile ? $('#load-data-html-stepAll').show() : $('#load-data-html-stepAll-mobile').show();
			!isMobile ? $('#overviewAll').show() : $('#overviewAll-mobile').show();
			!isMobile ? $('#overviewSteps').hide() : $('#overviewSteps-mobile').hide();
			break;
		default:
	}
});

async function loadMonthlyOverviewData() {
	$('#load-data-html-step0').html('');
	$('#load-data-html-step1').html('');
	$('#load-data-html-step2').html('');
	$('#load-data-html-step3').html('');
	$('#load-data-html-step4').html('');
	$('#load-data-html-stepAll').html('');
	$("#loadingSkeleton").show();

    var html = '';

	const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();

	var searchModel = {
		'Year': year !== "0" ? year : Number($('#year-select').val()),
		'Month': month !== "0" ? month : Number($('#month-select').val()),
		'WorkshopId': workshopAndArchive,
		'EmployerId': employer,
		'AdminAccountId': adminPersonnel !== "0" ? adminPersonnel : adminAccountId,
		'ActivationStatus': Number(status)
	};

	try {
		const response = await ajax.get(loadMonthlyOverviewDataUrl, searchModel, true);
		var responseData = response.data;

		var countStatusStep0 = responseData.filter(x => x.status === 0).length;
		$("#step0-badge").text(countStatusStep0).toggle(countStatusStep0 > 0);

		var countStatusStep1 = responseData.filter(x => x.status === 1).length;
		$("#step1-badge").text(countStatusStep1).toggle(countStatusStep1 > 0);

		var countStatusStep2 = responseData.filter(x => x.status === 2).length;
		$("#step2-badge").text(countStatusStep2).toggle(countStatusStep2 > 0);

		var countStatusStep3 = responseData.filter(x => x.status === 3).length;
		$("#step3-badge").text(countStatusStep3).toggle(countStatusStep3 > 0);

		var countStatusStep4 = responseData.filter(x => x.status === 4).length;
		$("#step4-badge").text(countStatusStep4).toggle(countStatusStep4 > 0);

		var countStatusStep5 = responseData.length;
		$("#step5-badge").text(countStatusStep5).toggle(countStatusStep5 > 0);

		if (responseData.length > 0) {
			initialDocument(responseData);
			monthlyOverviewStatusDocument(responseData);
			allWorkshops(responseData);
		} else {
            html += `<div class="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>`;
			$('#load-data-html-step0').html(html);
			$('#load-data-html-step1').html(html);
			$('#load-data-html-step2').html(html);
			$('#load-data-html-step3').html(html);
			$('#load-data-html-step4').html(html);
			$('#load-data-html-stepAll').html(html);
		}

		$("#loadingSkeleton").hide();
    } catch (err) {
        console.error("خطا در ajax.post:", err);
    }
}

function initialDocument(data) {
	var html = '';
	var htmlMobile = '';
	var indexNumber = 1;
	var indexNumberMobile = 1;
	data.forEach(function (item) {
		if (item.status === 0) {
			html += `<div class="monthly-table__container tw-cursor-pointer">
	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
		                        <div class="monthly-table__cell tw-w-[2%]">
			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
				                        ${indexNumber++}
			                        </div>
		                        </div>
		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
		                        <div class="monthly-table__cell tw-w-[15%]  tw-text-right"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.province}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center"><div class="monthly-table__cell-title">${item.city}</div></div>
		                        <div class="monthly-table__cell tw-w-[25%] tw-text-right">
			                        <div class="tooltip-container tw-text-right">
				                        <div class="tooltip__trigger tw-truncate tw-text-right">${item.address}</div>
				                        <div class="tooltip-container__text">
                                            ${item.address}
				                        </div>
			                        </div>

		                        </div>
		                        <div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.agentPhoneNumber}</div>
		                        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.adminFullName}</div>
		                        <div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-end tw-gap-2">
			                        <button class="monthly-table__operation-button u-tactile" aria-label="Edit monthly">
				                        عملیات
			                        </button>
		                        </div>
	                        </div>
	                        <!-- toggle content -->
	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">

		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

			                        </div>
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>

			                        </div>
		                        </div>
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
			                        </div>

									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
			                        </div>
		                        </div>
	                        </div>
	                        <div>
	                        </div>
                        </div>`;
		}
	});

	data.forEach(function (item) {
		if (item.status === 0) {
			htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
				        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
					        <div class="monthly-table__cell tw-w-[5%]">
						        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-center">
							        ${indexNumberMobile++}
						        </div>

					        </div>
					        <div class="monthly-table__cell tw-w-[20%] tw-text-center">${item.workshopArchiveCode}</div>

					        <div class="monthly-table__cell tw-w-[40%] tw-text-right tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
					        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.agentPhoneNumber}</div>


					        <div class="monthly-table__cell tw-flex tw-w-[25%] tw-justify-end tw-gap-2">
						        <button class="u-tactile" aria-label="Edit monthly">
							        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								        <rect width="21" height="21" rx="3" fill="#275197"/>
								        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
								        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
								        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
							        </svg>


						        </button>
					        </div>
				        </div>
				        <!-- toggle content -->
				        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">

					        <div class="monthly-table__toggle-row tw-flex">
						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
							        <span class="monthly-table__toggle-label">استان:</span>
							        <span class="monthly-table__toggle-value">${item.province}</span>

						        </div>
						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
							        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
							        <span class="monthly-table__toggle-value">${item.employeeCount}</span>

						        </div>

					        </div>
					        <div class="monthly-table__toggle-row tw-flex ">
						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
							        <span class="monthly-table__toggle-label">شهرستان:</span>
							        <span class="monthly-table__toggle-value">${item.city}</span>

						        </div>
						        <div class="monthly-table__toggle-item tw-flex tw-w-[50%] tw-gap-2">
							        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
							        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

						        </div>

					        </div>
					        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
						        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

					        </div>

					        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						        <span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
						        <span class="monthly-table__toggle-value">${item.adminFullName}</span>

					        </div>

					        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						        <span class="monthly-table__toggle-label">نام کافرما:</span>
						        <span class="monthly-table__toggle-value">${item.employerName}</span>

					        </div>

				        </div>
			        </div>`;
		}
	});

	$('#load-data-html-step0').html(html);
	$('#load-data-html-step0-mobile').html(htmlMobile);
}

function monthlyOverviewStatusDocument(data) {
	var htmlStep1 = '';
	var htmlStep2 = '';
	var htmlStep3 = '';
	var htmlStep4 = '';
	var htmlStep1Mobile = '';
	var htmlStep2Mobile = '';
	var htmlStep3Mobile = '';
	var htmlStep4Mobile = '';
	var indexNumber = 1;
	var indexNumberMobile = 1;

	data.forEach(function (item) {
		//Step 1
		if (item.status === 1) {
			htmlStep1 += `<div class="monthly-table__container tw-cursor-pointer">
	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
		                        <div class="monthly-table__cell tw-w-[2%]">
			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
				                        ${indexNumber++}
			                        </div>
		                        </div>
		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
		                        <div class="monthly-table__cell tw-w-[15%]  tw-text-right">${item.workshopName}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.province}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.city}</div>
		                        <div class="monthly-table__cell tw-w-[25%]  tw-text-right">
			                        <div class="tooltip-container tw-text-right">
				                        <div class="tooltip__trigger tw-truncate tw-text-right">${item.address}</div>
				                        <div class="tooltip-container__text">
                                            ${item.address}
				                        </div>
			                        </div>

		                        </div>
		                        <div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.agentPhoneNumber}</div>
		                        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.adminFullName}</div>
                                <div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-end tw-gap-2">
				                    <button class="monthly-table__stage-button u-tactile prev-button ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly">
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
					                    <span>مرحله قبل</span>
				                    </button>
				                    <button class="monthly-table__stage-button u-tactile next-button ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
					                    <span>مرحله بعد</span>
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
				                    </button>
                                </div>
	                        </div>
	                        <!-- toggle content -->
	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

			                        </div>
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>
			                        </div>
		                        </div>
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
			                        </div>
									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
			                        </div>
		                        </div>
	                        </div>
	                        <div>
	                        </div>
                        </div>`;

			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
		                        </div>
		                        <div class="monthly-table__body tw-whitespace-nowrap">
			                        <div class="monthly-table__container tw-cursor-pointer">
				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
					                        <div class="monthly-table__cell tw-w-[10%]">
						                        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
							                        ${indexNumberMobile++}
						                        </div>
					                        </div>
					                        <div class="monthly-table__cell tw-w-[20%] tw-text-center tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
					                        <div class="monthly-table__cell tw-flex tw-w-[70%] tw-justify-end tw-gap-2">
						                        <button class="monthly-table__stage-button u-tactile" ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly">
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
							                        <span>مرحله قبل</span>
						                        </button>
						                        <button class="monthly-table__stage-button u-tactile" aria-label="Edit monthly" ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
							                        <span>مرحله بعد</span>
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
						                        </button>

						                        <button class="u-tactile" aria-label="Edit monthly">
							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <rect width="21" height="21" rx="3" fill="#275197"/>
								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
							                        </svg>
						                        </button>
					                        </div>

				                        </div>
				                        <!-- toggle content -->
				                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">استان:</span>
						                        <span class="monthly-table__toggle-value">${item.province}</span>
					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شهرستان:</span>
						                        <span class="monthly-table__toggle-value">${item.city}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						                        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
						                        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس نماینده:</span>
						                        <span class="monthly-table__toggle-value">${item.agentPhoneNumber}</span>

					                        </div>
					                        
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
						                        <span class="monthly-table__toggle-value">${item.adminFullName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">نام کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>

					                        </div>					
				                        </div>
			                        </div>
		                        </div>`;
		}
		//Step 2
		if (item.status === 2) {
			htmlStep2 += `<div class="monthly-table__container tw-cursor-pointer">
	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
		                        <div class="monthly-table__cell tw-w-[2%]">
			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
				                        ${indexNumber++}
			                        </div>
		                        </div>
		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
		                        <div class="monthly-table__cell tw-w-[15%]  tw-text-right">${item.workshopName}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.province}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.city}</div>
		                        <div class="monthly-table__cell tw-w-[25%]  tw-text-right">
			                        <div class="tooltip-container tw-text-right">
				                        <div class="tooltip__trigger tw-truncate tw-text-right">${item.address}</div>
				                        <div class="tooltip-container__text">
                                            ${item.address}
				                        </div>
			                        </div>

		                        </div>
		                        <div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.agentPhoneNumber}</div>
		                        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.adminFullName}</div>
                                <div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-end tw-gap-2">
				                    <button class="monthly-table__stage-button u-tactile prev-button ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
					                    <span>مرحله قبل</span>
				                    </button>
				                    <button class="monthly-table__stage-button u-tactile next-button ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
					                    <span>مرحله بعد</span>
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
				                    </button>
                                </div>
	                        </div>
	                        <!-- toggle content -->
	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">

		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

			                        </div>
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>

			                        </div>
		                        </div>
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
			                        </div>
									<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
			                        </div>
		                        </div>
	                        </div>
	                        <div>
	                        </div>
                        </div>`;



			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
		                        </div>
		                        <div class="monthly-table__body tw-whitespace-nowrap">
			                        <div class="monthly-table__container tw-cursor-pointer">
				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
					                        <div class="monthly-table__cell tw-w-[10%]">
						                        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
							                        ${indexNumberMobile++}
						                        </div>
					                        </div>
                                            <div class="monthly-table__cell tw-w-[20%] tw-text-center tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
					                        <div class="monthly-table__cell tw-flex tw-w-[70%] tw-justify-end tw-gap-2">
						                        <button class="monthly-table__stage-button u-tactile" ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
							                        <span>مرحله قبل</span>
						                        </button>
						                        <button class="monthly-table__stage-button u-tactile" aria-label="Edit monthly" ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
							                        <span>مرحله بعد</span>
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
						                        </button>

						                        <button class="u-tactile" aria-label="Edit monthly">
							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <rect width="21" height="21" rx="3" fill="#275197"/>
								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
							                        </svg>
						                        </button>
					                        </div>

				                        </div>
				                        <!-- toggle content -->
				                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">استان:</span>
						                        <span class="monthly-table__toggle-value">${item.province}</span>
					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شهرستان:</span>
						                        <span class="monthly-table__toggle-value">${item.city}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						                        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
						                        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس نماینده:</span>
						                        <span class="monthly-table__toggle-value">${item.agentPhoneNumber}</span>

					                        </div>
					                        
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
						                        <span class="monthly-table__toggle-value">${item.adminFullName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">نام کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>

					                        </div>					
				                        </div>
			                        </div>
		                        </div>`;
		}
		//Step 3
		if (item.status === 3) {
			htmlStep3 += `<div class="monthly-table__container tw-cursor-pointer">
	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
		                        <div class="monthly-table__cell tw-w-[2%]">
			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
				                        ${indexNumber++}
			                        </div>
		                        </div>
		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
		                        <div class="monthly-table__cell tw-w-[15%]  tw-text-right">${item.workshopName}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.province}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.city}</div>
		                        <div class="monthly-table__cell tw-w-[25%]  tw-text-right">
			                        <div class="tooltip-container tw-text-right">
				                        <div class="tooltip__trigger tw-truncate tw-text-right">${item.address}</div>
				                        <div class="tooltip-container__text">
                                            ${item.address}
				                        </div>
			                        </div>

		                        </div>
		                        <div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.agentPhoneNumber}</div>
		                        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.adminFullName}</div>
                                <div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-end tw-gap-2">
				                    <button class="monthly-table__stage-button u-tactile prev-button ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
					                    <span>مرحله قبل</span>
				                    </button>
				                    <button class="monthly-table__stage-button u-tactile next-button ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
					                    <span>مرحله بعد</span>
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
				                    </button>
                                </div>
	                        </div>
	                        <!-- toggle content -->
	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">

		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

			                        </div>
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>

			                        </div>
		                        </div>
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
			                        </div>
		                        </div>
								<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
			                        </div>
	                        </div>
	                        <div>
	                        </div>
                        </div>`;



			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
		                        </div>
		                        <div class="monthly-table__body tw-whitespace-nowrap">
			                        <div class="monthly-table__container tw-cursor-pointer">
				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
					                        <div class="monthly-table__cell tw-w-[10%]">
						                        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
							                        ${indexNumberMobile++}
						                        </div>
					                        </div>
                                            <div class="monthly-table__cell tw-w-[20%] tw-text-center tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
					                        <div class="monthly-table__cell tw-flex tw-w-[70%] tw-justify-end tw-gap-2">
						                        <button class="monthly-table__stage-button u-tactile" ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
							                        <span>مرحله قبل</span>
						                        </button>
						                        <button class="monthly-table__stage-button u-tactile" aria-label="Edit monthly" ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'next')">
							                        <span>مرحله بعد</span>
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
						                        </button>

						                        <button class="u-tactile" aria-label="Edit monthly">
							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <rect width="21" height="21" rx="3" fill="#275197"/>
								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
							                        </svg>
						                        </button>
					                        </div>

				                        </div>
				                        <!-- toggle content -->
				                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">استان:</span>
						                        <span class="monthly-table__toggle-value">${item.province}</span>
					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شهرستان:</span>
						                        <span class="monthly-table__toggle-value">${item.city}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						                        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
						                        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس نماینده:</span>
						                        <span class="monthly-table__toggle-value">${item.agentPhoneNumber}</span>

					                        </div>
					                        
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
						                        <span class="monthly-table__toggle-value">${item.adminFullName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">نام کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>

					                        </div>					
				                        </div>
			                        </div>
		                        </div>`;
		}
		//Step 4
		if (item.status === 4) {
			htmlStep4 += `<div class="monthly-table__container tw-cursor-pointer">
	                        <div class="monthly-table__row tw-font-[400]  tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
		                        <div class="monthly-table__cell tw-w-[2%]">
			                        <div class="monthly-table__cell-card monthly-table__cell-card--small">
				                        ${indexNumber++}
			                        </div>
		                        </div>
		                        <div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
		                        <div class="monthly-table__cell tw-w-[15%]  tw-text-right">${item.workshopName}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.province}</div>
		                        <div class="monthly-table__cell tw-w-[8%]  tw-text-center">${item.city}</div>
		                        <div class="monthly-table__cell tw-w-[25%]  tw-text-right">
			                        <div class="tooltip-container tw-text-right">
				                        <div class="tooltip__trigger tw-truncate tw-text-right">${item.address}</div>
				                        <div class="tooltip-container__text">
                                            ${item.address}
				                        </div>
			                        </div>

		                        </div>
		                        <div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.agentPhoneNumber}</div>
		                        <div class="monthly-table__cell tw-w-[10%] tw-text-center">${item.adminFullName}</div>
                                <div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-end tw-gap-2">
				                    <button class="monthly-table__stage-button u-tactile prev-button ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
					                    <span>مرحله قبل</span>
				                    </button>
				                    <button class="monthly-table__stage-button u-tactile next-button ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly">
					                    <span>مرحله بعد</span>
					                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
						                    <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
					                    </svg>
				                    </button>
                                </div>
	                        </div>
	                        <!-- toggle content -->
	                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">

		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

			                        </div>
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>

			                        </div>
		                        </div>
		                        <div class="monthly-table__toggle-row tw-flex tw-gap-2">
			                        <div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
				                        <span class="monthly-table__toggle-label tw-w-[50%] ">شماره تماس کارفرما :</span>
				                        <span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
			                        </div>
		                        </div>
								<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
				                        <span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
				                        <span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
			                        </div>
	                        </div>
	                        <div>
	                        </div>
                        </div>`;



			htmlStep1Mobile += `<div class="monthly-table__head tw-font-[500] tw-mb-[3px] tw-flex tw-h-[35px] tw-items-center tw-whitespace-nowrap tw-rounded-[5px] tw-bg-[#3B73D0] tw-px-2 tw-text-white tw-text-[8px] md:tw-font-[600] md:tw-text-[14px]">
			                        <div class="monthly-table__head-cell tw-w-[10%] tw-text-right  ">ردیف</div>
			                        <div class="monthly-table__head-cell tw-w-[20%] tw-text-center">نام کارگاه</div>
			                        <div class="monthly-table__head-cell tw-w-[70%] tw-text-end">عملیات</div>
		                        </div>
		                        <div class="monthly-table__body tw-whitespace-nowrap">
			                        <div class="monthly-table__container tw-cursor-pointer">
				                        <div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
					                        <div class="monthly-table__cell tw-w-[10%]">
						                        <div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
							                        ${indexNumberMobile++}
						                        </div>
					                        </div>
                                            <div class="monthly-table__cell tw-w-[20%] tw-text-center tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>
					                        <div class="monthly-table__cell tw-flex tw-w-[70%] tw-justify-end tw-gap-2">
						                        <button class="monthly-table__stage-button u-tactile" ${item.status === 1 ? 'disable' : ''}" aria-label="Edit monthly" onclick="handlerStep(${item.id},'prev')">
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M6.62724 13.5L10.5344 9L6.62724 4.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
							                        <span>مرحله قبل</span>
						                        </button>
						                        <button class="monthly-table__stage-button u-tactile" aria-label="Edit monthly" ${item.status === 4 ? 'disable' : ''}" aria-label="Edit monthly">
							                        <span>مرحله بعد</span>
							                        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <path d="M10.3726 4.5L6.46545 9L10.3726 13.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
							                        </svg>
						                        </button>

						                        <button class="u-tactile" aria-label="Edit monthly">
							                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								                        <rect width="21" height="21" rx="3" fill="#275197"/>
								                        <path d="M10.4375 14.1484C11.3436 14.1484 12.0781 14.8891 12.0781 15.8028C12.0781 16.7166 11.3436 17.4573 10.4375 17.4573C9.53141 17.4573 8.79688 16.7166 8.79688 15.8028C8.79688 14.8891 9.53141 14.1484 10.4375 14.1484Z" fill="white"/>
								                        <path d="M10.4375 9.07031C11.3436 9.07031 12.0781 9.81102 12.0781 10.7247C12.0781 11.6384 11.3436 12.3791 10.4375 12.3791C9.53141 12.3791 8.79688 11.6384 8.79688 10.7247C8.79688 9.81102 9.53141 9.07031 10.4375 9.07031Z" fill="white"/>
								                        <path d="M12.0781 5.65441C12.0781 4.7407 11.3436 4 10.4375 4C9.53141 4 8.79688 4.74071 8.79688 5.65441C8.79688 6.56812 9.53141 7.30882 10.4375 7.30882C11.3436 7.30882 12.0781 6.56812 12.0781 5.65441Z" fill="white"/>
							                        </svg>
						                        </button>
					                        </div>

				                        </div>
				                        <!-- toggle content -->
				                        <div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">استان:</span>
						                        <span class="monthly-table__toggle-value">${item.province}</span>
					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شهرستان:</span>
						                        <span class="monthly-table__toggle-value">${item.city}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
						                        <span class="monthly-table__toggle-label">جزئیات نشانی:</span>
						                        <span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس نماینده:</span>
						                        <span class="monthly-table__toggle-value">${item.agentPhoneNumber}</span>

					                        </div>
					                        
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
						                        <span class="monthly-table__toggle-value">${item.adminFullName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">نام کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerName}</span>

					                        </div>

					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
						                        <span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

					                        </div>
					                        <div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
						                        <span class="monthly-table__toggle-label">تعداد پرسنل:</span>
						                        <span class="monthly-table__toggle-value">${item.employeeCount}</span>

					                        </div>					
				                        </div>
			                        </div>
		                        </div>`;
		}
	});

	$('#load-data-html-step1').html(htmlStep1);
	$('#load-data-html-step2').html(htmlStep2);
	$('#load-data-html-step3').html(htmlStep3);
	$('#load-data-html-step4').html(htmlStep4);
}

function allWorkshops(data) {
	var html = '';
	var htmlMobile = '';
	var indexNumber = 1;
	var indexNumberMobile = 1;
	var strTextStatus = "";
	var strColorStatus = "";

	data.sort((a, b) => a.status - b.status);
	data.forEach(function (item) {
        html += `<div class="monthly-table__container tw-cursor-pointer">
				<div class="monthly-table__row tw-font-[400] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[14px]">
					<div class="monthly-table__cell tw-w-[2%]">
						<div class="monthly-table__cell-card monthly-table__cell-card--small">
							${indexNumber++}
						</div>
					</div>
					<div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.workshopArchiveCode}</div>
					<div class="monthly-table__cell tw-w-[18%] tw-text-start">${item.workshopName}</div>
					<div class="monthly-table__cell tw-w-[14%] tw-text-start">${item.employerName}</div>
					<div class="monthly-table__cell tw-w-[7%] tw-text-center">${item.province}</div>
					<div class="monthly-table__cell tw-w-[7%] tw-text-center">
						<div class="tooltip-container tw-text-center">
							<div class="tooltip__trigger tw-truncate tw-text-center">${item.city}</div>
							<div class="tooltip-container__text">
								${item.city}
							</div>
						</div>	
					</div>
					<div class="monthly-table__cell tw-w-[35%] tw-text-start">
						<div class="tooltip-container tw-text-start">
							<div class="tooltip__trigger tw-truncate tw-text-start">${item.address}</div>
							<div class="tooltip-container__text">
								${item.address}
							</div>
						</div>
					</div>
					<div class="monthly-table__cell tw-flex tw-w-[10%] tw-justify-center tw-gap-2">`;

		switch (item.status) {
			case 0:
				strTextStatus = "تنظیم مستندات";
				strColorStatus = "documents-setup";
				break;
			case 1:
				strTextStatus = "در انتظار مراجعه";
				strColorStatus = "step1";
				break;
			case 2:
				strTextStatus = "در حال مراجعه";
				strColorStatus = "step2";
				break;
			case 3:
				strTextStatus = "اتمام امور";
				strColorStatus = "step3";
				break;
			case 4:
				strTextStatus = "بایگانی";
				strColorStatus = "step4";
				break;
			default:
		}

		html += `<button class="monthly-table__status-button monthly-table__status-button--${strColorStatus} u-tactile">
							${strTextStatus}
						</button>
					</div>
				</div>
				<!-- toggle content -->
				<div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[97%] tw-gap-2 tw-flex-col tw-px-2">

					<div class="monthly-table__toggle-row tw-flex tw-gap-2">
						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-w-[35%]">
							<span class="monthly-table__toggle-label tw-w-[50%]">نام کارفرما :</span>
							<span class="monthly-table__toggle-value tw-w-[50%]"> ${item.employerName}</span>

						</div>
						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
							  <span class="monthly-table__toggle-label">تعداد پرسنل قرارداد:</span>
				                        <span class="monthly-table__toggle-value">${item.contractEmployeeCount} نفر</span>

						</div>
					</div>
					<div class="monthly-table__toggle-row tw-flex tw-gap-2">
						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-w-[35%]">
							<span class="monthly-table__toggle-label tw-w-[50%]">شماره تماس کارفرما :</span>
							<span class="monthly-table__toggle-value tw-w-[50%]">${item.employerPhoneNumber}</span>
						</div>
						<div class="monthly-table__toggle-item tw-mb-2 tw-flex tw-flex tw-gap-40 tw-gap-2 tw-w-[35%]">
							<span class="monthly-table__toggle-label">تعداد پرسنل تصفیه:</span>
							<span class="monthly-table__toggle-value">${item.checkoutEmployeeCount} نفر</span>
						</div>
					</div>
				</div>
				<div>
				</div>
			</div>`;


		htmlMobile += `<div class="monthly-table__container tw-cursor-pointer">
			<div class="monthly-table__row tw-font-[500] tw-flex tw-h-[35px] tw-items-center tw-rounded-[5px] tw-bg-[#DFF0FF] tw-px-2 tw-text-[12px] md:tw-font-[400] md:tw-text-[14px]">
				<div class="monthly-table__cell tw-w-[10%]">
					<div class="monthly-table__cell-card monthly-table__cell-card--small tw-text-right">
						${indexNumberMobile++}
					</div>
				</div>

                <div class="monthly-table__cell tw-w-[50%] tw-text-right tw-text-xs"><div class="monthly-table__cell-title">${item.workshopName}</div></div>

				<div class="monthly-table__cell tw-flex tw-w-[40%] tw-justify-end tw-gap-2">
					<button class="monthly-table__status-button   monthly-table__status-button--${strColorStatus} u-tactile">
						${strTextStatus}
					</button>
				</div>


			</div>
			<!-- toggle content -->
			<div class="monthly-table__toggle tw-mx-auto tw-flex tw-w-[95%] tw-flex-col tw-gap-2 tw-px-2">


				<div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">استان:</span>
					<span class="monthly-table__toggle-value">${item.province}</span>

				</div>
				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">شهرستان:</span>
					<span class="monthly-table__toggle-value">${item.city}</span>

				</div>

				<div class="monthly-table__toggle-item tw-flex tw-w-[100%] tw-gap-2">
					<span class="monthly-table__toggle-label">جزئیات نشانی:</span>
					<span class="monthly-table__toggle-value text-[#000000]">${item.address}</span>

				</div>



				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">شماره تماس نماینده:</span>
					<span class="monthly-table__toggle-value">${item.agentPhoneNumber}</span>

				</div>



				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">پرسنل امور اجرائی:</span>
					<span class="monthly-table__toggle-value">${item.employerName}</span>

				</div>

				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">نام کافرما:</span>
					<span class="monthly-table__toggle-value">${item.employerName}</span>

				</div>
				
				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">شماره تماس کافرما:</span>
					<span class="monthly-table__toggle-value">${item.employerPhoneNumber}</span>

				</div>

				<div class="monthly-table__toggle-item tw-flex  tw-w-[100%] tw-justify-between tw-gap-2">
					<span class="monthly-table__toggle-label">تعداد پرسنل:</span>
					<span class="monthly-table__toggle-value">${item.employeeCount}</span>
				</div>

			</div>
		</div>`;
	});

	$('#load-data-html-stepAll').html(html);
	$('#load-data-html-stepAll-mobile').html(htmlMobile);
}


function showConfirmSwal() {
	return new Promise((resolve) => {
		swal({
			title: "آیا از انتقال مطمئن هستید؟",
			text: "",
			type: "warning",
			showCancelButton: true,
			confirmButtonColor: "#DD6B55",
			confirmButtonText: "بله",
			cancelButtonText: "خیر",
			closeOnConfirm: true,
			closeOnCancel: true
		}, function (isConfirm) {
			resolve(isConfirm);
		});
	});
}

async function handlerStep(id, stepStr) {
	let handlerUrl = stepStr === "next" ? nextUrl : backUrl;

	const isConfirm = await showConfirmSwal();
	if (!isConfirm) return;

	try {
		const response = await ajax.post(handlerUrl, { id: id }, true);
		if (response.isSuccedded) {
			$('.alert-success-msg').show().find('p').text(response.message);
			setTimeout(() => {
				$('.alert-success-msg').hide().find('p').text('');
			}, 1500);

			loadMonthlyOverviewData();
		} else {
			$('.alert-msg').show().find('p').text(response.message);
			setTimeout(() => {
				$('.alert-msg').hide().find('p').text('');
			}, 2000);
		}
	} catch (err) {
		console.error("خطا در ajax.post:", err);
	}
}

async function ajaxAdminPersonnel() {
	await $.ajax({
		url: accountSelectListUrl,
		type: 'GET',
		success: function (response) {
			if (response.data.length > 0) {
				var items = response.data;
				var optionsHtml = '<option value="0">انتخاب اعضاء</option>';

				const filteredItems = items.filter(item => item.id !== 2 && item.id !== 3);
				filteredItems.forEach(function (item) {
					optionsHtml += `<option value="${item.id}" ${item.id === adminAccountId ? `selected` : ``}>${item.name}</option>`;
				});
				$('#admin-personnel-select').html(optionsHtml);
				$('#admin-personnel-select-mobile').html(optionsHtml);

				const { year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status } = getSearchParamsFromUrl();
				if (![2, 3].includes(adminAccountId)) {
					$('#admin-personnel-select').prop('disabled', true).closest("div").addClass('disable');
					$("#admin-personnel-select").val(adminAccountId).trigger('change');
					$('#admin-personnel-select-mobile').prop('disabled', true).closest("div").addClass('disable');
					$("#admin-personnel-select-mobile").val(adminAccountId).trigger('change');
                } else {
					$('#admin-personnel-select').prop('disabled', false).closest("div").removeClass('disable');
                    $("#admin-personnel-select").val(adminPersonnel).trigger('change');
					$('#admin-personnel-select-mobile').prop('disabled', false).closest("div").removeClass('disable');
                    $("#admin-personnel-select-mobile").val(adminPersonnel).trigger('change');
				}
			}
		},
		error: function (xhr, status, error) {
			console.error(xhr.responseText);
		}
	});
}

function paramsUrl(year, month, employer, employerName, workshopAndArchive, workshopAndArchiveName, adminPersonnel, status) {
	const params = new URLSearchParams();
	let hasAnyFilter = false;

	if (year !== '0') {
		params.set("year", year);
		hasAnyFilter = true;
	}

	if (month !== '0') {
		params.set("month", month);
		hasAnyFilter = true;
	}

	if (employer !== '0') {
		params.set("employer", employer);
		hasAnyFilter = true;
	}

	if (employer !== '0') {
		params.set("employer-name", employerName);
		hasAnyFilter = true;
	}

	if (workshopAndArchive !== '0') {
		params.set("workshop-archive", workshopAndArchive);
		hasAnyFilter = true;
	}

	if (workshopAndArchive !== '0') {
		params.set("workshop-name", workshopAndArchiveName);
		hasAnyFilter = true;
	}

	if (adminPersonnel !== "0") {
		params.set("admin-personnel", adminPersonnel);
		hasAnyFilter = true;
	}

	if (status !== "2") {
		params.set("status", status);
		hasAnyFilter = true;
	}

	const newUrl = hasAnyFilter
		? `${window.location.origin}/AdminNew/Company/MonthlyOverview?${params.toString()}`
		: `${window.location.origin}/AdminNew/Company/MonthlyOverview`;

	window.history.pushState({}, '', newUrl);
}

function getSearchParamsFromUrl() {
	const urlParams = new URLSearchParams(window.location.search);

	return {
		year: urlParams.get("year") || "0",
		month: urlParams.get("month") || "0",
		employer: urlParams.get("employer") || "0",
		employerName: urlParams.get("employer-name") || "",
		workshopAndArchive: urlParams.get("workshop-archive") || "0",
		workshopAndArchiveName: urlParams.get("workshop-name") || "",
		adminPersonnel: urlParams.get("admin-personnel") || "0",
		status: urlParams.get("status") || ""
	};
}