// catalog.js
let favoriteArray = localStorage.getItem('favorite') ? JSON.parse(localStorage.getItem('favorite')) : [];
let timer, second = 1;
let sJson = [];
// let statusProgram = false;
let totalRecords = 0;
let totalLoadedRecords = 0;
var addToShoppingCartEvent;
let isLoadingNow = false;
/**
 * need for load sessions on courses
 * */
/*function loadDataForNewPage111(page) {
    console.log("loadDataForNewPage:" + page);
    const origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function () {
        this.addEventListener('load', (event) => {
            if (event['currentTarget'].responseURL.includes("entityRosterView.ajax")) {
                let boxItems = document.querySelectorAll("#rosterRecords > div:nth-child(" + page + ") div[role='catalog-item']");

                boxItems.forEach((item, index) => {  console.log(item)
                    ajaxLoadSessionsCatalogElement(item.dataset.id);
                })

                console.log("11111:" + statusProgram);
                if (statusProgram) {
                    if (boxItems.length>0)
                        showBtnBuyProgram(boxItems);
                }else{
                    let btnAddProgramToCart = document.querySelector("#addAllSessions");
                    if (btnAddProgramToCart != null)
                        btnAddProgramToCart.remove();
                }
            }
        });
        origOpen.apply(this, arguments);
    }
}*/

function getSuperuser(){
	let su = document.querySelector('[data-superuser]');
	if (su != null){
		return su.dataset.superuser;
	}
	return null;
}

function loadDataForNewPage(page) {
    console.log("loadDataForNewPage:" + page);
    // let boxItems = document.querySelectorAll("#rosterRecords > div:nth-child(" + page + ") div[role='catalog-item']");
    let boxItems = document.querySelectorAll("div:not(.session_loaded)[role='catalog-item']");

    var count = boxItems.length;
    boxItems.forEach((item, index) => {

        ajaxLoadSessionsCatalogElement(item.dataset.id, function(){
            count--;
            //console.log(count)
            if (count == 0){
                console.log('on success sessions load (must be once)')
                let boxItems = document.querySelectorAll("div[role='catalog-item']");
                document.querySelectorAll("[name='entityInstanceForm.instanceFilter.v[592856]']").forEach((item, index) => {
                    let checkboxStatus = item.checked;
                    if (checkboxStatus && boxItems.length>0){
                        showBtnBuyProgram(boxItems);
                    }
                })
            }
        });
        item.className += ' session_loaded';
    });

    $(".input-group:not(.onchangeset)").on('change', 'select', function (event) {
        let boxParent = event.target.closest(".product-meta");
        let btnBy = bx =  boxParent.querySelector(".btn2");
        if(btnBy)
            event.target.parentNode.lastChild.previousElementSibling.lastChild.previousSibling.childNodes.forEach(el => {
                if (el.classList.contains('selected')) {
                    // console.log('test')
                    showButton(btnBy, el);
                }
            })
    });
    $(".input-group").addClass('onchangeset');
	
	document.querySelectorAll('[data-zeropricehide="0"]').forEach((zero, index) => {
		zero.style.display = 'none';
	});
}

function arrayRemove(arr, value) {
    return arr.filter(function (ele) {
        return ele != value;
    });
}

function counterStart(form, element) {
    if (timer) {
        clearInterval(timer);
    }
    second = 1;
    timer = setInterval(function () {
        second++;
        if (second == 2) {
            clearForm(form, element);
            form.submit();
        }
    }, 1000);
    //console.log(timer)
}

function isPurchased(sessionId) {
    for (let e in sJson) {
        if (sJson[e].session == sessionId) {
            return true; // sJson[e].purchased == 'Yes';
        }
    }
    return false;
}

