var SITE_TEMPLATE=1;
						const sheetId = '1RlYeDK2i2eJ5BXc6nHknBt7QwHpkoaDpZ7J7EL3Nnzw';
						const base = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?`;
						const sheetName = 'directorio-servicio-practicas';
						const query = encodeURIComponent('Select *');
						const urlExLi = `${base}&sheet=${sheetId}&tq=${query}&gid=719152487`;
						const urlEx = `${base}&sheet=${sheetId}&tq=${query}`;
						const data = [];
						const dataCards = []; //tiene todo el array 
						document.addEventListener('DOMContentLoaded', initList);
						document.addEventListener('DOMContentLoaded', initCards);
						const output = document.querySelector('.dataDirectorio');
						var printhtml= document.getElementById('contentLista');
						let currentIndex = 0;
						const ITEMS_PER_PAGE = 50; // Número de elementos a mostrar por cada carga
							
						// Función para iniciar la lista de las cards
						function initList() {
							const dataList = [];
							fetch(urlExLi)
							.then(res => res.text())
							.then(rep => {
								//Remove additional text and extract only JSON:
								const jsonData = rep.substring(47).slice(0, -2);
								const responseJSON = JSON.parse(
									jsonData.replace(/(^google\.visualization\.Query\.setResponse\(|\);$)/g,'')
								);
								responseJSON.table.rows.forEach(row => {
									const rowsArray = [];
									row.c.forEach((prop, index) => {
										var dirCurrent = (prop != null) ? prop.v : 'NA';
										rowsArray.push(dirCurrent)
									});
									dataList.push(rowsArray);
								});  
								renderlateral(dataList)
								const searchInput = document.getElementById('searchProgram');
								// Función para filtrar los resultados en la barra de busqueda
								function filterResults(query) {
									let itemsfilter = []
									dataCards.forEach((row, index) => {
										let found = row[1].toLowerCase().includes(query.toLowerCase()) || row[3].toLowerCase().includes(query.toLowerCase()) || row[7].toLowerCase().includes(query.toLowerCase()) || row[9].toLowerCase().includes(query.toLowerCase());
										if(found == true){
											itemsfilter.push(row);
										}
									});
									currentIndex = 0;
									printhtml.innerHTML="";
									renderlist(itemsfilter)
								}
								// Función para mostrar los resultados en tiempo real
								function displayResults() {
									const query = searchInput.value;
									filterResults(query);
								}
								// Escucha el evento de entrada en la barra de búqueda
								searchInput.addEventListener('input', displayResults);
							});
            			}
						
						// Función para iniciar las cards
						function initCards() {
							const filtroSuperior = [];
							fetch(urlEx).then(res => res.text()).then(rep => {
							//Remove additional text and extract only JSON:
								const jsonData = rep.substring(47).slice(0, -2);
								const responseJSON = JSON.parse(
									jsonData.replace(/(^google\.visualization\.Query\.setResponse\(|\);$)/g,'')
								);
								responseJSON.table.rows.forEach(row => {
									const rowsArray = [];
									row.c.forEach((prop, index) => {
										var dirCurrent = (prop != null) ? prop.v : 'NA';
										rowsArray.push(dirCurrent)
									});
									dataCards.push(rowsArray);        
								});
								dataCards.forEach(index => {
									if(!filtroSuperior.includes(index[6])){
										filtroSuperior.push(index[6])
									}
								})
								renderlist(dataCards);
								renderSuperior(filtroSuperior)
							})      
						}
						// Funcion para filtrar las unidades receptoras
						function filtrarPor(searchTerm) { 
							var itemsfilter = dataCards.filter(function(item){
								return item[6]==searchTerm;
							});
							currentIndex = 0;
							printhtml.innerHTML="";
							renderlist(itemsfilter)
						}

						function filtrarAcreditacion(searchTerm) {
							let itemsToFilter = [];
							
							if (searchTerm === "Todos" ) {
								itemsToFilter = dataCards; 
							}
							//condición  para filtrar  mediante el cupo
								if(searchTerm === "Solicitan Prestadores"){
									itemsToFilter=dataCards.filter(function(item){
										return item[12] !=null;
									})
								}
							if(searchTerm!="Todos" && searchTerm!="Solicitan Prestadores"){
								itemsToFilter = dataCards.filter(function(item) {
								return item[0].includes(searchTerm);
							});
							}
							renderlist(itemsToFilter);
							scrollFunction();//se manda a llamar la funcion
						}
						//Funcion para  hacer que el scroll suba al inicio
						function scrollFunction() {
							document.body.scrollTop = 0; // For Safari
							document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
						}
						// Funcion para mostrar las etiquetas superiores
					
						function renderSuperior(items) {
						var menu = document.getElementById("listaEtiqueta");
						menu.innerHTML = ""; // Clear previous content

						items.forEach((item) => {
							const liElement = document.createElement("li");
							liElement.classList.add("breadcrumb-item", "btnFiltrar");
							liElement.setAttribute("search", item);

							const linkElement = document.createElement("a");
							linkElement.classList.add("text-secondary", "position-relative", "px-4");
							linkElement.href = "javascript:;";
							linkElement.textContent = item;

							liElement.appendChild(linkElement);
							menu.appendChild(liElement);

							liElement.addEventListener("click", function() {
					
							const listaItems = document.querySelectorAll(".btnFiltrar a");
							listaItems.forEach((item) => item.classList.remove("text-posicion"));

							this.querySelector("a").classList.add("text-posicion");

							const seleccionado = this.getAttribute("search");
							filtrarPor(seleccionado);
							});
						});
						}
						

						function renderlateral(items) {
							var lateral = document.getElementById("listalateral");
							
							let itemslateral = [["Todos"], ...items, "Solicitan Prestadores"]; // "Prestadores" agregado al final

						
							itemslateral.forEach((item, index) => {
							if (index === 1) return;
							const liElement = document.createElement("li");
							liElement.classList.add("list-st", "listEtiqueta", "botonetiqueta");
							liElement.setAttribute("search", item);
							const linkElement = document.createElement("a");
							linkElement.classList.add("text-secondary", "position-relative", "px-4");
							linkElement.innerHTML = `<span>\u00BB</span> ${item}`;
							liElement.appendChild(linkElement);
							lateral.appendChild(liElement);
							liElement.addEventListener("click", function() {
							const listaItems = document.querySelectorAll(".botonetiqueta a");
							listaItems.forEach((item) => item.classList.remove("text-posicion"));
							this.querySelector("a").classList.add("text-posicion");
							const seleccionado = this.getAttribute("search");
							currentIndex = 0; 
							printhtml.innerHTML = ""; 
							filtrarAcreditacion(seleccionado);
							});
						});
						
						}
						



					
						// Función para crear las etiquetas
						function createTags(row) {
							const cadena = String(row);
							const array = cadena.split(", ");
							var tagsList= "";
							array.forEach(function (item ){
								tagsList+=`<span class="badge bg-primary">${item}</span> `;
							})
							return tagsList;
						}

						// Función para formatear la fecha
						function formatearFecha(fechaArreglo) {
							const meses = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
						
							// Crear un objeto Date usando el spread operator para pasar los valores del arreglo
							let fecha = new Date(parseInt(fechaArreglo[0]), parseInt(fechaArreglo[1]), parseInt(fechaArreglo[2]));
						
							let dia = fecha.getDate(); // Obtener el día del mes (1-31)
							let mes = meses[fecha.getMonth()]; // Obtener el mes como una abreviatura de texto
							let anio = fecha.getFullYear().toString().substr(-2); // Obtener los últimos dos dígitos del año
						
							return `${dia}-${mes}-${anio}`; // Formatear la fecha
						}

						// Función para que se muestren las cards
						function renderlist(rows){
							// Calcular el nuevo índice hasta el cual se van a renderizar los elementos
							var lastIndex = rows.length;
							// Si rows es menor a 50 se oculta el boton de cargar mas
							if(rows.length > 50) {
								lastIndex = Math.min(currentIndex + ITEMS_PER_PAGE, rows.length);
								loadMoreBtn.style.opacity = '1';
							} else {
								loadMoreBtn.style.opacity = '0';
							}

							if(rows.length == 0) {
								printhtml.innerHTML = `
									<div clas="col-12 mb-3">
										<h3 class="p-0 text-danger">No se encontraron resultados.</h3>
									</div>
								`;
								return;
							}

							for (let index = currentIndex; index < lastIndex; index++) {
								let row = rows[index];
								// Aquí se añade el HTML de cada fila
								printhtml.innerHTML += `
									<div class="col-12 card border-0 shadow p-3 rounded-4 mb-4" id="listaresultados">
										<div class="row">
											<div clas="col-12 mb-3">
												<h4 class="txt-title mb-1 ${row[1] === null || row[1] === 'NA' ? 'd-none' : ''}">${row[1]}</h4>
												<h6 class="fw-semibold ${row[3] === null || row[3] === 'NA' ? 'd-none' : ''} ${row[0] === null || row[0] === 'NA' ? 'mb-3' : 'mb-1'}">${row[3]}</h6>
												<div class="mb-3 ${row[0] === null || row[0] === 'NA' ? 'd-none' : ''}">${row[0] === null || row[0] !== 'NA' ? createTags(row[0]) : ''}</div> 
											</div>
											<div class="col-md-4 mb-3 ${row[7] === null || row[7] === 'NA' ? 'd-none' : ''}">
												<span class="fw-semibold">Responsable</span><br>
												${row[7]}
											</div>
											<div class="col-md-4 mb-3 ${row[9] === null || row[9] === 'NA' ? 'd-none' : ''}">
												<span class="fw-semibold">Correo electr\u00F3nico</span><br>
												<a href="mailto:${row[9]}">${row[9]}</a>
											</div>
											<div class="col-md-4 mb-3 ${row[8] === null || row[8] === 'NA' ? 'd-none' : ''}">
												<span class="fw-semibold">Tel\u00E9fono</span><br>
												<a href="tel:${row[8]}">${row[8]}</a>
											</div>
											<div class="col-md-4 mb-3" ${row[6] === null || row[6] === 'NA' ? 'd-none' : ''}>
												<span class="fw-semibold">Sector</span><br>
												${row[6]}
											</div>
											<div class="col-md-8 mb-3 ${row[2] === null || row[2] === 'NA' ? 'd-none' : ''}"> 
												<span class="fw-semibold">Modalidad</span><br>
												${row[2]}
											</div>
											<div class="col-md-4 mb-3 ${row[12] === null || row[12] === 'NA' ? 'd-none' : ''}">
												<span class="fw-semibold">Cupos</span><br>
												${row[12]}
											</div>
											<div class="col-12 mb-3">
												<div class="row">
													<div class="col-12">
														<hr>
													</div>
													<div class="col-md-4 mb-3 ${row[10] === null || row[10] === 'NA' ? 'd-none' : ''}">
														<span class="fw-semibold">P\u00E1gina web</span><br>
														<a href="${row[10]}" target="_blank">${row[10]}</a>
													</div>
													<div class="col-md-4 mb-3 ${row[4] === null || row[4] === 'NA' ? 'd-none' : ''}">
														<span class="fw-semibold">Vigencia del Convenio</span><br>
														${formatearFecha(row[4].replace("Date(", "").replace(")", "").split(",").map(Number))}
													</div>
													<div class="col-md-4 text-end ${row[11] === null || row[11] === 'NA' ? 'd-none' : ''}">
														<span class="fw-semibold">Horario de atenci\u00F3n</span><br>
														${row[11]}
													</div>
												</div>
											</div>
										</div>
									</div>   
								`;

								// Actualizar el currentIndex al último índice añadido para la próxima carga
								currentIndex = lastIndex;
							}
						} 



						// Función para invocar cuando quieras cargar los siguientes 50 elementos
						function loadMore() {
                            // Llamar a la función renderlist con los siguientes 50 elementos
							renderlist(dataCards); // Asegúrate de pasar el mismo array de datos cada vez

                            // Ocultar loader después de cargar los elementos
							if (currentIndex >= dataCards.length) {
								loadMoreBtn.style.display = 'none'; // Ocultar el botón si ya no hay más elementos para cargar
							}
						}

						// Evento para cargar más elementos
						const loadMoreBtn = document.getElementById('loadMoreBtn');
						loadMoreBtn.addEventListener('click', loadMore);