let totalRecords = 0;
let totalLoadedRecords = 0;
let totalLoadedRecordspage = 0;


 
 
 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 checkboxFieldList = document.querySelectorAll("form#command [type='checkbox']")
    const catalogItems = document.querySelectorAll("div[role='catalog-item']");
    const textFieldSearch= document.querySelectorAll("form#command [type='text']")

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

    console.log('catalogItems',catalogItems);
    console.log('totalLoadedRecords',totalLoadedRecords);
    /**num elems pagination**/
    let str = document.querySelector(".pagebanner").textContent;
    let r = /\d+/;
    str = parseInt(str.match(r));
	
	    console.log('str',str);

    if (!isNaN(str)){
        let elemc = document.querySelector("#el-count-page");
        if (elemc !== null)
            elemc.textContent = str;
		
		
    }
    /**end num elems pagination**/

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

// load jobs search input

    textFieldSearch.forEach(element => {
   
        element.addEventListener('input', () => {
          
             document.querySelectorAll("div[role='catalog-item']").forEach((item, index) => {
                item.remove();
            })
			
			loadNextPageObj.next_page=1;
            totalLoadedRecords = 0;
            loadNextPage(ajaxBtnLoadMore,ajaxSpinnerLoad);
        });
    });

// load jobs checkbox
   
   
   
   
  checkboxFieldList.forEach(element => {
        element.addEventListener('change', (event) => {
           
            //console.log("change checkbox")
            document.querySelectorAll("div[role='catalog-item']").forEach((item, index) => {
                item.remove();
            })
           

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

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

 /**load more**/

    /**add clear form**/
    const inputBtn = 
	'<a href="/site/emplois" class="clear_all ft-medium text-muted">Réinitialiser</a>';
	
	

    const div = document.createElement("div");
    div.classList.add("ssh-header");
	div.innerHTML = inputBtn;
    //div.append(inputBtn);
   let s = document.querySelector("#clientRelationForm-clientRelationFilter div.card-body");

    //let s = document.querySelector("#clientRelationForm-clientRelationFilter div.panel-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);
       
        let formAfterLoad4 = document.querySelector("form#command");
        let ajaxLoadContainer = document.querySelector("div[rel='ajax_load_button_container-4']");
        let dataRoster = document.querySelector('div[data-roster="clientRelationRoster-304"]');

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

        let fds = new FormData();
		
    

        if (formAfterLoad4 != null) {
            fds = new FormData(formAfterLoad4);
        }
		
		fds.append("clientRelationRosterId", 304);

        fds.set("page", loadNextPageObj.next_page);
        console.log("pagessss" + loadNextPageObj.next_page)
		
		
		
		
        xhr.addEventListener("load", e => {
			
			  
          
			
            let loadedItemsDOM = new DOMParser().parseFromString( e.target.responseText, 'text/html');

            if (loadedItemsDOM.querySelector('div[data-roster="clientRelationRoster-304"]') != null){
 
 
     /**num elems pagination**/
    let str2 = loadedItemsDOM.querySelector(".pagebanner").textContent;
    let r = /\d+/;
    str2 = parseInt(str2.match(r));
	
	   

    if (!isNaN(str2)){
      //$('#rosterRecords').attr('data-totalrecords' , +str2);
	   document.querySelector('div[data-roster="clientRelationRoster-304"]').setAttribute('data-totalrecords', +str2);
    }else{
		 document.querySelector('div[data-roster="clientRelationRoster-304"]').setAttribute('data-totalrecords','0');
		//$('#rosterRecords').attr('data-totalrecords' , '0');
	}
	
	  
    /**end num elems pagination**/
         
			 /**records**/
         
           loadedItemsDOM.querySelectorAll("div[role='catalog-item']").forEach(function (el,index){
                
 				
            ajaxLoadContainer.parentNode.insertBefore(el, ajaxLoadContainer);
         
	
           })
           
		   totalRecords = document.querySelector('div[data-roster="clientRelationRoster-304"]').dataset.totalrecords;
              

			  console.log("total-affter " + totalRecords)
	 
	 
	  totalLoadedRecordspage = document.querySelectorAll("div[role='catalog-item']").length;
  
        console.log("totalLoadedRecordspage = " + totalLoadedRecordspage)
          let elemc = document.querySelector("#el-count-page");
                if (elemc !== null)
                    elemc.textContent = totalRecords;

			   console.log("totalLoadedRecordsOld = " + totalLoadedRecords)
               //console.log("count = " + count)
			  
			//totalLoadedRecords += parseInt(loadedItemsDOM.querySelector('div[data-roster="clientRelationRoster-304"]').dataset.totalonpage);
             totalLoadedRecords = totalRecords - totalLoadedRecords;

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

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

                loadNextPage = loadNextPage1;
                element.remove();
            }
        });
        xhr.addEventListener("error", e => {
            button.style.display = 'inline';
            loader.style.display = 'none';
        });
	
        xhr.open("POST", '/client/relation_roster/clientRelationRosterView.html?no_header=true');
        xhr.send(fds);
    }
    loadNextPage = loadNextPage1;

   
  
    
    
    });