function clearForm(form, inputEl) {
    let labelNode = inputEl.nextElementSibling;
    let textElement = labelNode.textContent;
    const regex = /Program/i;
    const found = textElement.match(regex);

    if (found !== null) {
        let elements = form.querySelectorAll("input");
        //form.reset();
        elements.forEach(element => {
            if (!inputEl.isEqualNode(element)) {
                let fieldType = element.type.toLowerCase();
                switch (fieldType) {
                    case "text":
                    case "number":
                        element.value = "";
                        break;
                    case "checkbox":
                        if (element.checked) {
                            element.checked = false;
                        }
                        break;
                    default:
                        break;
                }
            }
        })
    }
}

function addToWL(id) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            window.location.href = "/site/portal/lms/waiting_list"
        }
    };
    xhttp.open("GET", "/entity/instance/add_to_waiting_list/view.html?entityInstanceId=" + id + "&add_to_waiting_list=true", true);
    xhttp.send();
}

function showBtnPurchased(btnBy) {
    btnBy.innerText = "Session achetée";
    btnBy.style.background = "rgb(204 202 204)";
    btnBy.addEventListener('click', event => {
    });
}

function showBtnCompleted(btnBy) {
    btnBy.innerText = "Session complète";
    btnBy.style.background = "rgb(204 202 204)";
    btnBy.addEventListener('click', event => {
    });
}


function showBtnProgram(btnBy) {
    // btnBy.innerText = "In Program";
    btnBy.innerText = "Programme";
    btnBy.style.background = "#ef3300";

    /*btnBy.innerText = "";
    btnBy.style.background = "#fff";*/
    btnBy.addEventListener('click', event => {
        location.href = '/site/portal/lms/catalogue?entityRosterId=4&entityInstanceForm.term=Module&entityInstanceForm.instanceFilter.v[592856]=' + btnBy.dataset.program
    });
}

function showBtnNoSession(btnBy, sessionsRosterList) {
    btnBy.innerText = "No session";
    btnBy.style.background = "#ccc";
    sessionsRosterList.closest(".input-group").style.display = "none";
    btnBy.addEventListener('click', event => {
    });
}

function showBtnBuy(btnBy, el) {
    btnBy.innerHTML = "<i class=\"fas fa-shopping-cart\"></i> Ajouter au panier ";
    btnBy.removeAttribute("style");

	if (btnBy.dataset.minprice !== "0"){
		console.log("has price")
		addToShoppingCartEvent = function(event) {
			event.preventDefault();
			addToShoppingCart2(el.dataset.value, 1, 'false')        
		}
	} else {
		console.log("has no price")
		addToShoppingCartEvent = function(event) {
			event.preventDefault();
			
			Swal.fire({
				title: "",
				html: "Nous sommes désolés, vous ne pouvez pas vous inscrire à cette activité, car votre profil ne répond pas à certains critères. Pour plus d’information, veuillez écrire à <a href='mailto:formation@umq.qc.ca'>formation@umq.qc.ca</a>",
				icon: "error"
			});
		}
	}

    btnBy.addEventListener('click', addToShoppingCartEvent);
}

