$(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);

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

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

    $("#admin-personnel-select").val(adminPersonnel);
	$("#status-select").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')
    });

    $(".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')
    });

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


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

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

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

    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').val();
        filterMonth = $('#month-select').val().trim();
		filterEmployer = $('#employer-select').val().trim();
		filterEmployerName = $('#employer-select').select2('data')[0].text;
		filterWorkshopAndArchive = $('#workshop-select').val();
		filterWorkshopAndArchiveName = $("#workshop-select").select2('data')[0].text;
		filterAdminPersonnel = $('#admin-personnel-select').val().trim();
		filterStatus = $('#status-select').val();
    } else {
        filterYear = $('#year-select').val();
		filterMonth = $('#month-select').val().trim();
        filterEmployer = $('#employer-select').val().trim();
        filterEmployerName = $('#employer-select').select2('data')[0].text;
		filterWorkshopAndArchive = $('#workshop-select').val();
		filterWorkshopAndArchiveName = $("#workshop-select").select2('data')[0].text;
		filterAdminPersonnel = $('#admin-personnel-select').val().trim();
        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);

    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() {
    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);
        }
    } 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.employeeCount} نفر</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>
	                        <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-center 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.employeeCount} نفر</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>
	                        <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.employeeCount} نفر</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>
	                        <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.employeeCount} نفر</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>
	                        <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.employeeCount} نفر</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>
	                        <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-[15%] tw-text-right">${item.workshopName}</div>
					<div class="monthly-table__cell tw-w-[15%] tw-text-center">${item.employerName}</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-[35%] tw-text-center">
						<div class="tooltip-container tw-text-center">
							<div class="tooltip__trigger tw-truncate tw-text-center">${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.employeeCount} نفر</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>
				<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);

                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');
                } else {
					$('#admin-personnel-select').prop('disabled', false).closest("div").removeClass('disable');
                    $("#admin-personnel-select").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") || ""
    };
}