script.js

const addBtn = document.getElementById("addBtn");
const clearBtn = document.getElementById("clearBtn");
const subjectList = document.getElementById("subjectList");

// Load saved data on page load
let subjects = JSON.parse(localStorage.getItem("subjects")) || [];
renderSubjects();

addBtn.addEventListener("click", () => {
  const subject = document.getElementById("subject").value.trim();
  const total = parseFloat(document.getElementById("total").value);
  const attended = parseFloat(document.getElementById("attended").value);

  if (!subject || isNaN(total) || isNaN(attended) || attended > total || total <= 0) {
    alert("⚠️ Please enter valid values.");
    return;
  }

  const percent = (attended / total) * 100;
  let status = "";
  let extraInfo = "";

  if (percent >= 75) {
    const canSkip = Math.floor(attended / 0.75 - total);
    status = `<span class='eligible'>✅ Eligible</span>`;
    extraInfo = `You can skip ${canSkip} more class(es).`;
  } else {
    const needToAttend = Math.ceil(0.75 * total - attended);
    status = `<span class='not-eligible'>❌ Not Eligible</span>`;
    extraInfo = `Attend ${needToAttend} more class(es) to reach 75%.`;
  }

  // 🌟 SMART INSIGHT FEATURE 🌟
  let insight = "";
  if (percent >= 90) {
    insight = "🌟 Excellent! Keep up the streak 🎯";
  } else if (percent >= 75) {
    insight = "💪 Great! Stay consistent and maintain your pace.";
  } else if (percent >= 60) {
    insight = "📈 You're close — attend a few more classes to reach 75%.";
  } else {
    insight = "🚀 Time to focus — attend regularly to improve!";
  }

  const record = { subject, total, attended, percent: percent.toFixed(2), status, extraInfo, insight };
  subjects.push(record);
  localStorage.setItem("subjects", JSON.stringify(subjects));
  renderSubjects();

  document.getElementById("subject").value = "";
  document.getElementById("total").value = "";
  document.getElementById("attended").value = "";
});

function renderSubjects() {
  subjectList.innerHTML = "";
  if (subjects.length === 0) {
    subjectList.innerHTML = "<p>No records yet.</p>";
    return;
  }

  subjects.forEach((s, index) => {
    const card = document.createElement("div");
    card.classList.add("subject-card");
    card.innerHTML = `
      <h3>${s.subject}</h3>
      <p>📘 Attendance: <b>${s.percent}%</b></p>
      <p>${s.status}</p>
      <p>${s.extraInfo}</p>
      <p style="font-style: italic; color: #6a1b9a;">${s.insight}</p>
      <button onclick="deleteSubject(${index})" style="background:#ffd6a5; color:#333;">🗑 Remove</button>
    `;
    subjectList.appendChild(card);
  });
}

function deleteSubject(index) {
  subjects.splice(index, 1);
  localStorage.setItem("subjects", JSON.stringify(subjects));
  renderSubjects();
}

clearBtn.addEventListener("click", () => {
  if (confirm("Are you sure you want to clear all history?")) {
    subjects = [];
    localStorage.removeItem("subjects");
    renderSubjects();
  }
});