function showBtnApprove(btnBy, el) {
    btnBy.innerText = "Ajouter à la liste d'attente";
    btnBy.style.background = "#ccc";

    btnBy.addEventListener('click', event => {
        event.preventDefault();
        addToWL(el.dataset.value);
    });
}
function f() {

}
function showButton(btnBy, el) {
    // console.log("showButton for session " + el.dataset.sid);
	
    let statusProgram = false;
    document.querySelectorAll("[name='entityInstanceForm.instanceFilter.v[592856]']").forEach((item, index) => {
        let checkboxStatus = item.checked;
        if (checkboxStatus)
            statusProgram = true;
    })
    statusProgram |= btnBy.dataset.program != '';

    btnBy.style.display = 'block';

    if (statusProgram) {
        showBtnProgram(btnBy);
    }else{
        btnBy.removeEventListener('click', addToShoppingCartEvent);
		
		
        /*if (isPurchased(el.dataset.sid)) {
            // console.log("purchased");
            showBtnPurchased(btnBy);
        } else {
            // console.log("not purchased, needs approve?");
            if (el.dataset.approve !== "No") {
                // console.log("approve Yes");
                showBtnApprove(btnBy, el)
            } else {
                // console.log("approve No");
                showBtnBuy(btnBy, el);
            }
        }*/
		
		let maxReg = el.dataset.maxReg;
		let countOfReg = el.dataset.countOfReg;
		let superuser = getSuperuser();
		let approve = el.dataset.approve;
		let waitlist = el.dataset.waitlist;
		let sessionId = el.dataset.sid;
		
		console.log('maxReg', maxReg);
		console.log('countOfReg', countOfReg);
		console.log('superuser', superuser);
		console.log('approve', approve);
		console.log('waitlist', waitlist);
		console.log('sessionId', sessionId);
		
		if ((parseInt(maxReg) != "NaN" && parseInt(countOfReg) < parseInt(maxReg)) || maxReg.length == 0) {
			console.log('superuser != "1"', superuser != "1")
			console.log('isPurchased(sessionId)', isPurchased(sessionId))
			if (isPurchased(sessionId) && superuser != "1") {
				console.log("purchased");				
				showBtnPurchased(btnBy);
			} else {
				console.log("not purchased, needs approve?");
				if (approve !== "No" && waitlist !== "Yes") {
					console.log("approve Yes and waitlist No");					
					showBtnApprove(btnBy, el)
				} else {
					console.log("approve No");
					showBtnBuy(btnBy, el);
				}
			}			
		}else{
			if (isPurchased(sessionId)  && superuser != "1") {
				console.log("purchased");				
				showBtnPurchased(btnBy);
			} else {
				if (approve !== "No" && waitlist !== "Yes") {
					console.log("approve Yes and waitlist No");
					showBtnApprove(btnBy, el)
				} else if (approve !== "No" && waitlist == "Yes") {
					console.log("approve Yes and waitlist Yes");					
					showBtnApprove(btnBy, el)
				} else {
					console.log("approve No");
					showBtnCompleted(btnBuy);					
				}
			}
		}
		
    }
}

var nextProductIdIndex = 0;
var nextFormId = '';
var nextProductIds = [];

var onSuccessAddToCartProgram = function() {
    if (nextProductIds.length > 0) {
        var form = $('#' + nextFormId);
        var url = form.attr('action');

        let lastProductId = nextProductIds[nextProductIds.length - 1];
        let nextProductIdsSize = nextProductIds.length;
        for (let i = 1; i < nextProductIds.length; i ++){
            let nextProductId = nextProductIds[i]

            setTimeout(function(){
                var data = new FormData(document.getElementById(nextFormId));
                if ($(form).find('[type="file"]').length > 0) {
                    jQuery.each($(form).find('[type="file"]')[0].files, function (i, file) {
                        data.append($(this).attr("name"), file);
                    });
                }

                var data1 = new FormData();
                for (var pair of data.entries()) {
                    if (pair[0] != 'productId')
                        data1.append(pair[0], pair[1]);
                }
                data1.append('productId', nextProductId);

                $.ajax({
                    type: "POST",
                    url: url,
                    data: data1, // serializes the form's elements.
                    processData: false,
                    contentType: false,
                    success: function(data) {

                        if (data['success'] != false) {
                            console.log('success with ', nextProductId);
                        } else {

                        }

                        if ((i + 1) == nextProductIdsSize){
                            $.get("/shoppingCart2/getCartContent.ajax", function(cart) {updateCount(cart)});
                        }
                    }
                });
            }, i*250)
        }
    }
    nextProductIds = [];
    onSuccessAddToCart();
}

