const SHEET_CSV_URL = "https://docs.google.com/spreadsheets/d/1p9Zn9pRmeDt_eFVgPJye70uueOpuEpCQGUaVAzJs91c/gviz/tq?tqx=out:csv&sheet=Directorio_Publico";
const grid = document.getElementById('directoryGrid');
const tabsEl = document.getElementById('yearTabs');
function initials(name){
return name.trim().split(/\s+/).slice(0,2).map(w => w[0] || '').join('').toUpperCase();
}
function renderCards(rows, year){
grid.innerHTML = '';
const filtered = year === 'todos' ? rows : rows.filter(r => String(r.anio).trim() === String(year).trim());
if(filtered.length === 0){
grid.innerHTML = 'Aún no hay egresados registrados en esta promoción.
';
return;
}
filtered.forEach(r => {
const card = document.createElement('div');
card.className = 'alum-card';
card.innerHTML = `${initials(r.nombre)}
${r.nombre}
Prom. ${r.anio}`;
grid.appendChild(card);
});
}
function buildTabs(rows){
const years = [...new Set(rows.map(r => r.anio))].filter(Boolean).sort();
tabsEl.innerHTML = 'Todos' +
years.map(y => `${y}`).join('');
tabsEl.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
tabsEl.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
renderCards(rows, tab.dataset.year);
});
});
}
fetch(SHEET_CSV_URL)
.then(res => res.text())
.then(csv => {
const parsed = Papa.parse(csv, { header: true, skipEmptyLines: true });
const rows = parsed.data.map(r => ({
nombre: [r['Nombre'], r['Apellido']].filter(Boolean).join(' ') || Object.values(r)[0],
anio: (r['Año'] || '').toString().trim()
})).filter(r => r.nombre && r.anio);
buildTabs(rows);
renderCards(rows, 'todos');
})
.catch(err => {
console.error('No se pudo cargar el directorio de egresados', err);
grid.innerHTML = 'El directorio se está actualizando. Intenta de nuevo más tarde.
';
tabsEl.innerHTML = 'Todos';
});