.elementor-15999 .elementor-element.elementor-element-9b90f15{--display:flex;}.elementor-15999 .elementor-element.elementor-element-2782d76{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}/* Start custom CSS for html, class: .elementor-element-8e99f21 */<div id="win-course-system"></div>

<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
:root{
  --primary:#16B0EF;
  --secondary:#473E97;
  --pg-color:#16B0EF;
  --ug-color:#8A6BEA;
}

#win-course-system{
  font-family:'Prompt',sans-serif;
  max-width:1200px;
  margin:auto;
  padding:40px 0;
}

#win-course-system h1{
  color:var(--secondary);
  margin-bottom:25px;
}

/* Controls */

#win-course-system .controls{
  margin-bottom:30px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#win-course-system input{
  padding:10px 14px;
  border:1px solid #e0e0e0;
  border-radius:8px;
  min-width:250px;
}

#win-course-system button{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
  cursor:pointer;
}

#win-course-system button.active,
#win-course-system button:hover{
  background:var(--primary);
  color:#fff;
}

#win-course-system .clear-btn{
  border-color:#ccc;
  color:#777;
}

/* Layout */

#win-course-system .level-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

#win-course-system .level-section h2{
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}

#win-course-system .level-section.pg h2{
  color:var(--pg-color);
}

#win-course-system .level-section.ug h2{
  color:var(--ug-color);
}

#win-course-system .level-badge{
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background:#eee;
}

#win-course-system .level-section.pg .level-badge{
  background:var(--pg-color);
  color:#fff;
}

#win-course-system .level-section.ug .level-badge{
  background:var(--ug-color);
  color:#fff;
}

/* University Card */

#win-course-system .university{
  border:2px solid var(--primary);
  border-radius:14px;
  margin-bottom:25px;
  background:#fff;
  transition:.3s;
}

#win-course-system .level-section.pg .university{
  border-color:var(--pg-color);
}

#win-course-system .level-section.ug .university{
  border-color:var(--ug-color);
}

#win-course-system .uni-header{
  padding:15px 18px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:500;
}

#win-course-system .uni-meta{
  padding:0 18px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Capsule */

#win-course-system .capsule{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
  cursor:pointer;
  font-size:12px;
  transition:0.2s;
}

#win-course-system .level-section.ug .capsule{
  border-color:var(--ug-color);
  color:var(--ug-color);
}

#win-course-system .capsule:hover,
#win-course-system .capsule.active{
  background:var(--primary);
  color:#fff;
}

#win-course-system .level-section.ug .capsule:hover,
#win-course-system .level-section.ug .capsule.active{
  background:var(--ug-color);
  color:#fff;
}

#win-course-system .capsule.static{
  border-color:#ddd;
  color:#777;
  background:#f7f7f7;
  cursor:default;
}

/* Intake capsules */

#win-course-system .intake-group{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

#win-course-system .intake-capsule{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
}

#win-course-system .level-section.ug .intake-capsule{
  border-color:var(--ug-color);
  color:var(--ug-color);
}

/* Expand animation */

#win-course-system .course-wrapper{
  max-height:0;
  overflow:hidden;
  transition:0.4s ease;
  opacity:0;
}

#win-course-system .university.active .course-wrapper{
  max-height:4000px;
  opacity:1;
}

#win-course-system .course-list{
  padding:15px 20px 20px;
}

#win-course-system .course{
  background:#fafafa;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
  font-size:14px;
}

#win-course-system .course strong{
  display:block;
  margin-bottom:5px;
}

@media(max-width:768px){
  #win-course-system .level-columns{
    grid-template-columns:1fr;
  }
}
</style>