var addToShoppingCart2Program = function(productIds){
    console.log('addToShoppingCart2Program')
    nextProductIds = productIds;
    if (productIds.length > 0){
        let productId = productIds[0];
        var formId = 'editAjaxForm_' + productId;
        nextFormId = formId;

        $("div#productAddToCartModal").find("div[rel='product-form']").
        load('/shoppingCart2/addToCart.html?productId=' + productId + '&no_add_to_cart=true');

        addToCartInModalButtonClick = function () {
            window['mySubmit_' + formId]('onSuccessAddToCartProgram');
        }

        $("div#productAddToCartModal").modal('show');
    }
    /*setTimeout(function () {
        let sessionId = item.querySelector("ul.list li.selected").dataset.sid;
        if (!isPurchased(sessionId)){
            let productId = item.querySelector("ul.list li.selected").dataset.value;
            addToShoppingCart2(productId, 1, 'true');
        }
    }, index * 250);*/
}

function ajaxLoadSessionsCatalogElement(entity, onSuccess) {
    /*Sessions Roster List*/
    let xmlhttpSessionsRoster = new XMLHttpRequest();
    xmlhttpSessionsRoster.overrideMimeType('text/xml');
    xmlhttpSessionsRoster.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            let sessionsHtmlList = new DOMParser().parseFromString(this.responseText, 'text/html');
            let boxParent = document.querySelector("#catalog-item-"+entity);
            let sessionsRosterOptions = document.querySelector('[role="entity-options-' + entity + '"]');
            let sessionsRosterList = document.querySelector('[role="entity-list-' + entity + '"] ul.list');
            let sessionsRosterListCurrent = document.querySelector('[role="entity-list-' + entity + '"] span.current');

            if (boxParent == null){
                return;
            }
            let btnBy = boxParent.querySelector(".btn2");
            let btnFavorite = boxParent.querySelector("a.favorite");
            let iFavorite = btnFavorite.querySelector("i");

            let currentSet = false;
            sessionsHtmlList.querySelectorAll('body [role="list-view"]').forEach(function (el, index) {
                if (el.textContent.trim().length > 0) {// session
                    let maxReg = el.dataset.maxreg;
                    let countOfReg = el.dataset.totalregistered;

                    let idProduct = el.dataset.pid;
                    console.log('idProduct:', idProduct)
                    let idSession = el.dataset.sid;
                    let approve = el.dataset.approve;
					let waitlist = el.dataset.waitlist;
					let superuser = getSuperuser();

                    let newOption = document.createElement("option");
                    let newLi = document.createElement("li");

                    newOption.value = el.textContent;
                    newLi.classList.add("option");
                    newLi.dataset.value = idSession;
                    newLi.dataset.sid = idSession;
                    newLi.dataset.approve = approve;
					newLi.dataset.waitlist = waitlist;
					
					newLi.dataset.maxReg = maxReg;
					newLi.dataset.countOfReg = countOfReg;

                    if (!!idProduct) {
                        newLi.dataset.value = idProduct;
                    }

                    newOption.textContent = el.textContent;
                    newLi.textContent = el.textContent;

                    if((parseInt(maxReg) != "NaN" && parseInt(countOfReg) < parseInt(maxReg)) || maxReg.length == 0){
                        sessionsRosterOptions.appendChild(newOption);
                        sessionsRosterList.appendChild(newLi);

                        if (!currentSet) {
                            sessionsRosterListCurrent.textContent = el.textContent;
                            newLi.classList.add("selected");
                            currentSet = true;
                        }
                    }
                }
            })

            if(btnBy)
                if (sessionsRosterList.childElementCount == 0) {
                    showBtnNoSession(btnBy, sessionsRosterList)
                } else {
                    showButton(btnBy, sessionsRosterList.querySelector("li.selected"))
                }

            if (btnFavorite.dataset.value > 0) {
                if (favoriteArray.includes(btnFavorite.dataset.value)) {
                    btnFavorite.classList.add("active");
                    iFavorite.classList.add("fas");
                }

                btnFavorite.addEventListener('click', event => {
                    event.preventDefault()
                    let favorite = localStorage.getItem('favorite') ? JSON.parse(localStorage.getItem('favorite')) : [];
                    if (!favorite.includes(btnFavorite.dataset.value)) {
                        favoriteArray.push(btnFavorite.dataset.value);
                        localStorage.setItem('favorite', JSON.stringify(favoriteArray));
                        btnFavorite.classList.add("active");
                        iFavorite.classList.add("fas");
                    } else {
                        let fList = localStorage.getItem('favorite') ? JSON.parse(localStorage.getItem('favorite')) : [];
                        let result = arrayRemove(fList, btnFavorite.dataset.value);
                        localStorage.setItem('favorite', JSON.stringify(result));
                        btnFavorite.classList.remove("active");
                        iFavorite.classList.remove("fas");
                    }
                })
            }

            onSuccess();
        }
    }

    xmlhttpSessionsRoster.open("GET", "/entity/roster/entityRosterView.html?entityRosterId=2&no_header=true&entityInstanceForm.parentEntityInstanceId=" + entity, true);
    xmlhttpSessionsRoster.send();
}

function showBtnBuyProgram(catalogItems) {
    /*if(catalogItems.length !== 0){
        const div = document.createElement("div");
        const txtBuy = document.createElement("div");
        const a = document.createElement("a");
        a.classList.add("btn2");
        a.innerHTML = " <i class=\"fas fa-shopping-cart\"></i> Ajouter au panier ";
        div.id = "addAllSessions";
        div.classList.add("col-md-12");
        div.appendChild(txtBuy);
        div.appendChild(a);
        fetch('/site/portal/lms/program-buy?no_header=true')
            .then(response => response.text())
            .then(result  => {
                let dom = new DOMParser().parseFromString(result, 'text/html');
                txtBuy.innerHTML = dom.querySelector("#content").innerHTML;
            });

        if (!document.querySelector("#addAllSessions")) {
            a.addEventListener('click', (event) => {
                event.preventDefault();
				let productIds = [];
				catalogItems.forEach((item, index) => {
					console.log(item.querySelector("ul.list li.selected"))
					let sessionId = item.querySelector("ul.list li.selected").dataset.sid;
					if (!isPurchased(sessionId)){
						let productId = item.querySelector("ul.list li.selected").dataset.value;
						productIds.push(productId);
					}
				})
				addToShoppingCart2Program(productIds);
            })
            document.querySelector("#rosterRecords").append(div);
        }
    }*/
}