<script>
(function(){

const SPREADSHEET_ID="1CxBG7sAnpVmtVvG_Vy2p3k-cZMMBIP15ZcSOWxczJRM";
const GID="0";
const CSV_URL=`https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/export?format=csv&gid=${GID}`;

const root=document.getElementById("win-course-system");

let data=[];
let searchKeyword="";
let globalMonth="";
let localMonthMap={};
let autoOpenUni=null;

/* CSV SAFE PARSER */
function parseCSV(text){
  const rows=[];
  let row=[], value="", insideQuote=false;
  for(let i=0;i<text.length;i++){
    const char=text[i], next=text[i+1];
    if(char === '"'){
      if(insideQuote && next === '"'){ value+='"'; i++; }
      else insideQuote=!insideQuote;
    }
    else if(char===',' && !insideQuote){
      row.push(value); value="";
    }
    else if(char==='\n' && !insideQuote){
      row.push(value); rows.push(row);
      row=[]; value="";
    }
    else value+=char;
  }
  if(value) row.push(value);
  if(row.length) rows.push(row);
  return rows;
}

root.innerHTML=`
<h1>University Courses (2026)</h1>

<div class="controls">
  <input type="text" id="search" placeholder="Search course...">
  <button class="global-btn active" data-month="">All</button>
  <button class="global-btn" data-month="March">March</button>
  <button class="global-btn" data-month="May">May</button>
  <button class="global-btn" data-month="April">April</button>
  <button class="global-btn" data-month="July">July</button>
  <button class="clear-btn" id="clearFilter">Clear</button>
</div>

<div class="level-columns">
  <div class="level-section pg">
    <h2>Postgraduate (PG) <span id="pg-total" class="level-badge"></span></h2>
    <div id="pg-container"></div>
  </div>

  <div class="level-section ug">
    <h2>Undergraduate (UG) <span id="ug-total" class="level-badge"></span></h2>
    <div id="ug-container"></div>
  </div>
</div>
`;

fetch(CSV_URL)
.then(res=>res.text())
.then(csv=>{
  const rows=parseCSV(csv.trim());
  const headers=rows.shift();
  const grouped={};

  rows.forEach(row=>{
    const obj={};
    headers.forEach((h,i)=>obj[h.trim()]=row[i]?.trim());
    const {University:uni,Level:level,"Course Name":name,Campus:campus,Intake:intake}=obj;
    if(!uni||!level||!name) return;

    if(!grouped[uni]) grouped[uni]={university:uni,courses:[]};

    let existing=grouped[uni].courses.find(c=>
      c.name===name && c.level===level && c.campus===campus
    );

    if(existing){
      if(intake && !existing.intakes.includes(intake))
        existing.intakes.push(intake);
    }else{
      grouped[uni].courses.push({
        level,
        name,
        campus,
        intakes:intake?[intake]:[]
      });
    }
  });

  data=Object.values(grouped);
  render();
});

function render(){

let totalPG=0,totalUG=0;
const pgHTML=[],ugHTML=[];

data.forEach(uni=>{
["PG","UG"].forEach(level=>{

const base=uni.courses.filter(c=>c.level===level);
if(!base.length) return;

const localMonth=localMonthMap[uni.university]?.[level]||"";

const filtered=base.filter(c=>
c.name.toLowerCase().includes(searchKeyword.toLowerCase()) &&
(globalMonth?c.intakes.includes(globalMonth):true) &&
(localMonth?c.intakes.includes(localMonth):true)
);

if(filtered.length===0) return;

const monthCount={};
base.forEach(c=>c.intakes.forEach(m=>{
if(!monthCount[m])monthCount[m]=0;
monthCount[m]++;
}));

const capsules=Object.entries(monthCount).map(([m,count])=>{
const active=localMonth===m?"active":"";
return `<span class="capsule ${active}"
data-uni="${uni.university}"
data-level="${level}"
data-month="${m}">
${m} (${count})
</span>`;
}).join("");

const coursesHTML=filtered.map(c=>{
const intakeCapsules=c.intakes.map(month=>
`<span class="intake-capsule">${month}</span>`
).join("");

return `
<div class="course">
<strong>${c.name}</strong>
<div>Campus: ${c.campus||"-"}</div>
<div class="intake-group">${intakeCapsules}</div>
</div>
`;
}).join("");

const card=`
<div class="university ${autoOpenUni===uni.university?'active':''}">
<div class="uni-header">
<div>${uni.university} (${filtered.length})</div>
<div>+</div>
</div>
<div class="uni-meta">
<span class="capsule static">${filtered.length} Courses</span>
${capsules}
</div>
<div class="course-wrapper">
<div class="course-list">${coursesHTML}</div>
</div>
</div>
`;

if(level==="PG"){ totalPG+=filtered.length; pgHTML.push(card); }
else{ totalUG+=filtered.length; ugHTML.push(card); }

});
});

root.querySelector("#pg-container").innerHTML=pgHTML.join("") || "<p>No PG courses found.</p>";
root.querySelector("#ug-container").innerHTML=ugHTML.join("") || "<p>No UG courses found.</p>";
root.querySelector("#pg-total").textContent=totalPG;
root.querySelector("#ug-total").textContent=totalUG;

attachEvents();
}

function attachEvents(){
root.querySelectorAll(".uni-header").forEach(h=>{
h.onclick=()=>h.parentElement.classList.toggle("active");
});
root.querySelectorAll(".capsule[data-month]").forEach(cap=>{
cap.onclick=function(e){
e.stopPropagation();
const {uni,level,month}=this.dataset;
if(!localMonthMap[uni])localMonthMap[uni]={};
if(localMonthMap[uni][level]===month)delete localMonthMap[uni][level];
else localMonthMap[uni][level]=month;
autoOpenUni=uni;
render();
};
});
}

root.querySelector("#search").oninput=e=>{
searchKeyword=e.target.value;
render();
};

root.querySelectorAll(".global-btn").forEach(btn=>{
btn.onclick=()=>{
root.querySelectorAll(".global-btn").forEach(b=>b.classList.remove("active"));
btn.classList.add("active");
globalMonth=btn.dataset.month;
render();
};
});

root.querySelector("#clearFilter").onclick=()=>{
searchKeyword="";globalMonth="";localMonthMap={};autoOpenUni=null;
root.querySelector("#search").value="";
root.querySelectorAll(".global-btn").forEach(b=>b.classList.remove("active"));
root.querySelector('.global-btn[data-month=""]').classList.add("active");
render();
};

})();
</script>/* End custom CSS */