window.addEventListener('DOMContentLoaded', (event) => {
    const ajaxBtnLoadMore = document.querySelector("span#ajax_load_button_more");
    const ajaxSpinnerLoad = document.querySelector("span#ajax_load_indicator_more");
    const formFilter = document.querySelector("form#command");
    const numberFieldList = document.querySelectorAll("form#command [type='number']")
    const checkboxFieldList = document.querySelectorAll("form#command [type='checkbox']:not([name='entityInstanceForm.instanceFilter.v[592856]'])")
    const programFieldsList = formFilter.querySelectorAll("input[name='entityInstanceForm.instanceFilter.v[592856]']");
    const catalogItems = document.querySelectorAll("div[role='catalog-item']");

    totalLoadedRecords = document.querySelectorAll("div[role='catalog-item']").length;

    /**num elems pagination**/
    let str = document.querySelector(".pagebanner").textContent;
    let r = /\d+/;
    str = parseInt(str.match(r));
    if (!isNaN(str)){
        let elemc = document.querySelector("#el-count-page");
        if (elemc !== null)
            elemc.textContent = str;
    }
    /**end num elems pagination**/
    
    // custom submit up form
    // entityInstanceForm_term_up
	document.querySelector('#up_form').addEventListener('submit', function(_event){
		console.log("try to submit entityInstanceForm_term_up");
		_event.preventDefault();
		document.querySelectorAll("input[id='entityInstanceForm_term_up']").forEach((item, index) => {
			console.log('entityInstanceForm_term_up = ' + item.value);
			document.querySelectorAll("input[id='entityInstanceForm_term_down']").forEach((item2, index) => {
				item2.value = item.value;
			})
		})
		
		document.querySelectorAll("div[role='catalog-item']").forEach((item, index) => {
			item.remove();
		})
		programFieldsList.forEach(element => {
			element.checked = false;
		});

		loadNextPageObj.next_page=1;
		totalLoadedRecords = 0;
		loadNextPage(ajaxBtnLoadMore,ajaxSpinnerLoad);

		if(event.target.checked){
			if(ajaxBtnLoadMore.style.display == "none")
			    ajaxBtnLoadMore.style.display = "none";
		}
		
		return false;
	});

    document.querySelectorAll(".pagebanner").forEach(el => {
        console.log(el);
        el.closest("div.col-md-12").style.display = "none";
    })

    checkboxFieldList.forEach(element => {
        element.addEventListener('change', (event) => {
            //counterStart(formFilter, element);
            //console.log("change checkbox")
            
            document.querySelectorAll("input[id='entityInstanceForm_term_up']").forEach((item, index) => {
                console.log('entityInstanceForm_term_up = ' + item.value);
                document.querySelectorAll("input[id='entityInstanceForm_term_down']").forEach((item2, index) => {
                	item2.value = item.value;
                })
            })
            
            
            document.querySelectorAll("div[role='catalog-item']").forEach((item, index) => {
                item.remove();
            })
            programFieldsList.forEach(element => {
                element.checked = false;
            });

            loadNextPageObj.next_page=1;
            totalLoadedRecords = 0;
            loadNextPage(ajaxBtnLoadMore,ajaxSpinnerLoad);

            if(event.target.checked){
                if(ajaxBtnLoadMore.style.display == "none")
                    ajaxBtnLoadMore.style.display = "none";
            }
        })
    });
    programFieldsList.forEach(element => {
        element.addEventListener('change', (event) => {
            //counterStart(formFilter, element);
            //console.log("change checkbox")
            document.querySelectorAll("div[role='catalog-item']").forEach((item, index) => {
                item.remove();
            })
            checkboxFieldList.forEach(element => {
                element.checked = false;
            });

            loadNextPageObj.next_page=1;
            totalLoadedRecords = 0;
            loadNextPage(ajaxBtnLoadMore,ajaxSpinnerLoad);

            if(event.target.checked){
                if(ajaxBtnLoadMore.style.display == "none")
                    ajaxBtnLoadMore.style.display = "none";
            }
        })
    });

    numberFieldList.forEach(element => {
        element.addEventListener("focus", () => {
            //clearInterval(timer)
            loadNextPage(ajaxLoadMore,ajaxLoaderMore);
        }, true);
        element.addEventListener('input', () => {
            //counterStart(formFilter, element)
            loadNextPage(ajaxLoadMore,ajaxLoaderMore);
        });
    });

    let xmlhttpSessionsClientData = new XMLHttpRequest();
    xmlhttpSessionsClientData.overrideMimeType('text/xml');
    xmlhttpSessionsClientData.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            let sessionsHtmlList = new DOMParser().parseFromString(this.responseText, 'text/html');

            sessionsHtmlList.querySelectorAll("body div[role='sdata']").forEach(el => {
                sJson.push(JSON.parse(el.textContent));
                console.log("sJson:" + el.textContent);
            })
            loadDataForNewPage(1);
        }
    }
    xmlhttpSessionsClientData.open("GET", "/client/relation_roster/clientRelationRosterView.html?no_header=true&clientRelationRosterId=236", true);
    xmlhttpSessionsClientData.send();

    /**load more**/

    /**add clear form**/
    const inputBtn = document.createElement("input");
    inputBtn.classList.add("btn","btn-primary", "btn-sm");
    inputBtn.value = "Réinitialiser les filtres";
    inputBtn.type = "submit";
    inputBtn.style.display="block !important";
    inputBtn.addEventListener('click', (event) => {
        clearFormVisible(formFilter)
    })

    const div = document.createElement("div");
    div.classList.add("row");
	div.classList.add("mb-2");
    div.append(inputBtn);

    let s = document.querySelector("#entityInstanceForm-entity div.card-body");
    s.prepend(div);
    /**end add clear form**/

    var loadNextPage1 = (button,loader) => {
        // prevent double loading
        loadNextPage = (button,loader) => {};

        let element = document.createElement('div');
        element.style.cssText = 'display:block; position: fixed; top: 0px; width:100%; height:100%; opacity:0.3; z-index:10000; background:#000;';
        document.body.append(element);
        // console.log(element);

        let btnAddProgramToCart = document.querySelector("#addAllSessions");
        if (btnAddProgramToCart != null)
            btnAddProgramToCart.remove();


        let formAfterLoad4 = document.querySelector("form[rel='entityRosterForm-4']");
        let ajaxLoadContainer = document.querySelector("div[rel='ajax_load_button_container-4']");
        let dataRoster = document.querySelector('div[data-roster="entityRoster-4"]');

        loader.style.display = 'block';
        button.style.display = 'none';
        let xhr = new XMLHttpRequest();

        let fd = new FormData();
        

        if (formAfterLoad4 != null) {
            fd = new FormData(formAfterLoad4);
        }
        fd.append("entityRosterId", 4);
        fd.set("page", loadNextPageObj.next_page);
        console.log("page" + loadNextPageObj.next_page)
        xhr.addEventListener("load", e => {
            var div = document.createElement('div');
            div.innerHTML = e.target.responseText.trim();
            let loadedItemsDOM = new DOMParser().parseFromString( e.target.responseText, 'text/html');

            if (loadedItemsDOM.querySelector("div[name='entityRosterId_4']") != null){

                totalRecords = loadedItemsDOM.querySelector("div[name='entityRosterId_4']").dataset.totalrecords;
                /**records**/
                let elemc = document.querySelector("#el-count-page");
                if (elemc !== null)
                    elemc.textContent = totalRecords;
                // document.querySelector("#el-count-page").textContent = totalRecords;

                dataRoster.insertBefore(div.firstChild, ajaxLoadContainer);

                console.log("totalLoadedRecordsOld = " + totalLoadedRecords)
                totalLoadedRecords += parseInt(loadedItemsDOM.querySelector("div[name='entityRosterId_4']").dataset.totalonpage);
                // document.querySelectorAll("div[role='catalog-item']").length;

                loadDataForNewPage(loadNextPageObj.next_page);
                console.log("totalLoadedRecords = " + totalLoadedRecords, typeof totalLoadedRecords)
                console.log("totalRecords = "+totalRecords, typeof totalRecords)
                if (totalLoadedRecords < totalRecords) {
                    button.style.display = 'block';
                }else {
                    button.style.display = 'none';
                }

                loader.style.display = 'none';
                loadNextPageObj.next_page++;

                loadNextPage = loadNextPage1;
                element.remove();
				
				const addrow = document.querySelector("div[name='entityRosterId_4']> div.col-xl-12");

                addrow.classList.add("row", "catrow");
				addrow.classList.remove("col-xl-12", "col-md-12", "col-sm-12");
				
				addrow.setAttribute("style", "margin-left: 0;margin-right: 0;padding: unset;");
				
				//const removerow = document.querySelector("div[name='entityRosterId_4']");

                //removerow.classList.remove("row");
				
			
			}
        });
        xhr.addEventListener("error", e => {
            button.style.display = 'block';
            loader.style.display = 'none';
        });
        xhr.open("POST", '/entity/roster/entityRosterView.ajax');
        xhr.send(fd);
    }
    loadNextPage = loadNextPage1;
});